Creating and editing pages
Last updated August 5, 2026
Objective
This guide provides a high-level overview of the Recur Website Builder, specifically focusing on the Pages section. It covers the core "left-to-right" workflow: selecting components from the left, dragging them to the center, and customizing them on the right.
Key Steps
Step 1: Access and Manage Pages
Navigation: From the Recur dashboard, go to the Website Builder and select Pages.
Page Management: Here you can see a list of all existing pages.
Creation: To start from scratch, click Create New Page, or click on an existing page (like "Home") to begin editing.
Step 2: Structure Your Layout
Before adding text or images, define the structure using the Layout tab on the left:
Grid: Use this to create rows with multiple columns (e.g., a 2-column or 3-column split).
Flex: Choose this for dynamic containers where you need items to resize or "wrap" based on screen size.
Columns: Place content specifically on the left, right, or center of the screen.
Spacing: Drag the Space component to add "white space" between sections to prevent the page from looking cluttered.
Step 3: Add and Customize Content
Once your layout is set, drag items from the Content tab into your layout boxes:
Heroes: Use these for the top of your page. Options include Background Image, Image Carousel, Split Screen, or a muted Video Background.
Stats: Use this component to highlight organizational milestones (e.g., "5,000+ Members"). You can edit both the labels and the numbers in the right-hand panel.
Call to Action (CTA): Drag a CTA box to encourage specific behaviors, like "Join Now" or "Learn More."
Buttons & Links: Click any button to change the text and assign a link to an internal page or an external URL.
Step 4: Integrate Media and Recur Data
Media: Use the Media section to drag and drop images or video players onto your page.
Recur Components: Drag and drop live data such as Event Lists, Membership Tiers, or Donation Forms directly into your layout.
Custom Code: Use the Embed tool to paste custom HTML if you have specific external tools you need to display.
Cautionary Notes
Save Your Work: While the drag-and-drop interface is intuitive, ensure you save your changes before navigating away from the page to avoid losing your layout progress.
Mobile Responsiveness: Always check how your Hero images and Grids look on the mobile preview. A 4-column grid may look great on a desktop but might require a "Flex" adjustment for smartphones.
Video Backgrounds: When using a video background in a Hero section, remember that it will play without sound to ensure a smooth, professional user experience.
Tips for Efficiency
The "Three-Zone" Workflow: Remember the logic: Left (Pick your tool) → Middle (Place your tool) → Right (Style your tool).
Consistent Branding: Once you select a font or button color in the right-hand panel, try to replicate those HEX codes across other components for a cohesive "brand" look.
Link Testing: After setting up a Call to Action, always use the "Preview" mode to click the buttons and ensure they lead to the correct registration or info pages.