Creative Blurb Module

Turn a simple blurb of speech into an effective design with a creative blurb module. If it is important enough content to single out into a blurb, then it is important to make the design eye-catching to viewers. 

Here is an example of creative Blurb modules that are easy to design:

1:
2:

To begin creating example 1,

Create a column with a 1/3 section. Here, you have freedom to chose what size the neighboring column will be, but for the blurb it is best to keep it within a 1/3 column. Within this 1/3 column, you want to create two modules: an image and a blurb. The image will act as if it is apart of the blurb, but making the modules separately allows for an easier design process. 

First,

Upload an image. This image should clue viewers in on the content of your blurb, and it will be the main contributor to turn viewers into readers. 

Second, 

Switch from the Content tab to the Design tab, and scroll down to find the Box Shadow section.

  1. Select the box shadow. It should be a shadow that wraps around the right and bottom sides. 
  2. Set the Horizontal position to -20 points. 
  3. Set the Vertical position to -30 points.
  4. Select a shadow color. It is recommended to keep in mind your color scheme. 

Third,

In the Design tab, scroll down to find the Border Styles section.

  1. Select the top-aligned border.
  2. Set the Border Width to 8 points.
  3. Select the border color. Keep in mind that you should use an identical color for your borders. 
  4. Repeat for the left-aligned border.

Now onto the Blurb module,

Begin by inputing you blurb title and your content. You content shouldn’t be a paragraph long because the blurb emphasizes “short and sweet.” Keep your content concise; this will ensure higher readership. 

First, 

Switch from the Content tab to the Design tab and scroll down to find the Box Shadow section. This is similar to step 1 within the image module.

  1. Select the box shadow that wraps around the right and bottom sides.
  2. Set the Horizontal position to 20 points.
  3. Set the Vertical position to 35 points. 
  4. Select a neutral shadow color. A neutral color will compliment the box shadow on the image above.

Second,

Within the Design tab, scroll down to find the Border Styles section.

  1. Select the right-aligned border. (Attention: This is different from the image border style.)
  2. Set the border width to 8 points.
  3. Select the identical color to you image border. 
  4. Repeat for the bottom-aligned border.

To begin creating example 2,

Create a section of three 1/3 columns. Each column will hold an individual blurb, but they will act as a whole. You have freedom to create four 1/4 columns or two 1/2 columns, but for this example we will use three 1/3 columns. 

Before designing the blurbs,

Click on the three lines on the green section tab. Here, we will set a background which will unify the three blurbs. Within the content tab, scroll down to the Background section. Click on the third tab within this section to set a background image. This image should communicate a unified idea of your three blurbs. 

Now,

Create three blurbs. It may help to just create one blurb, and then duplicate the module so that the design process is simplified.

First, 

Fill your blurb with content. Give it a title and a short explanation of this title. Pay attention to the amount of content you have. If it is overloaded, the effectiveness of this design will deplete. Be short and sweet with your content. 

Second,

Choose an icon that is fitting for your content. This little graphic will further clue the reader in on what your content is about. 

Third,

Switch from the Content tab to the Design tab and scroll to find the Image & Icon section. 

  1. Select an icon color. Keep in mind the icon color against the background circle color.
  2. Turn on the circle icon.
  3. Select a circle color. This should contrast your icon color.
  4. Turn on the circle border.
  5. Select a border color. This should compliment the icon and circle color. 
  6. Set the icon placement to “Top.”

Fourth,

Within the Design tab, scroll down to find the Text section.

  1. Set the text orientation to center aligned.
  2. Set the text color to dark (or light depending on your background).
  3. Select the last option for Text Shadow. This should be done if your background image may make your text illegible. 

Fifth,

Within the Design tab, scroll down to the Sizing section. 

  1. Set Content Width to 550 points.
  2. Set Width to 75%.
  3. Select center for Module Alignment. This ensures that your three blurbs don’t run into each other.

Voilà! These two simple Blurb Module designs will elevate the look of your site and improve readership.  If you have any questions about these Blurb Modules, contact us at wpress@uark.edu