Divi’s Blurb Module is versatile and can display text and an image or icon on your designs. This module makes highlighting services and products and merchandise, choices, and steps in a process additional accessible. Probably the most important benefits of the usage of a Blurb Module is that you simply’ll be capable to customize the entire design settings in one place and observe styling to the entire blurb content material subject matter simply.

The Blurb Module offers a lot of design alternatives, allowing you common creative regulate over the design. In this put up, we’ll look closer at the Divi Blurb Module and the extensive alternatives you’ll be capable to use to customize the content material subject matter and design. Additionally, we’ll transfer over 3 design examples that display the versatility 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 a simple however very versatile module that you simply’ll be capable to use to turn an image or icon in conjunction with header and body text. You’ll be capable to use the Blurb Module to supply some highlights or choices, services and products and merchandise, processes, key products or pages, and additional. It’s an invaluable option to break up content material subject matter that can otherwise be a longer text block with some graphics that draw visual passion and make your wisdom easier to scan. Now, let’s take a better take a look on the Blurb Module settings.

Content material subject matter Settings

The content material subject matter tab is where you’ll be capable to add any content material subject matter in your blurb. You’ll be capable to moreover add a link, set the background, and add an admin label.

Text

Right here’s how the blurb seems by way of default whilst you add it in your layout. Proper right here, you’ll be capable to set the identify and add body text in your Blurb Module.

Image & Icon

You’ll be capable to add an image or an icon in your Blurb Module. For many who permit Use Icon, the icon picker can be displayed beneath.

Then again, you’ll be capable to display an image on your blurb.

Link

Next is the link settings. You’ll be capable to set a link for the blurb identify or the entire module. You’ll be capable to moreover set the link to open within the identical window or a brand spanking new tab.

Background

Throughout the background settings, you’ll be capable to set a background color, gradient, image, video, building, or mask that may appear in the back of your blurb content material subject matter. You’ll be capable to even combine a few background types to create attention-grabbing effects.

Design Settings

Now, let’s switch over to the design tab. Proper right here, you’ll be capable to customize the design of each facet of the Blurb Module.

Image & Icon

The principle settings segment implies that you’ll be able to customize the image or icon you enabled for the blurb. If enabled, that is where you set the icon color. You’ll be capable to moreover add a background color to the image or icon, select the placement (perfect or left), set the width, and add rounded corners.

Additionally, you’ll be capable to add a border to the image or icon. You’ll be capable to specify the border width, border color, and border style.

In spite of everything, you’ll be capable to add a box shadow and observe image filters to the image.

Text

Throughout the text settings, you’ll be capable to set the alignment for the blurb text, select the text color, and make allowance a text shadow.

Title Text

Right here’s where you’ll be capable to customize the styling of the identify text. You’ll be capable to specify the heading stage and set the font, font weight, font style, alignment, color, size, spacing, line top, and shadow.

Body Text

Next is the body text settings. Identical to the identify text settings, you’ll be capable to customize the font, font weight, font style, alignment, color, size, spring, line top, and shadow.

Sizing

Throughout the sizing settings, you’ll be capable to set the content material subject matter width, width, max width, alignment, min top, top, and max top.

Spacing

Next, the spacing segment is where you’ll be capable to set the margin and padding for the Blurb Module.

Border

You’ll be capable to add rounded corners to the blurb throughout the border settings and make allowance a border. You’ll be capable to specify the border width, color, and magnificence.

Box Shadow

Proper right here, you’ll be capable to set a box shadow for the entire blurb. With the sector shadow enabled, you’ll be capable to set the website, blur and spread power, shadow color, and shadow position.

Filters

Next are the filters settings. You’ll be capable to use the ones alternatives to switch the blurb’s hue, saturation, brightness, difference, invert, sepia, opacity, and blur. You’ll be capable to moreover select a mixture mode.

Develop into

Proper right here, you’ll be capable to scale, translate, rotate, skew, and set starting problems to turn out to be how your Blurb Module turns out throughout the design.

Animation

The entire segment in this tab is the animation settings. You’ll be in a position to choose between seven different animation types: Fade, Slide, Jump, Zoom, Flip, Fold, and Roll. Each and every animation style can also be further customized by way of bettering the animation directions, duration, extend, intensity, starting opacity, tempo curve, and repeat. In this segment, you’ll be capable to moreover set the image/icon animation.

Sophisticated Settings

In spite of everything, let’s take a look at the difficult tab. Proper right here, you’ll be capable to set the CSS ID and Elegance, add custom designed CSS, set the image alt text, set display necessities and visibility settings, control transitions, set a sophisticated position, and make allowance scroll effects. The ones settings can take your designs to the next stage with difficult customizability and dynamic effects.

The usage of the Blurb Module in a Design

Now that we’ve were given explored the selections throughout the Blurb Module settings, let’s switch directly to a couple of smart examples. We will be able to create 3 different designs the usage of Blurb Modules.

Preview

Right here’s a preview of what we can design.

Blurb Design 1

Blurb Design 2

Blurb Design 3

Create a New Internet web page with a Premade Construction

Let’s get began by way of the usage of a premade layout from the Divi library. For this situation, we can use the Toy Store Space Internet web page layout from the Toy Retailer Structure Pack.

Add a brand spanking new internet web page in your website and offers it a reputation, then select how you can Use Divi Builder.

We will be able to use a premade layout from the Divi library for this situation, so select Browse Layouts.

Search for and select the Toy Store Space Internet web page layout.

Select Use This Construction as a way to upload the layout in your internet web page.

Now, we’re in a position to build our designs. We will be able to redesign the Assemble, Unravel, and Be informed segment for this instructional the usage of Blurb Modules. The layout is created with image and text modules, alternatively we will be able to use the Blurb Module to combine the elements into one module and magnificence them together. Let’s get started!

Recreating the Construction with a Blurb Module

Each and every of our 3 designs will get started with the identical basic layout. Get began by way of together with a brand spanking new row with 3 columns to the segment.

Next, add a Blurb Module to the main column.

Add a reputation and a couple of body text to the blurb.

• Title: Assemble
• Body: Lorem ipsum dolor take a seat down amet. In nisi dolores et atque impedit et repellendus praesentium aut laudantium consequatur et amet corrupti.

Throughout the image settings, add the image for the main blurb.

• Image: toy-store-24.jpg

Next, copy the Blurb Module two occasions to create 3 Blurb Modules. Rearrange the modules so there’s one in each column.

Open the settings for the second and third Blurb Modules and control the content material subject matter.

For blurb 2:

• Title: Unravel
• Image: toy-store-19.jpg

For blurb 3:

• Title: Be informed
• Image: toy-store-27.jpg

Once the three blurbs are prepare, delete the original row.

Blurb Design 1

With the blurb layout prepare, let’s get began designing the main blurb layout. This example can be a simple layout with a rounded image that gives an interesting design part. Navigate to the design tab of the Blurb Module and add rounded corners beneath the Image & Icon settings.

• Image/Icon Rounded Corners: 250px perfect right kind and left

Next, open the identify settings and customize the font as follows:

• Title Font: Libre Bodoni
• Title Font Weight: Bold
• Title Text Measurement: 25px desktop, 20px tablet, 16px cell
• Title Line Best: 1.4em

Throughout the body text settings, set the following alternatives:

• Body Font: Jost
• Body Text Color: rgba(0,0,0,0.58)
• Body Text Measurement: 17px desktop, 15px tablet, 14px cell

Now, the design for the main blurb is complete. To make use of the types to the rest of the blurbs, simply click on at the 3 dots on the most productive of the settings window and select Extend Blurb Sorts.

Select how you can extend types to all blurbs during the row.

Final Finish consequence

Right here’s the completed design!

Blurb Design 2

For the second blurb design, we can create a vibrant layout with a background graphic and an icon. Get started by way of opening the Image and Icon segment throughout the content material subject matter tab and make allowance Use Icon. For the main blurb, select the development blocks icon.

Switch to the background settings. Get started by way of together with a background image. Since we can combine this graphic with a color overlay, be certain that to choose the overlay combine mode.

• Background Image: toy-store-7b.png
• Background Image Combine: Overlay

Next, set the background color. For the main blurb, we can add a blue color.

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

Now, switch over to the design tab. Throughout the image and icon settings, set the icon color and alignment.

• Icon Color: #739ddd
• Image/Icon Alignment: Left

Throughout the identify text settings, control the following:

• Title Font: Libre Bodoni
• Title Font Weight: Bold
• Title Text Measurement: 25px desktop, 20px tablet, 16px cell
• Title Line Best: 1.4em

Next, control the body text.

• Body Font: Jost
• Body Text Color: rgba(0,0,0,0.58)
• Body Text Measurement: 17px desktop, 15px tablet, 14px cell

Open the spacing settings and set the padding:

• Easiest and Bottom Padding: 80px
• Left and Right kind Padding: 20px

In spite of everything, open the Box Shadow settings and make allowance a box shadow. Set the shadow color.

• Shadow Color: #739ddd

Now, the design of the main blurb is complete. Extend the design settings to the rest of the blurbs.

Customizing Blurb 2

Open the settings for the second blurb and navigate to the Image & Icon segment. Permit the icon and select the puzzle icon.

Next, open the Background settings and change the background color.

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

Open the Image & Icon settings throughout the design tab and set the icon color.

• Icon Color: #ea9ada

In spite of everything, open the sector shadow settings and change the shadow color.

• Shadow Color: #ea9ada

Customizing Blurb 3

For the third blurb, we can repeat the identical steps to switch the colors. First, permit the icon and select the lightbulb icon.

Next, set the background color for the third blurb.

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

Switch to the design tab and customize the icon color beneath Image & Icon.

• Icon Color: #e8ac5f

In spite of everything, control the sector shadow color.

• Shadow color: #e8ac5f

Final Finish consequence

Right here’s the completed blurb layout.

Blurb Design 3

For the third design, we can use the blurb pictures as background pictures and create an attention-grabbing layout with huge text. Get started by way of opening the settings for the main blurb. Delete the body text from the blurb.

Switch to the Image & Icon settings and make allowance the icon. For the main blurb, select the development blocks icon.

Open the background settings and add the background image. We will be able to add an overlay to make the text easier to be told on the background image, so select the overlay combine mode.

• Background Image: toy-store-24.jpg
• Image Combine Mode: Overlay

Next, set the background color.

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

Switch to the design tab and open the Image & Icon settings. Set the icon color to white.

• Icon Color: #FFFFFF

Throughout the identify font settings, customize the following:

• Title Font: Libre Bodoni
• Title Font Weight: Bold
• Title Text Alignment: Center
• Title Text Color: #FFFFFF
• Title Text Measurement: 75px desktop, 50px tablet, 40px cell
• Title Line Best: 1.4em
• Title Text Shadow: Style 3

Next, customize the padding throughout the spacing settings.

• Padding perfect and bottom: 70px
• Padding left and right kind: 30px

In spite of everything, open the border alternatives and add a rounded corner to the blurb.

• Rounded Corners: 10px

Now, the design of the main blurb is complete. Extend the design to the other two blurbs.

Customizing Blurb 2

Open the settings for the second blurb and remove the body text.

Next, permit the icon and select the puzzle icon.

Business the background image and set the background color.

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

In spite of everything, switch to the Image and Icon settings and control the icon color.

• Icon Color: #FFFFFF

Customizing Blurb 3

Like we did for blurb 2, remove the body text from the blurb and make allowance the icon. For the third blurb, select the lightbulb icon.

Set the background image for the blurb and change the background color to orange.

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

In spite of everything, set the icon color throughout the design tab.

• Icon Color: #FFFFFF

Final Finish consequence

Right here’s the completed design for layout 3.

Final Finish consequence

Let’s take any other take a look on the general blurb designs.

Blurb Design 1

Blurb Design 2

Blurb Design 3

Final Concepts

Divi’s Blurb Module is an impressive and flexible instrument that permits you to creatively display text and an image or icon. With endless design probabilities, you’ll be capable to achieve unique layouts that attention your content material subject matter and snatch attention with callouts which will also be easy to scan. If you want to be told additional about learn the way to customize the Blurb Module, take a look at this instructional to create a blurb increasing phase on scroll.

How have you ever ever used the Blurb Module on your non-public designs? Let us know throughout the comments!

The put up Figuring out How the Divi Blurb Module is Structured gave the impression first on Sublime Topics Weblog.

WordPress Web Design

[ continue ]

WordPress Maintenance Plans | WordPress Hosting

read more