Some would say a hero banner module is just a hero banner module, right? Well, with the Fusion theme, that would be WRONG. Taking hero banner options to the next level, here is what you can do within Fusion and how...
There are some very cool design elements that we will look at, but first, let's look at the core fields:
[ See example demo page of this module ]
Module Fields
Click on the module from the page editing view and you'll see the field options on the left, as you can see here:
- Eyebrow Heading. This is an optional field allowing you to put a smaller headline ABOVE the main H1 headline. See it on our process demo page and in the above featured image for this post.
- Heading. This is the main H1 heading for the page, and the only field here that is required.
- Content. This is an optional rich text field to enter some additional text to the module. This, of course, has all of the capabilities and options of any rich text field.
- Button Link. If you want a button in the hero module, set your link here. You can link to another content page, an external link, etc. If external, you should (in most cases) set it to open in a new window and also check the "no follow" setting.
- Button Text. This is the text that will show on your button. If you do not want a button, leave this blank. If text is provided, the button will show whether or not a link is configured.
Style Fields
Click the "Styles" tab to the right of "Content" and you'll find all of the below settings to dial in what your hero module looks like:
- Spacing. Here you can set margin and padding to be used within the module. If you are using a background image, you'll most likely want your margins to remain at 0, and use padding only to add some space around your module text content.
NOTE: As this theme defaults to using a transparent header, you will find the templates generally default with a good amount of top padding in the hero module. - Background Image. This will be empty by default as you'll usually control the background at the section level. HOWEVER, this is where one of the coolest features of this module comes into play. You can LAYER background images between the section and this module! Load an image here and then set the opacity (next field) to a value less than 100 (percentage) and you'll find the section background bleeding through the module background. You'll see an example of this on the Process demo page. Also, see the video below for more on this!
- Background Image Opacity. This is only applied if a background image is loaded, and allows you to control how much the section background is allowed to bleed through into this module instance. The value is 0-100 and is a percentage. 0 would be this background image doesn't show at all and the section comes through fully. 100 would mean this image is shown at 100% and doesn't allow any section bleed through. So, when using this, you'll probably want to start around 40-50 to see the bleed through. It will take some trial and error to determine what value works best here for you as it will vary greatly with different images, different colors, etc.
- Overlay Color. This color field gives you yet another level of customizing the look of your hero banner! Whether or not you are using a section background or layering the section and module backgrounds, you can apply an overlay color here along with an opacity value. This comes in very handy when your text is difficult to read on top of your image. You can use this to apply a color overlay that darkens or lightens the image, whichever way is needed to make your text easier to read. You can also choose a color that helps the image match the rest of your website better... instead of having to edit the image itself in Photoshop.
- Display Scroll Down Button. If you want a small arrow down icon to show on the bottom center of the hero section that allows the user to click and auto scroll down to the next section of content, check this box.
H1 Heading
- Heading Max Width. Enter a value here (in pixels) IF you want to limit the width used for the display of the H1 heading.
- Font Family. Select if you want your H1 to use the primary or secondary font family from your theme settings. This will default to primary.
The Fusion theme settings have options already for the following H1 stylings, so you can leave these alone UNLESS you want to override the theme to use different sizes/colors for this H1 instance:
- H1 Text Color. Set the color to use for the H1 heading text.
- Highlight Color. Set the color to use as a background highlight color for any portion of the heading text that is enclosed in a <span> tag.
- H1 Font Size. Set the size (in pixels) to use for the H1 heading text.
- H1 Text Transform. Select the transformation option for the H1 heading text. NOTE: If you want the heading to be in all caps, do NOT type the heading in all caps. Enter it in normal case and then set this field to "Uppercase" to force the all caps via CSS. This is the correct way to do this for accessibility reasons.
- H1 Font Weight. Set the font weight to use for the H1 heading text. The higher the number, the heavier (more bold) the font is. This value much be in hundreds like 100, 400, 600, etc.
Eyebrow Heading
- Font Family. Select if you want your eyebrow heading to use the primary or secondary font family from your theme settings. This will default to primary.
- Text Color. Set the color to use for the eyebrow heading text.
- Font Size. Set the size (in pixels) to use for the eyebrow heading text.
- Text Transform. Select the transformation option for the eyebrow heading text. NOTE: If you want the heading to be in all caps, do NOT type the heading in all caps. Enter it in normal case and then set this field to "Uppercase" to force the all caps via CSS. This is the correct way to do this for accessibility reasons.
- Font Weight. Set the font weight to use for the eyebrow heading text. The higher the number, the heavier (more bold) the font is. This value much be in hundreds like 100, 400, 600, etc.
Text Content
- Text Content Max Width. Enter a value here (in pixels) IF you want to limit the width used for the display of the content text.
- Text Content Alignment. Select the alignment of the text content block. This is for the block of text, not the text itself. For example, you could have left-aligned text, but limit the max width to a portion of the container, and then center the text block on the page.
- Content Text Color. Set the color to use for the content text. Use this instead of coloring in the rich text field.
- Content Font Size. Set the size (in pixels) to use for the content text.
Button
- Button Style. Select one of the three button styles that you have configured within the theme settings.
- Button Font Weight. Set the font weight to use for button text, IF you want to override the font weight already set in the theme settings. This value much be in hundreds like 100, 400, 600, etc.
Video Demo of Background Layering
The background image layering features of this module are unique and can be very powerful. So, let's take a look at how this works beyond the text instructions above!