Welcome to Day 96 of our Divi 100 Marathon. Keep tuning in for 100 days in a row of awesome Divi resources as we count down to the amazing release of Divi 3.0 on the final day of the series!


In this post, we’re going to explore one of Divi’s most popular features, The Blurb Module. Although seemingly simple out of the gate, it’s packed icon options and many customizable features that can bring your website elements to life. I generally use the Blurb Module for things like services, benefits, contact information, etc, but Divi provides us with so many icons that the possibilities are endless.

The Default Blurb Module

Default Blurb Module Look

Default Blurb Module Look

Before we get started, let’s take a look at what the Divi Blurb Module looks like by default. This is the starting point we’re using in each example below. To get the same results that we’ve achieved simply follow the instructions under each example.

The default module will automatically have a left aligned title and no icon. Essentially, it comes out of the gate with just the title and body text, but with just a few setting changes and a little CSS, we can give this module a completely new look!

In all of these examples, we’ll change settings in 3 main areas:

Areas we'll customize

Areas we’ll customize

Some things to note:

  • I’ll use different titles and icons just to avoid a repeated look.
  • In some examples, I’ll use multiple blurb modules as most often you’ll find blurbs in clusters of 2, 3, 4 or more.
  • You can easily duplicate the styles we create here and add them to as many columns and rows as you’d like.
  • In the blurb module, you’ll customize the General Settings tab with your title, link, icon options and body text.

Ok, now that we’re all set up – let’s get into it!

1. Centered Color Blurb

Example 1

Example 1

In this first example, we’ll use an icon (laptop)  to represent our title (web design), center align the module and give it a vibrant background color. We can do all this through the module settings with no CSS needed! Here’s how I created this look:

General Settings:

  • Use Icon: YES
  • Icon Color: #ffffff
  • Circle Icon: YES
  • Circle Color: #0c8dff
  • Circle Border: YES
  • Circle Border Color: #ffffff
  • Image/Icon Placement: Top
  • Image/Icon Animation: No Animation
  • Text Color: Light
  • Text Orientation: Center

Advanced Design Settings:

  • Header Font: Oswald (bold, uppercase)
  • Header Font Size: 35px
  • Background Color: #61009e
  • Custom Padding: 20px, 20px, 20px, 20px

Save & Exit

Here’s what the general and advanced settings will look like:

General Settings

General Settings

Advanced Design Settings

Advanced Design Settings

As you can see, adjusting some colors and fonts on the blurb module, this is a pretty basic yet easy way to make your blurb modules pop!

2. Circle Blurb

Example-2

Example 2

In this example, we’re going to create a circle design which can really give your blurb modules a unique twist. This will take some changes in the module settings and just a few lines of CSS. Let’s get into it!

General Settings:

  • Icon Color: #ffffff
  • Use Icon: YES
  • Image/Icon Placement: Top
  • Image/Icon Animation: No Animation
  • Text Color: Light
  • Text Orientation: Center

Advanced Design Settings:

  • Use Icon Font Size: YES
  • Icon Font Size: 90px
  • Header Font: Georgie (bold)
  • Header Font Size: 24px
  • Background Color: #ea7900
  • Custom Padding: 20px, 20px, 20px, 20px

Custom CSS:
Main Element:

border-radius: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;

This will create the circle shape.

width: 300px;
height: 300px;

This will set the width and height so the circle shape doesn’t expand or adjust.

border: 3px solid white;

This will add the white border.

box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);
-moz-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);
-webkit-box-shadow: 0px 0px 25px rgba(23, 23, 23, 0.17);

This will give the circle a nice drop shadow.

Save & Exit

example-2-css

Here’s what the CSS will look like.

And that’s it! With some setting changes and just a little CSS, you have a unique circle blurb design that you can customize to your websites’ look and feel.

3. Side by Side Blurbs with Icons

Example 3

Example 3

In this design, we’re going to mock up 2 different services with the Blurb module and stick to a neutral color palette. The goal here is to create a look that is subtle but accents the icons and title. We’ll try and make the blurb box “pop” without drawing attention away from the icon and title. The first thing we need to do is to create a row with 2 columns.

Here's what the backend will look like.

Here’s what the backend will look like.

You can label your modules in General Settings > Admin Label:

Module 3a –

To create this look, I did the following:

General Settings:

  • Use Icon: YES
  • Icon Color: #ffffff
  • Circle Icon: YES
  • Circle Color: #5e8393
  • Circle Border: YES
  • Circle Border Color: #ffffff
  • Image/Icon Placement: Left
  • Image/Icon Animation: No Animation
  • Text Color: Dark
  • Text Orientation: Left

Advanced Design Settings:

  • Use Icon Font Size: YES
  • Icon Font Size: 30px
  • Header Font: Bitter
  • Header Font Size: 25px
  • Header Text Color: #5e8393
  • Body Font Size: 14px
  • Background Color: #ffffff
  • Custom Padding: 25px, 25px, 25px, 25px

Custom CSS:
Main Element:

box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
 -moz-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
 -webkit-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);

This will give the box the shadow.

outline: solid 1px #5e8393;
 outline-offset: -10px;

This will create the nice border inside the box.

Save & Exit

To avoid repeating these steps for both modules, I recommend finalizing module 3a then duplicating the module and swapping out the title text and icon.

example-3-duplicating-module

Duplicating a module.

Once the module is duplicated and you’ve changed out your styles, you’re all set! This is a great way to create side by side modules that stand out.

4. Grid Style Layout

example-4

Example 4

Getting a little more advanced now, but the end look is very sleek and elegant. Here we’re going to create a grid style layout which can really give your blurb modules a modern, professional look. The major customization we’re going to do here is to add a border to the modules to create the grid look. Even more so in this case, I recommend completing one module then duplicating it and changing out title, icon, etc to avoid repeating steps.

Since we’re using 4 blurb modules in this one design, I’ll refer to the modules as 4a, 4b, 4c and 4d.

Here's what the backend will look like.

Here’s what the backend will look like.

Ok, let’s get into it!

Module 4a –

General Settings:

  • Use Icon: YES
  • Icon Color: #ffffff
  • Circle Icon: YES
  • Circle Color: #035a9e
  • Image/Icon Placement: Top
  • Image/Icon Animation: No Animation
  • Text Color: Dark
  • Text Orientation: Center

Advanced Design Settings:

  • Use Icon Font Size: YES
  • Icon Font Size: 40px
  • Header Font: Lato (bold, uppercase)
  • Header Font Size: 26px
  • Header Text Color: #5e8393
  • Body Font: Lato Light
  • Body Font Size: 16px
  • Body Text Color: #035a9e
  • Background Color: #ffffff
  • Custom Padding: 20px, 20px, 20px, 20px

Custom CSS:
Main Element:

border-right: 1px solid #e6e6e6;

This will put a grey border line to the right of this module.

Save & Exit

Module 4b –

Custom CSS:
Main Element:

Delete “

border-right: 1px solid #e6e6e6;

Save & Exit

Module 4c –

Custom CSS:
Main Element:

border-right: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;

This will add a border to the top and right of the 3rd module.

Save & Exit

Module 4d –

Custom CSS:
Main Element:

border-top: 1px solid #e6e6e6;

This will add a top border to the fourth module.

Save & Exit

*IMPORTANT* – the last thing we need to do is change the row gutter width so the borders line up together with no spacing. Otherwise the borders will not line up.

To do this go to:

Row Module Settings

  • Use Custom Gutter With: YES
  • Gutter Width: 1

Save & Exit

Here's where to change the gutter settings.

Here’s where to change the gutter settings.

There are a variety of ways in which you can create the borders, just be sure not to overlap them. Otherwise you’ll have one extra thick line because there is a left AND right border overlapping.

And there you have it! Though it may look complicated, this one is actually quite easy. Just a few different lines of CSS to create the grid lines and we can a pretty slick looking set of blurbs! Ok, now that we’re on to the last one, let’s make this one the best one yet….

5. Hover Over Blurbs

Example-5

Example 5

In this final example, we’re going to go off of the grid style example that we just did and add a hover over effect that gives this a really engaging feel. There’s no better way to draw your website user in than with a nice hover over effect! As with the previous 2 examples, I recommend finishing the first one THEN duplicating the module so we don’t have to replicate the steps for each blurb module. Since we’re using 3 different blurb modules, I’ll label them 5a, 5b and 5c. The only difference between modules will be the border lines in the CSS panels.

Ok, now that we’re excited to see how this came to life, here’s how I did it:

First, we’re going to create a CSS class called “.blurb” – this will allow us to get the hover-over effect for each module. To do this, once logged into your dashboard, go to Divi > Theme Options and scroll down to Custom CSS as shown below. Insert the following CSS there.

.blurb:hover {
background-color: #ffffff;
box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
-moz-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.17);
-webkit-box-shadow: 0px 1px 18px rgba(23, 23, 23, 0.21); }

Save & Exit

.blurb class CSS

.blurb class CSS

This will display the white background and shadow when you hover over the module. Now that the CSS class is ready, create a row module with 3 columns. *IMPORTANT* – just like example 4, we need to change the row gutter width so these elements line right up together.

To do this, go to:

Row Module Settings

  • Use Custom Gutter With: YES
  • Gutter Width: 1

Save & Exit

Ok, now to the modules!

Module 5a –

General Settings:

  • Use Icon: YES
  • Icon Color: #74c403
  • Circle Icon: YES
  • Circle Color: #ffffff
  • Show Circle Border: YES
  • Circle Border Color: #74c403
  • Image/Icon Placement: Top
  • Image/Icon Animation: No Animation
  • Text Color: Dark
  • Text Orientation: Center

Advanced Design Settings:

  • Use Icon Font Size: YES
  • Icon Font Size: 40px
  • Header Font: Montserrat (bold)
  • Header Font Size: 24px
  • Header Text Color: #74c403
  • Body Font: Arial
  • Body Font Size: 16px
  • Body Text Color: #727272
  • Custom Padding: 20px, 20px, 20px, 20px

Custom CSS:

This is where we’ll tell this module to call on the hover over class we set up previously!

This is where you’ll insert the “blurb” class.

CSS Class: blurb

Main Element:

border-right: 1px solid #e6e6e6;

This will put the border to the right of this module.

Save & Exit

Now, duplicate the module.

Module 5b –

Custom CSS:
Main Element:

border-left: 1px solid rgba(255, 255, 255, 0);
border-right: 1px solid rgba(255, 255, 255, 0);

Save & Exit

I’ve found out that when you use a hover over effect with elements that have borders, the spacing and alignment can be a bit off, so we’re going to put invisible borders on the middle module using the CSS above just to make sure the hover over effect looks the same for all modules.

Module 5c –

Custom CSS:
Main Element:

border-left: 1px solid #e6e6e6;

This will add the left border line.

Save & Exit

And there you go!!! This one had a few more steps, but Divi makes it so easy for us to create a unique hover over effect without getting too advanced in the daunting world of CSS. If you’re new to CSS don’t worry, it may look intimidating but once you get your web design feet wet, it’s not that bad! I started out in print design and was very intimidated by CSS, but now I love it. Here’s a good resource if you’re just learning about CSS: http://www.w3schools.com/css/default.asp.

And again, Divi makes using custom CSS very easy for each module!

Well I hope these examples have inspired you to see what’s possible with The Divi Blurb Module! The sky is the limit here. I use this module on almost every site I build so it’s good to have a versatile set of ideas so designs don’t start looking the same. Sometimes, just changing the colors and fonts can give these a whole new look so feel free to take these ideas and make them your own!

Be sure to subscribe to our email newsletter and YouTube channel so that you never miss a big announcement, useful tip, or Divi freebie!

The post 5 Fun Ways to Style Divi’s Blurb Module appeared first on Elegant Themes Blog.

View @ ElegantThemes

Leave a Reply