Ucraft NextUC Academy

Visual Editor Overview

Suggest Edits

Introduction

This document describes the structure and the performance flow of the Ucraft Next Visual Editor.

Overview

The Visual Editor is a design system encompassing all the required toolkits to create a website. It enables users with a design background to build websites from scratch, customize them or make more complex modifications to the layout. The websites range from basic landing pages to more compound Ecommerce ones. At the same time, the CMS (Content Management System) intends for editors to make quick changes and amendments.

The Content Editor is easy-to-use for anyone due to its drag-and-drop system and simplified user experience.

To start, press the Visual Editor Mode Switcher on the left side of the Top Panel and access its sections.

This unit comprises:

Top Panel

The Top Panel of the website accommodates the following components:

  • UC Menu - redirects the user to the following sections:

    • Project Dashboard
    • My Project
    • Edit Content

  • Page: Homepage - manages your Pages, Collections, and Ecommerce content.

  • Breakpoint Switcher - breakpoints are the layouts in pixels at which your website's content and design adjust in a certain way to provide the best possible user experience. Each breakpoint is responsive to a relevant device.

  • Undo - reverses your last action. (Use also Ctrl+Z shortcut key.)

  • Redo - reverses your last Undo action. (Use also Ctrl+Y shortcut key.)

  • Language Switcher - enables website visitors to switch between your website's languages.

  • Comment - enables to respond to feedback, tweak your designs, and iterate faster.

  • Preview - displays the current version of your website with the history of changes. Also, it illustrates the preview of your website on different devices.

  • Publish - saves the changes on your Ucraft Next's domain.

Widgets

Widgets are component tools that add features and improve the usability of your website. You can directly drag-and-drop widgets onto the Layout Canvas and adjust them furtherly. The Styles, Settings, and Content subsections are configurable for each widget.

To access those subsegments, press the Widgets icon on the Visual Editor Left Panel, select any widget, and drag-and-drop/adjust it onto the Layout Canvas. Afterward, click on that widget and reach the Styles and Settings divisions on the Property Panel on the right.

To reach the Content division, click on the widget and choose the Content component by flipping through the Structure Tree above the widget.

To access all available widgets, click on the Widgets icon on the Visual Editor Left Panel.

In Ucraft Next, the widgets are classified into sections of relative categories:

  • Basic
  • Contacts
  • Social
  • Navigation
  • Advanced
  • Ecommerce

Blocks

The Blocks section aims to improve the user experience by saving time and easing the use of predesigned templates on the website. As a Structure Tree component, the blocks are part of the structural hierarchy within selected states in Ucraft Next. Also, they can be stored as templates for further usage.

To configure the blocks, press the Blocks icon on the Visual Editor Left Panel.

This unit comprises:

  • All Blocks - Ucraft Next has generated a set of blocks that combine multiple widgets, outlined and ready to be integrated onto your page. All Blocks subsection displays all the premade block templates categorized and placed.
  • My Blocks - displays a library of block templates created entirely from scratch.

Page Layout Settings

The Page Layout Settings section allows you to modify and create the layout structure without referring to your pages. Once modified, you can view the design of your page through the Layout Preview.

To handle the page structure, press the Page Layout Settings icon on the Visual Editor Left Panel.

This unit comprises:

  • Layout - configures the Headers and Footers of the webpage. The Layout Preview showcases each change made in the Layout section.
  • Navigation Mode (Header, Footer) - key elements of a website containing URLs to essential pages on your website that potential customers often visit before making a purchase or inquiry.
  • Sidebar - indicates the positioning of the sidebar.
  • Layout Preview - presents the structure of your page.
  • Background - sets the Background parameters based on your design requirements.
  • + Sign - adds up to five background colors or images.
  • Visibility - activates/deactivates the existing backgrounds.

Adding an opacity will display the Structure Tree according to the “From Top to Bottom” hierarchy.

  • Bin - deletes the colors.

Media

The Media section enables you to manage all your platform content based on your product’s concepts. It covers the imagery settings of your website.

Click the Media icon, and start making the imagery of your website.

This unit comprises:

  • Images - adds images to your website.
  • Videos - adds videos to your website.
  • Audios - adds audio files to your website.
  • Docs - adds documents to your website.
  • List Type Layout Preview - displays the items in list mode.
  • Grid Type Layout Preview - displays the items in grid mode.
  • Sort by - sorts the items by relevant order.
  • Search Bar - searches for relevant files and folders.
  • New - adds new items from the relevant area.

Design System

The Design System section intends to provide layout solutions for your website. It enables you to customize your website, manage the content style, typography, etc.

Access the Design System segment by pressing the Design System icon on the Visual Editor Left Panel.

This unit comprises:

  • Typography - adjusts and edits the fonts of your website.

  • UI Elements - covers the style settings of the widgets and elements.

  • Colors - manages your website's color distribution and color settings for the presets. This unit comprises three color palettes and operative colors, which you cannot remove:

    • Solid Color
    • Gradient
    • System Color

  • Preset Dropdown - sets the default preset or adds a new one.

  • Settings - renames the default preset and/or duplicates it.

Collections

The Collections section enables you to accumulate certain data and apply it on different pages via binding. Here, you can create a Category where you can construct numerous items. The Collection Category and item data may be bound to the widgets.

To access the Collections section, either press the Collections icon on the Visual Editor Left Panel or click the Page: Homepage on the Top Panel and select the Collections icon.

This unit comprises:

  • Search Bar - searches for collections.
  • Sort by - sorts the collections by relevant order.
  • List Type Layout Preview - displays the collections in list mode.
  • Grid Type Layout Preview - displays the collections in grid mode.
  • + New Collection - adds a new collection based on relevant data.

👍

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.

Updated 8 months ago