Divi’s Blurb Module is flexible and will show textual content and a picture or icon for your designs. This module makes highlighting products and services, options, and steps in a procedure extra out there. Some of the advantages of the usage of a Blurb Module is that you’ll be able to customise all the design settings in a single position and practice styling to all the blurb content material without problems.

The Blurb Module gives a variety of design choices, permitting you general inventive keep watch over over the design. On this submit, we’ll glance nearer on the Divi Blurb Module and the in depth choices you’ll be able to use to customise the content material and design. Moreover, we’ll pass over 3 design examples that reveal the flexibility of the blurb module.

Let’s dive in!

Working out How the Divi Blurb Module is Structured (& What You Can Use it For)

The Blurb Module is an easy but very flexible module that you’ll be able to use to show a picture or icon at the side of header and frame textual content. You’ll use the Blurb Module to give some highlights or options, products and services, processes, key merchandise or pages, and extra. It’s a useful approach to get a divorce content material that would possibly differently be an extended textual content block with some graphics that draw visible passion and make your data more uncomplicated to scan. Now, let’s take a more in-depth have a look at the Blurb Module settings.

Content material Settings

The content material tab is the place you’ll be able to upload any content material in your blurb. You’ll additionally upload a hyperlink, set the background, and upload an admin label.

Textual content

Here’s how the blurb seems to be via default whilst you upload it in your structure. Right here, you’ll be able to set the name and upload frame textual content in your Blurb Module.

Symbol & Icon

You’ll upload a picture or an icon in your Blurb Module. Should you permit Use Icon, the icon picker will probably be displayed beneath.

Then again, you’ll be able to show a picture for your blurb.

Hyperlink

Subsequent is the hyperlink settings. You’ll set a hyperlink for the blurb name or all of the module. You’ll additionally set the hyperlink to open in the similar window or a brand new tab.

Background

Within the background settings, you’ll be able to set a background colour, gradient, symbol, video, trend, or masks that may seem in the back of your blurb content material. You’ll even mix a couple of background varieties to create fascinating results.

Design Settings

Now, let’s transfer over to the design tab. Right here, you’ll be able to customise the design of each facet of the Blurb Module.

Symbol & Icon

The primary settings segment lets you customise the picture or icon you enabled for the blurb. If enabled, this is the place you place the icon colour. You’ll additionally upload a background colour to the picture or icon, make a choice the location (best or left), set the width, and upload rounded corners.

Moreover, you’ll be able to upload a border to the picture or icon. You’ll specify the border width, border colour, and border taste.

In the end, you’ll be able to upload a field shadow and practice symbol filters to the picture.

Textual content

Within the textual content settings, you’ll be able to set the alignment for the blurb textual content, make a choice the textual content colour, and permit a textual content shadow.

Name Textual content

Here’s the place you’ll be able to customise the styling of the name textual content. You’ll specify the heading degree and set the font, font weight, font taste, alignment, colour, dimension, spacing, line top, and shadow.

Frame Textual content

Subsequent is the frame textual content settings. Just like the name textual content settings, you’ll be able to customise the font, font weight, font taste, alignment, colour, dimension, spring, line top, and shadow.

Sizing

Within the sizing settings, you’ll be able to set the content material width, width, max width, alignment, min top, top, and max top.

Spacing

Subsequent, the spacing segment is the place you’ll be able to set the margin and padding for the Blurb Module.

Border

You’ll upload rounded corners to the blurb within the border settings and permit a border. You’ll specify the border width, colour, and elegance.

Field Shadow

Right here, you’ll be able to set a field shadow for all of the blurb. With the field shadow enabled, you’ll be able to set the location, blur and unfold energy, shadow colour, and shadow place.

Filters

Subsequent are the filters settings. You’ll use those choices to change the blurb’s hue, saturation, brightness, distinction, invert, sepia, opacity, and blur. You’ll additionally make a choice a mix mode.

Turn into

Right here, you’ll be able to scale, translate, rotate, skew, and set starting place issues to develop into how your Blurb Module seems within the design.

Animation

The general segment on this tab is the animation settings. You’ll make a choice from seven other animation types: Fade, Slide, Leap, Zoom, Turn, Fold, and Roll. Each and every animation taste may also be additional custom designed via editing the animation instructions, period, lengthen, depth, beginning opacity, velocity curve, and repeat. On this segment, you’ll be able to additionally set the picture/icon animation.

Complicated Settings

In the end, let’s check out the complex tab. Right here, you’ll be able to set the CSS ID and Elegance, upload customized CSS, set the picture alt textual content, set show stipulations and visibility settings, regulate transitions, set a sophisticated place, and permit scroll results. Those settings can take your designs to the following degree with complex customizability and dynamic results.

The usage of the Blurb Module in a Design

Now that we’ve got explored the choices within the Blurb Module settings, let’s transfer on to a few sensible examples. We can create 3 other designs the usage of Blurb Modules.

Preview

Here’s a preview of what we can design.

Blurb Design 1

Blurb Design 2

Blurb Design 3

Create a New Web page with a Premade Format

Let’s get started via the usage of a premade structure from the Divi library. For this situation, we can use the Toy Retailer House Web page structure from the Toy Store Layout Pack.

Upload a brand new web page in your site and provides it a name, then make a choice the way to Use Divi Builder.

We can use a premade structure from the Divi library for this situation, so make a choice Browse Layouts.

Seek for and make a choice the Toy Retailer House Web page structure.

Make a selection Use This Format so as to add the structure in your web page.

Now, we’re in a position to construct our designs. We can redesign the Construct, Clear up, and Be told segment for this instructional the usage of Blurb Modules. The structure is created with symbol and textual content modules, however we will be able to use the Blurb Module to mix the weather into one module and elegance them in combination. Let’s get began!

Recreating the Format with a Blurb Module

Each and every of our 3 designs will start with the similar fundamental structure. Get started via including a brand new row with 3 columns to the segment.

Subsequent, upload a Blurb Module to the primary column.

Upload a name and a few frame textual content to the blurb.

• Name: Construct
• Frame: Lorem ipsum dolor take a seat amet. In nisi dolores et atque impedit et repellendus praesentium aut laudantium consequatur et amet corrupti.

Within the symbol settings, upload the picture for the primary blurb.

• Symbol: toy-store-24.jpg

Subsequent, reproduction the Blurb Module two times to create 3 Blurb Modules. Rearrange the modules so there’s one in each and every column.

Open the settings for the second one and 3rd Blurb Modules and regulate the content material.

For blurb 2:

• Name: Clear up
• Symbol: toy-store-19.jpg

For blurb 3:

• Name: Be told
• Symbol: toy-store-27.jpg

As soon as the 3 blurbs are arrange, delete the unique row.

Blurb Design 1

With the blurb structure arrange, let’s get started designing the primary blurb structure. This case will probably be a easy structure with a rounded symbol that provides an enchanting design component. Navigate to the design tab of the Blurb Module and upload rounded corners underneath the Symbol & Icon settings.

• Symbol/Icon Rounded Corners: 250px best proper and left

Subsequent, open the name settings and customise the font as follows:

• Name Font: Libre Bodoni
• Name Font Weight: Daring
• Name Textual content Measurement: 25px desktop, 20px pill, 16px cellular
• Name Line Peak: 1.4em

Within the frame textual content settings, set the next choices:

• Frame Font: Jost
• Frame Textual content Colour: rgba(0,0,0,0.58)
• Frame Textual content Measurement: 17px desktop, 15px pill, 14px cellular

Now, the design for the primary blurb is whole. To use the types to the remainder of the blurbs, merely click on the 3 dots on the best of the settings window and make a choice Lengthen Blurb Kinds.

Make a selection the way to lengthen types to all blurbs right through the row.

Ultimate Consequence

Here’s the finished design!

Blurb Design 2

For the second one blurb design, we can create a colourful structure with a background graphic and an icon. Start via opening the Symbol and Icon segment within the content material tab and permit Use Icon. For the primary blurb, make a choice the development blocks icon.

Transfer to the background settings. Start via including a background symbol. Since we can mix this graphic with a colour overlay, be certain that to choose the overlay mix mode.

• Background Symbol: toy-store-7b.png
• Background Symbol Mix: Overlay

Subsequent, set the background colour. For the primary blurb, we can upload a blue colour.

• Background: rgba(82,137,221,0.25)

Now, transfer over to the design tab. Within the symbol and icon settings, set the icon colour and alignment.

• Icon Colour: #739ddd
• Symbol/Icon Alignment: Left

Within the name textual content settings, regulate the next:

• Name Font: Libre Bodoni
• Name Font Weight: Daring
• Name Textual content Measurement: 25px desktop, 20px pill, 16px cellular
• Name Line Peak: 1.4em

Subsequent, regulate the frame textual content.

• Frame Font: Jost
• Frame Textual content Colour: rgba(0,0,0,0.58)
• Frame Textual content Measurement: 17px desktop, 15px pill, 14px cellular

Open the spacing settings and set the padding:

• Most sensible and Backside Padding: 80px
• Left and Proper Padding: 20px

In the end, open the Field Shadow settings and permit a field shadow. Set the shadow colour.

• Shadow Colour: #739ddd

Now, the design of the primary blurb is whole. Lengthen the design settings to the remainder of the blurbs.

Customizing Blurb 2

Open the settings for the second one blurb and navigate to the Symbol & Icon segment. Permit the icon and make a choice the puzzle icon.

Subsequent, open the Background settings and alter the background colour.

• Background Colour: rgba(229,167,223,0.3)

Open the Symbol & Icon settings within the design tab and set the icon colour.

• Icon Colour: #ea9ada

In the end, open the field shadow settings and alter the shadow colour.

• Shadow Colour: #ea9ada

Customizing Blurb 3

For the 3rd blurb, we can repeat the similar steps to switch the colours. First, permit the icon and make a choice the lightbulb icon.

Subsequent, set the background colour for the 3rd blurb.

• Background Colour: rgba(232,176,104,0.31)

Transfer to the design tab and customise the icon colour underneath Symbol & Icon.

• Icon Colour: #e8ac5f

In the end, regulate the field shadow colour.

• Shadow colour: #e8ac5f

Ultimate Consequence

Here’s the finished blurb structure.

Blurb Design 3

For the 3rd design, we can use the blurb pictures as background pictures and create an attention-grabbing structure with huge textual content. Start via opening the settings for the primary blurb. Delete the frame textual content from the blurb.

Transfer to the Symbol & Icon settings and permit the icon. For the primary blurb, make a choice the development blocks icon.

Open the background settings and upload the background symbol. We can upload an overlay to make the textual content more uncomplicated to learn at the background symbol, so make a choice the overlay mix mode.

• Background Symbol: toy-store-24.jpg
• Symbol Mix Mode: Overlay

Subsequent, set the background colour.

• Background Colour: rgba(38,67,104,0.47)

Transfer to the design tab and open the Symbol & Icon settings. Set the icon colour to white.

• Icon Colour: #FFFFFF

Within the name font settings, customise the next:

• Name Font: Libre Bodoni
• Name Font Weight: Daring
• Name Textual content Alignment: Middle
• Name Textual content Colour: #FFFFFF
• Name Textual content Measurement: 75px desktop, 50px pill, 40px cellular
• Name Line Peak: 1.4em
• Name Textual content Shadow: Taste 3

Subsequent, customise the padding within the spacing settings.

• Padding best and backside: 70px
• Padding left and proper: 30px

In the end, open the border choices and upload a rounded nook to the blurb.

• Rounded Corners: 10px

Now, the design of the primary blurb is whole. Lengthen the design to the opposite two blurbs.

Customizing Blurb 2

Open the settings for the second one blurb and take away the frame textual content.

Subsequent, permit the icon and make a choice the puzzle icon.

Trade the background symbol and set the background colour.

• Background Colour: rgba(188,45,105,0.3)
• Background Symbol: toy-store-19.jpg

In the end, transfer to the Symbol and Icon settings and regulate the icon colour.

• Icon Colour: #FFFFFF

Customizing Blurb 3

Like we did for blurb 2, take away the frame textual content from the blurb and permit the icon. For the 3rd blurb, make a choice the lightbulb icon.

Set the background symbol for the blurb and alter the background colour to orange.

• Background Colour:rgba(242,101,36,0.57)
• Background Symbol: toy-store-27.jpg

In the end, set the icon colour within the design tab.

• Icon Colour: #FFFFFF

Ultimate Consequence

Here’s the finished design for structure 3.

Ultimate Consequence

Let’s take some other have a look at the overall blurb designs.

Blurb Design 1

Blurb Design 2

Blurb Design 3

Ultimate Ideas

Divi’s Blurb Module is an impressive and versatile device that lets you creatively show textual content and a picture or icon. With unending design chances, you’ll be able to succeed in distinctive layouts that spotlight your content material and seize consideration with callouts which might be simple to scan. If you wish to be informed extra about the best way to customise the Blurb Module, have a look at this instructional to create a blurb expanding section on scroll.

How have you ever used the Blurb Module for your personal designs? Tell us within the feedback!

The submit Understanding How the Divi Blurb Module is Structured gave the impression first on Elegant Themes Blog.

WordPress Maintenance Plans | WordPress Hosting

read more