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
Blog Posts Section
The Flex theme includes the option to add a Blog Posts section on your homepage. The 'Blog Posts' homepage section will display the most recent posts available in your/one of your Blogs.
In general, having a blog is a great way to build a sense of community around your company and enabling this section on the homepage can introduce your customers to the content that you're sharing!
The Blog Posts section can display 2-4 posts on your homepage which will be the most recent posts. In order to set up the Blog Posts section, click into Customize (your Theme Editor) > Sections > Add Section > Blog Posts.
Blog Post Section Settings
The section settings determine the look and layout of this section! The section settings are divided into: general information for your posts, layout, and advanced settings.
General Information
Within the blog posts section settings, you can choose to configure the following:
- Heading
- Blog (if you have multiple Blogs, you can choose which one you'd like to feature)
- Posts (choose to show 2-4 posts)
- Show tags (if you've tagged your posts ex: 'recipe', 'tips & tricks', you can have them display)
- Show author
- Show estimated read time
- Show date
- Show comment count
- Show blog post excerpts (if you have added an excerpt to your post, you can hide or show it)
- Show border
- Button label (add text that you'd like to appear on the button that your customers click to read more)
- Button style choose between your 'primary' and 'secondary' button styles – which are configured under Theme Settings > Buttons. Alternatively, you can choose 'none' if you don't want to display a button)
Layout
The layout settings include options to adjust the spacing and width in this section.
Width
You can choose between 'wide' and 'standard' for the width of this section. Selecting 'wide' will spread this section out full-width. Choosing 'standard' will keep the section in a container and not spread the full-width.
Top/Bottom spacing
You can choose to add space (padding) above and below the section by adjusting the 'top spacing' and 'bottom spacing' settings.
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 - added
- Blog posts - 4
- Show tags - enabled
- Show author - enabled
- Show estimated read time - enabled
- Show border - enabled
- Button - added
- Width - standard
Example 2
Settings
- Heading - added
- Blog posts - 4
- Show date - enabled
- Show border - enabled
- Button style - none
- Width - standard
Mobile Layout
When viewed on a mobile device, the blog posts will stack vertically.
