With the arriving of Divi’s new phase dividers, growing shocking web sites with out additional CSS code has change into extremely simple. Via default, phase dividers are used to create sublime transitions to your sections. However you’ll use phase dividers for different functions as neatly. In a prior put up, How to Create Background Textures with Divi’s Section Dividers, for example, we’ve used sections to support the design of the phase itself as a substitute of that specialize in transitioning to different sections.
On this two-part put up, we’re going to turn you any other nice method to the usage of phase dividers, with no need to make use of any further CSS code. On this first section, we’re going to concentrate on making use of phase dividers not directly to rows. In the second one section, we’ll upload phase dividers to modules.
Let’s get to it!
Preview
Prior to we dive into the educational, let’s take a snappy take a look at what you’ll visually be expecting from this weblog put up instructional on other display sizes:
Manner
- We’ll use 3 other phase divider types that you’ll observe to this design
- We’ll get started off through growing all the design from scratch, afterwards you’ll make a selection the divider taste of your selection and observe it
- As discussed within the name and creation, we’re not directly making use of those phase dividers to our row
- Which means that the phase dividers will nonetheless be a part of the phase settings, now not the row settings
- On the other hand, to make it appear adore it’s a part of the row, we’ll use the similar colour for each the divider and the phase background colour
- That means, the divider will mix in with the background colour at first of your phase and can most effective display as soon as involved with any other background colour
- We’ll additionally make the divider seem beneath phase content material
- This will likely make sure that the peak of your divider doesn’t overlap modules you’ve added for your row
Upload New Phase
Background Colour
Create a brand new web page or open an current one. Then, upload an ordinary phase, open its settings and upload ‘#3c3163’ because the background colour.
Most sensible Divider #1
Open the Design tab subsequent and upload a best divider for your phase. As discussed within the ‘Manner’ phase of this put up, you’ll surely want to use the similar colour for the divider and the phase background. That means, the divider received’t display up within the phase itself:
- Divider Taste: In finding in Listing
- Divider Top: 600px (Desktop), 400px (Pill & Telephone)
- Divider Association: Beneath Phase Content material
Spacing
We’ll additionally upload some further house on the best and backside of our phase through including ’80px’ to those padding choices.
Upload New Row
Column Construction
If you’re completed enhancing the phase settings, upload a row with the next column construction:
Background Colour
Prior to including any modules, open the row settings and use ‘#00cef7’ because the background colour.
Sizing
Cross to the Design tab subsequent and observe the next adjustments to the Sizing subcategory:
- Make This Row Fullwidth: Sure
- Equalize Column Heights: Sure
Spacing
We’ll want a best padding of ’28px’ as neatly.
Field Shadow
And finally, we’ll allow the primary field shadow possibility with out enhancing any of its default settings (however after all, you’ll, if you wish to).
Upload Empty Textual content Module for Circle to Column 1
Go away Content material Field Empty
We will now get started including our modules. We’ll get started with column 1. The primary module we’ll want to upload is an empty Textual content Module.
Background Colour
Open the Background subcategory and use ‘rgba(134,89,248,0.67)’ because the background colour of this module.
Spacing
We’ll make this empty Textual content Module overlap our row and phase through the usage of some customized margin. We’ll additionally create a form the usage of best padding:
- Most sensible Margin: -200px
- Proper Margin: 300px
- Left Margin: -300px
- Most sensible Padding: 600px
Border
To create a circle out of this form, we’ll additionally want to upload ‘500px’ to every some of the corners inside the Border subcategory.
Field Shadow
Finally, and completely relying for your choice, you’ll upload a field shadow to this form as neatly.
Upload Name Textual content Module to Column 1
Textual content Settings
Proper beneath the empty Textual content Module, upload any other Textual content Module containing your name. Cross to the Design tab and observe the next textual content settings to it:
- Textual content Font Weight: Extremely Daring
- Textual content Font Taste: Uppercase
- Textual content Colour: #ffffff
- Textual content Dimension: 82px (Desktop), 60px (Pill), 45px (Telephone)
- Textual content Line Top: 1em
- Textual content Orientation: Middle
Spacing
We’ll overlap this module and the former empty Textual content Module through including ‘-300px’ to the highest margin of the name Textual content Module.
Upload Description Textual content Module to Column 1
Textual content Settings
Proper beneath the name Textual content Module, we’ll upload an outline Textual content Module as neatly containing the next textual content settings:
- Textual content Font Weight: Mild
- Textual content Colour: #ffffff
- Textual content Orientation: Middle
Sizing
We’ll modify the Width of this description Module to ‘60%’ and use middle Module Alignment as neatly.
Spacing
Finally, to create some house between the name Textual content Module, the row and the outline Textual content Module, we’ll upload the next customized margin:
- Most sensible Margin: 50px
- Backside Margin: 100px (Desktop), 0px (Pill & Telephone)
Upload Symbol Module to Column 2
Add Symbol
We’ve got the entire modules we want within the first column. The one module we want in the second is an Symbol Module. We’ve uploaded a loose representation which you’ll obtain through going to the Digital Payments Layout Pack blog post, scrolling down and downloading the picture belongings.
Spacing
We’ll upload some best padding to this Symbol Module as neatly:
- Most sensible Margin: 100px (Desktop), 50px (Pill & Telephone)
Phase Divider #2
Exchange Divider Taste
You’ll be able to observe any phase divider to this design. Within the preview, we’ve shared 3 best dividers that glance nice in this design. The primary one was once implemented all over the overall steps of this put up, however you’ll simply trade it to the next divider taste:
Exchange Divider Top
On the other hand, the Divider Top for various display sizes adjustments quite for it:
- Divider Top: 600px (Desktop), 500px (Pill), 400px (Telephone)
End result
Phase Divider #3
Exchange Divider Taste
Did you like the 3rd divider taste that was once proven within the preview phase? In finding it inside of your Divider Kinds:
Exchange Divider Top
This divider comprises the next Divider Top on other display sizes:
- Divider Top: 600px (Desktop), 500px (Pill), 400px (Telephone)
End result
Preview
Now that we’ve long gone via the entire steps, and implemented other phase divider types to it, let’s take a last take a look at the end result on other display sizes:
Ultimate Ideas
That was once it for section one in every of this put up! We’ve created a shocking consequence the usage of phase dividers in an oblique means. The principle factor to bear in mind about this put up is that you just’ll want to use the similar colour to your divider and phase background. In the second one a part of this put up, we’ll display you how one can not directly observe phase dividers to modules. If in case you have any questions or ideas, remember to depart a remark within the remark phase beneath!
The put up How to Indirectly Apply Divi Section Dividers to Your Design (Part 1: Rows) gave the impression first on Elegant Themes Blog.
WordPress Web Design