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.
Show breadcrumbs above section

Toggle this option to display breadcrumbs above the banner as a separate element.

When disabled, breadcrumbs will appear inside the banner above the heading.
Background image Add an image as the background for your banner to enhance its visual appeal and match your overall design.
Show image on right side

Enable this option to place the image on the right side of the section with content on the left.

When disabled, the image will cover the content.
Hide border radius
  • Enable: Makes the banner's borders straight.
  • Disable: Rounds the banner's borders.
Image block size

Choose the size for the image block when option “Image on right side” is turned on.

  • Half-Width: The image occupies half the width of the section.
  • One-Third Width: The image occupies one-third of the section's width.
  • Two-Third Width: The image occupies two-thirds of the section's width.
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:

  • Small
  • Medium
  • Large

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.
Text size

Choose the font size for description:

  • Small
  • Medium
  • Large

Note: Font sizes for all body text across the site can be adjusted in the Typography tab under Theme Settings.
Content alignment

You have three alignment options for the heading to choose from:

  • Left: Aligns content to the left side of the section.
  • Center: Aligns content to the center of the section.
  • Right: Aligns content to the right side of the section.
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.
Use secondary color for text Toggle this option to apply the secondary text color, as defined in the Colors tab of the Theme Settings, within a specific color scheme.
Full width section Enable this option to expand the section to occupy the entire width of the screen.

Blog post card 


Setting Description
Desktop layout

This setting allows you to choose how your blog posts are displayed on desktop screens.

  • Collage: One main post is featured, followed by all the other posts.
  • Grid: All posts are displayed in a grid format.

*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:

  • Adapt to image
  • Small
  • Medium
  • Large 

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:

  1. Navigate to the Blog post.
  2. In the tags block field, choose from suggested tags or type your own tags.
  3. Add tags in the field to categorize your posts effectively.


Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us