Using presentation icons as aesthetic touches can give your layout a unique design that you might not have thought of before. 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 totally unique design.

In this tutorial, I will show you how to stylize presentation icons as design accents for your content in Divi.

Preview

Here are some examples of the design we will build in this tutorial.

Design overview blurb divi module

Download the sample layouts for this tutorial

To get your hands on the layout of the accent patterns of the blurb module free, you need to download it first using the button below. To gain access to the download, you must subscribe to our Divi Daily mailing list using the online form below. As a new subscriber, you'll receive even more Divi goodness and a Divi Layout pack every Monday free ! If you're already on the list, simply enter your email address below and click Download. You will not be “re-enrolled” or receive additional emails.

Download

Start with the design 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 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.

Add a divi text module

Update the text module with the following fill text:

Our services this section displays the list of the different services that we offer to our customers.

Add a divi sectionStylize 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
  • 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
Divi module header setting

  • 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

Modular configuration text section size and dimension

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 the 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:

position: relative;

Then set the z-index value to 1.

Custom wordpress css

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

Now we are 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 contents placeholder (the title text and body text) and Click to use an icon instead of an image for the blurb text.

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 you are using 1 gutter width)

Then, since we don't use 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:

margin-bottom: 0px

Blurb divi settings

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.

Cloud blurb divi configuration and duplicationPositioning Presentation Icons Using Transform Translate

To position the presentation icons, we will use Divi's 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.

presentation icons

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

Design section blurd divi

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 a multiple copy, hover over each module while holding down the CTRL key on your keyboard.

Copy divi module

Final result

Now let's see the final result.

Divi final result

Latest Thoughts

Adding presentation icons as design accents to your contents is an example of how two modules can be combined to create a completely 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 exploring several design variations. Feel free to explore different icons and color combinations to create something for your own needs.

Hope to hear from you in the comments.