Visual Editor
The Visual Editor is your main tool for managing website content. See your live website and make changes directly - no coding required!
Click to Edit
Hover and click any element to select it for editing
Live Preview
See changes instantly as you type
Add Blocks
Insert new content sections with one click
Drag & Drop
Reorder content by dragging blocks up or down
Using the Visual Editor
Open the Visual Editor
From your dashboard, click "Manage Content" on any project. The Visual Editor opens automatically, showing your live website in the center of the screen.
Hover Over Content
Move your mouse over any text, image, or element on your website. You'll see a blue highlight appear around editable elements.
Click to Select
Click any highlighted element. The editing panel slides in from the right with all the fields you can edit.
Edit Content
Use the rich text editor to format your content - add bold, italic, underline, links, and bullet lists. Changes preview instantly in the website view!
Save Your Changes
Click the blue "Save" button at the bottom of the panel. Your changes go live immediately! Use Ctrl+S (or Cmd+S on Mac) as a shortcut.
Managing Pages
Your website is organized into pages. Each page has its own content blocks that you can add, edit, and rearrange.
Creating a New Page
- 1. Look for the pages list on the left side of the Visual Editor
- 2. Click the "+ Add Page" button
- 3. Enter a name for your page (e.g., "About Us")
- 4. Set the URL slug (e.g., "about-us")
- 5. Click "Create" to add the page
Page Settings
Each page has settings you can configure:
- Name: Display name in the CMS
- Slug: URL path (e.g., /about-us)
- Title: Browser tab title (SEO)
- Description: Meta description (SEO)
- Published: Show/hide from visitors
Switching Between Pages
Click on any page name in the left sidebar to view and edit that page. The preview will update to show the selected page, and you can then click on elements to edit them.
Tip: Use the "Published" toggle to hide pages while you're still working on them. Unpublished pages won't be visible to website visitors.
Responsive Preview
Preview how your website looks on different devices. Use the device buttons at the top of the editor to switch views.
Desktop
Full-width view for large screens
Tablet
Medium width (768px) for tablets
Mobile
Narrow width for phones
Why this matters: Many visitors use mobile devices. Always preview your changes on mobile to ensure your content looks great everywhere!
Adding Content Blocks
Content blocks are the building blocks of your pages. Add headings, paragraphs, images, contact forms, and more!
Open the Add Block Menu
In the Visual Editor, look for the "+ Add Element" button. This opens the block selection menu.
Choose a Block Type
Browse the available block types and click on the one you want to add. Common options include Heading, Paragraph, Image, and more.
Configure the Block
Fill in the content for your new block. Each block type has different fields - text blocks have a text editor, image blocks have a URL field, etc.
Save the Block
Click "Save" to add the block to your page. It will appear in the preview immediately!
Editing Content Blocks
Rich Text Editor
Format your text with the toolbar buttons:
- B - Bold text
- I - Italic text
- U - Underline text
- Link icon - Add a hyperlink
- List icons - Bullet or numbered lists
Block Actions
Each block has action buttons:
- Duplicate - Create a copy of the block
- Delete - Remove the block
- Drag - Reorder the block
Warning: Deleting a block cannot be undone. Make sure you want to remove the content before clicking delete!
Moving & Reordering Blocks
Rearrange the order of content blocks on your page using drag and drop.
How to Reorder
- 1. Look for the drag handle (three horizontal lines) on any block
- 2. Click and hold the drag handle
- 3. Drag the block up or down to the desired position
- 4. Release to drop the block in its new location
- 5. The page automatically saves the new order
Tips for Reordering
- A visual indicator shows where the block will be placed
- Changes take effect immediately - no save button needed
- You can reorder blocks within the same page zone
- The preview updates in real-time as you drag
Available Block Types
Here are all the content blocks you can add to your pages:
Heading Block
Add section titles and headings to your page. Great for organizing content.
Paragraph Block
Add text paragraphs with rich formatting - bold, italic, links, and lists.
Heading + Text Block
Combined heading and text with optional button and right column. Flexible layout options.
Image Block
Add images with size options (full, large, medium, small), alignment, and rounded corners.
Button Block
Add clickable buttons with custom text and link URLs.
Hero Banner
Large banner section with title, description, and call-to-action button.
Contact Form
Add a contact form for visitors to reach you.
Team Section
Display team members from a collection with contact information.
Collection Block
Display items from any collection - products, services, portfolio, etc.
Dynamic Columns
Flexible multi-column layout (1-12 columns) with rich text in each column.
Featured Posts
Showcase featured blog posts filtered by tags.
Post List
Display a list of blog posts filtered by tag.
Blog Posts
The blog system lets you create, edit, and publish articles with rich content including images, videos, quotes, and more.
Access Blog Posts
From your project dashboard, click the "Blog Posts" button (purple button with a document icon).
Create a New Post
Click "New Post" and enter a title. You'll be taken to the blog editor where you can write your content.
Edit Your Post
The blog editor uses a flexible block-based system. Add different types of content:
- Text: Regular paragraphs with formatting
- Heading: Section titles (H1-H6)
- Image: Photos with size options
- Quote: Highlighted quotes
- Video: YouTube/Vimeo embeds
- Download: Downloadable file links
- Divider: Visual separators
- Sub-Articles: Carousel of related posts
- Intro Summary: Highlighted intro
- Executive Summary: Summary box
Set Post Metadata
Configure your post settings in the right sidebar:
- Title: The headline of your post
- Excerpt: Short summary for previews
- Featured Image: Main image for the post
- Authors: Who wrote the post (can add multiple)
- Tags: Categories for organizing posts
- URL Slug: The web address for your post
- Date: Publication date
Publish Your Post
Posts start as drafts. When ready, click the "Draft" toggle to switch it to "Published". Published posts are visible on your website.
Draft Posts
Posts start as drafts. Only you can see them. Work on them until they're ready!
Published Posts
Published posts are live on your website. Your visitors can read them immediately.
Article Types
Main Article
Regular blog posts that appear in your blog listing. Use for standalone articles.
Sub-Article
Smaller articles that can be linked within main articles as carousels or related content.
Publication Features
For reports and academic content, you can also set:
- Publication Type: Report, whitepaper, brief, etc.
- Partner Organizations
- Themes & Locations: Taxonomy filters
- PDF Download Link
- Acknowledgements
- Author Bios
Keyboard Shortcut: Use Ctrl+S (or Cmd+S on Mac) to save your post instantly!
Collections
Collections are groups of similar items - like team members, products, services, or portfolio projects. They're perfect for content that follows a consistent structure.
What Are Collections Used For?
Team Members
Staff profiles with name, role, bio, photo
Products/Services
Items with description, image, price
Portfolio Projects
Work samples with images and descriptions
FAQ Items
Questions and answers
Access Collections
From your project dashboard, click the "Collections" button to see all your collections.
Create a Collection
Click "New Collection" and give it a name (e.g., "Team Members"). The collection is created and ready for items.
Add Items
Open a collection and click "Add Item". Each item has:
- Title: Name of the item
- Description: Short description text
- Featured Image: Main image
- Tags: For categorization
- Custom Fields: Additional data as needed
Use Collections on Pages
Add a Collection Block or Team Section to any page and select which collection to display. The items will appear automatically!
Rich Content for Items
Collection items support the same block-based editor as blog posts. Add text blocks, headings, images, and more to create detailed item pages.
Media Library
The Media Library is where you upload and manage all your images. Once uploaded, you can use them anywhere - pages, blog posts, and collection items.
Access Media Library
From your project dashboard, click the "Media" button to open your media library.
Upload Images
Two ways to upload:
- Click "Upload" and select files from your computer
- Drag and drop files directly into the media library
Supported formats: JPG, PNG, GIF, WebP, SVG (max 10MB per file)
Manage Media
For each image you can:
- Copy URL: Get the link to use elsewhere
- Edit Alt Text: Add description for accessibility
- Download: Save a copy to your computer
- Delete: Remove from library
Use Images
When editing any image field (in pages, blog posts, or collections), you'll see a "Media Library" button. Click it to browse and select from your uploaded images.
Search & Filter
Use the search bar to find images by filename. Switch between grid and list views for different browsing experiences.
CDN Delivery
Your images are served from a fast CDN (Content Delivery Network) for optimal loading speed on your website.
Two Editing Modes
Visual Editor
DEFAULTEdit directly on your live website. Perfect for quick edits and seeing changes in context!
See your actual website
Click any element to edit
Instant preview
Add, remove, and reorder blocks
Tree View
ALTERNATIVEOrganized list of all content. Perfect for bulk editing and finding specific items!
See all content at once
Organized by page & section
Easy to find content
Great for bulk updates
Pro Tip: Use the toggle buttons at the top of the page to switch between Visual Editor and Tree View anytime!
Tips & Best Practices
Preview on all devices
Always check desktop, tablet, and mobile views before publishing.
Use high-quality images
Upload clear, well-sized images. The media library handles optimization.
Add alt text to images
Describe images for accessibility and better SEO.
Keep text concise
Shorter text is often more effective, especially for titles and buttons.
Test your links
After updating a URL, visit your website and click it to make sure it works.
Use draft mode for blog posts
Keep posts as drafts until they're fully ready to publish.
Organize with tags
Use consistent tags for blog posts and collection items for easy filtering.
Save frequently
Use Ctrl+S (Cmd+S on Mac) to save your work regularly.
Keyboard Shortcuts
Common Questions
Can I undo a change?
Just edit the content again and enter the previous text. For major mistakes, contact your developer - they may be able to restore from a backup.
Can I add new pages?
Yes! Use the "+ Add Page" button in the Visual Editor to create new pages. You can then add content blocks to build out the page.
What if I accidentally delete something?
Deletions cannot be undone through the CMS. Be careful when deleting blocks or pages. If you need to restore deleted content, contact your developer.
How do I change an image?
Click on any image block to edit it. You can:
- 1. Click "Media Library" to select an uploaded image
- 2. Or paste a new image URL directly
- 3. Update the alt text (description)
- 4. Choose size and alignment options
- 5. Click Save
How do I reorder blocks on a page?
Look for the drag handle (three lines) on any block. Click and drag to move the block up or down. Release to drop it in the new position.
How do I add a link?
In the rich text editor, select the text you want to link, then click the link button in the toolbar. Enter the URL and save.
What's the difference between Collections and Blog Posts?
Blog Posts are for articles and news - they have dates, authors, and appear in chronological order.
Collections are for structured data like team members, products, or services - they're organized by category and can be displayed anywhere on your site.
Why isn't my change showing on the website?
Make sure you clicked Save! Also, try refreshing the website page (Ctrl+R or Cmd+R). If it still doesn't appear, check if the page is published.
Need Help?
If you're stuck or have questions, contact your developer. They set up this CMS for you and can assist with:
- Adding custom block types
- Advanced page layouts
- Collection schema changes
- Technical issues
- Restoring deleted content