Skip to Main Content

How to customize blurb module to focus on Divi content

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.

Overview

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.

Download

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>

Stylize 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
  • 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:

position: relative;

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:

margin-bottom: 0px

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.

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 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 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.

Final result

Now let's see the final result.

Last thoughts

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.

Leave a comment

Your email address will not be published. Required fields are marked with *

This site uses Akismet to reduce unwanted. Learn more about how your comments data is used.

Cool WordPress Themes that I found on
And there are more 50 000 themes and models to choose from!

Back To Top
5 shares
Share5
tweet
Save
WhatsApp