Divi Theme – The Blurb Module

 In Divi Theme, Wordpress Training

Blurbs are commonly used on the homepage to display a row of icons and small snippets of text to highlight your company’s strengths, services or features. The icons are also usually linked to the appropriate pages within your website (for example you could have an icon of a map and some text about the location of your business and link this to your contact page). Here is an example of what Blurbs look like:
blurb
Here’s how you can update the icons, links and text in your Blurb section of your website.

 

  1. To edit your Blurb module, find the Blurb that you would like to edit and simply click on the icon to the left of the grey block that looks like 3 horizontal lines.
  2. Once you have clicked this icon you will be taken to a ‘Blurb Module Settings’ popup box, here you can edit the details as below (from top to bottom):

The ‘Title’ field allows you to put a heading underneath your icon or image, you can either change the existing Title or add one in if you don’t have one already and you would like one.

The ‘Url’ is where you can copy and paste a link to a page on your website or another website if you wish, putting a link in here will make the image or icon clickable and will take the user to the page that you have linked. Below this section you can choose whether the Url opens ‘In The New Tab’ or ‘In The Same Window’, the first option will open the website in a new tab, rather than in the current tab and would take the user off your website, this is recommended if you are linking to another website besides your own. If you are linking to a page within your website, the ‘In the Same Window’ is best.

The ‘Use Icon’ option gives you the choice to choose from a range of available icons, which appear if you click ‘Yes’, if you click ‘No’, then you can upload your own image in the next section.

If you have an image in mind already, you can either copy and paste the URL for the image if it is already online, or you can upload an image from your computer by clicking the ‘Upload an image’ button, then choosing the ‘Upload Files’ tab from the top of the pop-up box, followed by selecting your file and clicking the ‘Set As Image’ button.

The next field ‘Alternate text’ is recommended to fill in with a description of the image as it provides any necessary information if the image does not load, appear properly, or in any other situation where a user cannot view the image. It also allows the image to be read and recognized by search engines.

For text colour, the rule is if your text is being placed onto a dark background the Text Color should be set to ‘Dark’. Vice versa, if your text is being placed onto a light background, the Text Color should be set to ‘Light’.

The Text Orientation dropdown menu allows you to specify the orientation of your text to be Left Justified, Centered, or Right Justified.

The ‘Content’ text box is where you can paste or type a short description or summary (just like the blurb of a book). This will appear under the icon/image and title.

Finally the ‘Admin Label’ is where you can give your module a name for easy identification when you are editing your page, you can give this any name you like to help you recognize the content in the module, such as ‘Contact Us blurb’. The CSS ID and CSS Class is for backend code purposes only and you do not need to worry about this as we have already preset this information for you.

  1. Now you just need to click ‘Save’ and then ‘Update’ the page and your revised or new blurb will appear when you view the page!
Recent Posts

Subscribe for the lastest Wordpress news, tips & tricks!

Stay up to date on the latest features and important updates for Wordpress.

Ta Da! you are now on the list. Nice work!