Introduction
Creating a compelling resource library is a powerful way to engage your audience, generate leads, or provide exclusive content to approved users. However, managing access to these valuable resources – ensuring only approved users can view or download them – often presents a technical challenge.
Fortunately, modern WordPress page builders, combined with a robust content gating plugin like WordPress Gatekeeper Pro, make it straightforward to build sophisticated gated content listing pages. This guide will walk you through the process, focusing on how to integrate gated resource cards into your page builder layouts.
Understanding Gated Content Listing Pages
A gated content listing page, often referred to as a resource library or download centre, is a centralised hub displaying multiple protected resources. These resources might include whitepapers, e-books, premium videos, templates, or internal documents. The "gated" aspect means visitors must first submit a request and be approved before they can access the content.
The goal is to present these resources in an organised, visually appealing grid or list, typically using "resource cards." Each card provides a snippet of information about the resource, along with a clear call to action to request access. This approach streamlines lead generation, enhances the experience for approved users, or secures proprietary information within an organisation.
The Role of WordPress Gatekeeper Pro
WordPress Gatekeeper Pro is purpose-built to manage access to your digital assets. It simplifies the process of restricting downloads, videos, or page content, and handles the entire access request and approval workflow.
Crucially for listing pages, Gatekeeper Pro provides a powerful [resource_card] shortcode and a dedicated Elementor widget. These components dynamically render a complete resource card, displaying the content's thumbnail, title, description, and an action button that intelligently changes based on the user's access status (e.g., "Request Access" or "View Resource"). This makes integration with any WordPress page builder remarkably efficient.
Preparing Your Gated Content
Before building your listing page, you need to set up the content you wish to gate. This involves configuring Gatekeeper Pro and preparing your individual resources.
1. Install and Activate Gatekeeper Pro
Ensure you have the Gatekeeper Pro plugin installed and activated on your WordPress site. This will enable the necessary functionality for content gating and resource card generation.
2. Create Your Resource Content Type
Gatekeeper Pro works with any public WordPress post type. For a dedicated resource library, it's best practice to create a custom post type (CPT), for example, named "Resources". You can use a plugin like Custom Post Type UI (CPT UI) or register it programmatically.
Ensure your CPT supports a featured image, title, and content/excerpt, as these will be used by the resource card.
3. Enable Gatekeeper Pro for Your CPT
Navigate to Gatekeeper Pro > Settings > General. Under "Enable on Post Types", select your "Resources" custom post type (or any other post type you wish to gate). This will add the "Gatekeeper Pro" meta box to your resource editing screen.
4. Add and Gate Your Resources
Now, create individual "Resource" posts:
- Go to Resources > Add New (or your CPT's equivalent).
- Enter a Title and Description (or content) for your resource.
- Set a Featured Image, which will serve as the resource card's thumbnail.
- In the "Gatekeeper Pro" meta box, tick the "Locked" checkbox.
- Choose your "Unlock Mode" (e.g., "Per-item Token" for individual access or "Sitewide Token" if one token unlocks all).
- Attach your protected file (e.g., PDF, ZIP) or video (MP4, MOV). Gatekeeper Pro handles secure storage and streaming.
- Publish your resource. Repeat this for all the resources you wish to list.
5. Configure Access Request Form
Review and customise your access request form fields and email templates via Gatekeeper Pro > Settings > Request Form and Gatekeeper Pro > Settings > Emails. This ensures a professional and branded user experience.
Building Your Resource Listing Page with Page Builders
The core principle for displaying gated content in a grid using page builders is to use their "Post Module" or "Loop Module" functionality. This module queries your custom post type (e.g., "Resources") and then iterates through each post, rendering a Gatekeeper Pro resource card for each one.
Here's a general approach, followed by specific examples for popular page builders.
General Page Builder Approach (Shortcode Method)
Most page builders offer a way to display dynamic post content within a loop or grid. The key is to insert the Gatekeeper Pro [resource_card] shortcode into the layout for each item in the loop.
-
Create a New Page: Add a new page titled "Resource Library" or similar.
-
Add a Post/Loop Module: Drag and drop your page builder's equivalent module onto the page (e.g., Divi's Blog Module, Beaver Builder's Posts Module, Elementor's Posts Widget or Loop Grid).
-
Configure the Query: Set the module to query your "Resources" custom post type. You'll typically find options to select post types, categories, tags, and the number of posts to display.
-
Design the Layout: Within the module's settings, look for options to customise the layout or use a custom template for each post item. This is where you'll insert the shortcode.
The shortcode you'll use is
[resource_card id="{{post_id}}"]. The{{post_id}}part is a placeholder that your page builder will replace with the actual ID of each post in the loop. The exact syntax for this dynamic ID varies by builder.
Divi Example
Divi offers powerful modules to display dynamic content.
-
Add a Blog Module: On your resource library page, add a new Divi "Blog" module or "Posts" module (if using a Theme Builder layout).
-
Configure Content: In the module settings, under Content > Content Elements, select your "Resources" custom post type from the "Post Type" dropdown.
-
Customise Layout: Set the Layout to "Grid". Then, within the Content > Elements section, disable all elements like "Title", "Excerpt", "Featured Image" etc. We will control these through the shortcode.
-
Insert Shortcode: In the Content > Content area (you might need to enable a custom content option), insert the Gatekeeper Pro shortcode:
[resource_card id="{{post_id}}"]. Divi will automatically resolve{{post_id}}to the current post's ID within the loop. -
Styling: Use Divi's design options to adjust spacing, columns, and overall presentation of your grid.
Beaver Builder Example
Beaver Builder's Posts module is ideal for this task.
-
Add a Posts Module: On your page, drag a "Posts" module from the Beaver Builder editor onto your layout.
-
Configure Content: In the Posts module settings, under Content > Source, select "Custom Post Types" and then choose your "Resources" CPT.
-
Choose Layout: Under Layout, select "Columns". This will arrange your cards in a grid.
-
Set Custom Layout: Change the "Layout" dropdown to "Custom Layout". This will reveal a text area where you can define the HTML structure for each post. Erase any default content.
-
Insert Shortcode: In the Custom Layout text area, insert the Gatekeeper Pro shortcode, using Beaver Builder's dynamic shortcode for post ID:
[resource_card id="[wpbb-post id]"]. -
Styling: Utilise Beaver Builder's style settings for column count, spacing, and responsive behaviour.
Elementor Example (Dedicated Widget)
Elementor offers a streamlined process thanks to Gatekeeper Pro's dedicated "Resource Card" widget, especially when combined with Elementor Pro's Loop Grid.
-
Create a Loop Item Template: Go to Templates > Theme Builder > Loop Item > Add New. Name it "Resource Card Loop Item".
-
Insert Resource Card Widget: Edit the new Loop Item template with Elementor. Search for the "Resource Card" widget (it will be under the Gatekeeper Pro section). Drag it onto the canvas.
-
Configure Dynamic Content: In the widget settings, ensure the "Resource ID" field is set to "Dynamic Tags > Post ID". This tells the widget to pull data for the current post in the loop.
-
Customise Card (Optional): The Resource Card widget has extensive options to control the thumbnail size, excerpt length, button text, badges, and more directly within the Elementor editor. Style the card as desired.
-
Create Your Listing Page: Go to your "Resource Library" page and edit it with Elementor.
-
Add a Loop Grid Widget: Search for and drag the "Loop Grid" widget onto your page.
-
Select Template and Query: In the Loop Grid settings, choose your "Resource Card Loop Item" template. Under "Query", set the source to "Posts" and select your "Resources" custom post type. Adjust columns and spacing as needed.
Customising Your Resource Cards
The Gatekeeper Pro [resource_card] shortcode offers several attributes for extensive customisation, whether you're using it directly or via the Elementor widget. This allows you to tailor the appearance and information displayed on each card to match your site's design and content strategy.
-
thumbnail_size: Control the size of the featured image (e.g.,thumbnail,medium,large,full, or custom dimensions). -
show_excerpt: Display or hide the post excerpt (true/false). -
excerpt_length: Set the maximum number of words for the excerpt. -
button_text: Customise the text on the action button (e.g., "Get Access", "Download Now"). -
button_class: Add custom CSS classes to the button for advanced styling. -
show_badges: Display badges (e.g., "Locked", "Approved") on the card (true/false). -
badges_position: Control where badges appear (top-left,top-right, etc.). -
show_lock_overlay: Add a visual "locked" overlay to the thumbnail (true/false).
Example shortcode with customisations:
[resource_card id="{{post_id}}" thumbnail_size="medium" show_excerpt="true" excerpt_length="20" button_text="Request Report" show_badges="true" badges_position="bottom-right"]
For Elementor users, these options are directly accessible within the widget's settings panel, providing a visual way to tweak your cards.
Advanced Considerations
-
Filtering and Sorting: For larger resource libraries, consider adding filtering and sorting options. Many page builder modules offer basic filtering by category or tag. For more advanced functionality, integrate with a dedicated filtering plugin that supports custom post types.
-
Pagination: Most post/loop modules in page builders include built-in pagination, which is essential for user experience on extensive resource lists.
-
Performance: Gated content pages can be dynamic. Ensure your caching solution is configured correctly. Gatekeeper Pro is cache-aware and works to deliver optimal performance without compromising security.
-
Analytics: Gatekeeper Pro includes a comprehensive analytics dashboard. Track how many requests are submitted, approved, and how often resources are accessed. This data is invaluable for understanding user engagement and optimising your content strategy.
Conclusion
Building professional gated content listing pages no longer requires complex custom coding. By leveraging the power of WordPress page builders like Divi, Beaver Builder, and Elementor, in conjunction with WordPress Gatekeeper Pro, you can create visually appealing, functional, and secure resource libraries with ease.
This approach allows you to efficiently capture leads, provide exclusive content to your audience, or manage internal documentation, all while maintaining complete control over who accesses your valuable digital assets. Embrace these tools to transform your content delivery and enhance your WordPress site's capabilities.


