Blurb Styles

Using the Blurb Module you can create attractive designs.

The Blurb Module

This is a versatile module. You can place an image or an icon on the top or on the side. The image in this case is a screenshot of the Blurb Module Settings in the Design tab.

You can style the Image only. In this example a shadow box has been placed around the image but not the entire Blurb Module.

b

Blurb Settings

This is a Blurb Module with an icon. The icon is placed on top. The box shadow design is used. When you place text inside a shadow box, you need to adjust the padding so the text is not too close to the shadow box. smile

The shadow box in this setting is used to create a shadow effect for emphasis around the entire Blurb Module.

The Blurb on the left has a right  shadow effect. You can use the Blurb Module in any column width. Much of what you put into the Blurb Module will be related to the layout on the web page and the content.

Three Column Width

Three Blurb Modules arranged in a three column width.

The image has specific styling measurements to achieve the oval shape.

The page must have an image and content balance for a pleasant reading experience.

Unique

The title text is center aligned but the content text is left aligned. As you work in the Blurb Module you will become familiar with the spacing. 

When you use the Visual Builder you see your edits in real time. This helps you conceptualize the content as you place it into the module.

Unique

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Everyone has seen Latin dummy text. It fills in the space and makes everything look uniform. The problem comes if you don’t quite have the same amount of information as the dummy text. 

Unique

There is nothing wrong with white space. You don’t have to fill it exactly. One or two sentences will work. Providing the sentences explain the point.

Accentuated blurb module with double lines. This row has 3 columns and uses 3 Blurb Modules set with a blue background. 

This kind of layout is ideal for putting text in shorter sentences that are easy to read. 

Notice the double line top border creates an emphasis for the text. The key to these layouts is to find the balance and keep the design simple. 

Simple design is elegant. 

j

Depending on the information you can use and style an icon and place it to the left of the information.

Blurb Styling
p

Your Title Goes Here

Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.

p

Your Title Goes Here

This design gives a pleasing visual effect. It is easy to read and it has a signal that it is information that is necessary to read. It also doesn’t take up too much space on the page. None of the settings are advanced. You place the CSS code if ay in the section in the Advanced tab.

p

Your Title Goes Here

This design gives a pleasing visual effect. It is easy to read and it has a signal that it is information that is necessary to read. It also doesn’t take up too much space on the page. None of the settings are advanced. You place the CSS code if ay in the section in the Advanced tab.

Great Video instructions! 

Really good tutorial.

Elegant Themes blog post:

How to Create Styled Content Boxes for Tips, Info, etc.

More Blurb Modules with different design and layout

This is a blurb module

Content goes here.

This text is in the middle alignment position. The text is also very close to the edge of the colored background. In this case you would put some padding for the text, for both Blurb Modules.

This is a blurb module

Content is here. It is Left aligned.

Text has to fit into the context of the subject. Notice the margin on the left is very close to the colored background. In this case you need to increase the padding on the left side. The spacing setting is set to 20px on the right, but not the left.

Blurb 1

These are three blurbs in a three column setting.

The Image icon is placed on the left and not on top of the Blurb.

Blurb 2

This blurb has a box shadow around it that is different. Experiment with the Design settings. Some will work and some won’t work.

Blurb 3

The colors of the Blurbs match this is for a uniform look.

It took a long time to get to this point. Technology rocks! Love it for real.