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:
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:
.et_pb_blurb {
width: 21%;
margin: 2%;
float: left;
}
.et_pb_main_blurb_image .et-waypoint {
opacity: 1 !important;
}Related Post: Adding CSS to the Divi Theme
0 Comments