Supported Versions
The details shared here apply to the most recent version of Flex. To keep your theme up to date, check out this helpful document.
In This Article
Using the Custom HTML Section
Flex includes a 'Custom HTML' homepage section that allows you to add in additional code to your homepage. There are countless options with this section as it's the perfect place to add in any custom widgets or apps you'd like on your homepage.
In the Custom HTML section, there is also full control over the width and spacing. You can also select an animation for the section and add in custom CSS.
If you need to include a third party widget, such as a social media feed, video, map, certification badges or seals, you can paste in the provided code inside this section in the Theme Editor.
Similarly, you can embed features from apps on your homepage using the same method. This often requires you to paste in a snippet of code, typically JavaScript, provided by the app developer.
In order to add a Custom HTML section, click into Customize (your Theme Editor) > Sections > Add Section > Custom HTML.
Custom HTML Settings
The 'Custom HTML' section settings determine the look and layout of this section and is where you can input your actual HTML!
HTML
The HTML field is where you can actually add your HTML! You can make use of some of the existing classes used in the theme to pick up certain styles, or you can create new ones and target them in the 'Custom CSS' field further down in the settings.
Layout
The layout settings include options to adjust the spacing and width in this section, and enable animation for when the section loads in.
Width
The options under the 'width' setting include: 'half,' 'standard' and 'wide.' Selecting 'wide' will spread out the section full-width of the screen. Selecting 'standard' will keep the section in a container and not spread the full-width. Selecting 'half' will resize this section to be half of the 'wide' option.
With the 'half' width option, if you have set the Custom HTML section to 'half', and the Section following it set to 'half', they will sit next to each other side-by-side – for example, here is a custom HTML section followed by an image with text overlay section:
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
Left/Right spacing
For even further control, you can choose to move the section over more to the left or to the right side of the page by adjusting the 'left spacing' and 'right spacing' settings.
Animation
The 'animation' setting will determine how the section 'loads in' . The options for animation are: 'none,' 'fade in,' 'fade in down,' 'fade in left,' 'fade in right,' 'slide in left,' and 'slide in right.'
Advanced
In the advanced settings, you can add in your own CSS class and custom CSS.
More information about using the Advanced CSS feature.
In the 'CSS Class' field, you can create a new class to apply to the section, or you can add a class that already exists to apply those styles as well!
The 'Custom CSS' field is where you can add in the actual CSS code. This is a great way to target any classes that you have added in the 'HTML' field earlier.
Examples
Example 1
Custom HTML Section Details:
In this example, our Column Framework was used to create 3 columns.
HTML added:
<div class="container">
<div class="one-third column text-center first">
<h2><a href="/pages/about-us">About Us</a></h2>
</div>
<div class="one-third column text-center second">
<h2><a href="/pages/faqs">FAQs</a></h2>
</div>
<div class="one-third column text-center third">
<h2><a href="/pages/contact-us">Contact Us</a></h2>
</div>
Custom CSS:
.one-third {
border: 5px solid #000;
padding: 50px 20px;
}
.one-third a {
border-bottom: 2px solid #000;
}
.first {
background: pink;
}
.second {
background: lavender;
}
.third {
background: lightyellow;
}
Example 2
If you're looking to integrate a custom form/sign up form, the Custom HTML section can be used! In this example, the iframe embed code from Google Forms was added.
Custom CSS:
.container {
padding: 20px;
background-image: linear-gradient(to left top, #7f7aa6, #817faf, #8285b8, #828ac1, #8290ca);
border: 10px solid;
}
Mobile Layout
When viewed on a mobile device, it depends on what content you have added to your page! If the content is just text and images, this will responsively size down to fit into the mobile screen. If you've added a widget or third-party code, you may need to add in extra code to make whatever you have responsive.