Adjusting Column Width in Pages
Last updated August 5, 2026
Objective
This guide explains how to properly select and adjust the width of columns within the Recur Website Builder Pages. Mastering this ensures your content is sized correctly and visually balanced within your page layouts.
Key Steps
Step 1: Add a Column to Your Page
Navigate to the Layout tab on the left-hand sidebar.
Click and hold the Column component.
Drag and drop it into the desired section of your page layout.
Step 2: Select the Column Container
The "Empty Space" Rule: To select the column itself, click on an empty area within the column where there is no text or other components.
Selection Indicator: You will know the column is successfully selected when the word Column appears in bold at the top of the right-hand settings panel.
Alternate Selection: If you have already clicked on a text element inside the column, look at the top of the right-hand sidebar for a blue Column breadcrumb or tab. Click it to switch focus from the text settings back to the column settings.
Step 3: Adjust the Column Width
Locate the Column Width section in the right-hand panel.
Click the Dropdown Box to see the available width options.
Select the width that fits your design (e.g., Full Width, 50%, or Two-Thirds).
The layout will adjust instantly in the editor to reflect your choice.
Cautionary Notes
Text vs. Column Settings: Be careful when clicking. If you click directly on a paragraph or heading, the sidebar will display Text Settings instead of Column Settings. Always verify the sidebar header before looking for the width dropdown.
Layout Shifts: Changing the width of a column may cause other elements on the same row to shift or wrap to a new line. Always check the overall row balance after making an adjustment.
Tips for Efficiency
Blue Breadcrumbs: Use the blue selection tabs at the top of the sidebar as a "shortcut" to navigate between parent containers (like Columns) and child elements (like Text or Images).
Consistent Design: If you are using multiple columns in a row, try to use matching widths (e.g., two 50% columns) to maintain a symmetrical and professional look.
Check Mobile View: After adjusting widths, toggle the mobile preview icon on the left to ensure the new width doesn't make content too cramped on smaller screens.