May 2015
Hack-A-Thon

CUSTOM BUILT HERO BAR

HubSpot Hack-a-Thon May 2015

The CTA button is just for show.

 

Download

Module Description

This is my first custom built module ever. It is a hero bar, where the only thing the user has to do is to choose an image. On top of the image you can e.g. have text with Call-to-action buttons, forms etc.

I often stumble upon this problem where I need a background image behind some text or a form. It is easy to solve it with one image declaring it directly in the CSS code, but then the customer can't change the image. Of course you could use the image module, but then you have to write a lot of code in order to get it to work properly. This is simple, easy and useful!

Created by:

Andreas Westerlund

adepto digital

I am an enthusiastic marketer / web developer. I am the owner of adepto digital, a company that is focused on improving companies' online presence.

How It's Built

Inputs:

Design Manager
design_manager.png

Page Edit Screen
module_preview.png

Source Code:

Module Code

Rest of the hero bar styling code
/* Header declaration */ .herobar_header { background-color:rgba(192, 118, 32, 0.6); color: #FFF !important; margin-top: 50px; text-align: center; } /* Header declaration */ .herobar_header h1 { color: #FFF !important; font-family: 'Open Sans',sans-serif; font-weight: 700; } /* Text declaration */ .herobar_text { margin-top: 10px; text-align:center; color: #FFF; } /* Header declaration */ .herobar_text h2 { font-size: 50px; font-weight: 600; } /* Header declaration */ .herobar_text h3 { font-size: 26px; font-weight: 300; } /* CTA button declaration */ .herobar_cta { color: white; text-decoration: none!important; margin-bottom: 7.2222222222em; font-size: 1.125em; line-height: 1.3888888889; letter-spacing: .4444444444em; color: white; text-transform: uppercase; background-color: transparent; border: 2px solid white; padding: 1.2777777778em 3.6111111111em; display: inline-block; position: relative; z-index: 9; } /* CTA button declaration */ .herobar_cta:hover { background-color: #f7751f; color: #FFF; text-decoration: underline; height: 100%; -webkit-transition: all .3s ease 0s; transition: all .3s ease 0s; }