Easily and intuitively create catalogs and menus in Divi

Update 09. December 2018: How to disable the Gutenberg Editor.

If you are using Divi, using the new WordPress Gutenberg Editor makes little sense. Use the following snippet in the “functions.php” of your active theme to disable it. The classic Divi Backend Builder will then be available to you:

add_filter( 'use_block_editor_for_post', '__return_false' );

Have you ever faced the task of creating catalogs or restaurant menu cards in Divi? Of course you can do this with some CSS or other plugins, but the Page Builder is also an excellent basis if you have the right module for it. This is where “Divi – Catalogue Lists Module” comes in. You will be surprised how easily even complex catalogs and menus can be created with it.

The individual entries are organized in a parent module for each menu. This parent module allows you to make many global settings for each menu, such as hover color, title colors, image size, currency, and more. The plugin also works with the new filter methods (Sepia etc.) introduced in Divi 3.0.91. However, you also have the freedom to overwrite these settings in the individual elements if required, which makes the module very extensive in the editing options and gives you a lot of freedom for individual editing. You can also choose whether you want to link the individual entries to other pages or whether you want to display the pictures in a lightbox, which is a very helpful function for menus, as it allows you to present dishes very well.

Exclusive only at the Elegant Marketplace

“Divi – Catalogue Lists Module” is exclusively available on the Elegant Marketplace. Buy it once and use it in all your projects.

Get it now!Demo

Watch the following video. There the individual steps are explained in detail. This is the fastest way to get the results you want.

The Parents Settings panel

The plugin can be installed in the plugin index like any other plugin via “Add New”. After that it can also be updated there. There is no need to download a new version update. Sometimes it can cause problems after updates, since it is always worthwhile to delete the localStorage first and then the browser cache. The localStorage can be easily deleted with the following command in the JavaScript Console of the browser:

Then select the module in the Page Builder from the list and perform the basic configuration in the parent module. Here you can define the basic settings for the colors, the currency, whether the currency should be before or after the price and the format of the thumbnail (if you want to use some). You can also decide here whether the individual fields link to other pages or whether the images belonging to the thumbnails should be opened in a lightbox.

The Divi – Catalogue Lists Module Parent Settings Panel

The Fields Settings panel

In the individual fields you can then make further settings, such as defining the pictures, assigning the title, setting the price and of course the description.

The Divi – Catalogue Lists Module Parent Settings Panel » Indikator Design

Some examples with the different Divi filters

Here are some examples that were created exclusively with the module settings without using additional CSS.

Here is an example where the sepia filter is applied to the images:

A Divi – Catalogue Lists Module Example with Sepia Filter applied

Here is an example with a bottom shadow:

A Divi – Catalogue Lists Module Example with Shadow Bottom applied

Here is an example with a border top:

A Divi – Catalogue Lists Module Example with Border Top applied

Here is an example with inner shadows applied:

A Divi – Catalogue Lists Module Example with Inner Shadows applied

The lightbox in action

Here is an example for the Lightbox:

A Divi – Catalogue Lists Module Example for using the Lightbox

The module can also be used as a FAQ area

Here is an example for use as a FAQ area:

A Divi – Catalogue Lists Module Example for use as a FAQ area

The module in use in extended menus

As you can quickly see, with a few simple module settings, convincing results are possible. However, more complex catalogs and menus can also be created intuitively. For this purpose,”Divi – Catalogue Lists Module” provides its own shortcode, with which you can insert catalogs and menus created in the Divi Library into tabs or accordions and any other module, which has a text editor. All you have to do is assign the menus created in the Divi Library to the category “CatalogueList”, after that it is available in a drop-down:

Here is the result with a menu embedded in tabs:

A Divi – Catalogue Lists Module Embedded Menu

Exclusive only at the Elegant Marketplace

“Divi – Catalogue Lists Module” is exclusively available on the Elegant Marketplace. Buy it once and use it in all your projects.

Get it now!Demo

Final words for your Divi Catalogues and Menus

As you can see, this is a very powerful module to easily create intuitive catalog lists or menu cards. However, it is also great for creating FAQ’s or advanced navigation pages.

Have you suggestions for improvements to this article? Just use the comment area below. Do you want support for implementation or do you need help elsewhere? You can book us. For this, simply use our contact form to get in touch with us.

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

Get the best out of your web!

Bruno Bouyajdad

Bruno Bouyajdad

Webentwicklung, AI, Blogautor

Über den Autor

Bruno Bouyajdad liebt es, komplexe oder komplizierte Zusammenhänge möglichst einfach zu erklären, damit Menschen, die sich für die Themenbereiche, die er behandelt, einen möglichst einfachen Zugang bekommen. Es fasziniert ihn, sich in diese Welten der digitalen Bits einzugraben und dann Lösungen für seine Follower bereitzuhalten, welche ihre Probleme auf möglichst einfache Weise lösen.

Nach knapp 10 Jahren Erfahrung im Außendienst für Datensicherungslösungen KMU (vor den Clouds) und Photovoltaik, ist er seit über 13 Jahren Webentwickler, mit viel Erfahrung in PHP, JavaScript, WooCommerce, WordPress und Multisite-Netzwerken, auch für Multi-Language-Lösungen. Insbesondere in den Bereichen Plugin-Entwicklung, Theme-Erstellung, Server-Administration und vieles mehr. Er ist auch Experte in Sachen PageSpeed Score-Optimierung und Sicherheit. Dazu kleinere Projekte mit Symfony, VUE, React.

Dazu gehören auch Webdesign, Content-Erstellung, SEO, insbeondere Technical-SEO. Er beherrscht die komplette Adobe Master Suite, hat gute Kenntnisse in C4D, FCPX und Logic Pro.

Seit 5 Jahren begeistert er sich zudem für die Programmierung neuronaler Netzwerke in Python.

Weiterhin teilt er sein Wissen als Blog-Autor, ist begeisterter Fotograf und wenn die Zeit es zulässt, erstellt er hochwertige virtuelle Panorama-Touren, oder schneidet begeistert Videos.

Zudem ist er ChatGPT Prompt-Engineer. Das war einfach Liebe auf den ersten Blick.

In seiner Freizeit beschäftigt er sich gerne mit naturwissenschaftlichen und philosophischen Fragestellungen oder betätigt sich sportlich beim Wandern, auf dem Fahrrad oder im Studio.

Udacity Certificate AI Programming

One more Cookie Box

This site uses cookies to better understand how it is being used: Info.

Thanks for your help 🙏

Your selection was saved!



To continue, you must make a cookie selection. The various options and their meaning are explained below.

  • All right, I'm glad to be here..:
    Tracking and analysis cookies. This helps us to better understand what you like about our site and to provide you with good and interesting content. Of course, this data is collected anonymously. We use Google Analytics, Facebook Pixel and LinkedIn Pixel. Learn more in our privacy area.

You can change your cookie setting here anytime: Imprint. Imprint


Would love your thoughts, please comment.x