Divi permits you to create summary strains in many alternative tactics the usage of the Visible Builder. Dividers, Borders, Background Gradients, and Field Shadows all have the choices you want. And for those who get a bit inventive with the spacing, you’ll use a mix of these types of components to border your content material in inventive tactics.
On this educational, I’m going to turn you learn how to simply become a bit of your format into a novel design the usage of strains.
Sneak Height
Here’s a sneak peek of the design we can be development.
Design Inspiration
The muse at the back of this design got here from Divi’s Cryptocurrency Format Pack. The About web page format includes a distinctive design with header background symbol of connecting strains that continues down the web page to divide the 2 column grid format proper down the center. So I determined to discover the idea that of the usage of Divi so as to add strains that body the content material just a little extra and upload a bit flare to the entire design.
The principle spotlight of this design is the usage of the Divider Module. I came upon the Divider module isn’t restricted to making horizontal strains with a unmarried colour. In truth, with a couple of tweaks, you’ll create vertical strains with background gradients as smartly!
All You Want is Divi
The one factor you’ll want for this educational is Divi. I can be the usage of the Cryptocurrency About Web page Format to give you the base of our design. Then I can be customizing the settings of sections, rows, and modules to finish the design
Upload Traces along with your Phase Borders
First issues first. Cross forward and create a brand new web page and import the Cryptocurrency About Web page Format the usage of the Visible Builder.
The point of interest of this educational might be on the second one 2nd (the only proper beneath the fullwidth header).
Upload Phase Borders
As you might know already, sections span the whole width of your web page via default. So, a 2px border at the left and proper of a bit could be rarely noticable. However for those who come up with phase a customized width, the ones borders will become visible.
Cross to the phase settings and replace the phase phase settings as follows:
Width: 90%
Phase Alignment: Middle
Proper Border Width: 4px
Proper Border Colour: #332faf
Left Border Width: 4px
Left Border Colour: rgba(237,240,0,0.51)
Now don’t concern, the customized width of the phase will fallback to 100% on cellular.
Upload Content material Space Background Colour
At the moment, the content material house background colour is white so you’ll see it uncovered on every aspect of your phase. This can also be modified via going on your web page settings and assigning the similar darkish colour for the Content material Space background to compare the phase background.
Content material Space Background Colour: #101535
Upload Traces to Your Row
Now let’s replace the Row settings to create some further line designs.
Upload Traces The usage of Column Background Gradients
With a view to upload a line to our columns, we will use a bit trick with our gradient background so as to add a skinny gradient department at the aspect of every of our columns. To do that replace the next:
Column 1 Background Gradient Left Colour: rgba(255,255,255,0)
Column 1 Background Gradient Proper Colour: rgba(237,240,0,0.34)
Column 1 Gradient Course: 90deg
Column 1 Get started Place: 99.5%
Column 1 Finish Place: 0%
Column 2 Background Gradient Left Colour: rgba(51,47,175,0.51)
Column 2 Background Gradient Proper Colour: rgba(255,255,255,0)
Column 2 Gradient Course: 90deg
Column 2 Get started Place: 99.5%
Column 2 Finish Place: 0%
Give Row a Customized Width
Since we gave our phase a customized width, we want to give our row a customized width to create more space for our design components. Set the width of the row to 90%.
Upload Borders on your Row
So as to add borders on your row, replace the next:
Left Border Width: 2px
Left Border Colour: rgba(237,240,0,0.56)
Proper Border Width: 2px
Proper Border Colour: #332faf
Spacing
We additionally want to alter the spacing of our row to assist get a divorce the alignment of the strains we can be including with our modules. To do that, replace the next:
Customized Padding: 10% Best
Column 1 Customized Padding: 5% Backside, 3% Left, 3% Proper
Column 2 Customized Padding: 3% Proper, 3% Left
Upload Borders to the Textual content Modules
Subsequent, we’re going to upload some borders to our modules for added line designs.
For the picture module within the left column, replace the next settings:
Width: 62% (this will likely give us extra spacing and assist get a divorce our line alignment)
Left Border Width: 4px
Left Border Colour: rgba(67,40,183,0.53)
In the appropriate column, replace the highest textual content module with the heading with some spacing and a left border.
Then, upload some spacing and a proper border to the second one textual content module in the appropriate column (the only with the dummy textual content) as follows:
Customized Margin: 5% Best, 5% Proper
Customized Padding: 5% (most sensible, backside, left, proper)
Proper Border Width: 2px
Proper Border Colour: #332faf
Upload Borders, Background Gradient and Field Shadow to the Button
This design part is most likely my favourite of all. We’re going to upload line components to taste and body the button the usage of borders, a background gradient, and a field shadow.
First let’s upload a left border to the button the usage of the next background gradient:
Button Background Gradient Left Colour: #edf000
Button Background Gradient Proper Colour: rgba(255,255,255,0)
Gradient Course: 90deg
Get started Place: 1%
Finish Place: 0%
Now we building up the border measurement and alter the colour to compare the phase background in order that it creates some area for our field shadow:
Button Border Width: 24px
Button Border Colour: #101535
Upload some spacing to present out button textual content some respiring room:
Customized Padding: 1em Best, 1em Backside
Now for our field shadow to border the ground proper nook of the button:
Field Shadow Horizontal Place: 2px
Field Shadow Vertical Place: 2px
Shadow Colour: #332faf
Field Shadow Place: Outer Shadow
Upload Traces with Customized Dividers
That is the place issues get just a little attention-grabbing. We will upload dividers anyplace we wish to our web page. The trick is to make use of the divider background gradients to create a novel design.
First, let’s upload a divider proper above the picture module within the left column of our row. Then replace the next settings:
Button Background Gradient Left Colour: #edf000
Button Background Gradient Proper Colour: rgba(255,255,255,0)
Gradient Course: 90deg
Get started Place: 1%
Finish Place: 0%
Colour: #edf000
Divider Weight: 2px
Peak: 2px
Customized Padding: 80% Left
The Customized Padding pushes the border colour to the appropriate and exposes the background gradient to create a novel impact.
Now Replica the Module and paste it to the highest of the appropriate column and likewise immediately beneath the textual content module with the heading (changing the only lately there).
Here’s what it looks as if to this point.
Upload Vertical Divider Traces
This remaining section will upload the overall touches to the design via introducing some additional vertical strains that bleed up into the phase.
To do that, we want to create a brand new row with 4 columns and replace the row settings as follows:
Customized Width: 95%
Customized Padding: 0px Best, 0px Backside
Then replace the Customized Padding for the entire pill presentations…
Column 1 Padding (pill): 20% Proper
Column 2 Padding (pill): 15% Proper
Column 1 Padding (pill): 30% Proper
Column 1 Padding (pill): 20% Left
This may occasionally offset the vertical dividers (no longer added but) when the columns stack on cellular presentations.
Now we’re in a position so as to add our divider modules.
Upload a divider module within the first column and replace the next settings:
Display Divider: NO
Background Gradient Left Colour: rgba(255,255,255,0)
Background Gradient Proper Colour: #edf000
Peak: 100px
Width: 2px
Module Alignment: Proper
Customized Margin (desktop): -300px Best, 300px Backside
Customized Margin (pill): 0px Best, 0px Backside
Now reproduction that module you simply created and upload it to the second one column. Then replace the next:
Background Gradient Left Colour: #edf000
Background Gradient Proper Colour: #332faf
Finish Place: 40%
Peak: 300px
Module Alignment: heart
Subsequent, reproduction and paste the divder within the first column over to the 3rd column and replace the next:
Module Alignment: heart
Customized Margin (desktop): 0px
Customized Margin (pill): -200px Best
Now reproduction that module in the second one column and paste it to the fourth column and replace the next:
Background Gradient Left Colour: #332faf
Background Gradient Proper Colour: #edf000
Finish Place: 100%
Peak: 200px
Customized Margin (pill): -200px Best
That’s it. Take a look at the overall end result.
And here’s what it looks as if on pill and smartphone…
No longer Sufficient Traces?
You’ll at all times upload much more strains on your web page simply via including field shadows to every of your divider modules. This may occasionally assist you to position strains mainly anyplace you wish to have. The trick is to set your field shadow place to outer shadow, pick out the colour you wish to have after which place it anyplace at the web page.
Glance what including a field shadow to the highest divider module in the appropriate column would appear to be…
Ultimate Ideas
When development out the design, my preliminary purpose used to be to discover the entire conceivable tactics so as to add strains to a bit in one in every of Divi’s premade layouts. I discovered that there are fairly a couple of!
And with the versatile design choices introduced within the divider module, the chances turn into reputedly unending.
Confidently, this submit gave you a couple of extra gear for your design toolbox that can assist you maximize Divi in superb new tactics.
I look ahead to listening to from you within the feedback.
The submit How to Design Abstract Lines to Frame Your Content in Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design