The usage of blurb icons as design accents can provide your web page structure a singular design that you will have by no means considered earlier than. Along with positioning the icon of a blurb module to overlap a textual content module, you’ll use the textual content module background and border to taste the icon. This creates a pleasing design accessory that frames the content material whilst giving your icons a fully distinctive design.
On this instructional, I’m going to turn you find out how to taste blurb icons as design accents in your content material in Divi.
Let’s dive in!
Sneak Peek
Listed below are a couple of examples of the design we can construct on this instructional.
Obtain the Instance Layouts for this Instructional
To put your palms at the unfastened blurb module accessory designs structure, you’ll first wish to obtain it the use of the button under. To realize get admission to to the obtain it is very important subscribe to our Divi Day by day e-mail listing by way of the use of the shape under. As a brand new subscriber, you’ll obtain much more Divi goodness and a unfastened Divi Format pack each Monday! If you happen to’re already at the listing, merely input your e-mail deal with under and click on obtain. You’ll no longer be “resubscribed” or obtain further emails.
@media handiest display and ( max-width: 767px ) {.et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_right .et_bloom_form_content:earlier than, .et_bloom .et_bloom_optin_1 .carrot_edge.et_bloom_form_left .et_bloom_form_content:earlier than { border-top-color: #ffffff !essential; border-left-color: clear !essential; }
}.et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_fields i { shade: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_content .et_bloom_custom_field_radio i:earlier than { background: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_border_solid { border-color: #f7f9fb !essential } .et_bloom .et_bloom_optin_1 .et_bloom_form_content button { background-color: #f92c8b !essential; } .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container h2 robust { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; }.et_bloom .et_bloom_optin_1 .et_bloom_form_container p, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p span, .et_bloom .et_bloom_optin_1 .et_bloom_form_container p robust, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape enter, .et_bloom .et_bloom_optin_1 .et_bloom_form_container shape button span { font-family: “Open Sans”, Helvetica, Arial, Lucida, sans-serif; } p.et_bloom_popup_input { padding-bottom: 0 !essential;}
Obtain For Unfastened
Sign up for the Divi Newlsetter and we can e-mail you a duplicate of without equal Divi Touchdown Web page Format Pack, plus lots of different superb and unfastened Divi sources, guidelines and tips. Practice alongside and you’ll be a Divi grasp very quickly. If you’re already subscribed merely kind on your e-mail deal with under and click on obtain to get admission to the structure pack.
You will have effectively subscribed. Please test your e-mail deal with to verify your subscription and get get admission to to unfastened weekly Divi structure packs!
Getting Began with Development the Design From Scratch
To get began, create a brand new web page and provides your web page a identify. Then deploy the Divi builder at the entrance finish. Upload an ordinary phase with a one-column row. Earlier than including your first module, replace the row settings with the next:
Use Customized Gutter Width: YES
Customized Gutter Width: 1
This will likely eliminate any customized margins between modules.
Growing the Textual content Module
Subsequent upload a textual content module within the row.
Replace the textual content module with the next filler textual content:
Our Products and services
Your content material is going right here. Edit or take away this newsletter inline or within the module Content material settings.
Styling the Textual content Module
Now replace the remainder of the Textual content module surroundings as follows:
Background Colour: #ffffff
- Heading 2 Font: Nunito
- Heading 2 Font Weight: Daring
- Heading 2 Font Taste: TT
- Heading 2 Textual content Colour: #f24a5b
- Heading 2 Textual content Dimension: 42px (Desktop), 32px (pill), 22px (telephone)
- Heading 2 Letter Sp[acing: 16px
- Heading 2 Line Height: 1.3em
- Width: 500px (desktop), 490px (tablet)
- Module Alignment: center
- Custom Padding (desktop): 40px top, 40px bottom, 50px left, 50px right
- Custom Padding (phone): 20px left, 20px right
- Border Width: 10px
- Border Color: #ffffff
Since we will be overlapping the text module with blurb icons, we need to make sure the text module sits above the icons in z-space order. To do this we must first add the following snippet of CSS to the Text module Main Element CSS box:
position: relative;
Then set the z-index value to 1.
Now this text module will sit above any other overlapping modules which is important to the design.
Creating the Blurb Icon
Now we are ready to create the first blurb icon. To do that we must first add a blurb module and drag it to the top of the text module. Then delete the mock content (the title text and body text) and Click to use an icon instead of an image for the blurb.
Then update the following design settings:
- Icon Color: #2ea3f2
- Use Icon Font Size: YES
- Icon Font Size: 100px
- Custom Margin: 0px bottom (this takes out the default bottom margin between modules; not necessary if you are using a row gutter width of 1)
Next, since we aren’t using any text with the module (only the icon), we can get rid of the default bottom margin under the blurb icon. To do this, add the following custom CSS to the Blurb Image CSS box:
Blurb Image CSS:
margin-bottom: 0px
Duplicate the Blurb Icon
Before we start positioning the blurb, let’s go ahead and duplicate the blurb module and drag the duplicate under the text module. You should now have a blurb icon above and below the text module.
Positioning the Blurb Icons Using Transform Translate
To position the blurb icons, we are going to use Divi’s transform options which allow us to place the blurb module with the icon anywhere we want on the page.
Positioning Blurb Icon #1
To position the top blurb icon, open the blurb module settings and update the following:
- Transform Translate X-axis (desktop): -242px
- Transform Translate Y-axis (desktop): 50px
- Transform Translate X-axis (phone): -170px
Positioning Blurb Icon #2
Before we position this blurb icon, let’s make it a bit larger. To do this, open the blurb module settings and change the Icon Font Size to 150px.
Then position the blurb icon by updating the following transform options:
- Transform Translate X-axis (desktop): 242px
- Transform Translate Y-axis (desktop): -100px
- Transform Translate X-axis (phone): 190px
Creating the Two Column Row
To create the next column, duplicate the existing row and change the row’s column layout to a two-column layout (1/2 1/2).
Next, use Divi’s multiselect feature to select the all three modules in the left column and then copy and paste them over into the second column.
Then, delete the bottom blurb icon in column one.
Aligning the Blurb Icons in Column 2
For the Blurb Icons in column 2, we need to shift the top icon to the left and the bottom icon to the right. We can do this simply by changing the Transform Translate X-axis value.
Open the blurb module settings for the top blurb module in column 2 and update the following:
- Transform Translate X-axis (desktop): 242px
- Transform Translate X-axis (phone): 170px
Basically all you are doing is changing these values from a negative to a positive to shift it in the opposite direction along the x-axis.
Next, update the transform translate value for the bottom blurb module in column 2 as follows:
- Transform Translate X-axis (desktop): -242px
- Transform Translate X-axis (phone): -190px
Update Text Module Styles in Second Row
The second row of content serves as a subset of featured services. Therefore, we want the title font size to be different and smaller than our header. To update the two text modules at the same time, use multiselect to select both of the text modules. Then update the following:
Change the h2 heading content to read “Service”.
- Heading 2 Text Size: 28px (desktop), 22px (tablet), 18px (phone)
Save Settings.
Now open the settings modal for the text module in column 2 and update the following:
- Text Orientation: Right
Adjusting the Spacing of the Layout
Right now there is probably a bit too much white (or negative) space between the two rows of content. To take away some of that space, we can add a negative bottom margin to the bottom blurb module in the top row as follows:
- Custom Margin: -100px bottom
Final Result
Now let’s take a look at the final result.
Trying out Other Icons
To try out different icons for your layout, you can use the find and replace feature. Open the blurb settings for one of the blurbs containing your icon. Then right click on the icon in the settings modal and select Find & Replace.
In the Find & Replace popup, update the following:
- Within: This Section
- Replace With: [select new icon]
After that, click on the change button.
This will likely exchange the entire blurbs on your phase with a brand new one.
Listed below are some examples of the structure the use of other icons.
Ultimate Ideas
Including blurb icons as design accents in your content material is an instance of the way two modules will also be blended to create a fully distinctive design. On this case, the textual content module background and border is serving as a partial overlay for the encompassing icons. The result’s distinctive and opens the door for exploring extra design diversifications. Be happy to discover other icons and shade mixtures to create one thing in your personal wishes.
I look ahead to listening to from you within the feedback.
Cheers!
The submit How to Style Blurb Icons as Design Accents for Content in Divi seemed first on Elegant Themes Blog.
WordPress Web Design