Including one-sided field shadows to quite a lot of design parts in Divi is a delicate approach so as to add an inventive flourish with out distracting from the content material. On this educational, I’m going to turn you easy methods to upload one-sided field shadows to Divi’s Remedy FAQ Web page Structure. As an advantage tip, I’ll additionally display you easy methods to mix blurb icons as a vertically focused graphic. Via studying those Divi design ways, you’ll be able to upload one-sided field shadows to any modules or columns you need.
Let’s get began.
Sneak Peek
Here’s a sneak peek of the FAQ Structure design we can construct the use of one-sided field shadows.
Getting Began
To get began, it is important to create a brand new web page. Out of your WordPress Dashboard, navigate to Pages > Upload New. Then give your web page a identify and deploy the visible builder. Make a selection the choice “Select a Premade Structure”. From the Load from Library popup, to find and make a choice the Therapist Structure Pack. Then make a choice the Therapist FAQ Web page Structure and click on “Use this Structure”.
Now you’re ready to begin designing.
Section 1: Organizing the Structure
On this premade structure, we can center of attention our consideration on the second one segment containing the mock questions within a couple of toggle modules. For starters, let’s trade the column structure of the row to 3 columns (1/3 1/3 1/3).
Subsequent, transfer the entire modules in column 2 over to column 3 the use of Divi’s Multiselect characteristic. To do that, dangle down Command (or Keep an eye on) and click on on each and every module in column 2 till all are decided on. Then drag them over to column 3.
Now we wish to give our row a bit of extra space. Open the row settings and replace the next:
Width: 80%
Gutter Width: 2
Equalize Column Heights: YES
Section 2: Designing the Toggle Modules
To customise the design of all of the toggle modules on this segment immediately, use the Multiselect characteristic to choose each and every of the toggle modules. As soon as all are decided on, open the settings for any one of the most toggle modules.
Then replace the next:
Open Toggle Textual content Colour: #ffffff
Open Toggle Background Colour: rgba(0,0,0,0)
Closed Toggle Textual content Colour: #ffffff
Closed Toggle Background Colour: rgba(0,0,0,0)
Frame Textual content Colour: #ffffff
Customized Padding: 3vw Most sensible, 3vw Backside, 2vw Left, 2vw Proper
Now we will be able to upload a field shadow at the left facet of our toggle module by way of updating the field shadow choices as follows:
Field Shadow Horizontal Place: -30px
Field Shadow Vertical Place: 0px
Field Shadow Blur Power: 40px
Field Shadow Unfold Power: -35px
Shadow Colour: rgba(0,0,0,0.4)
The trick to getting the field shadow located as it should be is to transport the shadow to the left by way of environment the horizontal place to -30px. After that, you want to seek out the correct stability of blur power and unfold power so as stay the field shadow visual at the left with out it bleeding out onto the highest and backside of the module.
Save Settings.
Now your whole toggle modules were up to date with the brand new design.
On the other hand, we wish the field shadow of the toggle modules in the correct column to be located at the proper facet (now not the left). To switch this, use Multiselect to choose all of the toggle modules in the correct column and open the part settings. Then trade the horizontal place from -30px to 30px as follows:
Field Shadow Horizontal Place: 30px
Then save settings.
That looks after our toggle modules with their distinctive one-sided field shadows. Now we wish to upload an identical one-sided field shadows to our columns.
Section 3: Including One-Sided Field Shadows to Columns
So as to add one-sided field shadows to columns, we can wish to upload a couple of snippets of CSS underneath the complex tab of the row settings.
Open the row settings and click on the complex tab. Throughout the Column 1 Major Component, upload the next CSS:
box-shadow: 30px 0px 70px -45px rgba(0,0,0,0.4)
When you aren’t accustomed to CSS, you will have to be capable of acknowledge the similarity of the code with the field shadow module settings to be had within the Divi builder. Within the above code…
30px is the price for the horizontal place
0px is the price for the vertical place
70px is the price for the blur power
-45px is the price for the unfold power
rgba(0,0,0,0.4) is the shadow colour
I gave the column field shadow a bigger blur power than the toggle modules to create a rather larger intensity.
In an effort to upload a left field shadow to Column 3, It is important to upload the next CSS to Column 3 Major Component:
box-shadow: -30px 0px 70px -45px rgba(0,0,0,0.4)
Once more, the one distinction between this CSS and the only used for column 1 is the destructive horizontal place.
Section 4: Including Blurb Icons to Column 2
Now that our one-sided field shadows are entire, we have now an empty center column the place we will be able to mix a couple of blurb module icons to create a easy graphic design. To do that, first upload a blurb module and delete the identify and content material. Then click on to make use of an icon and make a choice the next chat icon.
Then replace the design settings as follows:
Icon Colour: rgba(203,241,252,0.37)
Icon Font Measurement: 20vw
Customized Margin: 0px Backside
Subsequent, replica the blurb module to create an extra one beneath.
Then replace the highest blurb with a query mark icon and replace the next design settings:
Icon Font Measurement: 9vw
Width: 40%
Module Alignment: Proper
Customized Margin: -2vw
In the end, replica the query mark blurb module you simply designed and paste it underneath the huge chat icon blurb module. Then replace the design settings for that blurb module as follows:
Section 5: Vertically Centering the Modules in Column 2
To complete off the design, we wish to vertically middle the blurb icons in column 2 in order that they continue to be a focused design part for our structure. To perform this we’re going to capitalize of Divi’s use of flex. As a result of we decided on to equalize column heights for our row, we will be able to use a easy snippet of CSS to middle all modules inside column 2. You’ll at all times be told extra about how to vertically align content in Divi at your comfort. However for now, open the row settings and click on the complex tab. Then input the observe css throughout the Column 2 Major Component:
margin: auto
Now all of the blurb modules can be vertically focused inside column 2.
To make issues more straightforward at the eyes, pass forward a middle the textual content on each and every of the textual content modules sitting on the most sensible of column 1 and column 2. Then upload a background gradient to the segment as follows:
Background Gradient Left Colour: #616ce1
Background Gradient Proper Colour: #3846e0
That’s it. Now the design is entire.
Take a look at the overall end result.
And, realize how the field shadow expands and contracts when opening and shutting the toggles.
Ultimate Ideas
Including one-sided field shadows to modules and columns can provide your content material intensity in inventive techniques. The trick is to understand how to regulate Divi’s field shadow design settings successfully. This FAQ web page structure is simply one of the most many examples you’ll be able to incorporate this design. However the general procedure is slightly easy and will have to be a pleasing methodology you’ll be able to stay on your design toolbox for long term initiatives.
I sit up for listening to from you within the feedback.
Cheers!
The submit How to Add One-Sided Box Shadows to Design Elements in Divi gave the impression first on Elegant Themes Blog.
WordPress Web Design