Blog listing

Overview:

The Main Blog section is designed to display blog articles in a structured and visually engaging grid layout. It supports featured blog cards, article metadata, headings, descriptions, responsive layouts, breadcrumb navigation, typography customization, color schemes, and spacing controls. This section is ideal for showcasing blog posts, news updates, educational content, store stories, or editorial articles.

Section Configuration

Header Settings

Heading:

Setting	Description
Heading Size	Controls section heading size such as H1–H6, Large, Medium, or Small.
Heading Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Heading Case	Changes 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 heading text.

Description:

Setting	Description
Section Description	Displays supporting content below the blog heading. Used for introducing blog content or store updates.
Description Size	Controls text size such as Large, Medium, or Small.
Description Weight	Adjusts the font thickness ranging from Thin (100) to Black (900).
Description Case	Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Description Font Family	Allows switching between Default and Heading font family styles.
Description Color Style	Applies predefined color styling to description text.

Blog Card Settings

Media Settings:

Setting	Description
Card Media Ratio	Controls featured image ratio such as Adapt, Square, Portrait, or Landscape.

Blog Card Typography:

Setting	Description
Card Heading Size	Controls article title size such as H1–H6, Large, Medium, or Small.
Card Heading Weight	Adjusts font thickness ranging from Thin (100) to Black (900).
Card Heading Case	Changes title text transformation style such as Uppercase, Lowercase, Capitalize, or Default.
Card Heading Tag	Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes.
Card Heading Font Family	Allows switching between Default and Body font family styles.
Card Heading Color Style	Applies predefined color styling to blog headings.

Blog Card Features:

Setting	Description
Make First Card Full Width	Displays the first blog card in a full-width layout for better visual emphasis.
Show Featured Image	Displays the article featured image.
Show Tags	Displays article tags.
Show Date	Displays article publish date.
Show Author	Displays the article author name.
Show Excerpt	Displays a short article summary.
Show Comments Count	Displays the total number of comments on blog posts.

Setting	Description
Show Breadcrumb	Displays breadcrumb navigation for easier page navigation.
Breadcrumb Color Scheme	Applies a predefined color palette to breadcrumb navigation.

Grid Settings:

Setting	Description
Desktop Rows	Controls the number of visible blog rows on desktop devices (1–6 rows).
Desktop Columns	Controls the number of blog columns on desktop devices (1–6 columns).
Mobile Columns	Controls whether 1 or 2 columns appear 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.

Layout:

Setting	Description
Container Layout	Determines whether the section uses Contained, Contained Content, or Full Width layout.
Container Width	Controls the maximum width of the section container on desktop devices.
Text Alignment (Desktop)	Sets content alignment on desktop devices (Left, Center, or Right).
Text Alignment (Mobile)	Sets content alignment on mobile devices (Left, Center, or Right).

Color Scheme:

Setting	Description
Section Color Scheme	Applies a predefined color palette to the Main Blog section background and content.