Creating a homepage in Recur Sites
Last updated August 5, 2026
Objective
This guide provides a step-by-step example of how to build a professional, engaging homepage using the Recur Website Builder. It covers structuring the page layout, integrating live Recur data (events/products), and adding interactive content blocks to drive membership.
Key Steps
Step 1: Create a High-Impact Hero Section
The Hero is the first thing visitors see. It should clearly identify your association.
Component: Drag a Hero component to the top of the page.
Header & Subtitle: Use a clear title (e.g., "Software Business Leaders Association") and a subtitle that explains your mission.
Primary CTA: Enable the primary button (e.g., "Become a Member") and link it to your Internal Page > Membership.
Styling:
Background: Upload a professional image (Small size is recommended for speed).
Text Color: Adjust header and subtitle colors to ensure high contrast against your background.
Animations: Toggle on Smooth and Fade to make the text appear dynamically.
Step 2: Organize with Layout and Spacing
To prevent your site from looking cluttered, use consistent spacing.
Layout: Drag a Space component between every major section.
Settings: Change the size to Extra Large for a clean, modern look.
Structure: Use a Grid (Layout > Grid) when you want to place components side-by-side.
Step 3: Integrate Live Recur Data
Showcase upcoming activities and membership tiers directly from your database.
Grid Setup: Set a Grid to 2 Columns.
Left Column (Events): Drag the Event List component here.
Style: Change the View Type to List View for a concise look.
Description: Set to No Description if you want to keep the list compact.
Right Column (Products): Drag the Product List component here.
Filtering: Uncheck all categories except Membership.
Pagination: Set "Show Pagination" to Yes and "Maximum Products" to 3. This allows users to scroll through options without taking up the whole page.
Step 4: Add Engaging "Social Proof" Cards
Use cards to highlight association growth and success stories.
Grid Setup: Add a new Grid with 3 Columns.
Content: Drag a Card component into each column.
Card Ideas:
Growth: "We've had an increase of 25 members this month!"
Education: "Find out the best software to use for your association."
Social: "Thank you to everyone who joined our monthly luncheon."
Images: Upload small, relevant photos for each card to keep the page visually interesting.
Step 5: Final Call to Action (CTA)
Ensure visitors have a final chance to join before they reach the bottom of the page.
Component: Drag the CTA component to the very bottom.
Message: Use a strong closing (e.g., "Ready? Join the Community").
Buttons: Set two buttons—Join SPLA (Primary) and Contact Us (Secondary).
Color Styling: Go to Gradients, select a preset (like Blue), and then click Custom Color under the background settings to apply the professional theme.
Cautionary Notes
Previewing: When using the editor, you will see captions like "Extra Large Space." Use the Preview button at the top to see the "public version" without those technical labels.
Link Readiness: If you haven't built your membership or contact pages yet, you can still place the buttons now and come back later to add the Internal Page Link.
Alignment: If your Grid columns look uneven, check that both sides (e.g., Event List and Product List) are using the same "List View" style.
Tips for Efficiency
Image Sizing: Always select the Small option when uploading photos for Cards and Heros unless you specifically need high-resolution full-width backgrounds. This keeps your site loading fast.
Drag-and-Drop Navigation: If you accidentally place a space or grid in the wrong spot, click and hold the component to drag it up or down the page structure.
Smooth Transitions: Using the same "Extra Large" space between every section creates a visual rhythm that makes the site feel professionally designed.