Target audience: Administrators setting up news display sections
This article explains the various layout options available for displaying news content in your content management system.
Overview
The News component offers multiple display layouts organized into several categories: Carousel, Carousel Group, Featured, Masonry, Revolution Slider, Standard, Timeline, and legacy options. Each layout is designed for specific content presentation needs and visual styles.
Carousel Layouts
Carousel layouts create sliding presentations of news items with different aspect ratios:
- 4:1 aspect ratio - Ultra-wide banner style
- 3:1 aspect ratio - Wide panoramic display
- 2:1 aspect ratio - Wide landscape format
- 16:9 aspect ratio - Widescreen standard
- 4:3 aspect ratio - Traditional screen format
- 1:1 aspect ratio - Square format
- 1:2 aspect ratio - Vertical portrait format
Carousel Settings
- Theme options (Light, Light with Shadow, Dark, Dark with Glow)
- Slide interval (0-10 seconds)
- Vertical and horizontal alignment controls
- Text background color customization
- Tint color options for image overlays
- Mobile display toggles for title, description, date, and buttons
- Hover highlight effects
- Indicator dots and navigation arrows
Carousel Group Layouts
Display multiple news items in a sliding group format:
- Simple - Clean, minimal design
- Modern - Contemporary styled presentation
Carousel Group Settings
- Slide type (Elements or Pages)
- Slide interval and transition speed
- Number of slides shown simultaneously (1-7)
- Image and text height controls
- Text and footer theme customization
- Background colors for text and footer sections
- Text alignment options
- Tint colors and hover effects
- Loop, random order, and pause options
Featured Layouts
Prominent display formats ideal for highlighting important news:
- 4:1 aspect ratio - Ultra-wide featured banner
- 3:1 aspect ratio - Wide featured display
- 2:1 aspect ratio - Wide featured format
- 16:9 aspect ratio - Widescreen featured
- 16:10 aspect ratio - Wide featured alternative
- 4:3 aspect ratio - Traditional featured format
Masonry Layouts
Pinterest-style grid layouts with flexible arrangements:
- Use image sizes - Maintains original proportions
- 3:1 aspect ratio - Wide blocks
- 2:1 aspect ratio - Landscape blocks
- 16:9 aspect ratio - Widescreen blocks
- 4:3 aspect ratio - Traditional blocks
- 1:1 aspect ratio - Square blocks
- 1:2 aspect ratio - Vertical blocks
Masonry Settings
- Item layout (text below/above/on image, random)
- Item shape (square, rounded corners, circle, random)
- Text theme and background colors
- Text alignment options
- Hover theme for overlays
- No-image background color
- Button style selection
- Tint colors and hover effects
- Column count (1-5)
- Item minimum height and spacing
- Starting items and load more increment
- Search and category display toggles
- Footer link display
- Random large items option
- Lazy loading on scroll
Revolution Slider Layouts
Advanced slider presentations with premium animations:
- Carousel with Tabs & Thumbnails - Interactive navigation
- Slider with Thumbnails - Thumbnail navigation bar
- Slider with Text & Shape - Styled text overlays
- Slider with Card (center) - Center-aligned content cards
- Slider with Card (right) - Right-aligned content cards
- Slider with Text Previews - Preview text display
Revolution Slider Settings
- Slide interval (3-10 seconds)
- Button style customization
- Background cover options (cover, contain, smart)
- Background position controls (9 alignment options)
- Full screen mode toggle
Standard Layouts
Traditional list and grid formats for comprehensive content display:
Full Layouts
- Wide - Full width with all metadata
- Narrow - Constrained width with all metadata
- Vertical - Stacked vertical arrangement
Partial Layouts
- Title, date, and image
- Title and image only
- Title, description, and image
- Title, date, and description
- Title and description
- Description and image
- Description only
Compact Layouts
- Title and date
- Image only
- Title only (Ultra-compact)
Timeline Layout
Vertical timeline presentation for chronological content.
Timeline Settings
- Alignment (Alternate, Left, Right)
- Animation effects
- Timeline color customization
- Text theme and background colors
- Button style options
- Date display opposite content
- Full description toggle
Common Display Settings
Display Order Options
Control how news items are sorted:
- Most recent first (by current date)
- Oldest first (by current date)
- Oldest first (by archive date)
- Most recent first (by archive date)
- Prioritized by category
RSS Link Options
Add RSS feed links:
- No link
- Link with image and text
- Link with image only
- Link with text only
Number to Display
Limit displayed items from 1 to 100, or show unlimited items.
Field Visibility Controls
Toggle visibility for:
- Title
- Description
- Image
- Date
- Category
- Tags
- Authors
- Media Types
- Source
- Last Updated
- More Info Link
- Audio Player (for MP3 URLs)
Image Settings
Available for standard layouts:
First Image
- Default sizing
- Bounding box (50-800px width and height)
- Exact size
- No image
Subsequent Images
- Same options as first image
- Independent width and height controls
Interactivity Controls
Enable interactive features for standard layouts:
Available Options
- Pagination (group items into pages)
- Keyword filtering
- Background colors for items
- Items per page (5, 10, 25, 50, 100, or All)
Button Styles
Consistent button styling across all layouts:
- Regular 1-6 (six preset styles)
- eCommerce 1-2 (shopping-focused styles)
- Text (simple text link)
- Custom (define color, shape, size, and fill)
- None (no button)
Custom Button Options
- Color picker
- Shape (square, circle, circled corners, rounded corners)
- Size (small, medium, large, x-large)
- Fill (background, outline, transparent)
Best Practices
Choosing a Layout
- Carousel/Revolution Slider - Hero sections, featured content
- Masonry - Visual-heavy content, varied image sizes
- Standard Full - Comprehensive information display
- Standard Compact - News lists, sidebars
- Timeline - Chronological events, history
- Carousel Group - Related item collections
Performance Considerations
- Use lazy loading for masonry layouts with many items
- Limit Revolution Slider items for optimal performance
- Consider mobile display when selecting layouts
- Test carousel intervals for user engagement
Accessibility
- Ensure sufficient color contrast in theme selections
- Provide text alternatives when hiding descriptions
- Test navigation controls for keyboard accessibility
- Consider motion sensitivity with auto-playing carousels