How to Edit Pages
Learn how to edit pages and customize layout content on the BAB website using native Gutenberg Smart Components and the WordPress Media Library.
Pages on this website are constructed using modular Smart Components (Conpacts). Instead of editing arbitrary free-form text on the canvas, each section provides dedicated inspector fields in the right sidebar for structured and reliable layout control.
1. Navigating to the Page Editor
While logged into the WordPress admin, navigate directly to the page you wish to update on the frontend and click Edit Page in the top WordPress admin toolbar.
2. The Gutenberg Editor Canvas
You will land directly in the native Gutenberg editor canvas, displaying the live preview of the page and its individual block sections.
3. Selecting a Smart Component & Adjusting Fields
Click directly onto any block section (e.g. Split Showcase). The right sidebar will switch to the Block inspector tab, presenting all configurable Content Properties.
Available Component Controls
- Heading & Highlight Text: Adjust the main section header and specify words to receive the brand accent highlight color.
- Body Text: Edit running descriptions and paragraphs directly in the designated text fields.
- Layout Switches: Toggle settings such as
LayoutReverseto swap content and media column alignment instantly. - CTA Buttons: Update button labels, links, and target actions.
4. Updating Media via the WordPress Media Library
When updating images or media cards within a component, click the image button to open the standard WordPress Media modal. Select an existing asset or upload a new file.
Once your content and media adjustments are complete, click the blue Save / Update button in the top-right corner of the editor to push your updates live to the website.