Introduction

The Swiftwebsites.ai builder is designed with simplicity in mind, using an intuitive drag-and-drop interface that makes webpage editing accessible to everyone.

Whether you're a beginner or experienced designer, you can easily modify content, adjust layouts, and create professional-looking pages without any coding knowledge.

Drag & Drop Functionality

Moving Elements

Click and drag any element to reposition it on your page
Blue positioning lines appear to show exactly where the element will be placed
Simply drag to the desired location and release to move elements smoothly and precisely

Adjusting Spacing And Margins

Element Spacing

Between any two elements, you can adjust margins by simply dragging the spacing indicators
The builder shows exact pixel measurements so you know exactly how much space you're adding
Proper spacing creates "breathing room" that improves readability & user experience

Block Padding

Add padding to the top and bottom of blocks to create more spacing
This is essential for good design as it makes content easier to read and more visually appealing

Working With Blocks & Columns

Understanding Blocks

Each section of your page is organized into blocks that can contain different types of content. You can modify block settings including:

Images and media
Text content
Layout options
Styling preferences

Column Layout System

Blocks can be split into multiple columns for flexible content arrangement
Adjust column widths using the column slider
Create layouts with content in some columns and spacing in others
For example, use five columns where three contain content and two provide spacing

Editing Individual Elements

Text Editing

Single-click on any text element to access basic editing options
Double-click to open the full text editor with advanced formatting options
Edit content directly within the element for quick changes

Element Settings

Each element type has specific settings accessible through single-click:

Text widgets: Basic formatting and styling options
Buttons: Alignment, styling, links, and more advanced options
Images: Replace, resize, and positioning controls

Adding New Elements

Individual Elements

Click the plus (+) icon (Add Widgets) to access the element library
Choose from available elements: text, headlines, buttons, images, etc.
Drag the desired element to your page
For images, select from the media library or upload new files
Customize the element using the settings panel

Pre-Designed Blocks

Click the "Add Block" button between existing sections
Browse through professionally designed block templates
Add entire sections (like services blocks with images, text, and buttons) in seconds
Customize these blocks by:
- Deleting unwanted elements (like buttons)
- Replacing images by double-clicking
- Modifying text and styling

Advanced Features

Animations

Access animations through the animation icon
Add engaging effects like:
- Zoom-in animations
- Slide-from-right effects
- Other dynamic visual elements