Editor
Learn more about the Elements WYSIWYG Editor
RapidWeaver Elements includes a powerful built-in WYSIWYG (What You See Is What You Get) editor, so you can design your site visually in real time. Whether you’re an experienced web designer or just getting started, you’ll feel at home with its intuitive, Mac-like interface.
The editor is designed to be both versatile and approachable. If you’re a professional, you’ll get the precision and flexibility you need to bring detailed designs to life quickly. Tweak your layout, typography, and styling on the fly, and see the results exactly as they’ll appear when your site is published.
If you’re new to web design, Elements keeps things simple without getting in your way. The streamlined editing experience uses familiar tools and controls, so you can start building straight away. Every change is shown instantly on the canvas, removing guesswork and making the whole process feel fun and straightforward.
With the WYSIWYG editor you can focus on design, not code. And when you do need to look under the hood, Elements has you covered with seamless switching between the visual editor and any custom HTML or CSS you choose to add.
What you can do in the editor
The Editor is the main place you’ll spend time in Elements. From here you can:
Add and arrange Components such as text, images, buttons, containers, grids and more.
Edit content directly on the canvas – click to change text, swap images, and adjust layouts visually.
Refine styles and behaviour using the context-aware Inspector.
Design responsively by adjusting settings at different breakpoints.
Navigate and manage your site structure alongside the canvas using the Page Manager.
Preview your site in a real browser with Browser Preview.
In short, the Elements editor strikes a balance between simplicity and power, making it an essential tool for building beautiful, fast websites efficiently.
Basic editing workflow
Open a Project and choose a page Start by opening a Project and selecting a page from the Page Manager. The editor shows you exactly how that page currently looks.
Add Components to the page Drag in new Components (for example Text, Image, Button, Container, or Grid) to build up your layout. Components are the basic building blocks of your design.
Edit content directly Click on Components in the editor to change their content. Change text, update images, and adjust alignment visually, without needing to touch any code.
Fine‑tune styling in the Inspector With a Component selected, use the Inspector to adjust spacing, sizing, colours, typography, borders, effects, and more. The Inspector only shows options that are relevant to what you have selected.
Check different screen sizes Use the responsive breakpoint system to refine how your design looks on mobile, tablet, and desktop. You can override specific settings per breakpoint where needed.
Preview in the browser and publish When you’re happy with your changes, use Browser Preview to test your page in a real browser, then publish from your Project when you’re ready to go live.
Working with Components, Templates, and Globals
Elements is built around a clear design system, and the Editor is where you put those pieces together:
Components are your page building blocks – things like text, images, buttons, forms, menus, grids, and containers. Learn more on the Components page.
Templates are pre-built groups of Components you can drop into a page to get a complete layout in one go. They’re a fast way to build common sections like hero areas, feature blocks, or contact forms.
Globals let you reuse the same header, footer, or section across multiple pages while keeping the design in sync. Update the Global once, and the change is reflected everywhere it’s used.
The Editor makes it easy to mix these three concepts so you can build pages quickly while still keeping your design consistent and easy to maintain.
Designing for different devices
Modern websites need to look great on phones, tablets, laptops, and large screens. The Editor works hand‑in‑hand with Elements’ mobile‑first design system to make this straightforward:
Start by designing for the smallest breakpoint (usually mobile).
As you move up through your defined breakpoints, use the controls in the Inspector to override only the settings that need to change (for example font size, padding, or layout).
Elements automatically carries your settings upward, so you don’t have to restyle everything from scratch for each screen size.
You can learn more about how responsive design works in Elements on the Breakpoints and Theme Studio pages.
Learn more
If you’re just getting started, these pages pair well with the Editor:
Quickstart – build your first site in a few minutes.
Core Concepts – understand Projects, Themes, Components, Templates, and Globals.
Workspaces – customise the layout of the Elements interface to match how you like to work.
Last updated
Was this helpful?