Scroll

Widgets: Basic

1. Text
2. Image
3. Button
4. Horizontal Divider
5. Space
6. Menu
7. Contact Form

Text

This widget allows you to create text blocks on your site, where you can add/edit/remove text, customize it’s font type, style, colors or size, manage redirect links.

"Text" widget also has the following common features: "Spacing", "Animation".

Widget’s height is equal to the height of the text within the widget.

When you place Text widget within the column - you will see "CKEditor" with various amount of editing tools.

You can set Bold, Italic or Underline text style, customize heading (as example, for SEO purposes), edit font’s size or align text correctly within the column.
"Styles" - this tool contains a list of text styles, which can be used within the Text Object. For more details on how to create text styles please see following tutorial Text Styles.
"Text Format" allows you to set Headings ("Normal" is used by default).
"Font Size"  option allows you to increase/decrease font size.
If you wish to align text within a column - you can use 4 types of alignment: "Left Alignment", "Center Alignment", "Right Alignment", "Justified".

In order to edit text’s color please click "A" button.

There are 25 preset colors presented and 5 additional (independent) colors. Also you may see “Default” color section, which is used for entire text by default. You can click on the color picker section and change it manually. If you wish to change colors, please click "More Colors" link.

Within the color picker section you can choose any color. In the left column you can see your current color, while in the right section you can see your new color. In order to save results please click "Ok" button. If you wish to abandon changes - please click "Cancel" button.

If you wish to create redirect link - please click "Link" button. If you wish to remove redirect link - please click "Remove Link" button.

 

If you wish to increase/decrease indent within a text widget - you can use the appropriate buttons.

If you wish to create a "numeral" or "bulleted" list - you can use the appropriate buttons.

"Insert Icon" feature allows you to add various icons into the text.
778.jpg

"Search" field allows you to find necessary icons using specific keywords (for example, you can find music related icon by typing "music" keyword in the "Search" field).
780.jpg

You can manually choose any icon from the list, press "Apply" button and then icon will appear in the text directly.
781.jpg

"Set fixed width for the icon" feature allows you to display icons on the same level when you create vertical lists.
779.jpg

If you wish to remove text formatting - please click on the "Tx" button.

You can "Undo"/"Redo" changes for the Text object, using appropriate arrow buttons.

 

Image

This widget allows you to use/edit image object on your site’s page.

"Image" widget is separated into two tabs: "Settings" and "Design".
"Settings" - this tab provides the following editing tools for your image: "Image", "Title", "Alt Text".

"Image" widget also has the following common features: "Link To", "Devices", "Alignment", "Spacing", "Animation".

First of all you need to add image from the Media Library. Please click + button within the "Image" feature.

System will redirect you to the Media Library. Please choose necessary image and click "Apply" button.
You may also choose different image size, when you wish to add image on the site's page from the Media Library (for this please put "Image" widget on the page and it will automatically open necessary section). "Image Size" is separated into 5 different sizes: Original (Default), Small, Medium, Large, HD (depending on the size of each image). You can choose any size from the "Image Size" drop-down list (if the image meets required size).
Small - 125*125рх
Medium - 300*300px
Large - 1200*1200рх
Extra Large (HD) - 1980*1980px

Please be informed, that fields Title and Alt Text would be filled automatically, using the image’s details from same columns, within the Media Library.

"Title" - your image’s title (it can be changed within the same field for mentioned image within the Media Library). Also it improves SEO (when you overlay image with cursor - you will see image’s title). Search engines can also index such a title.

"Alt Text" - this text will appear instead of your image if your browser’s settings block the possibility to preview images.
 

Button

This widget allows you to create/manage button on your site’s page.

Button widget is separated into two main tabs: "Settings" and "Design".
Settings - this tab contains the following functions: "Size".

"Button" widget also has the following common features: "Link To", "Alignment", "Spacing", "Devices", "Animation".


"Size" - this feature allows you to change button size. You can use "Small", "Medium", "Large" options. "Medium" size is used by default. Button’s font size will change depending on the button’s size. You can see an example on the screen shot below.
 

Divider

This widget allows you to separate your site’s content with horizontal line.

"Divider" widget is separated into two main tabs: "Settings" and "Design".
"Settings" - this tab contains the following functions: "Width".

"Divider" widget also has the following common features: "Alignment", "Spacing".

"Width" - this feature allows you to increase/decrease divider’s width. Default width is 100%.

 

Space

This widget allows you to create additional space between site's objects on the page.

"Space" widget has the following feature: "Height".

"Space" widget also has the following common features: "Spacing", "Visible On".

"Height" - allows you to increase the height of your space area (from 1 up to 999 px).

 

This widget allows you to create site's menu, where you can add/edit menu items, duplicate/remove existing menus, manage redirects through the menu items and edit hierarchy of the menu elements.

"Menu" section is separated into two main tabs: "Settings" and "Design".

"Menu" widget has the following features: "All Menus".

"Menu" widget also has the following common features: "Devices", "Alignment", "Spacing".

"All Menus" - this feature allows you to choose necessary menu structure from the list of menus.

You can also click "Edit" button in order to enter Menu widget's structure for further editing.

 

If you wish to create new menu - please click "Create New Menu" button.

Please specify your menu's name within the "Name" section and click "Add" button.

If you wish to duplicate menu - please click "Duplicate" button. You can duplicate/remove duplicated menu or new menu widget. If you wish to remove menu - please click "Remove" button.

Please note: you can only duplicate Default Menu. It's not possible to remove it.

In order to add new menu item please click "Add New Menu Item" button.

There are presented two main features: "Name" and "Link To".

"Name" - this feature allows you to edit menu item's title.

"Link To" - allows you to enable redirect option for the menu item.

You can edit or remove menu item using appropriate buttons.

"Edit" area shares the same features that are presented in "Add New Menu Item" section.

Please note: The number of menu items is unlimited. But the level of subitems is limited to 3.
Please be informed that if you didn't save your menu item - it will have blue overlay color and "draft" status. It means that "Duplicate" feature won't duplicate this item until you save your menu changes. If you saved menu item correctly - it can be duplicated as a part of entire menu widget's structure.


You can drag & drop menu items using your mouse cursor. You will see a dotted border when you drag your menu item. This area indicates the position where you can place menu item.
!Important! If you wish to create several input levels (up to 3) - you need to relocate the item under necessary main menu item and move it slightly to the right (dotted line will be visually moved to the right).
 

If you relocate the main menu item - all submenu items would be automatically relocated as well.
You can drag & drop submenu item and place it on the same level as main menu item (under or over it).

If you wish to save menu changes - please click "Save Menu" button.

Contact Form

This widget allows you to create a Contact Form and receive emails from site’s visitors.

"Contact Form" widget is separated for two tabs: "Settings" and "Design".

"Contact Form" widget has the following features and blocks: "Email To", "Form Fields", "Form Settings".

"Contact Form" widget also has the following common features: "Spacing", "Animation".

"Email To" - this field contains your email account details, where system will deliver emails. If the field is empty, emails will be sent to the email address specified in the admin user profile.

 

Form Fields

There are 6 main fields presented: "Name", "Email", "Phone", "Address", "Subject", "Attach File" and "Message". All fields can be removed (except "Email" field). You can enable mandatory feature (*) for each field separately by using Field Mandatory button (“*”), on the right side of each field.

Form Settings

This block allows you to edit form field’s status messages. There are presented the following fields: "Send Button Text", "Success Message", "Error Message for Mandatory Fields" and "Error Message for Email Field".

Design

"Design" tab contains number of presets, which change the visual appearance of the Contact  Form widget.

"Button Styles" block allows you to change the appearance of buttons within the Contact Form widget, including "Send Button", "Attach Button", their size and alignment.

Have more questions? Submit a request

Comments