Skip to main content

How to Edit Pages with Spectra Builder: A Beginner’s Guide

Spectra Builder is a powerful tool that enhances the WordPress block editor, allowing you to create and customize pages with ease

A
Written by Amir Kamal
Updated over a month ago

No coding required. Whether you’re updating text, swapping images, hiding sections, duplicating content, or adding new sections, Spectra makes it simple. This guide will walk you through each step with clear instructions, so you can confidently edit your website.


Why Use Spectra Builder?

Spectra Builder offers a user-friendly interface and a wide range of customizable blocks, making it ideal for beginners and experienced users alike. With Spectra, you can:

  • Edit text and images directly in the block editor.

  • Hide sections without deleting them, perfect for testing or seasonal updates.

  • Duplicate sections to reuse layouts and quickly modify content.

  • Add new sections to expand your page with fresh content.

Let’s dive into how to perform these essential tasks.


1. How to Change Text in Spectra Builder

How to change text

Updating text is one of the most common tasks when editing a page. Here’s how to do it:

Steps to Change Text

  1. Open the page editor: From your WordPress dashboard, go to Pages, select the page you want to edit, and click Edit.

  2. Locate the text block: Scroll to the section containing the text you want to change. Text is typically found in Heading, Paragraph, or other content blocks.

  3. Edit the text: Click directly on the text to select it. A toolbar will appear, allowing you to type new text or modify the existing content.

  4. Customize text styles: Use the right-hand sidebar to adjust font size, color, alignment, or other typography settings.

  5. Save your changes: Click Update to save the page.


2. How to Change Images in Spectra Builder

How to change image in the editor

Swapping images is just as straightforward. Follow these steps:

Steps to Change Images

  1. Select the image block: In the page editor, click on the image you want to replace. This will highlight the image block.

  2. Upload or choose or Search for a new image: In the right-hand sidebar, click Replace or Upload to select a new image from your computer or the media library.

  3. Adjust image settings: Use the sidebar options to resize, crop, or add alt text for SEO and accessibility.

  4. Update the page: Click Update to apply the changes.


3. How to Hide a Section Without Deleting It

How to Hide Section

Sometimes, you may want to temporarily hide a section without removing it entirely. Spectra Builder makes this easy with visibility settings.

Steps to Hide a Section

  1. Select the section: Click on the section you want to hide. Sections are often contained within Container or Group blocks.

  2. Open block settings: In the right-hand sidebar, scroll to the Advanced or Visibility settings.

  3. Hide the section from Responsive Conditions: In the Responsive Conditions tab, select the device that you want to hide the section on, if you want to hide it at all, just enable all the devices.

  4. Save changes: Click Update to apply the change.

Why It’s Useful: Hiding sections is perfect for testing new designs or temporarily removing seasonal content without losing your work.


4. How to Duplicate a Section and Modify Its Content

How to duplicate section

Duplicating sections saves time when you want to reuse a layout but change the content. Here’s how:

Steps to Duplicate a Section

  1. Select the section: Click on the section you want to duplicate (e.g., a Container block).

  2. Duplicate the section: Click the three-dot menu in the block toolbar and select Duplicate. The section will be copied directly below the original.

  3. Edit the duplicated section: Click on the text, images, or other elements within the duplicated section and modify them as needed.

  4. Customize further: Use the sidebar to adjust styles, layouts, or add new blocks within the section.

  5. Update the page: Click Update to save your changes.


5. How to Add a New Section and Add Content

How to add a new section

Adding a new section allows you to expand your page with fresh content, such as a new feature showcase, testimonial area, or call-to-action. Spectra’s Container block is perfect for creating sections, as it acts as a wrapper for multiple blocks.

Steps to Add a New Section

  1. Open the page editor: From the WordPress dashboard, go to Pages, select your page, and click Edit.

  2. Add a Container block: Click the + icon in the block editor to add a new block. Search for Spectra Container and insert it where you want the new section.

  3. Add content to the section: Inside the Container, click the + icon to add blocks like Heading, Paragraph, Image, or Buttons. Arrange them as needed.

  4. Customize the section: Use the right-hand sidebar to adjust the Container’s layout (e.g., width, background color, padding) and style the inner blocks (e.g., font size, image alignment).

  5. Save changes: Click Update to save your page.

This creates a professional-looking section that enhances your page’s appeal.


Summary of Key Actions

  • Change Text: Click on the text block and edit directly.

  • Change Images: Select the image block and upload or choose a new image.

  • Hide Sections: Use visibility settings to temporarily hide sections without deleting them.

  • Duplicate Sections: Select the section, duplicate it, and modify the content as needed.

  • Add New Sections: Use the Container block to create a section and fill it with content like headings, paragraphs, or images.

These actions are the foundation of editing pages with Spectra Builder. By mastering them, you’ll be able to customize your website efficiently and with confidence.


Tips for Success

  • Experiment freely: Don’t be afraid to try different settings—Spectra’s live preview lets you see changes instantly.

  • Save regularly: Click Update after each major change to avoid losing progress.

  • Use patterns: Spectra offers pre-built patterns for sections like testimonials or hero areas to save time.

With these tools at your disposal, you’re well on your way to creating a stunning, personalized website using Spectra Builder. Happy editing!

Did this answer your question?