The Blog page provides customers with a landing page for your latest blog posts. Customize this page's template with special theme features and settings.
In the theme editor (Customize), open Blogs, then Default blog.
Blog Page Banner
The Blog page template includes an optional Banner feature to enhance the page.
Open Banner in the left sidebar to customize it. To disable the banner, click the eye icon beside the section.
Image
Click Select Image to connect an image. Enable Dark banner image to add an overlay between the image and post title.
Subheading
Include an optional Subheading with the provided field. This will display below the blog title.
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
Banner height
Select Small, Medium, or Large to control the Banner height.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature
Blog Page Settings
In the left sidebar, click Blog to open general settings for the template.
Show tag filter
Activate Show tag filter to enable a drop-down filter based on blog post tags included in the blog. When an option is selected, it will then filter the blog to display only the posts that have that tag.
Posts per row
Control the number of Posts per row with the provided slider. The options are 1, 2, 3, and 4 posts per row.
Posts per page
Control how many posts appear on the page with the Posts per page slider. Select a value between 1 and 50.
Pagination type
There are four pagination options included to view/load more blog posts. The pagination types to choose from are: infinite scroll, infinite load more button, load more button, and page links.
View our article on pagination options in the Flex theme
Width
The width can either be set to Standard or Wide. Selecting Wide will spread out the full width of the screen. Selecting Standard will keep the section in a container and not spread the full width.
Spacing
You can choose to add space (padding) above and below the section by adjusting the Top spacing and Bottom spacing settings.
Custom CSS
Add Custom CSS to the feature for further tweaking. You can even create your own CSS class here, as well. Check out this article for more information: Flex Guide: Custom CSS Feature
Blog Sidebar Settings
Build a Sidebar for the template by adding and customizing content blocks. Reveal the sidebar by enabling Show sidebar in the main settings.
Click (+) Add block, then select one of the block options:
- Blog post tags
- Custom HTML
- Featured promotion
- Menu
- Newsletter
- Page
- Recent blog posts
- Search form
- Text