Extra news layout divi demo

Here is an example of an "Extra News" layout using the Divi Builder:

Layout Structure:

• Section: Extra News
  • Row: News Header
    • Column: News Title
    • Column: News Date
  • Row: News Content
    • Column: News Image
    • Column: News Text
  • Row: Call-to-Action (CTA)
    • Column: CTA Button

Layout Settings:

• Section: Extra News
  • Background: #f7f7f7 (white)
  • Padding: 20px
  • Margin: 0
• Row: News Header
  • Alignment: Center
  • Padding: 10px
  • Margin: 0
• Column: News Title
  • Font Family: Open Sans
  • Font Size: 24px
  • Font Weight: Bold
  • Text Color: #333333 (dark gray)
  • Margin: 0
• Column: News Date
  • Font Family: Open Sans
  • Font Size: 16px
  • Font Weight: Regular
  • Text Color: #666666 (gray)
  • Margin: 0
• Row: News Content
  • Alignment: Center
  • Padding: 20px
  • Margin: 0
• Column: News Image
  • Image Size: 300x200
  • Image Alignment: Left
  • Margin: 0
• Column: News Text
  • Font Family: Open Sans
  • Font Size: 16px
  • Font Weight: Regular
  • Text Color: #333333 (dark gray)
  • Margin: 0
• Row: Call-to-Action (CTA)
  • Alignment: Center
  • Padding: 10px
  • Margin: 0
• Column: CTA Button
  • Button Style: Outline
  • Button Text: Learn More
  • Button Color: #007bff (blue)
  • Button Text Color: #ffffff (white)
  • Margin: 0

CSS Customizations:

• Add the following CSS code to your theme's custom CSS file:

  
  .extra-news-section {
  background-color: #f7f7f7;
  padding: 20px;
  margin: 0;
  }

.news-header { background-color: #333333; color: #ffffff; padding: 10px; margin: 0; }

.news-title { font-size: 24px; font-weight: bold; margin: 0; }

.news-date { font-size: 16px; font-weight: regular; margin: 0; }

.news-image { width: 300px; height: 200px; margin: 0; }

.news-text { font-size: 16px; font-weight: regular; margin: 0; }

.cta-button { background-color: #007bff; color: #ffffff; border: none; padding: 10px 20px; font-size: 16px; font-weight: bold; cursor: pointer; }

.cta-button:hover { background-color: #0069d9; }

This layout uses a simple and clean design to showcase news articles. The news title and date are displayed in a header row, followed by a content row that includes an image and text. The call-to-action (CTA) button is displayed at the bottom of the layout. You can customize the layout to fit your specific needs by modifying the layout settings and CSS customizations.