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

Before you can use a pre-built pods layout you must have the following plugins installed and active: 

  1. Pods – Custom Content Types and Fields
  2. Pods Beaver Themer Add-On

Step 2: Enable Pods Package Migration

Once pods is installed and active, go to:

  1. Dashboard > pods admin > components 
  2. Then under "Migrate: Packages" click "Enable"

Once this is enabled, you should see a "Migrate Packages" link appear under pods admin - components


From the dashboard > pods admin > components: 

  1. Click "Migrate Packages" 
  2. Select "Import"
  3. Then click continue

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"

  1. Paste your copied code here without any spaces above or below it
  2. Then click "continue"
  3. The import/export bar above should be green with a check mark beside it, and results should say "Import complete"
  4. 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

  1. From the dashboard go to tools > import
  2. Under "WordPress" select "Install"
  3. 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:

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

 

Step 5: Add New

Now that your pods have been migrated and your themer layouts have been imported, you are ready to add new


Fill out the fields and publish

View your published post type to see the themer layout. You can edit it to change styling/sizing/arrangement if needed. 

Singular: 

Archive: 

How to make changes to pre-built Pods layouts

Editing an existing field
  • Go to dashboard > pods admin > edit pods
  • Click "edit" under the desired pod name
  • Make your changes, then save the field
  • Save the overall pod before you continue

If you made changes to the field "name," you will need to update this name in any themer layouts you may have

Duplicating an existing field

Go to dashboard > pods admin > edit pods

Click "duplicate" under the field you want to replicate

Change the name of the field and the label, then save the field

Save the overall pod before you continue

You will need to add this field to any themer layouts you may have

Deleting a field
  • Go to dashboard > pods admin > edit pods
  • Click "delete" under the field you want to get rid of
  • Save the overall pod before you continue

You will need to remove this field from any themer layouts you may have

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.