Automatically Laid Out Blurb Modules

Here's how to achieve a simple 4 column layout with blurb modules 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.

This post may contain referral links which may earn a commission for this site

Hundreds of new features for Divi
in one easy-to-use plugin

0 Comments

Submit a Comment

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