{"id":51423,"date":"2026-03-31T09:54:11","date_gmt":"2026-03-31T09:54:11","guid":{"rendered":"https:\/\/crocoblock.com\/knowledge-base\/?post_type=article&p=51423"},"modified":"2026-06-12T08:17:05","modified_gmt":"2026-06-12T08:17:05","slug":"how-to-create-listing-grids-for-custom-post-types-in-divi","status":"publish","type":"article","link":"https:\/\/crocoblock.com\/knowledge-base\/jetengine\/how-to-create-listing-grids-for-custom-post-types-in-divi\/","title":{"rendered":"How to Create Listing Grids for Custom Post Types in Divi"},"content":{"rendered":"\n

Listing Item<\/strong> is one of the basic website elements. In this tutorial, we display how to build a JetEngine’s <\/em>Listing Template<\/a><\/strong> in Divi Builder step-by-step and how to use the created Listing Grid<\/a><\/strong> afterward. We will focus on setting up the Dynamic Widgets<\/strong><\/a> to display the Custom Post Type<\/strong><\/a> content inside the Listing Template<\/strong> using the Divi Builder.\u00a0<\/p>\n\n\n\n

Create a Listing Template<\/h2>\n\n\n\n
\n

First, proceed to WordPress Dashboard > JetEngine > Listings\/Components<\/em><\/strong> and click the \u201cAdd New Item<\/strong>\u201d button. <\/p>\n\n\n\n

In the newly opened pop-up, select the \u201cPosts\u201d Listing source<\/strong>. In the From post type<\/strong> dropdown, select the required CPT<\/strong>. Enter the Listing item name<\/strong> and choose the \u201cDivi\u201d option as the Listing view<\/strong>.<\/p>\n\n\n\n

\"set<\/a><\/div>\n\n\n\n

Click the \u201cCreat Listing Item<\/strong>\u201d button.<\/p>\n\n\n\n

The Listing Item <\/strong>settings are opened in the Divi Visual Builder. <\/p>\n\n\n

<\/svg><\/div>
Things to know<\/div>

The main building blocks of Divi are sections, rows, columns, and modules. Sections contain rows, which contain columns, which contain modules.
\nSections are the biggest building block in the Divi builder. You can think of them as horizontal stacking blocks that can group your content into visually distinguishable areas. There are three types of sections: \u201cStandard\u201d, \u201cFullwidth\u201d, and \u201cSpecialty\u201d. Rows are nested inside sections and can contain a variety of column layouts that help structure your content. Columns are nested inside rows and create a basic boxed structure for your content. Every row has a column. Modules are the content blocks of Divi.<\/p><\/div><\/div>\n\n\n\n

Click the \u201c+<\/strong>\u201d button to add the desired type of row.<\/p>\n\n\n\n

\"add<\/a><\/div>\n\n\n\n

We select a single column for now. Once the row is chosen, another pop-up appears where you can add the elements. We add the Dynamic Image<\/strong><\/a> element. <\/p>\n\n\n\n

In the General <\/strong>tab, you can select the Source <\/strong>out of the available options (\u201cPost Thumbnail\u201d in this case), set the image manually, or add the Image URL Prefix<\/strong>. <\/p>\n\n\n\n

\"general<\/a><\/div>\n\n\n\n

In the Layout <\/strong>tab, you can set an image\u2019s dimensions, Lazy Load<\/strong>, or links attached, Fallback image<\/strong>, or Context<\/strong>. <\/p>\n\n\n\n

\"layout<\/a><\/div>\n\n\n\n

Additionally, you can set a desired Element Label<\/strong> so it is distinguished among other Dynamic Images<\/strong> in the Layout <\/strong>section.<\/p>\n\n\n\n

\"element<\/a><\/div>\n\n\n\n

The Design <\/strong>tab offers usual style settings.<\/p>\n\n\n\n

\"design<\/a><\/div>\n\n\n\n

You can add a new element either by clicking the \u201c+<\/strong>\u201d button at the bottom of all elements or by proceeding to the needed Column > Elements <\/em><\/strong>and clicking the \u201c+ Add Element<\/strong>\u201d button.<\/p>\n\n\n\n

\"add<\/a><\/div>\n\n\n\n

Now, let\u2019s add the Dynamic Field<\/strong><\/a> element. This is one of the key elements of Divi dynamic content in Crocoblock, allowing you to pull both default and custom meta fields. You can display the general posts\u2019 elements, such as title, using the \u201cPost\/Term\/User\/Object Data\u201d Source <\/strong>and selecting the \u201cTitle\u201d (or any other) Object Field<\/strong>. <\/p>\n\n\n\n

\"display<\/a><\/div>\n\n\n\n

You can also show custom fields<\/a> data with the help of the Dynamic Field<\/strong>. For that, use the \u201cMeta Data\u201d Source <\/strong>and select the needed Meta Key<\/strong>. For example, we display the \u201cAddress\u201d field. <\/p>\n\n\n\n

\"display<\/a><\/div>\n\n\n\n

In the Layout <\/strong>section, you can add an icon to the field, set up the Fallback<\/strong>, or the Callback<\/strong>. You can also customize the field output.<\/p>\n\n\n\n

For example, for the \u201cprice\u201d field, we add the \u201cFormat number\u201d callback and customize the output in the Field Format<\/strong> input.<\/p>\n\n\n\n

\"layout<\/a><\/div>\n\n\n\n

In the same way, you can change the Element Label<\/strong> for the Dynamic Field<\/strong> in the dedicated section. <\/p>\n\n\n\n

\"change<\/a><\/div>\n\n\n\n

In the Design <\/strong>tab, you find all the style settings for the Dynamic Field<\/strong>. <\/p>\n\n\n\n

\"design<\/a><\/div>\n\n\n\n

Additionally, you can display the post\u2019s terms using the Dynamic Terms<\/strong><\/a> element. In the General <\/strong>settings tab, you can select the taxonomy<\/a> from which you need terms to display, choose how many terms will be displayed, or if you need to add any text before or after the term.   <\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n

You can also change the Element Label<\/strong> for the Dynamic Terms<\/strong>.<\/p>\n\n\n\n

\"change<\/a><\/div>\n\n\n\n

Set the desired styles in the Design <\/strong>tab of the Dynamic Terms<\/strong> element.<\/p>\n\n\n\n

\"design<\/a><\/div>\n\n\n\n

You can add the Dynamic Link<\/strong><\/a> element for displaying content from a predefined source (e.g., text, image, or link) with a link attached to it. For example, here, we display the post\u2019s title with the link to the post itself.<\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n

You can also set the desired styles in the Design <\/strong>tab. <\/p>\n\n\n\n

\"dynamic<\/a><\/div>\n\n\n\n

You can also use other dynamic elements, such as Dynamic Meta<\/strong><\/a> or Dynamic Repeater<\/strong><\/a>. <\/p>\n\n\n\n

Once you are ready with the Listing Template<\/strong> settings, click the \u201cSave<\/strong>\u201d button. <\/p>\n<\/div><\/div>\n\n\n\n

Add the Listing Grid to a Page<\/h2>\n\n\n\n
\n

Proceed to the page where you need to display the listing. We create a new page in this case. Give your page a title, then click \u201cUse Divi Builder<\/strong>\u201d. This will reload the page onto the front end of the website with the Divi Visual Builder enabled.<\/p>\n\n\n\n

\"use<\/a><\/div>\n\n\n\n

Add the desired type of column and add the Listing Grid<\/strong> element. Select the listing you created in the Listing <\/strong>dropdown. Here you can set the different Columns Number<\/strong> for different devices. You can also set the Min <\/strong>and Max Posts Numbers<\/strong>. <\/p>\n\n\n\n

Besides, you can also see the following settings:<\/p>\n\n\n\n

\"listing<\/a><\/div>\n\n\n\n