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.
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
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:
Spacing
Take away the entire default spacing of your segment subsequent:
- Best Padding: 0px
- Backside Padding: 0px
Upload New Row
Column Construction
Proceed by means of including a brand new row to the segment with the next column construction:
Sizing
Build up the width of the row as neatly:
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 0
Spacing
Take away the default most sensible and backside padding subsequent:
- Best Padding: 0px
- Backside Padding: 0px
Clear out
To make the row extra colourful, build up the saturation within the Clear out settings:
- Saturation: 200%
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.
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)
Spacing
To create the sq., trade the Spacing values:
- Best Margin: -120px
- Best Padding: 120px
- Backside Padding: 120px
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.
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)
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
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.
Clone Divider Module #2 and Position in Column 4
Clone the fairway Divider Module as neatly and position it in column 4.
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.
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:
Paste Visibility Kinds
And paste them into the Divider Modules in column 4 and 5.
Segment Transition #2
Upload New Segment
Find
To create the second one segment transition, upload a brand new segment right here:
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
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
Spacing
Alternate the Spacing settings subsequent:
- Best Margin: 100px
- Backside Margin: 100px
- Best Padding: 0px
- Backside Padding: 0px
Upload New Row
Column Construction
Time so as to add a row to the brand new segment! Make a choice the next column construction:
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
Spacing
Take away the entire default most sensible and backside padding as neatly:
- Best Padding: 0px
- Backside Padding: 0px
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)
Divider Colour
Alternate the divider colour as neatly:
- Divider Colour: #ffffff
Divider Taste
Then, move to the Kinds settings and use the next Divider Taste:
- Divider Taste: Double
Divider Weight
The burden of the divider must be as follows:
- Divider Weight: 18px
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
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.
Alternate Background Colour
Alternate the background colour of this reproduction accordingly:
- Background Colour: #e4edea
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.
Clone Divider Module #2 and Position in Column 4
Clone the fairway Divider Module as neatly and position the reproduction in column 4.
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.
Reproduction Visibility Kinds
Reproduction those Visibility Kinds.
Paste Visibility Kinds
And paste them into the Divider Modules in column 4 and 5.
Segment Transition #3
Upload New Segment
Find
So as to add the ultimate segment transition for your web page, upload a brand new segment right here:
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
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
Spacing
Then, move to the Spacing settings and make some adjustments:
- Best Margin: 100px
- Backside Margin: 100px
- Best Padding: 0px
- Backside Padding: 0px
Upload New Row
Column Construction
The row we’ll want on this segment has the next column construction:
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
Spacing
Take away the entire default most sensible and backside padding subsequent:
- Best Padding: 0px
- Backside Padding: 0px
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.
Background Colour
Upload a background colour to the divider as an alternative:
- Background Colour: rgba(176,182,219,0.34)
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
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)
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.
Clone Divider Module #2 and Position in Column 4
Clone the fairway Divider Module as neatly and position the reproduction in column 4.
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.
Reproduction Visibility Kinds
Reproduction those Visibility Kinds.
Paste Visibility Kinds
And paste them at the Divider Module in column 4 and 5 and also you’re executed!
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.
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