Select Page
insert boxed list module for divi page builder
Here is the boxed list in action
Automatically adjusts length
Some list items are short
Some are longer and require wrapping on second line
boxed list module example items

Boxed List Module

Unlimited Site License

Add your list items into a module repeater field, and this module automatically stacks them in a grid to fit the available columns.

You can set text color and background color for easy and clear readability and to match the accent colours of your site.

Lists are difficult to display nicely on the web. Here’s a striking alternative to bullet points. Gives extra life to a business website that does not have a lot of content, but does have a long list to display. For example, if you have a business with a long list of services, but not much to say about each service – sounds like a job for a boxed list module!

 

*Compatible with the Divi Theme Page Builder and Elegant Themes Page Builder Plugin. Not editable with the "Visual Builder".

Installation Instructions
  1. You always need the Module Extender For Divi plugin installed on your WordPress site for the module to work.
  2. Upload the zip file to your Child Theme's modules folder. [Using FTP or File Manager, go to WP-Content > Themes > Divi-child > modules.] You will need to create a folder called "modules" the first time. The child theme can have a different name to these instructions, so long as it is your current child theme folder. Note: It is case sensitive, must be lower case "modules".
  3. Unzip the file so the unzipped module folder is in /wp-content/themes/Divi-child/modules/
  4. You can delete the zip file just to keep things tidy.
  5. Be sure to refresh your Page Builder page.

That's it! The new module will be in the list when you click "Insert Module" in the Divi Page Builder.

Editing this module is familiar to anyone using Divi Page Builder.

It uses the “Add Item” repeater:

Boxed List Module with Repeating Items

Add as many “Items” as you need for your list. Simply drag and drop.

The module will automatically fit as many columns as it can, based on its minimum width and the column you have housed it in. Even in a one column row, it will display as a four column grid. This makes list management MUCH easier, than having four separate modules, especially if you need to alter them later and then refactor them to be even in each column!

They also will automatically keep each row to be the same height, so if one wraps on to a second line, that whole row will adopt that length box. Keeps it consistent and easy to read.

Boxed List Module Editing Repeating Items

Add the text of that list item. You can also turn it into a link by adding a URL in this field.

The title for each item becomes the admin label inside that module editor.

Boxed List Module Advanced Settings

Set the font, font size, font color, background color. All the usual options you’d expect in the advanced settings.