You’ll be able to mainly practice a background symbol to the rest throughout the Divi Builder. Whether or not it’s a piece, row, column or module, the probabilities are unending. And with mix modes, you’ll be able to even make background pictures display thru selectively. This permits you to make modules to hook up with each and every different on every other stage. The place one module stops, the opposite module takes over. They don’t behave as separate components anymore however, as an alternative, allow you to get a view of the total design.
On this instructional, we’re going to turn you, step-by-step, how you’ll be able to attach modules with each and every different through making a piece background display in the course of the field shadow of your modules.
Let’s get to it!
Preview
Sooner than we dive into the academic, let’s take a snappy take a look at the what we’ll recreate inside this instructional on other display screen sizes.
Way
- This way most effective works most effective when the use of a white background colour to your row & Textual content Modules
- We’re the use of mix modes to make portions of the phase background symbol seem
- The 2 mix modes that permit this (together with a white row background colour) are Display & Onerous Mild
- To hide up all the phase background, we’re making the row soak up the whole width of the display screen through converting the Sizing choices
- To eliminate the phase background symbol on the best and backside, we’ll additionally take away the entire best and backside padding of our phase
- Either one of those mix modes give a unique impact (as much as you to make a choice which one you like)
- We’re the use of coloured field shadows that’ll permit portions of the phase background symbol to turn thru
- You’ll be able to practice this way to any module you wish to have (should you give it a white background + coloured field shadow)
Upload a New Segment
Background Symbol
Let’s get started through including a brand new phase to a brand new or current web page. The very first thing you’ll wish to do inside your phase settings is importing a background symbol.
Spacing
Then, transfer directly to the Design tab and practice ‘0px’ to each the highest and backside padding of your phase throughout the Spacing settings. This will likely eliminate the gap between your phase and the row you’re about so as to add within the subsequent section.
Upload a New Row
Column Construction
Proceed through including a row with the next column construction in your phase:
Background Colour
As discussed within the way of this weblog put up, you’re going to for sure wish to give your row a white background if you wish to have it to paintings.
Sizing
We’re additionally eliminating the phase background symbol that presentations up at the left and proper facet of your row through the use of the next Sizing choices:
- Make This Row Fullwidth: Sure
- Use Customized Gutter Width: Sure
- Gutter Width: 1
Spacing
We’ve got rid of the entire best and backside padding of our phase. We do, on the other hand, want some house ahead of and after our modules display up, that’s why we’ll upload ‘150px’ to the highest and backside padding of the row as an alternative.
Mix Mode
Each the ‘Display’ and ‘Onerous Mild’ Mix Modes will make this design paintings. We’ll get started with the ‘Display’ Mix Mode which you’ll be able to permit within the Clear out choices of your row settings.
Upload Textual content Module to Column 1
Background Colour
Now that we’ve changed our phase and row settings, it’s time to start out including the modules we’d like. We’re going to want 3 Textual content Modules in overall, one for each and every column. We’ll get started with the primary Textual content Module in column 1 and adjust it. Afterwards, we will clone it, position it in the remainder columns and make small tweaks to it. Upload your Textual content Module and use a white background colour for it. You’ll be able to’t use another colour as it’ll make your phase background symbol display.
Textual content Environment
Then, practice the next Textual content settings in your Textual content Module:
- Textual content Font Weight: Extremely Daring
- Textual content Font Taste: Uppercase
- Textual content Colour: Black (this may occasionally make the phase background symbol display thru your textual content)
- Textual content Letter Spacing: 2px
- Textual content Orientation: Heart
Sizing
We’ve got rid of the default Gutter Width of our row which eliminates the entire house between our modules. We do wish to create some house between them with out messing with the row’s duration. That’s why we’ll adjust the Sizing settings of our Textual content Module as an alternative:
- Width: 80%
- Module Alignment: Left
Spacing
And to make the design extra interesting, we’ll additionally upload some padding to our Textual content Module:
- Best & Backside Padding: 130px
- Left & Proper Padding: 32px
Field Shadow
The very last thing we’ll wish to do with this Textual content Module is including a Field Shadow. That is the place the magic occurs. The Field Shadow will permit your phase background to turn thru should you’re the use of any colour however white. We’re the use of the next settings:
- Field Shadow Blur Power: 0px
- Field Shadow Unfold Power: 100px
- Field Shadow Colour: #5d00ff
Clone Textual content Module Two times
Position in Column 2
Trade Module Alignment
Now cross forward and clone your Textual content Module two times and position it in the remainder columns. We’ll get started through making some adjustments to the Textual content Module this is situated in column 2. Trade the Module Alignment within the Sizing settings to middle.
Trade Spacing
We’ll additionally create some distinction in top for our module through including the next best margin to it:
- Best Margin: 100px (Desktop), 200px (Pill & Telephone)
Trade Field Shadow Colour
Finally, we’ll trade our Field Shadow Colour to ‘#00d3b3’.
Position in Column 3
Trade Module Alignment
The Textual content Module in column 3 will want a proper Module Alignment as an alternative.
Trade Spacing
We’ll additionally upload ‘200px’ to the Best Margin (for all display screen sizes.)
Trade Field Shadow Colour
And the Field Shadow Colour for this final Textual content Module is ‘#af0020’.
Clone Segment
Trade Segment Background Symbol
As discussed within the way of this weblog put up, you’ll be able to use every other Mix Mode as smartly known as ‘Onerous Mild’. Clone the phase you’ve created within the earlier a part of this put up and alter its background symbol.
Trade Row Mix Mode
Then, open your row settings and alter the Mix Mode to ‘Onerous Mild’.
Trade Field Shadow Colour #1
You’ll be able to use whichever colours you wish to have for the field shadows of your Textual content Modules so long as they’re now not white. We’ve used ‘rgba(224,43,32,0.26)’ for the primary Textual content Module.
Trade Field Shadow Colour #2
Open the Textual content Module in the second one column subsequent and alter the Field Shadow Colour to ‘rgba(131,0,233,0.26)’.
Trade Field Shadow Colour #3
The final Textual content Module makes use of ‘rgba(12,113,195,0.26)’.
Preview
Now that we’ve long past thru all of the steps, let’s take a last take a look at the end result on other display screen sizes.
Ultimate Ideas
On this instructional, we’ve proven you find out how to make phase background pictures selectively display thru, relying for your modules’ place. This way creates extra connection between modules. When one in every of them stops, the opposite takes over. You probably have any questions or tips, remember to go away a remark within the remark phase under!
The put up How to Make Your Section Background Image Selectively Show Through with Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design