The new Divi options offer tons of possibilities. Modules, rows and columns, more than ever, empower one another on the road towards stunning and user-friendly web design. One of the things it can do is create remarkable editorial style sections. And that’s exactly what we’ll be showing you in this post; 5 different editorial style section layouts that you can use within different websites. The best part? The post is made by using the right settings for each module, row and column only.

Let’s take a look at the five examples we’ll show you how to create.

First Example

Desktop

editiorial

Mobile

editiorial

Second Example

Desktop

editiorial

Mobile

editiorial

Third Example

Desktop

editiorial

Mobile

editiorial

Fourth Example

Desktop

editiorial

Mobile

Fifth Example

Desktop

editiorial

Mobile

editiorial

Start Creating First Example

Let’s get started by creating our first editor style layout.

editiorial

Add New Section

Add a new page, enable the Divi Builder and switch over to Visual Builder. Once you’re in the Visual Builder, add a standard section.

Add Three-Column Row

Within that standard section, we’ll be needing a three-column row.

editorial

Gradient Background

Open the row settings and add the following gradient background to it:

  • First Color: #636363
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Radial
  • Radial Direction: Center
  • Start Position: 0%
  • End Position: 47%

editorial

Column 2 Background Color

We’ll also need to set ‘#d8d8d8’ as the Column 2 Background Color.

editorial

Sizing

Move on to the Design tab and use the following settings for the Sizing subcategory:

  • Use Custom Width: Yes
  • Custom Width: 100%
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

editorial

Spacing

Open the Spacing subcategory and add ’50px’ to the top, right, bottom and left padding of the second column.

editorial

First Column Image Module

Gradient Background

Add an image to the first column of the row and use the following gradient background for it:

  • First Color: rgba(255,255,255,0)
  • Second Color: #086191
  • Gradient Type: Linear
  • Gradient Direction: 107deg
  • Start Position: 60%
  • End Position: 60%

editorial

Alignment

Go to the Design tab, use the left Image Alignment and enable the ‘Always Center Image on Mobile’ option.

editorial

Spacing

Then, open the Spacing subcategory and use the following margin and padding settings:

  • Top Margin: 100px (Desktop), 0px (Tablet & Phone)
  • Top Padding: 20px
  • Bottom Padding: 20px

editorial

Second Column Text Module

Text Settings

Next, add a Text Module to the second column of the row. Go to the Design tab and use the following settings for the Text subcategory:

  • Text Font Size: 12px
  • Text Color: #000000
  • Text Orientation: Center

editorial

Sizing

Open the Sizing subcategory, use a Width of ‘84%’ and select the center Module Alignment.

editorial

Spacing

Lastly, add ’50px’ to the top and bottom margin.

editorial

Third Column Image Module

Gradient Background

Add another Image Module to the third column and use the following gradient background:

  • First Color: #a36100
  • Second Color: rgba(255,255,255,0)
  • Gradient Type: Linear
  • Gradient Direction: 73deg
  • Start Position: 40%
  • End Position: 40%

editorial

Alignment

Go to the Design tab, select the left Image Alignment and enable the ‘Always Center Image on Mobile’ option.

editorial

Spacing

Lastly, add the following custom margin and padding:

  • Top Margin: 300px (Desktop), 0px (Tablet & Phone)
  • Top Padding: 20px
  • Bottom Padding: 20px

editorial

Result

Let’s take another look at the result on desktop:

editiorial

And on mobile:

editiorial

Start Creating Second Example

The second example looks like this on desktop:

editiorial

Add New Section

Firstly, add a new standard section.

Add Two-Column Row

Then, add a two-column row to it.

editorial

Column 2 Background Color

Open the row settings and add ‘#ededed’ as the Column 2 Background Color.

editorial

Sizing

Go to the Design tab and make the following changes apply to the Sizing subcategory:

  • Use Custom Width: Yes
  • Custom Width: 100%
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

editorial

First Column Image Module

Alignment

Add an Image Module to the first column, use the left Image Alignment and enable the ‘Always Center Image on Mobile’ option.

editorial

Spacing

Open the Spacing subcategory and use the following settings:

  • Top Margin: 100px (Desktop), 0px (Tablet & Phone)
  • Top Padding: 0px
  • Bottom Padding: 0px

editorial

Second Column Text Module

Text Settings

Then, add a Text Module to the second column and apply the following settings to the Text subcategory:

  • Text Font: Lato
  • Text Font Size: 12px
  • Text Color: #000000
  • Text Line Height: 2.2em
  • Text Orientation: Center

editorial

Sizing

Open the Sizing subcategory and apply a Width of ‘75%’.

editorial

Spacing

Lastly, make sure the following settings apply to the Spacing subcategory:

  • Top Margin: 120px (Desktop), -80 (Tablet & Phone)
  • Left Margin: -240px (Desktop), 80 (Tablet), 45 (Phone)
  • Top, Right, Bottom & Left Padding: 50px (Desktop & Tablet), 20px (Phone)

editorial

Result

Once done, you’ll notice the following design on desktop:

editiorial

And on mobile:

editiorial

Start Creating Third Example

Up next, we have the following example which looks like this:

editiorial

Add New Section

Once again, add a new standard section.

Add Two-Column Row

The column structure we’ll be needing for this row is the following:

editorial

Column 1 Background Color

Open the row settings and use ‘#e8e8e8’ as the Column 1 Background Color.

editorial

Column 2 Gradient Background

The needed Gradient Background for the second column is the following:

  • First Color: #e8e8e8
  • Second Color: rgba(255,255,255,0)
  • Column 2 Gradient Type: Linear
  • Column 2 Gradient Direction: 147deg
  • Column 2 Start Position: 25%
  • Column 2 End Position: 9%

editorial

Sizing

Open the Sizing subcategory and use the following settings:

  • Use Custom Width: Yes
  • Custom Width: 100%
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

editorial

Spacing

Lastly, add ’70px’ to the top and bottom padding of the first column.

editorial

First Column Image Module

Alignment

Add an Image Module to the first column, use the left Image Alignment and enable the ‘Always Center Image on Mobile’ option.

editorial

Spacing

Open the Spacing subcategory and add ‘-300px’ to the left margin.
editorial

Second Column Text Module

Background Color

Add a Text Module to the second column and use ‘#3d3d3d’ as the background color.

editorial

Text Settings

Go to the Design tab and use the following settings for the Text subcategory:

  • Text Font: Lato
  • Text Font Size: 12px
  • Text Color: #FFFFFF
  • Text Line Height: 2.2em
  • Text Orientation: Center

editorial

Sizing

Open the Sizing subcategory and use ‘75%’ for the Width.

editorial

Spacing

Lastly, use the following settings for the Spacing subcategory:

  • Top Margin: 130px (Desktop), -200 (Tablet & Phone)
  • Left Margin: -180px (Desktop), 80 (Tablet), 50 (Phone)
  • Top, Right, Bottom & Left Padding: 50px (Desktop & Tablet), 20px (Phone)

editorial

Result

Once finished, the result on desktop will look like this:

editiorial

And like this on mobile:

editiorial

Start Creating Fourth Example

The fourth example we’ll be creating looks like this:

editiorial

Add New Section

Start by adding a standard section to the page you’re working on.

Add Two-Column Row

Then, add a two-column row to it.

editorial

Sizing

Open the Sizing subcategory and make the following changes:

  • Use Custom Width: Yes
  • Custom Width: 60%
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

editorial

First Column First Image Module

Alignment

Add an Image Module to the first column, use the right Image Alignment and enable the ‘Always Center Image on Mobile’ option.

editorial

Sizing

Go to the Sizing subcategory of that Image Module, use a Width of ‘89%’ and select the right Module Alignment.

editorial

Visibility

Go to the Advanced tab and disable the Image Module on phone and tablet. We’ll be doing this for 3 of the Image Modules that are being used. You can decide for yourself which one you want to appear on tablet and phone, in our case, that’ll be the image in the right top corner.

editorial

First Column Second Image Module

Alignment

Add another Image Module, use the right Image Alignment and enable the ‘Always Center Image on Mobile’ option.

editorial

Border

Scroll down and make use of the following border:

  • Use Border: Yes
  • Border Color: #FFFFFF
  • Border Width: 5px
  • Border Style: Solid

editorial

Visibility

Lastly, go to the Advanced tab and disable the Image Module on phone and tablet.

editorial

Second Column First Image Module

Alignment

Add the next Image Module to the second column, use the left Image Alignment and enable the ‘Always Center Image on Mobile’ option.

editorial

Border

Scroll down, open the Border subcategory and make the following settings apply:

  • Use Border: Yes
  • Border Color: #FFFFFF
  • Border Width: 4px
  • Border Style: Solid

editorial

Second Column Second Image Module

Alignment

Add the last Image Module to the second column, use the left Image Alignment and enable the ‘Always Center Image on Mobile’ option.

editorial

Sizing

Then, open the sizing subcategory, use a Width of ‘89%’ and select the left Module Alignment.

editorial

Visibility

Disable this Image Module on phone and tablet as well.

editorial

Add One-Column Row

Once you’ve finished the previous row, go ahead and add another one. This time, the row will only need one column.

Sizing

Go to the Design tab of the row settings, enable the ‘Use Custom Width’ option and use ‘581px’ as the Custom Width.

 

editorial

Text Module

Background Color

Add a Text Module to that new row and select ‘rgba(255,255,255,0.92)’ as the background color.

editorial

Text Settings

Move on to the Design tab and make the following settings apply to the Text subcategory:

  • Text Font: Lato
  • Text Font Size: 12px
  • Text Color: #000000
  • Text Line Height: 2.2em
  • Text Orientation: Center

editorial

Sizing

Then, open the Sizing subcategory, add ‘75%’ to the Width and select the center Module Alignment.

editorial

Spacing

Lastly, make the following settings apply to the Spacing subcategory:

  • Top Margin: -580px (Desktop), -200 (Tablet & Phone)
  • Left Margin: – 180px (Desktop), 80 (Tablet), 50 (Phone)
  • Top, Right, Bottom & Left Padding: 50px

editorial

Result

Once done, you’ll be able to witness the following result on desktop:

editiorial

And the following on mobile:

Start Creating Fifth Example

The last example we’ll be showing you how to recreate is the following:

editiorial

Add Fullwidth Section

Start by adding a fullwidth section to your page.

Fullwidth Image Module

Within that Fullwidth section, add a Fullwidth Image Module.

editorial

Add New Section

Right below the previous section, add another section. This time, the section has to be standard instead of fullwidth.

Add Three Column Row

Add a three-column row to that new standard section.

editorial

Column 1,  2 & 3 Background Color

Open the row settings and assign the following background colors to the columns:

  • Column 1: #eaeaea
  • Column 2: rgba(12,113,195,0.17)
  • Column 3: rgba(131,0,233,0.09)

editorial

Sizing

Go to the Design tab and make the following changes to the Sizing subcategory:

  • Make This Row Fullwidth: Yes
  • Use Custom Gutter Width: Yes
  • Gutter Width: 1

editorial

Spacing

Then open the Spacing subcategory, add ‘-60px’ to the top margin and ’50px’ to the bottom padding of each column.

editorial

First Column Text Module

Background Color

Continue by adding a Text Module to the First Column and using ‘rgba(255,255,255,0.89)’ as its background color.

editorial

Text Settings

Go to the Design tab and make the following settings apply to the Text subcategory:

  • Text Font: Lato
  • Text Font Size: 12px
  • Text Color: #000000
  • Text Line Height: 2.2em
  • Text Orientation: Center

editorial

Border

Open the Border subcategory and make use of the following settings:

  • Use Border: Yes
  • Border Color: #FFFFFF
  • Border Width: 17px
  • Border Style: Solid

editorial

Sizing

Then, use a Width of ‘75%’ and select the center Module Alignment within the Sizing subcategory.

editorial

Spacing

Lastly, open the Spacing subcategory and make the following settings apply:

  • Top Margin: -300px (Desktop), 0px (Tablet & Phone)
  • Top, Right, Bottom, Left Padding: 50px (Desktop & Tablet), 20px (Phone)

editorial

Clone Text Module Twice & Place in Other Two Columns

Go ahead and clone the Text Module twice. Then, place each one of the clones in the two remaining columns.

Change Spacing Second Column Text Module

We’ll have to change the Top Margin of the Text Module placed within the second column into ‘-220px’.

editorial

Change Spacing Third Column Text Module

Same counts for the Text Module in the third column but the value is instead ‘-140px’.

editorial

Result

And here you have the result on desktop:

editiorial

And on mobile:

editiorial

Final Thoughts

In this post, we’ve shown you some beautiful and fun editorial style section layouts that you can use throughout your own website. These examples show how flexible Divi’s options are and how creative you can get. If you have any questions or suggestions; make sure you leave a comment in the comment section below!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

Featured Image by Julia Tim / shutterstock.com

The post 5 Examples of Editorial Style Section Layouts Created with Divi appeared first on Elegant Themes Blog.



Source link

error: Content is protected !!