Pods Layouts

Select from the available pre-built pods layouts below.

Custom Property Listings

Use these pods layouts for property listings that need custom styled themer layouts. WP listings and iHomefinder don’t allow themer layouts.

Select Layout

Food/Services Menu

Layouts suitable for restaurant menu items or services. Display an item with an image, short description and price.

Select Layout

Photo Galleries

Layouts suitable for photographers. Add gallery images and have them display in a photo gallery or slideshow module.

Select Layout

Testimonials

Layouts used for testimonials or customer feedback. Includes gravity form and pods feed setup instructions.

Select Layout

Recipes

Layouts used for food or cocktail recipes. Can be modified for crafts or game rules.

Select Layout

Team Members

Layouts used for team members, board members, teachers, doctors, etc.

Select Layout

How to use pre-built Pods layouts

Step 1: Install the Pods Plugins

Step 2: Enable Pods Package Migration

Step 3: Import a Pods Package

Go to the pods package you would like to import from the styleguide (this example is using team members), then triple-click to select all of the pods package code and copy it.

Back in your migrate packages screen, you should see an empty block titled "Paste the Package Code"

Paste your copied code here without any spaces above or below it
Then click "continue"
The import/export bar above should be green with a check mark beside it, and results should say "Import complete"
The pods package you selected should be listed under results as seen in the image below

Step 4: Import Themer Layouts

Now that your pods package has been added, you can import the themer layout to go with it

From the dashboard go to tools > import
Under "WordPress" select "Install"
Once its installed, select "Run Importer"

Important Note: Importing themer layouts provided to you by PWS via download from the styleguide is the second ONLY acceptable use case for the WordPress Importer plugin, the first being to import blog posts. After importing the layouts, please deactivate and remove this plugin.

Go to the pods package you would like to import from the styleguide (this example is using team members) - the same one from step 3:

Click the "Themer Layouts" download button and save the xml
Then in the WordPress importer, select this xml file
Click the "Upload file and import" button
Assign posts to an existing user > select your admin account from the dropdown
Check the box to import attachments
Then click submit to complete the import

Step 5: Add New

How to make changes to pre-built Pods layouts

Editing an existing field

Duplicating an existing field

Deleting a field

Editing the singular themer layout

After you make changes to your pod, go to an already added post and add to the fields, then update this post

View the post and select to open the singular themer layout in beaver builder

Make sure you view the post that you just added all the new information to so that you can see those fields and their content and you can style them appropriately

Open the html block and change any field names that you changed in the edit pods screen

Duplicate sections for any fields you duplicated, and update the field names

In this example, the following items were done to the pod:

I edited the social_link field and changed the name to "linkedin"
I duplicated the linkedin field and changed the name to "instagram"
I duplicated the email field and changed the name to "phone"

In this example, the following items were done to the singular themer layout:

I changed the field name in the social_link a tag to "linkedin"
I duplicated the linkedin a tag and changed the name to "instagram" - I replaced the linkedin icon with an instagram icon from fontawesome
I duplicated the email a tag and changed the name to "phone" - I changed the "mailto:" link to a "tel:" link - I replaced the envelope icon with a phone icon from fontawesome

Once you like how it looks, save and publish the layout

Editing the archive themer layout

Once you have your fields properly mapped out on your singular themer layout, you can copy these for your archive post layout

Head to your archive page, then click to open the themer layout in beaver builder

Click the post settings and edit the custom post layout

Paste your new fields here from your singular layout and rearrange them as needed - remember to change the names of any existing fields you made changes to

Save and publish your layout

When to use the post template download

If you have a site with a page that needs your pods on it, and its not an archive page, it will not need to use main query

For example if you want to place a posts module with team members on the about page in a row, you can download and import and use this template. It is the exact same as the themer layout template, but content is set to custom query instead of main.

You can also just edit the themer layout, save the posts module from there, load it onto the about page and change it from main to custom query > then change the post type to team members and adjust the order.

Updated Fields related to Personally Identifiable Information are present

Created Guide: Leapfrog Theme Setup Guide

Image optimization guide – 22310

Pods Layouts

Custom Property Listings

Food/Services Menu

Photo Galleries

Testimonials

Recipes

Team Members

How to use pre-built Pods layouts

How to make changes to pre-built Pods layouts