Using the content section in pages

Last updated August 5, 2026

Objective

This guide details the Content Components within the Recur Website Builder. These tools are the building blocks used to fill your layouts with text, interactive buttons, professional headers, and data displays, allowing you to create an engaging and functional member experience.

Key Steps

Step 1: Add Text and Headings

  • Headings: Drag the Heading component onto your page. Use the right-hand panel to adjust the size from H1 (largest) to smaller variants. You can align the text left, center, or right.

  • Standard Text: Use the Text component for paragraphs. This opens a text editor where you can type freely, adjust font size, and set Margins or Padding to control the space around your writing.

Step 2: Organize Data with Tables

  • Creation: Drag the Table component to display structured information like board member directories (Name, Email, Phone) or association stats.

  • Styling: In the settings, toggle the Header Row (the top colored bar) on or off. Choose from styles like Striped, Bordered, Compact, or Minimalistic.

  • Colors: Customize the background, header text color, and border color to match your branding.

Step 3: Insert Interactive Buttons

  • Functionality: Use the Button component to direct users to specific actions like "Sign Up" or "Join Now."

  • Linking: You can paste an External URL (like a link to a separate site) or link to an Internal Page within your Recur website.

  • Visuals: Toggle between a Filled button or an Outline style. You can control both vertical and horizontal alignment to place the button perfectly relative to your text.

Step 4: Master the Hero Section

The Hero is the high-impact visual at the top of a page.

  • Layout Styles: Choose from Carousel (sliding images), Split Screen, Video Background (no sound), Minimal Centered, or Offset.

  • Managing Slides: In the settings, you can add, duplicate, or delete slides. Click an individual slide to upload a specific photo from your Library and add a unique description.

  • Integrated CTAs: Toggle Show CTA Buttons to add "Get Started" buttons directly inside the Hero image. These can be linked to your Membership or Event pages.

Step 5: Highlight Success with Stats and CTAs

  • Stats Component: Showcase your association’s impact by adding values (e.g., "5,000"), labels ("Members"), and descriptions. Enter these in the settings using the Value, Label, Description format.

  • Call to Action (CTA) Box: Use this specialized box for a "final push" at the bottom of a page. It includes a title, description, and up to two buttons (Primary and Secondary) to drive registrations or inquiries.

Cautionary Notes

  • Heading Hierarchy: While H1 is the largest, use it sparingly (typically once per page) for the main title to ensure your site remains organized and easy for search engines to read.

  • Video Backgrounds: When selecting the Video Background style, ensure you have an actual video URL or file ready, as it will appear as a placeholder until the media is embedded.

  • Navigation Component: Although a Navigation component exists in the menu, your site already has a global header/navigation bar managed in the site settings; you typically do not need to add a second one manually.

Tips for Efficiency

  • Table for Directories: Use the Table component to create a clean, professional-looking list of board members or staff that is easy for visitors to scan.

  • Internal Linking: When setting up a Hero or CTA button, use the Internal Page dropdown to select your Membership page; this ensures the link stays active even if you change your domain name later.

  • Mobile Padding: When adding large amounts of text, use the Padding settings to ensure the words don't touch the very edge of the screen on mobile devices.

Link to Video

https://www.loom.com/share/d518e5d7ac834a19bdd6a5405c23442a