Visual Editor
The Visual Editor is your main tool for customizing your website's home page. It provides a drag-and-drop interface for arranging sections, inline text editing, design presets, live preview, and autosave - all without writing any code.
Accessing the Editor
Navigate to Website → Design in your dashboard sidebar to open the Visual Editor.
Editor Layout
The editor is split into two areas:
- Left panel - Section list, settings, and tools
- Right panel - Live preview of your website in an iframe
Changes you make in the left panel are reflected instantly in the preview on the right.
Working with Sections
Your home page is built from sections - modular content blocks that stack vertically. Each section serves a specific purpose.
Available Section Types
| Section | Purpose |
|---|---|
| Hero | Large banner at the top of your page with headline and call-to-action |
| Hero with Search | Hero banner with an integrated property search bar |
| Featured Listings | Grid of your active property listings |
| About | Information about you or your agency |
| Team | Team member profiles with photos and bios |
| Testimonials | Client reviews and recommendations |
| Call to Action (CTA) | A prominent section encouraging visitors to take action |
| Contact | Contact information and form |
| Stats | Key numbers and statistics (properties sold, years experience, etc.) |
| Gallery | Image gallery showcasing properties or your work |
| Content | Free-form text content area |
| FAQ | Frequently asked questions with expandable answers |
| Video | Embedded video section |
| Map | Interactive map showing your service area |
| Services | List of services you offer |
| Features | Highlight key features or selling points |
| Partners | Logos and links to partner organizations |
| Countdown | Countdown timer for events or launches |
| Blog | Latest published blog posts from your website |
| Pricing | Pricing table for your services |
Reordering Sections
Drag and drop sections in the left panel to change their order on the page. Click and hold a section, then drag it to the desired position. The preview updates in real time.
Adding Sections
Click the Add Section button to browse the section template library. Select a section type to add it to your page. New sections are added at the bottom and can be dragged to any position.
Removing Sections
Click the settings icon on any section, then click Remove to delete it from your page.
Enabling and Disabling Sections
Each section has an enable/disable toggle. Disabled sections are hidden from visitors but remain in your layout so you can re-enable them later without losing their configuration.
Section Settings
Click the settings icon on any section to open its settings panel. Each section type has specific settings - for example, the Featured Listings section lets you configure how many listings to show, while the Hero section lets you edit the headline text.
Design Presets
The editor includes four one-click design presets that update your branding and section layout simultaneously:
| Preset | Style | Best For |
|---|---|---|
| Modern Agency | Clean, minimal with Inter font | Contemporary agencies |
| Luxury Estate | Elegant with Playfair Display font and transparent header | High-end market |
| Classic Professional | Traditional with Georgia font | Established agencies |
| Agent Personal | Personal branding with DM Sans font | Individual agents |
Click a preset to apply it instantly. You can further customize any preset after applying it.
Inline Text Editing
Click directly on text elements in the preview to edit them in place. This works for headings, paragraphs, and button labels within your sections.
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| Ctrl+Z (Cmd+Z on Mac) | Undo last change |
| Ctrl+Y (Cmd+Y on Mac) | Redo |
| Ctrl+S (Cmd+S on Mac) | Save manually |
Autosave
The editor automatically saves your changes as you work. A status indicator in the toolbar shows:
- Saving... - Your changes are being saved
- Saved - All changes have been saved
- Error - Save failed (try again or check your connection)
Undo and Redo
The editor maintains a history of your last 50 changes. Use the undo and redo buttons in the toolbar or the keyboard shortcuts above to step through your edit history.
Live Preview
The right panel shows a live preview of your website. The preview updates in real time as you make changes. You can also open your website in a new browser tab for a full-screen preview.
Warning
Custom CSS
For advanced users, the editor includes a custom CSS panel where you can add your own CSS rules. This is useful for fine-tuning specific elements beyond what the visual controls offer.
Tip