Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Blurb Module with the Website Page Designer

Blurb Module with the Website Page Designer

Blurbs are a nice and popular way to show the features of your products or services. They appear as columns that include a short text and an icon. The page designer lets you create them very easily using the blurb module.

Go to the page designer, and add a new module by clicking on the gray plus sign. Choose the blurb module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.

Define contents

The contents tab includes the following options.

Text

This is where you can define the title of the blurb, that will appear above the text, and the body content of the module. The text will span the entires width of the column.

Image & Icon

You can decide whether you want to use an icon, picking one from the list, or an image for your blurb. You can upload the image from your media gallery, that will be centered and span the entire width of the column.

Link

You can connect a link to the title of the blurb that will open when clicked.

If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.

Background

Add a background color, gradient, image or video to your module.

Admin label

You can modify the module’s label for easier identification.

Customize the design

With these settings, you can customize your design.

Image & Icon

Choose where you wish to place your image/icon. It can appear on top or to the left of the text. Placing it on the left will make the icon/image smaller than if it’s placed on top of the text.

If you selected an icon you can define its color, if you want it to be a circle and the icon font size. If you picked an image it’s possible to define the corners, borders, shadow, and tonality.

Text

Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.

Title Text

Define the font, color, alignment, line height, and other settings for the title.

Body Text

You can also adjust the font settings for the body text.

Sizing

Adjust the width of the module.

Spacing

Customize margins and padding sizes.

Border

Define the border’s corner, style, color and width for your module.

Box Shadow

Here you can enable box shadow.

Filters

Adjust the hue of the module as a whole.

Animation

Give an animation style to the module, like fading or sliding when it appears.

Advanced settings

Using this tab you are able to insert CSS code, select device visibility, and manage transitions. Check this guide to know more about how to use these settings. On the attributes option, you can also define an image alt text.

Use Case

For this example, we are creating blurbs for the benefits of using a certain product.

We start by creating a row with four columns. Then, we add the first blurb, using an icon. For the design, we use the following options:

Icon Color: #000000

Icon Circle Color: #eeefa0

Icon Placement: top

Text Orientation: center

Title Text Font Weight: bold

Title Text Color: #0c71c3

Title Text Size: 20px

Then we copy it to the other columns, adjusting the text and icon.

This is how it looks like!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?