including custom fields in an elementor archive

Including Custom Fields in an Elementor Archive

This tutorial is for people who need to include custom fields in an Elementor Pro archive template.  Elementor does not have the ability to include custom fields in an archive template, but we can use a free plugin, Elementor Custom Skin, to achieve this.

Video Summary

Setup

I’ve setup a test site using the Page Builder Framework theme.  And I’ve installed a few plugins:  All in One WP Migration for backups and restoring the site, Elementor and Elementor Pro, and Toolset Types and Toolset Views.  I also installed the Elementor Custom Skin plugin. page builder framework theme With Toolset I created a Books Custom Post Type and added two records.  The CPT has a custom field called “Format” which shows whether the book reviewed was a print or audiobook.  The goal is to have this custom field show on the book archive for each book. book editor with custom field I created a single book template using Elementor Pro.  It is easy to add custom fields in single templates using the dynamic data options.  Here is a book with the custom field showing: book single with custom field

Default Elementor Pro Book Archive

To start, I created a list type of archive for the Books Custom Post Type.  You may need to click on the settings cog in the lower left corner and select the Custom Post Type for the previews to show in the editor.  The settings for the archive are shown in the screenshot.  There is no way to add any custom fields. book archive editor view The Elementor Custom Skin plugin allows you to create a template of just one item and then that gets used in the template to create the archive.  The plugin adds a new category to the Elementor Pro theme builder for “Loop”.  Create a new Loop template and give it a name.  I named mine “Book Archive Loop”. As shown in the video, the secret to creating the loop item is to stretch the section to full width and also set the content to full width.  Then add the elements one by one.  Since we are not in the archive template, we have the option to use the dynamic data connectors, so we add the featured image, title, content, our custom field, and a button.  I made the featured image and button link to the post URL.  Here you can see the custom field.   book archive loop Now, save this and go back to the Book Archive template in Elementor.  We have an option for “Custom” under the skin drop down.  The “Custom” option was added by the Elementor Custom Skin pluign.  When we select that we can now select the Book Archive Loop we created.  Wonderful Elementor shows us the preview and it all looks good.  You can also check it on the front-end. book archive with custom skin That’s it!  I hope you found this tutorial useful.

View the Elementor Custom Skin Plugin

 

  • Thank you that have helped me a lot. I try a long time Anywhere elementor. But I think the most is include in elementor pro and with the loop plugin is perfect I think 🙂 best regards

  • >
    Scroll to Top
    elementor360

    Newsletter

    Sign up for the Elementor360 Newsletter and stay current with all the Elementor news!