In Visual mode the Editor has a view area (1), element panel (2), management panel (3), action panel (4), and a management and addition sidebar (5).
1. View Area
The view area is intended for viewing the page and managing its elements. The vertical rulers display the width of the content part of a webpage.
2. Element Panel
The element panel contains the set of elements for the webpage. The purpose and description of the elements is given below.
3. Management Panel
The management panel is intended for adding and uploading multimedia files and fonts. You can upload images, video and audio files via the File Manager for their further use on your webpage. The Font Manager allows you to add additional fonts from Google Fonts (https://www.google.com/fonts) to the standard list of fonts. For that purpose you need to specify the ULR link of the font in the corresponding input box.
For example, if you add the font by the link http://fonts.googleapis.com/css?family=Oswald, the Oswald font will appear in the drop-down list of fonts in the management and addition sidebar.
The management panel also contains checkboxes that allow you to set the display of boundaries of the content part of a webpage and its sections.
4. Action Panel
The action panel is intended for managing the entire page. The available actions include:
- Saving the page
- Printing the page
- Undoing the previous action
- Redoing the previous action
- Moving the selected element up the document tree
- Moving the selected element down the document tree
- Increasing the layer level of the selected element
- Decreasing the layer level of the selected element
- Copying the selected element
- Cutting the selected element
- Pasting the copied or cut element
- Deleting the selected element
5. The Management and Addition Sidebar
The management and addition sidebar in Visual mode is intended for managing the page content in the area oftag, and managing the properties of the page and its elements.
The Page Properties tab allows you to set the name of the page, the meanings of metatags, key words and descriptions, and submit your page for inclusion in search engine indexes. The tab also allows you to set the global style attributes of the page.
The CSS tab allows you to upload CSS styles, and add them from third-party external resources, specifying the link (for example, you can add fonts from Google Fonts — https://www.google.com/fonts). You can also manage the order in which files are added and edit the uploaded files remotely.
When creating a page you should first establish its settings, available in the Page Properties tab. These are global settings that are applied to the entire page.
The following property groups are available in settings:
The Geometry property group
This group allows you to set the width of the content part and top margin of your page.
The width value can also be changed with the help of vertical rulers in the content part of the view area.
The Headline and Metadata property group
This group allows you to set the name of the page, its keywords and description. You can also set the search engine visibility of your page here. Google search cannot add the created page to its index by default. Once the search engine visibility of the page is enabled, its name, keywords and description will influence its position on the suggested pages list of the search engine. The name of the page will be displayed in the browser header or tab.
The Background property group
This group allows you to set the background color, background image, background-repeat and its arrangement.
The Global Text Styles property group
This group allows you to set the font family for the entire page, the font size value in pixels, its stroke weight (300 — thin, 400 — normal, 700 — bold, 800 — extra bold), its face (normal and italic), and text color.
Creating Elements on the Page
Elements are created by dragging and dropping the buttons from the element panel into the view area. The elements that can be created on the page include:
- HTML code
Section is a container which occupies the entire width of the content part. This is a mandatory element which contains the other elements.
Via the settings of the management and addition sidebar you can set the height of the section, the properties of its boundaries (thickness, style, color), rounded corners, background properties, transparency (transparency will be applied to all the elements within it).
Box is a container of arbitrary size and arrangement inside a section. It serves to specify the separate blocks on the page. The elements inside a box are positioned relative to it.
Via the settings of the management and addition sidebar you can set the size (width and height), position, set the view of borders, box-shadow (color, feathering, offset), background properties and transparency.
Text is a container for representing text information.
Via the settings of the management and addition sidebar you can set the size (width and height), position, text, line distance, set the font, view of borders, background, specify the transparency and horizontal alignment of the text (left alignment, right alignment or center alignment).
Image is a container for presenting information by means of uploaded images.
When adding this element a pop-up window will appear in which you’ll need to specify the format (*.jpg, *.png, *.gif) of the image that will be used. The file can either be uploaded from your computer or chosen from the image manager of the page. The maximum upload file size is 16 Mb.
Via the settings of the management and addition sidebar you can set the size (width and height), position, change the image file, set the action upon clicking the image (the jump to the target page is possible on click, either in the same — _self, or in the new window — _blank), set the view of borders, corners rounding and transparency.
Button is an element in the form of an URL link, clicking on which jumps to the target page.
Via the settings of the management and addition sidebar you can set the size (width and height), position, set the action on click on the link, choose the form of jump display (the jump to the target page on click in the same — _self, or in the new window — _blank), specify the button text and font properties (the name of the font, its size, stroke weight, face, and text color), set the text shadow (shadow color, feathering, offset), the view of boundaries, corners rounding, the button shadow. You can manage the button background in normal state, in the mouse over state and in the state of being pressed. You can also specify the transparency, horizontal offset of the button text and horizontal alignment.
Video is a container for pasting the video code from third party services, for example YouTube or Vimeo.
When adding this element a pop-up window with an input field will appear in which you’ll need to paste the iFrame video code.
How to get the code of a YouTube video. Click the “Share” button under the video on the service, then choose the necessary options and copy the embed code.
How to get the code of a Vimeo video. Click the “Share” button in the upper right corner of the video on the service. A pop-up window with options will appear. Choose the necessary options and then copy the embed code.
Form is a container for pasting forms, the date of which are delivered to the target page.
A pop-up window appears when adding this element.
All fields in the form are subdivided into the entry field (Text field), selection from the drop-down list (Drop-down menu), multiple choice (Checkboxes), one choice (Radio buttons), and also the Hidden Field. The fields are created upon clicking the corresponding field name in the left column of the pop-up window. There are preset fields with lists of values: Country, State, Income, Date of birth, and Time Zone.
You can set the selected field in the right column. There you can specify the field headline, choose its view option, name the field, preset field value, the field tip text (disappears on input start), validation message text, and filling out the field mandatory for. Editing of the list of possible values is also possible. The option to manage the field order and delete the field can be found in the center preview column.
After creation and adjustment of all the necessary fields you should click the “Done” button. The form will be created in the view area, the layout of which can be then adjusted via the management and addition sidebar. There you can set the size of the form, its position and orientation (horizontal, when field headlines are located to the left or vertical when field headlines are located above), specify the font properties, adjust the boundaries, corners rounding, background and transparency.
HTML code is a container for pasting the user’s HTML code that includes the tags of style and script.
Managing the position of elements in the view area is realized via the drag & drop method. Highlighting of the element is realized upon clicking.