General
Domains
- Home
- General
- Getting Started
- Understanding the Editor Interface
Understanding the Editor Interface
When you open the DIY Website Builder editor, you'll see an intuitive workspace designed to help you build your website efficiently.
Main Sections:
- Left Sidebar: Access to elements and section presets
- Top Navigation: Page selection, device preview, and publishing options
- Canvas: Your working area showing the current website design
- Right Panel: Properties panel for customizing selected elements (colors, fonts, spacing, etc.)
Left Sidebar:
The left sidebar contains all the built-in components you can drag onto your page:
- Text - Add headings, paragraphs, and other text elements.
- List - Create bulleted or iconed lists.
- Links - Add clickable links to your content.
- Icons - Insert various icons to enhance your design.
- Container - Group components together for easier management.
- Buttons - Add call-to-action buttons.
- Table - Insert structured data tables.
- Control - Lets you add a scroll point or anchor to any section of your webpage. It’s an invisible marker you can link to for smooth scrolling navigation, helping users jump directly to specific parts of your site. Ideal for one-page layouts or menu links.
- Divider - Add horizontal lines to separate content.
- Spacer - Adds empty space to adjust layout.
- Images - Upload and place images on your page.
- Videos - Embed videos into your pages.
- Form - Captures user input via fields.
- Accordion - Create expandable content sections.
- Embed - Adds third-party content via iframe.
- Code Block - Display lines of code, often with syntax highlighting.
- Timeline - Shows events or steps in order.
- Stripe - Adds Stripe payment checkout flow.
Section Presets
The left sidebar also gives you access to complete section presets.
- Testimonials - Customer review sections.
- Services - Product/service offerings and details.
- Hero - Main banner sections with visual impact.
- About - Team and company information layouts.
- Newsletter - Sections for newsletter sign-ups and archives.
- FAQ - Sections for common questions and answers.
- Team - Dedicated sections for team member profiles.
- Pricing - Pricing tables and comparison charts.
- Articles - Layouts for blog posts or detailed written content.
Top Navigation Bar
- Device preview toggles (desktop/tablet/mobile) help you see how your site looks on different devices.
- On the far right, you'll find undo/redo buttons, save option, preview mode, and additional options (Publish, Download Page, Page settings, Export website, Website settings, and Exit)
Related Articles
- Create a Project in DIY Website Builder
- Customising Your Design
- Previewing Your Design on Different Devices
- Adding a New Page in Your Project
Still Need Help?
If you have any further questions or require additional
assistance, please don't hesitate to reach out to our support
team.