Using layouts in pages
Last updated August 5, 2026
Objective
This guide explains how to utilize the Layout section in the Recur Website Builder. Layouts act as the structural "skeleton" of your page, allowing you to organize content using Grids, Flexboxes, Columns, and Spacers to ensure a professional look across desktop and mobile devices.
Key Steps
Step 1: Configure Page Settings
Before building the layout, set up the basic page details in the Page tab on the right-hand sidebar:
Page Title: Edit the title (e.g., "Front Page"). You can choose to Show or Hide this title on the actual live page.
Publish Date: Manually set a date (e.g., January 31, 2026) to show users when the content was posted.
Search Engine Indexing: Select Allow Indexing to make your page searchable on Google, or Block Indexing to keep it private/unlisted.
Step 2: Use the Grid Layout
The Grid is best for structured, uniform rows and columns:
Placement: Drag and drop the Grid component from the left sidebar onto your page.
Columns: In the right-hand settings, adjust the number of columns (e.g., 3 or 5).
Column Gap: Adjust the spacing between boxes using Pixels (PX). Increasing this number (e.g., from 30px to 70px) creates more white space between your content blocks.
Step 3: Use the Flex Layout (Mobile-Friendly)
Flex is a "flexible" container that automatically adjusts based on the size of the screen:
Direction: Choose between Horizontal or Vertical alignment.
Wrapping: * Wrap: Content that exceeds the row width automatically moves to the next line.
Reverse Wrap: New content is added to the top rather than the bottom.
Justification: Use "Space Between" or "Space Around" to instantly align buttons or icons evenly within the box.
Padding & Borders: Add internal spacing (Padding) around your items or toggle a Border on/off for visual separation.
Step 4: Use the Column Layout
Columns are the primary building blocks for large sections:
Width: Choose preset widths such as 50%, Two-Thirds, or Full Width.
Backgrounds: Toggle Use Theme Background to follow your site’s default colors, or select Custom Background to apply specific colors or gradients.
Border Radius: Use this to round the corners of your column (e.g., a setting of 10 or 50).
Step 5: Add Spacing
To prevent your page from looking cluttered, use the Space component:
Drag and drop Space between any two layouts (e.g., between a Column and a Grid).
Presets: Choose from Small, Medium, Large, or Extra Large to quickly define the vertical gap.
Cautionary Notes
Preview Mode Glitches: If the preview mode displays text labels like "Medium" where your spacers should be, don't worry—these are placeholders for the editor and will not appear on your live public website.
Index Blocking: If you select "Block Indexing," your members will not be able to find that specific page through a Google search; they will need the direct URL.
Mobile Testing: Always use the iPad and Phone icons on the left-hand side to verify that your Flex and Grid layouts stack correctly on smaller screens.
Tips for Efficiency
Flex for Buttons: Use the Flex layout when creating a row of buttons or social media icons; it ensures they stay centered and neat on mobile.
Hide Titles for Homepages: For a clean "Front Page" or "Hero" look, hide the Page Title in the settings and use a custom heading component instead.
Consistent Padding: Stick to a consistent Pixel (PX) value for your column padding and grid gaps throughout the site to maintain a professional, cohesive design.