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 Rich Text Section
The Flex theme includes a 'Rich Text' section that quickly and easily allows you to add a block of content to the homepage which is perfect to use when you're just looking to add some text. The 'Rich Text' section includes options to add a heading, text and button. You can also configure the background color, layout and include custom CSS in this section as well.
The 'Rich Text' section is a great way to add basic and informative text - perhaps a couple of introductory and 'about us' paragraphs to talk about your product/company or share exciting announcements near the top of your homepage.
In order to set up the Rich Text section, click into Customize (your Theme Editor) > Sections > Add Section > Rich Text.
Rich Text Settings
The 'Rich Text' section settings determine the look and layout of this section! The settings are divided into the following areas: heading, text, button, background, layout, and advanced.
Heading
In the Rich Text 'Heading' settings, you can add the text for your heading, choose its font, text color, text alignment, and base size.
Text
In the Rich Text 'Text' settings, you can input your text, choose the font, text color, text alignment, base size, and number of columns (between 1 - 3) that you'd like your text to display in.
Button
In the Rich Text 'Button' settings, you can input your button label and button link, choose the alignment, and choose between your 'primary' and 'secondary' button styles (which are configured under Theme Settings > Buttons).
Background
In the Rich Text 'Background' settings, you can select the background color, add a gradient to the background and if you've added a gradient, choose the gradient rotation.
Layout
The 'Layout' settings include options to adjust the spacing and width in this section, and enable animation for when the 'Rich Text' 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 Rich Text 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 rich text section followed by a map 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,' 'slide in right,' and 'zoom in'.
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.
Examples
Example 1
Settings
- Heading
- Text alignment - left
- Text
- Text alignment - left
- Columns - 2
- Button
- Alignment - left
- Gradient rotation - 50deg
- Width - wide
- Custom CSS added for button
Example 2
Settings
- Heading
- Text alignment - center
- Text
- Text alignment - center
- Columns - 1
- Gradient rotation - 120deg
- Width - half
- Custom CSS added for border around section
Mobile Layout
When viewed on a mobile device, the 'Rich Text' section will responsively adjust to fit into your mobile screen. If you have the 'width' set to either 'half' or 'wide,' the section will take up the full-width of your mobile screen. If you have the 'width' set to 'standard,' the section will remain in a container and not spread the full-width.
