Skip to main content

How to Create a Group Landing Page Template

Build a single Elementor Theme Builder template that renders for every group on your site, using the five Lifter Elements Groups widgets and two Groups dynamic tags. Each group page then shows its own banner, logo, name, course card, member grid, invite link, and leave button without editing individual group posts.

Example group page template

Requirements
  • Lifter Elements with LifterLMS Groups installed and activated
  • Elementor Pro (required for Theme Builder)
  • At least one group with a banner, logo, members, and a linked course (see the LifterLMS Groups documentation)

1. Create the Theme Builder template​

  1. From the WordPress admin, go to Templates > Theme Builder.
  2. Click Add New at the top of the screen.
  3. For Template Type, choose Single Post.
  4. Give the template a name (for example Group Page Template) and click Create Template.

When the Elementor editor opens, it offers to insert a template from the library. Close that dialog to start with an empty canvas.

2. Build a hero with banner, logo, and name​

The hero identifies which group the visitor is viewing.

  1. Drag a new container (or section) onto the canvas with a single-column structure.
  2. In its settings, open the Style tab > Background > Background Type: Classic.
  3. Click the Background Image dynamic-tag icon and choose Group Banner from the LifterElements: Groups group. The background now pulls from the current group's banner image.
  4. Set Min Height to about 320px.

Inside the column:

  1. Drop an Image widget. On its Content tab, click the dynamic-tag icon next to Image and select Group Logo. Constrain the width to about 120px so it displays as a badge.
  2. Drop a Heading widget below it. Click the dynamic-tag icon next to Title and select Group Name. Set the heading size to XXL and the text color to white for contrast against the banner.

Every group page now renders its own banner, logo, and name.

tip

Add a sub-heading bound to the Group Visibility dynamic tag to show whether the group is Open, Private, or Closed.

3. Add the course card​

  1. Drop a new single-column section below the hero.
  2. Inside it, drop the Group Page Course Card widget.
  3. Leave Use Current Group set to Yes (the default). The widget resolves to whichever group post is being rendered.

The widget detects whether the linked content is a course or a membership and shows the relevant meta (difficulty and lesson count for courses; nothing extra for memberships).

4. Add the members grid​

  1. Drop another section below the course card.
  2. Drop the Group Members widget into it.
  3. Leave Use Current Group set to Yes.
  4. On the Content tab, set Members to Show to a cap that suits your layout (for example 12).
  5. On the Style tab, adjust avatar size, card spacing, and column count to match your site.

5. Add the invite and leave buttons​

  1. Drop a new section with a two-column structure.
  2. In the left column, drop the Group Invitation Link widget. Set the button text to Join this Group.
  3. In the right column, drop the Leave Group widget. Style its button with a warning color so it is clearly distinct from the primary button.

Both widgets are safe to leave visible to everyone:

  • The invite button only renders when the group has an open invitation link enabled (see Troubleshooting).
  • The leave button only renders for users whose role in the group is member; admins and leaders do not see it.
tip

To hide the whole button section from non-members, open the section's Advanced tab > Conditional Logic, click Open Conditional Logic Settings, and add the rule User Group Enrollment is Enrolled in current group. The section then shows only to existing members.

6. Set display conditions​

  1. Click the publish settings arrow next to the green Publish button at the bottom of the panel.
  2. In Conditions, click Add Condition.
  3. Set Include > Singular > Groups (the llms_group post type).
  4. To apply the template to all groups, leave the third dropdown at All Groups; to target one group, pick it from the list.
  5. Click Save & Close, then Publish.

The template is now active for every group post matching the condition.

Result​

Visit any group's URL on the front end (typically /group/<slug>/), logged out for a public group or as a member for a private one. The page renders the banner, logo, name, course card, members, and action buttons populated from that group's data.

If the page renders without the group's data (only default placeholder content), see Troubleshooting. The usual causes are a missing display condition or LifterLMS Groups not being active.

tip
  • Personalize by role: bind a Heading widget to the Current User Group Role dynamic tag for a "Welcome, Leader" or "Welcome, Member" greeting. The tag returns empty for logged-out visitors and non-members.
  • Add a leader-only sidebar: see How to Create a Leader-Only Sidebar, which uses the User Group Role condition.
  • Show a "Group is full" message: add a section with that heading and gate it with Group Seat Availability is Current group has no open seats; gate the invite section the opposite way so visitors see one or the other.