Floating Blurb Module Layout


Here's how to achieve a simple 4 column layout with blurb modules in the Divi theme that automatically shift over as new ones are added.

The problem

Say you want a page with monthly updates represented as blurb modules, that looks like this:

An obvious way to achieve this is to create a four column layout and place the blurb modules in the appropriate column.

However, when you want to add a new entry, you now have to manually shift all the other modules into the next column / row. That's perhaps fine when the number of modules is low, but as you add more modules the amount of work involved in adding a new module will grow and grow.

Solution 1: Use Posts or Projects instead

An alternative to using blurb modules is to create new entries as individual posts and display them on the page using a blog module. Similarly, you could add them as individual projects displayed on the page using a portfolio module.

This has several advantages. First, space for new items will be automatically made in the layout. Second, as the number of items grow, you can use the pagination features of the blog / portfolio modules.

You do, however, need to have a post (or project) for each item, which may be overkill for short updates. You also miss out on the easy means of adding an external link directly in the page that the blurb module gives.

You're also (somewhat) tied to the layout / style of these modules, and may miss out on certain blurb style options you had in mind.

Solution 2: Floating Blurbs

One way to replicate the four column blurb layout shown above, but avoid the re-ordering problem is to place all the blurb modules in a single, wide column and then use CSS to resize and float them. This will let the blurb modules fill the available space from left to right, automatically accommodating new blurbs.

To begin, replace the four column layout with a single column layout, placing all the blurbs in the order you want them displayed, like so:

Now add the following CSS to your site. If you just want to apply the affect to a single page, add it to the "Page Settings > Advanced >Custom CSS" box:
.et_pb_blurb { 
    width: 21%; 
    margin: 2%; 
    float: left; 

.et_pb_main_blurb_image .et-waypoint { 
    opacity: 1 !important; 
Now when you view the page, you should see a layout similar to the original. The difference is that if you now add a blurb module at the start of the column, all the other blurb modules will be shifted left and down to make space for it.


Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

Your email address will not be published. Required fields are marked *.

We may earn a commission when you visit links on our website.