Divi: the easiest WordPress theme to use
Are you looking for the best WordPress themes and plugins?
Download the best plugins and WordPress themes on Envato and easily create your website. Already more than 49.720.000 downloads. [EXCLUSIVE]
The use of presentation icons as aesthetic touches can give your layout a unique design that you may never have thought of. In addition to positioning a presentation module icon to overlay a text module, you can use the background and border of the text module to stylize the icon. This creates a nice design accent that frames the content while giving your icons a totally unique design.
In this tutorial, I will show you how to stylize presentation icons as design accents for your content in Divi.
Here are some examples of the design we will build in this tutorial.
Download the sample layouts for this tutorial
To get your hands on the layout of accent patterns of the free blurb module, you must first download it using the button below. To access the download, you must subscribe to our Divi Daily mailing list using the form below. As a new subscriber, you will receive every Monday even more Divi goodness and a free Divi Layout pack! If you are already on the list, simply enter your email address below and click Download. You will not be "re-registered" or received additional emails.
Start with the design from scratch
To start, create a new page and give a title to your page. Then, deploy the Divi constructor on the public part system. Add a regular section with a row of a column. Before you add your first module, update the line parameters with the following:
Use the custom gutter width: YES
Custom Gutter Width: 1
This will eliminate any custom margins between modules.
Creating the text module
Then add a text module inside the line.
Update the text module with the following fill text:
Divi: The best WordPress theme of all time!
With over 600.000 downloads, Divi is the most popular WordPress theme in the world. It is complete, easy to use and comes with more than 62 free templates. [Recommended]
<h2> Our Services </ h2> <p> This section lists the different services we offer to our customers. </ p>
Now, update the rest of the Text module parameter as follows:
- Background color: #ffffff
- Heading 2 Font: Nunito
- Title 2 Font weight: Bold
- Title 2 Font Style: TT
- Title 2 Text color: #f24a5b
- Title 2 Text Size: 42 pixels (desktop), 32 pixels (tablet), 22 pixels (phone)
- Title 2 Letter Spacing: 16px
- Title 2 Line Height: 1.3em
- Width: 500px (desktop), 490px (tablet)
- Alignment of the module: center
- Custom padding (desktop): 40px at the top, 40px at the bottom, 50px at the left, 50px at the right
- Custom padding (phone): 20px on the left, 20px on the right
- Width of the border: 10px
- Border color: #ffffff
Since we are going to overlap the text module with presentation icons, we must make sure that the text module rests above the icons in the z-space order. To do this, we must first add the following CSS snippet to 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 modules that overlap, which is important for the design.
Create the Blurb icon
We are now ready to create the first presentation text icon. To do this, we must first add a Blurb module and drag it to the top of the text module. Then delete the fictitious content (the title text and the body of the text) and click to use an icon instead of an image for the presentation text.
Then update the following design parameters:
Easily create your Online Store
Download free WooCommerce, the best e-commerce plugins to sell your physical and digital products on WordPress. [FREE]
- Color of the icon: #2ea3f2
- Use the size of the icon font: YES
- Icon font size: 100px
- Custom Margin: 0px at the bottom (this removes the default bottom margin between modules, not necessary if you are using 1 gutter width)
Then, as we do not use any text with the module (only the icon), we can remove the default bottom margin below the presentation icon. To do this, add the following custom CSS code to the CSS Blurb Image box:
Blurb Image CSS:
Duplicate Blurb icon
Before starting to position 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.
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 upper 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 according to the settings you have made.
Positioning Blurb Icon # 2
Before positioning this presentation icon, let's enlarge it a bit. To do this, open the Blurb module settings 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
Creating another section
From now on, we can take inspiration from what we have done, to create another area with a different arrangement. All you need to do is create a new column, and copy the previous modules. To make a multiple copy, hover over each module by holding down the CTRL key on your keyboard.
Now let's see the final result.
Adding presentation icons as design accents to your content is an example of how two modules can be combined to create a totally 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 explore several design variants. Feel free to explore different icons and color combinations to create something for your own needs.
I hope to hear from you in the comments.