Each and every new web page you design with the Divi Builder is structured the use of quite a lot of other column layouts. Divi comprises integrated column layouts for every row starting from one column the entire method to six columns. However, every so often, it’s possible you’ll really feel the want to modify those columns for much more distinctive layouts. Lately, I’m going to turn you an artistic method to do exactly that.
On this educational, I’m going to turn you a easy design method that lets you prolong modules the use of unfavorable margins to occupy a couple of column. This method will can help you design some distinctive customized layouts you won’t have regarded as conceivable.
Let’s get began.
Sneak Peek
To get a greater working out of what we’re going to be construction, here’s a ahead of and after model of the design the use of this method.
Earlier than
That is the format design with out the use of customized margins to increase modules to different columns.
After
That is the format after extending the 2 symbol modules and the 3 textual content modules categorised with the numbers “01”, “03”, and “05”.
The exchange is refined however you must be capable to see the that the modules have prolonged over to occupy the adjoining column. And the one factor had to accomplish this can be a easy margin surroundings of -100%.
And the outcome on pill is much more thrilling.
Working out The Idea
Through default, every Divi module has a width of 100% which means that every module you set in a column will span the total width of the column by which it sits. Gutter width is what Divi makes use of to resolve the quantity of area between every column. So for this educational, it is very important set your Gutter width to one with a view to eliminate that area.
Here’s a demonstration of the way every module spans the total width of a column in a row with a gutter width set to one.
Now, when you upload a unfavorable margin (left or appropriate) to a module, you’ll simply prolong that module to occupy a couple of column. This lets you create customized column layouts in your web page that you could now not have regarded as.
On this representation, you’ll see that via including a -100% left margin to the module within the column 5, it extends the module to the left to occupy each column 5 and column 4.
And one of the most bonuses of the use of the six column format is that the design is preserved on pill effectively.
Additionally, as a result of the best way the columns are ordered from left to appropriate, modules must typically be prolonged to the left in order that the content material is probably not hidden at the back of the column. That is very true you probably have a background colour set. So if run into the issue of module content material being hidden at the back of a column, you’re more than likely extending the module within the mistaken path.
Why Use a Six Column Format?
There are 3 primary causes to make use of a six column format for this design method. The primary explanation why is that it provides you with extra columns to paintings with. The second one explanation why is that six column layouts convert to a 3 column format on pill, which is able to keep the design parts truly neatly. The 3rd explanation why is columns will stay their order on cell so column background colours will keep the similar. That is useful for grid layouts.
This design additionally works with the 1/2 1/6 1/6 1/6 column format and the 1/6 1/6 1/6 1/2 column format since they each will keep the 3 columns on pill as neatly.
Imposing the Design
To show off how this design method works, I’m going to stroll you during the procedure of establishing a easy grid format for that includes merchandise. Then, I’ll display you how you can prolong modules into different columns to create a customized format design.
Putting in your Segment and Rows
To get began, create a brand new web page and deploy the visible builder. Then make a selection “Construct from Scratch”. Then pass forward and upload a 1/2 1/6 1/6 1/6 column format for your first phase.
Then replace the row settings as follows:
Background Colour: #222831
Gutter Width: 1
Equalize Column Heights: YES
Customized Margin: 0px Most sensible, 0px Backside
Customized Padding: 0px Most sensible, 0px Backside
Save Settings.
Since all 3 rows for this design will percentage those row settings. Pass forward a replica the row to create a 2d row. Then exchange the second one row to have a six-column format.
To create the 3rd row, merely reproduction the second one row.
Including Modules to Row 1
Within the first Column of the highest first row, upload a textual content module with the next settings:
Textual content Colour: Mild
Textual content Textual content Measurement: 16px
Customized Padding: 2vw Most sensible, 2vw Backside, 2vw Left, 2vw Proper
In the second one column of the primary row, upload a blurb module with the next settings:
Name: [enter title]
Content material: [delete]
Icon: [choose icon]
Icon Colour: #eeeeee
Icon Font Measurement: 50px
Textual content Colour: Mild
Textual content Orientation: Heart
Customized Padding: 3vw Most sensible, 2vw Backside
Save Settings
Within the 3rd column, upload a picture.
Within the ultimate column, we need to go away it empty in order that we will prolong the picture module over to fill that column as neatly. However we don’t need to go away it utterly empty in order that the column is energetic when stacking on cell. So, the most straightforward factor to do is upload a divider module and make a selection to not display the divider. Then we will disguise the divider for smartphone.
Replace the divider settings as follows:
Display Divider: NO
Disable on: Telephone
Including Modules to the Rows 2 and three
Now let’s transfer directly to Row 2. Within the first column replica and paste the blurb module you created in the second one column of the primary row. Then exchange the icon and identify textual content to a black colour.
Then Upload a Textual content Module to the second one column with the next:
Content material:
<h2>Product</h2> 01
Textual content Textual content Colour: #ffffff
Textual content Textual content Measurement: 50px
Textual content Line Peak: 1em
Textual content Orientation: Proper
Heading 2 Textual content Alignment: Left
Heading 2 Textual content Colour: #ffffff
Heading 2 Line Peak: 3em
Customized Padding: 2vw Most sensible, 2vw Backside, 2vw Left, 2vw Proper
Subsequent Replica the textual content Module you simply created and paste it into column 4 and column 6.
You’ll additionally paste the similar textual content module in column 3, column 5, and column 6 of Row 3. After that you’ll use the inline editor to modify the numbers of every of the textual content modules so you’ll see how those modules stack up on cell in a while.
In column 2 of Row 3, upload any other symbol.
After that fill in the entire empty columns all over your phase with a divider via copying and pasting the divider you created in row 1.
Here’s what your format must appear to be at this level (the empty squares constitute a divider module):
Including Destructive Margin to Lengthen Modules to Different Columns
At this level we will get started extending our modules the use of unfavorable margin. This procedure is very easy to do.
Open the picture module settings for the picture within the first row. Since we need to prolong the picture to the suitable we’re going to upload a -100% appropriate margin.
Subsequent, upload a -100% Left Margin to the Textual content Module in Row 2, column 3.
Now replica the module kinds and paste the ones into the textual content modules in Row 2, column 6 and in addition into the textual content module in Row 3, column 5.
All this is left is to increase the picture in row 3, column 2. Replace the picture module with a customized margin of -100% Left.
Including background Colours for your columns
The ultimate segment of the design is so as to add background colours for your columns. For the primary (most sensible) row upload the next:
Column 1 Background Colour: #393e46
For the second one row, upload the next:
Column 1 Background Colour: #eeeeee
Column 4 Background Colour: #7971ea
Column 5 Background Colour: #393e46
Column 6 Background Colour: #393e46
And for the ultimate row, upload the next:
Column 3 Background Colour: #7971ea
Column 6 Background Colour: #7971ea
That’s it for the desktop design. Now let’s make certain issues are taking a look excellent on cell.
Adjusting the Format for Smartphone Show
At the moment, the present format will glance nice on desktop and pill, however the ones unfavorable margins that we added will want to be adjusted on smartphone.
Most often, if I sought after to mend the unfavorable margin on smartphone, I’d simply set the left margin to 0% inside the module settings for smartphone units. Then again, there’ll nonetheless be an adjustment wanted for display screen sizes between 479px and 767px large. As a result of this, one of the best ways to mend the unfavorable margin on smartphone is to do it with a snippet of customized CSS.
Pass to web page settings and upload the next Customized CSS underneath the Complex Tab:
/** Fixes unfavorable margins on smartphone**/
@media handiest display screen and (max-width: 479px){
.et_pb_module {
margin-left: 0%!vital;
margin-right: 0%!vital;
}
}
What this CSS snippet does is about the suitable and left margin of all modules to 0% each time the display screen measurement is the same as or lower than 479px large. This fixes the issue effectively!
Now let’s take a look at the general design.
Ultimate Ideas
The usage of unfavorable margin to increase modules is usually a handy method to get distinctive format designs on desktop and pill with no need to lodge to a host of CSS to modify Divi’s default column layouts. And one in all my favourite issues about this design method is how stunning the format seems on pill. Optimistically, it is going to turn out to be useful in your subsequent undertaking. If anything else, it all the time is helping to get a deeper working out of Divi.
I stay up for listening to from you within the feedback.
Cheers!
The publish How to Extend Modules to Create Unique Column Layouts in Divi seemed first on Elegant Themes Blog.
WordPress Web Design