Each and every week, we give you new and unfastened Divi format packs which you’ll use on your subsequent mission. For one of the vital format packs, we additionally proportion a use case that’ll permit you to take your web page to the following stage.

This week, as a part of our ongoing Divi design initiative, we’re going to turn you find out how to use Divi’s new column constructions to create shocking segment transitions. We’ll mix other column constructions with a few of Divi’s integrated choices to take our web page design to the following stage.

Let’s get to it!

Preview

Let’s get started by means of looking on the 3 other examples that we’ll create from scratch the usage of Divi’s integrated choices handiest. Those examples glance similarly as excellent on smaller display sizes.

section transitions

Use Divi’s Make-up Artist Structure Pack’s Touchdown Web page

We’re going to make use of the touchdown web page of Divi’s Make-up Artist Structure Pack. If you wish to have to try the format pack, move to the next blog post. Despite the fact that we’re demonstrating this instructional the usage of a selected format pack, you’ll simply use the tactics on different layouts as neatly.

Segment Transition #1

section transitions

Upload New Segment

Find

Open the Make-up Artist Structure Pack’s touchdown web page the usage of Divi’s Visible Builder. Then, upload a brand new common segment proper beneath the hero segment:

section transitions

Spacing

Take away the entire default spacing of your segment subsequent:

  • Best Padding: 0px
  • Backside Padding: 0px

section transitions

Upload New Row

Column Construction

Proceed by means of including a brand new row to the segment with the next column construction:

section transitions

Sizing

Build up the width of the row as neatly:

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 0

section transitions

Spacing

Take away the default most sensible and backside padding subsequent:

  • Best Padding: 0px
  • Backside Padding: 0px

section transitions

Clear out

To make the row extra colourful, build up the saturation within the Clear out settings:

  • Saturation: 200%

section transitions

Upload Divider Module #1 to Column 1

Cover Divider

To create the primary sq. in our design, we’re going so as to add a Divider Module to column 1. Disable the ‘Display Divider’ choice.

section transitions

Gradient Background

Subsequent, upload a gradient background to the Divider Module:

  • Colour 1: rgba(255,255,255,0)
  • Colour 2: rgba(176,182,219,0.34)

section transitions

Spacing

To create the sq., trade the Spacing values:

  • Best Margin: -120px
  • Best Padding: 120px
  • Backside Padding: 120px

section transitions

Clone Divider Module & Position in Column 2

When you’re executed editing the DIvider Module, clone it and position it in the second one column.

section transitions

Alternate Gradient Background

Some adjustments wish to be made to this reproduction, beginning with the gradient background:

  • Colour 1: rgba(228,237,234,0.58)
  • Colour 2: rgba(255,255,255,0)

section transitions

Alternate Spacing

Alternate the Spacing settings as neatly. This may occasionally build up the space between this Divider Module and the only within the first column.

  • Best Margin: 142px
  • Best Padding: 120px
  • Backside Padding: 120px

section transitions

Clone Divider Module #1 Two times and Position in Column 3 & 5

Clone the red Divider Module two times and position the duplicates in column 3 and 5.

section transitions

Clone Divider Module #2 and Position in Column 4

Clone the fairway Divider Module as neatly and position it in column 4.

section transitions

Cover Divider Module in Column 3, 4 & 5 on Pill & Telephone

Open Divider Module in Column 3

In fact, we wish those segment transitions to seem similarly as excellent on smaller display sizes. That’s why we’re going to cover one of the most modules we’ve used. Get started by means of opening the settings of the Divider Module in column 3.

Cover on Pill & Telephone

Move to the Complicated tab and disable the module on telephone and pill.

section transitions

Reproduction Visibility Kinds

We’ll wish to cover the dividers in column 4 and 5 as neatly. To hurry up the method, replica the visibility settings of the divider in column 3:

section transitions

Paste Visibility Kinds

And paste them into the Divider Modules in column 4 and 5.

section transitions

Segment Transition #2

section transitions

Upload New Segment

Find

To create the second one segment transition, upload a brand new segment right here:

section transitions

Best Divider

Open the segment settings and upload the next most sensible divider:

  • Divider Taste: In finding in Checklist
  • Divider Colour: #ffffff
  • Divider Peak: 236px
  • Divider Turn: Vertical
  • Divider Association: On Best Of Segment Content material

section transitions

Backside Divider

Likewise, upload a backside divider as neatly:

  • Divider Taste: In finding in Checklist
  • Divider Colour: #ffffff
  • Divider Peak: 236px
  • Divider Association: On Best of Segment Content material

section transitions

Spacing

Alternate the Spacing settings subsequent:

  • Best Margin: 100px
  • Backside Margin: 100px
  • Best Padding: 0px
  • Backside Padding: 0px

section transitions

Upload New Row

Column Construction

Time so as to add a row to the brand new segment! Make a choice the next column construction:

section transitions

Sizing

With out including any modules, open the row settings and alter the width:

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

section transitions

Spacing

Take away the entire default most sensible and backside padding as neatly:

  • Best Padding: 0px
  • Backside Padding: 0px

section transitions

Upload Divider Module #1 to Column 1

Background Colour

Subsequent, upload a Divider Module to the primary column. Open its settings and upload a background colour:

  • Background Colour: rgba(176,182,219,0.34)

section transitions

Divider Colour

Alternate the divider colour as neatly:

  • Divider Colour: #ffffff

section transitions

Divider Taste

Then, move to the Kinds settings and use the next Divider Taste:

  • Divider Taste: Double

section transitions

Divider Weight

The burden of the divider must be as follows:

  • Divider Weight: 18px

section transitions

Spacing

Remaining however now not least, build up the scale of the Divider Module the usage of customized padding:

  • Best Padding: 50px
  • Backside Padding: 50px

section transitions

Clone Divider Module & Position in Column 2

When you’re executed with the Divider Module within the first column, clone it and position the reproduction in the second one column.

section transitions

Alternate Background Colour

Alternate the background colour of this reproduction accordingly:

  • Background Colour: #e4edea

section transitions

Clone Divider Module #1 and Position in Column 3 & 5

Proceed by means of cloning the red Divider Module two times and hanging the duplicates in column 3 and 5.

section transitions

Clone Divider Module #2 and Position in Column 4

Clone the fairway Divider Module as neatly and position the reproduction in column 4.

section transitions

Cover Divider Module in Column 3, 4 & 5 on Pill & Telephone

Cover on Pill & Telephone

We’re going to do the similar factor we did for the primary segment transition instance. Open the settings of the Divider Module in column 3 and conceal it on telephone and pill.

section transitions

Reproduction Visibility Kinds

Reproduction those Visibility Kinds.

section transitions

Paste Visibility Kinds

And paste them into the Divider Modules in column 4 and 5.

section transitions

Segment Transition #3

section transitions

Upload New Segment

Find

So as to add the ultimate segment transition for your web page, upload a brand new segment right here:

section transitions

Best Divider

Open the segment settings and upload a most sensible divider:

  • Divider Taste: In finding in Checklist
  • Divider Colour: #ffffff
  • Divider Peak: 150px
  • Divider Association: On Best Of Segment Content material

section transitions

Backside Divider

Upload a backside one subsequent:

  • Divider Taste: In finding in Checklist
  • Divider Colour: #ffffff
  • Divider Peak: 150px
  • Divider Turn: Vertical
  • Divider Association: On Best Of Segment Content material

section transitions

Spacing

Then, move to the Spacing settings and make some adjustments:

  • Best Margin: 100px
  • Backside Margin: 100px
  • Best Padding: 0px
  • Backside Padding: 0px

section transitions

Upload New Row

Column Construction

The row we’ll want on this segment has the next column construction:

section transitions

Sizing

With out including any modules, open the row settings and build up the width of your row:

  • Make This Row Fullwidth: Sure
  • Use Customized Gutter Width: Sure
  • Gutter Width: 1

section transitions

Spacing

Take away the entire default most sensible and backside padding subsequent:

  • Best Padding: 0px
  • Backside Padding: 0px

section transitions

Upload Divider Module #1 to Column 1

Cover Divider

Proceed by means of including a Divider Module to the primary column. Disable the ‘Display Divider’ choice.

section transitions

Background Colour

Upload a background colour to the divider as an alternative:

  • Background Colour: rgba(176,182,219,0.34)

section transitions

Spacing

Build up the scale of the module by means of the usage of most sensible and backside padding:

  • Best Padding: 100px
  • Backside Padding: 100px

section transitions

Clone Divider Module & Position in Column 2

Alternate Background Colour

Clone the Divider Module within the first column and position the reproduction in the second. Open its settings and alter the background colour:

  • Background Colour: rgba(228,237,234,0.58)

section transitions

Clone Divider Module #1 and Position in Column 3 & 5

Clone the red Divider Module two times and position it in column 3 and 5.

section transitions

Clone Divider Module #2 and Position in Column 4

Clone the fairway Divider Module as neatly and position the reproduction in column 4.

section transitions

Cover Divider Module in Column 3, 4 & 5 on Pill & Telephone

Cover on Pill & Telephone

Cover the Divider Module in column 3 on pill and call.

section transitions

Reproduction Visibility Kinds

Reproduction those Visibility Kinds.

section transitions

Paste Visibility Kinds

And paste them at the Divider Module in column 4 and 5 and also you’re executed!

section transitions

Preview

Now that we’ve long past via the entire steps, let’s take a last have a look at the 3 other examples we’ve created.

section transitions

Ultimate Ideas

On this use case weblog publish, we’ve proven you find out how to use Divi’s new column constructions to create shocking segment transitions. This instructional is a part of our ongoing Divi design initiative, the place we attempt to put one thing on your design toolbox every week. In case you have any questions, be sure you depart a remark within the remark segment beneath!

The publish How to Use Divi’s New Column Structures to Create Stunning Section Transitions gave the impression first on Elegant Themes Blog.

WordPress Web Design

[ continue ]