Extra news layout divi

Here is an example of how you can create an "Extra News" layout using Divi:

Section Settings

• Section ID: extra-news
• Section Class: extra-news
• Section Background: #f7f7f7 (or any other background color you prefer)
• Section Padding: 20px (or any other padding value you prefer)

Row Settings

• Row ID: extra-news-row
• Row Class: extra-news-row
• Row Background: #fff (or any other background color you prefer)
• Row Padding: 20px (or any other padding value you preferred)

Column Settings

• Column 1 ID: extra-news-col-1

• Column 1 Class: extra-news-col-1

• Column 1 Width: 1/2 (or any other width value you prefer)

• Column 1 Padding: 20px (or any other padding value you prefer)

• Column 2 ID: extra-news-col-2

• Column 2 Class: extra-news-col-2

• Column 2 Width: 1/2 (or any other width value you prefer)

• Column 2 Padding: 20px (or any other padding value you prefer)

Module Settings

• Module 1 (Image): Add an image module to Column 1
  • Image URL: [Insert image URL]
  • Image Size: Full Width
  • Image Alignment: Left
• Module 2 (Text): Add a text module to Column 1
  • Text Content: [Insert text content]
  • Text Alignment: Left
  • Text Font Size: 18px
  • Text Font Family: Open Sans
• Module 3 (Button): Add a button module to Column 2
  • Button Text: [Insert button text]
  • Button URL: [Insert button URL]
  • Button Alignment: Right
  • Button Font Size: 18px
  • Button Font Family: Open Sans
• Module 4 (Text): Add a text module to Column 2
  • Text Content: [Insert text content]
  • Text Alignment: Right
  • Text Font Size: 18px
  • Text Font Family: Open Sans

Custom CSS

You can add custom CSS to style the layout further. For example:

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

.extra-news-row {
  background-color: #fff;
  padding: 20px;
}

.extra-news-col-1 {
  width: 1/2;
  padding: 20px;
}

.extra-news-col-2 {
  width: 1/2;
  padding: 20px;
}

.extra-news-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.extra-news-text {
  font-size: 18px;
  font-family: Open Sans;
  color: #333;
}

.extra-news-button {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.extra-news-button:hover {
  background-color: #3e8e41;
}

This is just an example layout, and you can customize it to fit your needs. You can also add more modules, change the layout, and add custom CSS to make it look more appealing.