Nathan Gifford

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 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!

HubSpot CMS includes a core Header module that you can use to place a text heading on the page wherever needed. That is fine, but it has some limitations. That is where our Customizable Heading module comes into play! Module Settings You can use the core HubSpot module, but the recommendation is to use this custom version instead... especially if you need to change the font family from the defaults associated in the theme for H1, H2, etc. The settings for this module are simple: Section ID. This is an optional field where you can enter an ID value that you can use for anchor links. This should be a unique value with no spaces. Customizable Header. This is the text for the header text. Heading Level. Select the size of the header from H1 - H6. Font Family. Select from the theme primary or secondary font to be applied to this header. These font families are selected already in the theme settings. Style Fields Beyond the main module settings, if you click the "Styles" tab, you will find another set of fields to style your custom header text. Those fields are: Spacing (Desktop). Here you can set the margin and padding to apply within the module for displays larger than 768 pixels. It defaults to 0. Spacing (Mobile). Here you can set the margin and padding to apply within the module for mobile and tablet displays, 768 pixels and smaller. It defaults to 0. Heading Max Width. This is a number value in pixels and allows you to limit the width taken by this heading. Background Color. This defaults to nothing, but can be used to put a background color behind the text. Heading Color. This color defaults to nothing as the headings will already have a color as established in the theme. However, if you want to override that color in this heading instance, you can here. Heading Text Alignment. Select the alignment for your heading text. Heading Font Weight. Again, you can override the default font weight for the heading text. Heading Font Size. Override the font size of your heading text, if needed. Value is in pixels. Heading Line Height. If you override the font size, you will likely need to update the line height. Value is in pixels. Heading Font Style. Select if your heading if normal (default), italic, or oblique. Heading Text Transform. Select if you want to force the heading text to display as is, or Uppercase (all capitalized), Lowercase (all lowercase), or Capitalize (first letter of each word is capitalized). NOTE: For accessibility reasons, you should NOT enter your heading text in all caps... ever. Just enter normal and use this setting to force the capitalization via CSS. Heading Letter Spacing. Select the spacing of the text from 1px (default), 1.5px or 2px. Changing to 1.5 or 2px spaces the letters out more horizontally.

HubSpot CMS includes a core Rich Text module that you can use to place an editable text element on the page wherever needed. This includes a standard text editor, and it works fine... but with some limitations. That is where our Custom Rich Text module comes into play! Module Settings You can use the core HubSpot module, but the recommendation is to use this custom version instead... especially if you need to change the font family from the defaults associated in the theme for body fonts. The settings for this module are simple: Section ID. This is an optional field where you can enter an ID value that you can use for anchor links. This should be a unique value with no spaces. Rich Text. This is the main editable text element of the module. You can edit within the left panel, or you can click the button below it "Edit in expanded view" to open that field in the larger area to the right. This is usually more helpful. There is ALSO an option to click "Turn on dark editor". If you happen to color the text in this module to white or another light color, it will be difficult to see it for editing. Click this button to flip it to dark mode and see your text on a dark background instead of white. This only applies to the editing view. Also note that within this field, you have the same options as the core rich text module would... meaning you can insert images, create a table, embed a video, etc. Font Family. Select from the theme primary or secondary font to be applied to the text in this module instance. These two font families are already selected in the theme style settings. Default Font Weight. Set the font weight for text in this module instance. By default, there is no value given here and the text will take on the font weight you have setup in the theme styling. But if in this instance you would like to override that, you can do so. Default Line Height (in em). Set the line height for text in this module instance. By default, there is no value given here and the text will take on the line height you have setup in the theme styling. But if in this instance you would like to override that, you can do so. Note that this value is in "em" and will allow for a selection of between 1 and 2 and intervals of .1. Style Fields Beyond the main module settings, if you click the "Styles" tab, you will find another set of fields to style your custom header text. Those fields are: Spacing (Desktop). Here you can set the margin and padding to apply within the module for displays larger than 768 pixels. It defaults to 0. Spacing (Mobile). Here you can set the margin and padding to apply within the module for mobile and tablet displays, 768 pixels and smaller. It defaults to 0. Max Width (in pixels). This allows you to select a max width to be applied to this text element. The value is in pixels and defaults to 0 so no maximum is applied unless you establish one. Text Block Alignment. This allows you to align this block of text wherever it is used on the page. This is NOT to align the text within the module, but to align the module itself. Enable Link Icon. This is a unique element. Within the theme styling, there is a selection of a link icon. It is a choice between a variety of right arrow type of icons. It can be used in this custom rich text module. This gives you the OPTION to enable the selected link icon to be appended to the right of any text link within this module instance. So, say you have a couple lines of text followed by a link like "Learn More". Enable this icon and that "Learn More" would automatically have an icon appended after it... and would be the same icon used throughout the site wherever you choose to utilize this.