Blog posts template
| Setting | Description |
| Show breadcrumbs | Enable this option to display breadcrumbs within the banner. This helps users easily navigate back to the homepage, enhancing the overall user experience. |
| Background image | Add an image as the background for your banner to enhance its visual appeal and match your overall design. |
| Image overlay opacity | The “Image overlay opacity” setting allows you to adjust the transparency of the overlay that is applied to images on your website. Use the slider to make changes. |
| Heading size | The heading size setting offers three options to control the size of the section heading:
With these options, you can easily customize the heading sizes to best match your website's style and create a visually appealing and cohesive design throughout your site. |
| Text | To add a text after the main section heading, simply enter the text in the provided field. In the top menu of the field, you can find options to customize text. Furthermore, you can click the dynamic source button to insert a dynamic source for the featured collection description. |
| Heading alignment | You have three alignment options for the heading to choose from:
|
| Color scheme (banner) | Applying a color scheme to a blog banner automatically updates all associated colors set in the theme settings according to the created color schemes. You can edit colors in this block, but it will impact the other sections and blocks in which the same color scheme is used. |
Blog post card
| Setting | Description |
| Desktop layout | This setting allows you to choose how your blog posts are displayed on desktop screens.
*Note: On mobile devices, the posts are stacked. |
| Show featured image | Mark the checkbox to showcase the featured image from the blog post page in admin panel on the blog post archive page. If left unchecked, categories, heading, description, and comment count will be visible without an image. Also, we can add a date and an author to show them on the page. |
| Featured image height | Adjust the image height according to your preferences. Four options to try:
For best results, use an image with a 3:2 aspect ratio. Learn more |
| Show date | Enable this option to display the publication date of the blog post. |
| Show author | Enable this option to display the author's name of the blog post. |
| Label for post link | Enter the label for link to blog detail page (post). However, if you remove the text, the button won't be visible under each blog post. |
Section padding
| Setting | Description |
| Banner top padding | The 'Top padding' setting allows you to adjust the amount of space at the top of the banner using a slider. |
| Banner bottom padding | The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the banner |
| Top padding | The 'Top padding' setting allows you to adjust the amount of space at the top of the blog posts section using a slider. |
| Bottom padding | The 'Bottom padding' setting functions similarly to the “Top padding” setting, but controls the space at the bottom of the blog posts section. |
Categories
You can add tags to blog post detailed pages to make them automatically visible on blog posts as badges and appearing in tabs as categories.
To do this:
- Navigate to the Blog post.
- In the tags block field, choose from suggested tags or type your own tags.
- Add tags in the field to categorize your posts effectively.
