# Blog Articles Section

> **What You'll Learn**
>
> * How to display blog articles in a customizable card layout with advanced styling options
> * Configuration options for article alignment, colors, dates, and animation effects
> * How to create engaging blog article grids with fade-in animations and custom styling
> * Best practices for blog page layout optimization and content presentation

***

## 🎯 What is the Blog Articles Section?

The **Blog Articles Section** is a sophisticated article display system designed specifically for blog pages that showcases blog posts in a visually appealing card-based grid layout. Unlike the simple Blog Feed Section, this section provides extensive customization options for card styling, animations, alignment, and visual effects to create a professional, magazine-style blog presentation.

**Key Features:**

* Customizable article card layouts with rounded corners
* Advanced alignment options for titles and dates
* Fade-in animations with adjustable duration
* Comprehensive color customization for cards, headers, and dates
* Responsive design optimized for blog browsing
* Automatic article pagination (up to 600 articles)
* Integration with article images, titles, and creation dates
* Professional card-based layout system

Available in:

* ✅ Plain Jane v3.1+
* ✅ Plain Jane Interactive v2+

> 💡 **Note**: This section is specifically designed for blog template pages and automatically pulls articles from the current blog context.

***

## 🔧 How to Add Blog Articles Section

1. Go to **Online Store > Themes > Customize**
2. Navigate to **Blog posts > \[Your Blog]** or create a blog template page
3. Click **Add section**
4. Select **Blog Articles** section
5. Configure the styling, colors, and animation options
6. Position the section where you want articles to appear

> ⚠️ **Important**: This section only works on blog template pages and requires existing blog articles to display content.

***

## 📄 Article Display & Layout

### **Automatic Article Loading**

**Article Source**

* Automatically loads articles from the current blog
* Displays up to 600 articles with built-in pagination
* Shows article images, titles, and creation dates
* Links each article card to the full article page

**Article Card Structure**

* **Article Image**: Featured image from each blog post
* **Article Title**: Customizable alignment and color
* **Creation Date**: Optional display with custom color and alignment
* **Card Background**: Customizable background color and corner radius

**Grid Layout**

* Responsive grid layout that adapts to screen size
* Automatic spacing and alignment for professional appearance
* Touch-friendly cards optimized for mobile browsing
* Hover effects for better user interaction

***

## 🎨 Alignment & Typography

### **Article Title Alignment**

**Title Positioning Options**

* **Left**: Traditional left-aligned titles with left margin
* **Center**: Centered titles for balanced appearance
* **Right**: Right-aligned titles for alternative layout

**Title Styling**

* **Article Header Color**: Custom color for article titles
* Text automatically adjusts position based on alignment choice
* Consistent typography across all article cards
* Responsive text sizing for mobile devices

### **Date Display Options**

**Creation Date Settings**

* **Display Article Created Date**: Toggle to show/hide publication dates
* **Article Date Color**: Custom color for date text
* **Date Alignment**: Coordinated with title alignment for consistency
* **Date Format**: Uses Shopify's abbreviated date format (e.g., "Jan 15, 2024")

***

## 🎨 Card Styling & Colors

### **Article Card Customization**

**Card Background**

* **Article Card Color**: Background color for each article card
* Default: White (#FFF) for clean, readable appearance
* Supports any hex color or theme colors
* Consistent background across all cards

**Card Shape & Corners**

* **Card Curve**: Adjustable border radius (0-10px)
* Range from sharp rectangular cards to rounded modern cards
* Default: 0px for clean, professional appearance
* Creates consistent visual style across blog layout

### **Color Scheme Options**

**Comprehensive Color Control**

* **Article Header Color**: Title text color (default: Black #000)
* **Article Date Color**: Date text color (default: Black #000)
* **Article Card Color**: Card background color (default: White #FFF)
* All colors support transparency and custom hex values

**Visual Hierarchy**

* Color choices create clear information hierarchy
* High contrast options for accessibility compliance
* Consistent color application across all article cards

***

## ✨ Animation & Effects

### **Fade-In Animation**

**Animation Configuration**

* **Fade-In Duration**: Adjustable from 0-8 seconds
* Default: 2 seconds for smooth, noticeable effect
* Creates professional page loading experience
* Applies to entire article grid simultaneously

**Animation Behavior**

* CSS-based fade-in animation for performance
* Triggers when section becomes visible
* Smooth transition from transparent to full opacity
* No impact on page load speed or SEO

**Animation Timing**

* 0 seconds: Instant display (no animation)
* 1-3 seconds: Quick, subtle animation
* 4-6 seconds: Slow, dramatic animation
* 7-8 seconds: Very slow, cinematic effect

***

## 📱 Mobile Optimization

### **Responsive Design**

**Mobile Layout**

* Article cards automatically resize for mobile screens
* Touch-friendly card size and spacing
* Optimized image loading for mobile performance
* Consistent typography scaling across devices

**Mobile-Specific Features**

* Fast loading article images
* Touch-optimized card interactions
* Responsive grid layout adaptation
* Mobile-friendly date and title formatting

**Performance Considerations**

* Optimized image loading for mobile bandwidth
* Efficient CSS animations that don't impact scrolling
* Fast card rendering for smooth mobile browsing
* Minimal JavaScript for better mobile performance

***

## 🔄 Integration with Blog System

### **Shopify Blog Integration**

**Automatic Content Pulling**

* Seamlessly integrates with Shopify's blog system
* Automatically displays published articles
* Respects article publication dates and status
* Links directly to individual article pages

**Article Metadata**

* Displays article featured images
* Shows article titles with custom styling
* Includes publication dates with formatting options
* Maintains article URL structure for SEO

### **Content Management**

**Blog Management**

* Works with any blog created in Shopify Admin
* Automatically updates when new articles are published
* Respects article visibility settings
* Maintains proper SEO structure for blog content

**Article Requirements**

* Articles need featured images for optimal appearance
* Article titles display automatically
* Publication dates show creation time
* All published articles appear in chronological order

***

## 🎛️ Advanced Customization

### **Design Strategy**

**Professional Blog Layouts**

* Use left alignment for traditional blog appearance
* Choose center alignment for modern, magazine-style layout
* Apply subtle corner radius (2-4px) for contemporary feel
* Use high contrast colors for better readability

**Color Coordination**

* Match card colors with overall blog theme
* Ensure title colors have sufficient contrast
* Use consistent date colors across all cards
* Consider brand colors for cohesive appearance

### **Animation Strategy**

**Loading Experience**

* Use 2-3 second fade-in for professional feel
* Avoid very long animations (>4 seconds) for user experience
* Consider no animation (0 seconds) for content-heavy blogs
* Test animation timing on actual devices

**Performance Balance**

* Shorter animations reduce perceived loading time
* Longer animations can create dramatic effect but may feel slow
* Consider your audience and content style when choosing duration

***

## 🔧 Troubleshooting

### **Articles Not Displaying**

**Common Issues**

* No published articles in the current blog
* Section added to non-blog template page
* Blog articles missing featured images
* Section settings need to be configured

**Solutions**

* Ensure blog has published articles with featured images
* Verify section is added to correct blog template
* Check article publication status in Shopify Admin
* Configure section colors and settings properly
* Test section on actual blog page, not in theme editor

### **Card Styling Issues**

**Potential Problems**

* Cards appearing with no background or borders
* Text colors too light to be visible
* Corner radius not applying correctly
* Inconsistent card appearance

**Solutions**

* Set card color to contrast with page background
* Increase color contrast for title and date text
* Adjust corner radius settings and save changes
* Clear browser cache after making style changes
* Test card appearance with actual blog content

### **Animation Problems**

**Common Problems**

* Fade-in animation not working
* Animation too slow or too fast
* Animation causing performance issues
* Animation not displaying on mobile

**Solutions**

* Verify fade duration is set above 0 seconds
* Adjust animation timing for better user experience
* Test animation on different devices and browsers
* Consider reducing duration if performance issues occur
* Check for CSS conflicts with custom code

### **Mobile Display Issues**

**Potential Issues**

* Cards too small on mobile devices
* Text not readable on mobile screens
* Images not loading properly on mobile
* Layout breaking on different screen sizes

**Solutions**

* Test section on actual mobile devices
* Ensure sufficient color contrast for mobile viewing
* Verify article images are high-quality and properly sized
* Check mobile layout in different orientations
* Test loading speed on mobile connections

***

## 📊 Performance Impact

### **Loading Efficiency**

**Optimized Performance**

* CSS-based animations for smooth performance
* Efficient article loading with pagination
* Optimized image loading for featured images
* Minimal JavaScript overhead

**SEO Benefits**

* Proper article linking structure
* Clean HTML markup for search engines
* Semantic article markup for better indexing
* Fast loading times support SEO rankings

**User Experience**

* Smooth animations enhance perceived performance
* Quick card interactions improve engagement
* Responsive design ensures accessibility
* Professional appearance builds trust

***

## 🎯 Best Practices Summary

### **Setup Checklist**

```
✅ Ensure blog has published articles with featured images
✅ Add section to blog template page (not homepage)
✅ Configure article title alignment for your blog style
✅ Set card colors with sufficient contrast for readability
✅ Choose appropriate corner radius for your brand aesthetic
✅ Configure fade-in duration for good user experience (2-3 seconds recommended)
✅ Test article date display and formatting
✅ Verify mobile appearance and touch interactions
✅ Check color contrast for accessibility compliance
✅ Test loading performance with multiple articles
✅ Ensure article links work properly
✅ Verify animation performance on different devices
```

### **Content Strategy**

**Article Optimization**

* Use high-quality featured images for all blog articles
* Write compelling article titles that work with your chosen alignment
* Maintain consistent publishing schedule for fresh content
* Optimize article images for fast loading

**Visual Consistency**

* Use consistent color scheme across all blog articles
* Maintain uniform image dimensions for better grid appearance
* Apply consistent corner radius settings throughout blog
* Create cohesive visual experience with other blog sections

***

## 🚀 Advanced Use Cases

### **Magazine-Style Blogs**

**Professional Publishing**

* Use center alignment for modern magazine layout
* Apply subtle corner radius (3-5px) for contemporary feel
* Choose sophisticated color schemes for professional appearance
* Implement moderate fade-in animation (2-3 seconds) for elegance

### **Content-Heavy Blogs**

**Information-Dense Layouts**

* Use left alignment for traditional reading patterns
* Minimize animation duration for faster content access
* Ensure high contrast colors for optimal readability
* Focus on clean, efficient card layouts

### **Brand-Focused Blogs**

**Brand Integration**

* Coordinate card colors with brand color palette
* Use brand fonts through theme typography settings
* Apply brand-appropriate corner radius styling
* Create cohesive experience with other site sections

***

The Blog Articles Section provides sophisticated article display capabilities that transform basic blog listings into engaging, professional content presentations with extensive customization options for alignment, styling, and animation effects.

### **Need Help?**

* 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
* 📧 **Email us at:** <support@openspaces.design>
* 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website