Toolset allows you to create lists of content. These might be lists of regular posts, pages, or custom posts (like Events or News). In Toolset, such a list is called a View.

To design a single list entry (see the highlighted post in the picture below), you can use the Divi Editor.

In our example, we will create a list of tours, where “Tour” is a custom post type.

A list of custom "Tour" posts created using Toolset and Divi
A list of custom “Tour” posts created using Toolset and Divi

Toolset also allows you to use Divi for creating custom archive pages. The process for creating custom archive pages is the same as creating a View, which is outlined below. If you are new to the concept, read our short page about the meaning and importance of archive pages.

Creating a View

  1. Go to Toolset -> Dashboard.
  2. Locate the custom post type for which you want to create the View (“Tours”, in our example) and click the Create View button. If you want to create a custom archive page instead, click the Create archive button.

  1. Give your View a name.
  2. Select Display all results, and click Create View.
  3. You are taken to the View editor.

Toolset Views editor

  1. Scroll down to the Loop Editor section and  click the Loop Wizard button.

  1. In the pop-up dialog that appears, select Unformatted, and click Next.
  2. On the next screen, select the fields that you want to appear in each post listed by the View. Since we will insert all the fields using the Divi Editor, click to add only one field—the default Post title field will do.
  3. Make sure to select the Use a Content Template to group the fields in this loop checkbox.

Selecting to use a Content Template in a Loop Wizard

  1. Click Finish.

Designing a single post entry using the Divi editor

 

Single "Tour" post
Single “Tour” post

Our View will go through all the Tour posts and display them one-by-one. Now we need to determine what will appear in a single post entry.

We will use the Divi Builder editor to control the contents of a single Tour post.

 

  1. Click the Scroll down to the Content Template button.

You are moved to the Template for this View section. Here, you use the Divi Builder to design how a single entry of your View is displayed.

  1. Click the Divi Builder button.

  1. Click the Edit with Divi Builder button.

Editing a template using the Divi Builder

  1. The Edit Content Template screen opens. Scroll down to the Template section. Click the Edit with Divi Builder button.

Using the Divi Builder to create templates

  1. Now you can see the familiar Divi interface—use it to design a single post entry.

Divi Builder interface when editing a template for your custom post types

  1. Choose the number of columns. We want our single post entry to appear in two columns, so we select the two-column layout.

Inserting fields

  1. Now we are going to insert the post fields (title, featured image) and some custom fields (tour price, tour duration).To insert a field, use the following steps:
    1. Click +Insert Module.
    2. Choose the Text module.
    3. Click the Fields and Views button. A dialog with a list of fields and views appears.
  1.  Toolset "Fields and Views" dialog
    1. Locate the field you want to insert and click Insert shortcode. Your field is added in double curly brackets.

Field shortcode inserted into a Divi module

    1. Switch to the Design tab to customize your field’s appearance.
    2. Press Save and exit to close the module pop-up.

 

  1. Repeat the above steps for each of the fields you want to add. In our example, these would be:
    1. Post Title
    2. Post Excerpt
    3. Tour Price (custom price)
    4. Duration (custom field)
    5. Tour Types (custom taxonomy)
  2. To include the Read more button, you can use the Button module.

Refer to the Displaying fields in templates and content-lists documentation for more about inserting fields.

Final template created using Divi Builder and Toolset
Content Template for a single tour entry created with Toolset and Divi

 

  1. Click Update to save your Content Editor.
  2. Return to your View. Click Update to save your changes.

Inserting a View to a page

Congratulations, your View is ready! Now you can insert it anywhere you want: In a page, Divi module, or widget.

To insert a View into a regular page:

  1. Create a new page.
  2. Click the Fields and Views button.
  3. Locate the View you have just created, and insert it.
  4. Save your changes.
  5. Visit your page—It should display the View you have created:

List of custom posts you created using Divi Builder and Toolset

Beyond the basics

You can limit the list of your posts to display only those that meet specific criteria. For example, we can display only Tour posts that have a custom field, “Special Offer,” marked as checked. This is done using the Query Filter section in the View editor. In this instance, you would configure it to filter by this custom (checkbox) field, defined with Toolset Types, as displayed in the following image.

Using filters to display posts that meet certain criteria
Using filters to display posts that meet certain criteria

Creating custom searches and displaying content on a map

Besides listing your posts and pages, Toolset allows you to create custom searches and easily display content on a Google map.

Custom searches allow your visitors to easily find the exact content they are looking for by defining the search criteria (filters) themselves. For example, a Tours site could allow them to specify the type of tour they are looking for based on its price, location, and more.

Watch the video

Read more about filtering your content and adding a custom search.

Allowing the visitors to see your posts on a Google map is an important feature for sites that, for example, deal with travel, real estate or listing services, shops, or other information that can be shown on a map.

Read more about displaying content on a Google map.

Displaying contents on a Google Map using Toolset
Displaying contents on a Google Map using Toolset

What’s next?

Next Front-end forms for submitting content and registering users