The Visual Editor is a design system encompassing all the required toolkits to create layouts for websites. The Visual Editor is your go-to platform for designing websites from scratch, using templates, making customizations, and more.
Accessing the Visual Editor
To access the Visual Editor, click on the Design button on top of the screen, or:
- Navigate to your Project Dashboard.
- Click on Sales Channels in the left panel.
- Select Visual Editor from the options.
The Visual Editor contains the following options:
- Top Panel
- Navigation Pages
- Widgets
- Structure Tree
- Media
- Design System
- SEO
- Page Layout Settings
Top Panel
The Top Panel of the website consists of the following components:
- UC Menu - navigates back to the Project Dashboard, My Projects, or Content Editor.
- Page: Homepage (Navigation Pages) - accesses and manages all the Collections, Main, and Ecommerce pages.
- Undo/Redo - reverses or redoes your actions using shortcuts (Ctrl+Z or Cmd+Z for undo, Ctrl+Y or Cmd+Y for redo).
- Support - helps to seek assistance and get answers to your questions.
- Preview - displays the current version of your website. In the preview mode, you can see your website on different breakpoints and open the website in a new tab.
- Publish - saves the changes to your Ucraft Next domain.
- Language Switcher - switches between your website languages for editing.
- Breakpoint Switcher - ensures responsive design across devices by switching between screen sizes.
Widgets
Widgets improve website functionality and user experience. Drag and drop widgets onto the Layout Canvas to add and customize them. Widgets offer configurable options for styles, settings, and content. Access widgets by clicking the Widgets icon on the left panel.
ℹ️ You can copy and reuse Widgets and their entities with their styles and settings.
In the Visual Editor, widgets are categorized into the following groups:
- Essentials - helps you structure and present information, add images and buttons, and organize content within a coherent layout.
- Media - enables you to effectively manage and display visual content elements on their website.
- Navigation - facilitates navigation and quick access to desired content on your website.
- User Account - adding a widget provides easier access to your website users to their accounts.
- Advanced - provides advanced features and functionality to enhance their website customization.
- Ecommerce - supplies you with comprehensive tools and features to manage your online store effectively.
- Collections - enables you to manage and display collections of related items, such as articles, products, or events.
ℹ️ Clicking on a widget automatically selects it, while Ctrl/Cmd-clicking selects a block.
To add a widget within a block/row/widget, press the Control key while dragging and dropping.
Blocks
The Blocks tab within Widgets is designed to improve the user experience by optimizing time efficiency and simplifying the use of pre-designed blocks on the website.
The Blocks tab consists of the following subsections:
- General Blocks - pre-made block templates ready for integration. These blocks are created and offered by Ucraft.
- My Blocks - library of block templates created from scratch. These blocks are created and saved by the user.
Overlays
The Overlays tab within Widgets is designed to showcase the available overlays: additional content or interactive features that can be customized via the Overlay widget. They are created through the Navigation Pages.
Structure Tree
The Structure Tree visually represents your website organization, effectively helping you manage and arrange blocks, rows, and columns. View and navigate your website layout structure without scrolling. It displays customizable block names for easier identification.
Page Layout Settings
The Page Layout Settings section allows you to easily customize and create layout structures for your web pages, while the Layout Preview enables you to visualize the design changes made.
The Page Layout Settings are displayed on the left panel of Visual Editor when no component (blocks, rows, columns, widgets, microelements) is selected.
Media
The Media section oversees visual content on your platform, including images, videos, audio, documents, and vectors. Design imagery for your website using this section.
In the Media, you can:
- Images - insert images into your website.
- Videos - upload videos to your website.
- Audios - add audio files to your website.
- Docs - add documents to your website.
- Vectors - add your desired icon vectors, arrange them in any preferred order, and categorize them according to your needs.
- Search - search for relevant files and folders.
- Sort by - sort the items by relevant order.
- List Type Layout Preview - display the items in list mode.
- Grid Type Layout Preview - display the items in grid mode.
Design System
The Design System section provides the solutions for designing your website. It lets you customize your website content style, Typography, UI Elements, and Variables.
Click the Design System icon in the Visual Editor's left panel to access the Design System section.
The following options are available for customizing the design on your website:
- Typography - customize and update the fonts of your website.
- UI Elements - encompass the style settings of the widgets and elements.
- Variables - control custom properties that define values to be referenced and reused throughout your website.
- Preset Dropdown - set the default preset or add a new one.
- Settings - modify the default preset name and/or make a copy of it.
SEO
The SEO (Search Engine Optimization) section is a critical aspect of the website success, influencing its visibility and ranking on search engines such as Google and Bing.
The SEO section optimizes webpage visibility on search engines. It includes categories for Main Pages, System Pages, and Redirections. Click the SEO icon in the Visual Editor Left Panel to access the section.
💡 If you have questions or concerns, contact us directly via the Live Chat box in the lower right corner. Our Support Team will provide you with top-notch quality support 24/7.