Blog page
Overview:
The Main Blog section is used to display blog listing pages on the storefront. It supports blog banners, headings, descriptions, article grids, blog card customization, breadcrumb navigation, typography controls, responsive layouts, and advanced spacing settings. This section helps organize and present blog articles in a visually structured and user-friendly layout.
Section Configuration:
Breadcrumb:
| Setting |
Description |
| Show Breadcrumb |
Displays breadcrumb navigation above the blog listing page for improved navigation and SEO structure. |
| Breadcrumb Color Scheme |
Applies a predefined color palette to the breadcrumb section. |
Banner:
| Setting |
Description |
| Banner Image |
Uploads a banner image displayed at the top of the blog page. |
| Banner Media Ratio |
Controls the aspect ratio of the banner image such as adapt, square, portrait, landscape, or fit to box. |
| Banner Desktop Height |
Controls the height of the banner image on desktop devices when fit mode is enabled. |
| Banner Mobile Height |
Controls the height of the banner image on mobile devices when fit mode is enabled. |
Heading:
| Setting |
Description |
| Section Heading |
Defines the main blog page heading text. |
| Heading Size |
Controls the size of the blog page heading. |
| Heading Weight |
Adjusts the font thickness of the heading text. |
| Heading Case |
Changes the text transformation style such as uppercase, lowercase, capitalize, or default. |
| Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family |
Allows switching between default and body font family styles. |
| Heading Color Style |
Applies predefined color styling to the heading text. |
| Heading Link Style |
Controls the styling behavior of links used inside the heading content. |
Description:
| Setting |
Description |
| Description Text |
Displays introductory or informational content below the blog heading. |
| Description Size |
Controls the size of the description text. |
| Description Weight |
Adjusts the font thickness of the description text. |
| Description Case |
Changes the text transformation style for the description text. |
| Description Font Family |
Allows switching between default and heading font family styles. |
| Description Color Style |
Applies predefined color styling to the description text. |
Grid Layout:
| Setting |
Description |
| Desktop Columns |
Controls the number of blog columns displayed on desktop devices. |
| Desktop Rows |
Controls the number of blog rows displayed on desktop devices. |
| Mobile Columns |
Controls the number of blog columns displayed on mobile devices. |
| Desktop Grid Spacing |
Adds spacing between blog cards on desktop devices. |
| Mobile Grid Spacing |
Adds spacing between blog cards on mobile devices. |
Blog Card Settings:
| Setting |
Description |
| Blog Media Ratio |
Controls the aspect ratio of blog featured images. |
| Blog Desktop Height |
Controls the height of blog images on desktop devices when fit mode is enabled. |
| Blog Mobile Height |
Controls the height of blog images on mobile devices when fit mode is enabled. |
Typography:
| Setting |
Description |
| Blog Heading Weight |
Adjusts the font thickness of blog card headings. |
| Blog Heading Case |
Changes the text transformation style for blog card titles. |
| Blog Heading Tag |
Sets the HTML heading tag level for blog card titles. |
| Blog Heading Font Family |
Allows switching between default and body font family styles. |
| Blog Heading Color Style |
Applies predefined color styling to blog card titles. |
Card Options:
| Setting |
Description |
| Make First Card Full Width |
Expands the first blog card into a larger featured layout. |
| Show Featured Image |
Displays featured images inside blog cards. |
| Show Tags |
Displays article tags on blog cards. |
| Show Date |
Displays article publishing dates. |
| Show Author |
Displays article author names. |
| Show Excerpt |
Displays article excerpts inside blog cards. |
| Show Comments Count |
Displays total comment count for blog articles. |
| Button Text Case |
Changes the text transformation style of blog buttons. |
Layout:
| Setting |
Description |
| Container Layout |
Determines whether the blog section uses a contained, contained content, or full-width layout. |
| Container Width |
Controls the maximum width of the blog section container on desktop devices. |
| Text Alignment (Desktop) |
Sets the horizontal alignment of content on desktop devices. |
| Text Alignment (Mobile) |
Sets the horizontal alignment of content on mobile devices. |
Color Scheme:
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the blog section background and content. |
| Inverse Color Scheme |
Inverts the selected color scheme styling for contrast variations. |
| Gradient Mode |
Enables gradient styling for the section background, widgets, or both. |
| Enable Heading Gradient |
Enables gradient styling for section headings. |
Inner Spacing:
| Setting |
Description |
| Top Padding (Desktop) |
Adds spacing inside the top area of the blog section on desktop devices. |
| Bottom Padding (Desktop) |
Adds spacing inside the bottom area of the blog section on desktop devices. |
| Left Padding (Desktop) |
Controls the inner left spacing of the blog section on desktop devices. |
| Right Padding (Desktop) |
Controls the inner right spacing of the blog section on desktop devices. |
| Top Padding (Mobile) |
Adds spacing inside the top area of the blog section on mobile devices. |
| Bottom Padding (Mobile) |
Adds spacing inside the bottom area of the blog section on mobile devices. |
| Left Padding (Mobile) |
Controls the inner left spacing of the blog section on mobile devices. |
| Right Padding (Mobile) |
Controls the inner right spacing of the blog section on mobile devices. |
Outer Spacing:
| Setting |
Description |
| Top Margin (Desktop) |
Adds spacing outside the top area of the blog section on desktop devices. |
| Bottom Margin (Desktop) |
Adds spacing outside the bottom area of the blog section on desktop devices. |
| Left Margin (Desktop) |
Controls the outer left spacing of the blog section on desktop devices. |
| Right Margin (Desktop) |
Controls the outer right spacing of the blog section on desktop devices. |
| Top Margin (Mobile) |
Adds spacing outside the top area of the blog section on mobile devices. |
| Bottom Margin (Mobile) |
Adds spacing outside the bottom area of the blog section on mobile devices. |
| Left Margin (Mobile) |
Controls the outer left spacing of the blog section on mobile devices. |
| Right Margin (Mobile) |
Controls the outer right spacing of the blog section on mobile devices. |
