Seventh > Sections > Blog posts

Blog Posts

The Blog Posts section automatically displays blog articles from a selected blog in a grid layout. Perfect for showcasing your latest blog posts, articles, or news updates on your homepage or blog landing pages.

What It Does

This section automatically creates Article Cards for blog posts:

• Displays articles from a selected blog automatically
• Shows latest articles up to a specified limit
• Each article uses an Article Card with customizable blocks
• Articles appear in a grid layout
• Automatically updates when new articles are published

Section Settings Explained

Blog Selection

Blog

• Select which blog to display articles from
• Articles from the selected blog will appear automatically
• Articles appear in reverse chronological order (newest first)

Number of Articles Shown

• Controls how many articles to display
• Range: 1-24 articles (default: 3)
• Shows the most recent articles up to this limit

Layout Options

Layout Controls how articles are displayed

Cards Size (Desktop) Controls how many article cards appear per row when header is at top

Cards Size (Desktop with Left Header) Controls card size when header is positioned on the left

Cards Size on Mobile Controls how many cards appear per row on mobile

Cards Alignment Controls how article cards align when they have different heights

Stretch Alignment Type (Only appears when "Stretch" is selected)

• Top - Content aligns to top when stretched
• Center - Content aligns to center when stretched
• Bottom - Content aligns to bottom when stretched
• Space Between - Content spreads evenly with space between
• Space Around - Content spreads evenly with space around

Grid Gap Controls the spacing between article cards

Cards Arrangement

Scatter Cards (Only appears when layout is "Grid")

• When enabled: Cards are arranged in a scattered, editorial-style layout
• When disabled: Cards are arranged in a uniform grid

Scatter Cards on Mobile (Only appears when "Scatter Cards" is enabled)

• When enabled: Scattered layout applies on mobile devices
• When disabled: Cards use standard grid on mobile

Horizontal Spacing (Only appears when "Scatter Cards" is enabled)

• Controls horizontal spacing between scattered cards
• Options: XSmall (0), Small (0.05), Medium (0.1), Large (0.15), XLarge (0.2)

Vertical Scattering (Only appears when "Scatter Cards" is enabled)

• Controls vertical offset/scattering of cards
• Options: XSmall (1), Small (1.5), Medium (2), Large (2.5), XLarge (3)

Gap Between Rows (Only appears when "Scatter Cards" is enabled)

• Controls spacing between rows of scattered cards
• Options: XSmall (1), Small (1.5), Medium (2), Large (2.5), XLarge (3)

Randomize Card Sizes (Only appears when layout is "Slider")

• When enabled: Cards have randomized sizes in the slider
• When disabled: All cards have uniform size

Randomize Card Sizes on Mobile (Only appears when "Randomize Card Sizes" is enabled)

• When enabled: Randomized sizes apply on mobile
• When disabled: Cards use uniform size on mobile

Section Header

Position Where the section header appears:

• Top - Header appears above the articles (default)
• Left - Header appears to the left of the articles

Stick to Top

• When enabled: Header stays visible when scrolling
• When disabled: Header scrolls with the page

Section Header Block The Section Header block can contain:

• Heading blocks for section titles (e.g., "Latest Blog Posts")
• Text blocks for descriptions
• Button blocks linking to the blog
• Icon blocks and other common blocks

Section Design Options

Color Scheme

• Choose from your theme's color schemes
• Applies to the entire section

Top Padding

• Controls space above the section
• Options: None, Smaller, Default, Larger, Largest

Bottom Padding

• Controls space below the section
• Options: None, Smaller, Default, Larger, Largest

Extend Section Width

• When enabled: Section extends to full browser width
• When disabled: Section stays within container width

Show Media Background

• When enabled: You can add a background image or video
• When disabled: Uses solid color background

Background Image/Video (Only appears when "Show Media Background" is enabled)

• Upload an image or video for the section background

Background Overlay (Only appears when background is set)

• Add a color overlay on top of the background
• Adjust transparency for subtle effects

Parallax Effect (Only appears when background is set)

• Adds a scrolling parallax effect to the background
• Options: None, Subtle, Medium, Strong

Push Content Down (Only appears when background is set)

• Adjusts how content sits on the background

Make Section Full Height

• Makes the section fill the entire viewport height

Article Card Options

Each article in the Blog Posts section uses an Article Card. You can customize what information appears on each card.

Available Article Blocks

Inside each Article Card, you can add or remove these blocks:

Article Information Blocks:

• Article Title - The blog post title
• Article Excerpt - Post excerpt or summary
• Article Thumbnail - Featured image
• Article Meta - Author, date, comments count
• Article Tags - Post tags
• Article Content - Full article content
• Article Comments - Comments section
• Article Navigation - Previous/next post links

Article Group

• Organizes multiple article blocks together
• Controls spacing and layout of article information

Card Styling Options

Each article card has styling options:

• Text alignment
• Padding and spacing
• Background colors or images
• Border radius
• Color schemes

Common Use Cases

Latest Blog Posts

• Select your main blog
• Display 3-6 latest articles
• Use grid layout with 3 cards per row
• Add section header with "Latest Posts" and "View All" button

Featured Articles

• Create a featured blog or tag
• Display specific articles
• Use slider layout for featured display
• Highlight important content

Blog Preview

• Show blog posts on homepage
• Display 4-6 articles
• Use standard grid for easy browsing
• Add section header linking to full blog

Editorial Layout

• Enable scattered cards for magazine feel
• Mix article cards with different content
• Create editorial-style blog displays
• Perfect for lifestyle or fashion blogs

Tips for Success

Blog Management

• Keep Blog Updated - Regularly publish new articles
• Article Order - Articles appear newest first automatically
• Article Count - Use "Number of Articles Shown" to control display

Layout

• Grid vs Slider - Use grid for browsing, slider for featured
• Card Size - 3-4 cards per row works well for article displays
• Mobile - Always preview on mobile devices

Article Cards

• Consistent Information - Show the same article blocks on each card
• Card Styling - Use consistent styling across all article cards
• Featured Images - Ensure all articles have featured images

Content

• Article Excerpts - Use clear, engaging excerpts
• Article Meta - Show author and date for credibility
• Article Tags - Display tags for better organization

Troubleshooting

Articles Not Showing

Problem: Blog articles don't appear in the section.

Solutions:

1. Check Blog Selection - Verify blog is selected
2. Article Count - Check "Number of Articles Shown" setting
3. Published Articles - Ensure blog has published articles
4. Blog Visibility - Verify blog is not password-protected

Cards Look Different Heights

Problem: Article cards have uneven heights.

Solutions:

1. Use Stretch Alignment - Set cards alignment to "Stretch"
2. Standardize Blocks - Show the same blocks on each card
3. Excerpt Length - Articles with longer excerpts create taller cards

Featured Images Not Showing

Problem: Article featured images don't display.

Solutions:

1. Check Article Images - Ensure articles have featured images
2. Article Thumbnail Block - Verify Article Thumbnail block is added
3. Image Format - Use JPG, PNG, or WebP formats