Blurb module focus divi: Using presentation icons as aesthetic touches can give your layout a unique design that you might never have thought of. In addition to positioning the icon of a presentation module to cover a text module, you can use the background and border of the text module to style the icon. This creates a nice design accent that frames the content while giving your icons a unique design.
In this tutorial, I’ll show you how to style presentation icons as design accents for your content in Divi.
Blurb module focus divi: Download the sample layouts for this tutorial
To get your hands on the accent pattern layout of the free Blurb module focus divi, you need to download it first using the button below. To have access to the download, you must subscribe to our Divi Daily mailing list using the form below. As a new subscriber, you will receive even more Divi goodness every Monday and a free Divi Layout pack! If you’re already on the list, just enter your email address below and hit download. You will not be “re-registered” or received additional emails.
Getting started with designing from scratch
To get started, create a new page and give your page a title. Then, deploy the Divi builder on the public part system. Add a regular section with a row of one column. Before adding your first module, update the row settings with the following:
Use custom gutter width: YES
Custom gutter width: 1
This will eliminate all custom margins between modules.
Creating the text module
Then add a text module inside the line.
Update the text module with the following filler text:
Styling the text module
Now update the rest of the Text module parameter as follows:
- Background color: #ffffff
- Heading 2 Font: Nunito
- Title 2 Font weight: Bold
- Heading 2 Font style: TT
- Heading 2 Text color: # f24a5b
- Title 2 Text size: 42 pixels (desktop), 32 pixels (tablet), 22 pixels (phone)
- Title 2 Letter Spacing: 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 are going to overlap the text module with presentation icons, we need to make sure that the text module sits above the icons in z-space order. To do this, we first need to add the following CSS snippet in the CSS area of the main element of the Text module:
Then set the z-index value to 1.
Now, this text module will be placed on top of any other overlapping module which is important for the design.
Create the Blurb icon
We are now ready to create the first blurb icon. To do this, we first need to add a Blurb module and drag it to the top of the text module. Then delete the fictitious 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 parameters:
- Icon Color: # 2ea3f2
- Use icon font-size: YES
- Icon Font Size: 100px
- Custom Margin: 0px at the bottom (this removes the default bottom margin between modules; not necessary if using a gutter width of 1)
Then, since we are not using any text with the module (only the icon), we can remove the default bottom margin under the layout icon. To do this, add the following custom CSS code to the Blurb Image CSS area:
Blurb Image CSS.
Duplicate the Blurb Icon
Before we start positioning the blurb, let’s go ahead, duplicate the blurb module and drag it under the text module. You should now have a presentation icon above and below the text module.
Positioning Presentation Icons Using Transform Translate
To position the presentation icons, we will use the Divi transformation options, which allow us to place the presentation module with the icon anywhere 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
However, you can add this depending on the settings you have made.
Read more: How to display animated banners on Divi
Positioning Blurb Icon # 2
Before positioning this presentation icon, let’s make it bigger. To do this, open the settings of the Blurb module and change the font size of the icon to 150px.
Then position the presentation icon by updating the following transformation options:
- Transform translate X axis (desktop): 242px
- Transform translate Y axis (desktop): -100px
- Transform translate X axis (phone): 190px
Creation of another section
From now on, we can take inspiration from what we have done, to create another zone with a different arrangement. All you need to do is create a new column, and copy the previous modules. To perform multiple copies, hover over each module while holding down the CTRL key on your keyboard.
Adding presentation icons as design accents to your content is an example of how two modules can be combined to create a unique design. In this case, the background and border of the text module serve as a partial overlay for the surrounding icons. The result is unique and opens the door to the exploration of several design variations. Feel free to explore different icons and color combinations to create something for your own needs.
For website maintenance service contact us.