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.

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.

"Click Action" feature enables redirect option for your text. There are several alternative options: None, Go to page, Open URL, Mail To.
"None" - redirect option is disabled.
"Go to Page" - this option allows you to enable redirect to the site’s page. You can choose any page from the list of created pages.
"Go to Blog" - this option allows you to redirect user directly to the main Blog page of your site.
"Go to Post" - this option allows you to redirect user to the necessary post of your Blog section.
"Go to Store" - this option allows you to redirect user to the Store page of your site (if Store plugin is available).
"Go to Category" - this option allows you to redirect user to the category page of your Store
"Go to Product" - this option allows you to redirect user to the product page of your Store
"Open URL" - this option allows you to enable redirect to external URL. You can type necessary URL in the second field.
"Open In" feature provides possibility to open URL in the new window or in the current window.
"No Follow" option - this feature won’t allow search engine to index your redirect URL.
"Mail To" - this option opens a form field, where you can specify e-mail account and receive e-mails.
"Open in Lightbox" - this option allows you to open image file from your Media Library and preview it in full size.
"Open File" - this option allows you to open file from the Media Library. You can either preview or download it (depends on the file type).

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.

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.

"Spacing" - this feature allows you to edit padding feature (increase/decrease internal indent between widget’s content and column border from the 4 sides: left, right, top, bottom). This editing can be made through 4 drop-down lists, which contain the following preset features: "Auto", "0", "Small", "Medium", "Large". "Auto" preset is used by default.

You can modify spacing value with the help of arrow buttons or using ready-made values ("Auto", "0", "Small", "Medium", "Large"). In this case you need to click on the value’s title and choose necessary option from the list.

"Animation" section allows you to set custom animation type effects for your widget's first appearance.

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", "Link To", "Title", "Alt Text", "Responsive", "Alignment", "Spacing" and "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.
"Link To" - allows you to enable redirect option for the image.
"None" - redirect option is disabled.

"Go to Page" - this option allows you to enable redirect to the site’s page. You can choose any page from the list of created pages.

"Open URL" - this option allows you to enable redirect to external URL. You can type necessary URL in the second field.

"Open In" feature provides possibility to open URL in the new window or in the current window.

"Mail To" - this option opens a form field, where you can specify e-mail account and receive e-mails.

"Open in Lightbox" - this option allows you to open an image in the Lightbox (you will need to add image to the Lightbox Image section).

"Open File" - with this option you may add an file and open it, when click on the image.

"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.

You can preview image position using various devices: regular computer, tablet, landscape phone, portrait phone.

"Alignment" - this feature re-aligns your image within the column, depending on the alignment side: left, middle or right.

"Spacing" - this feature allows you to edit padding feature (increase/decrease internal indent between the image and column border from 4 sides: left, right, top, bottom). This editing can be made through 4 drop-down lists, which contain the following preset features: "Auto", "0", "Small", "Medium", "Large".
"Auto" preset is used by default.

You can modify spacing value with the help of arrow buttons or using ready-made values ("Auto", "0", "Small", "Medium", "Large"). In this case you need to click on the value’s title and choose necessary option from the list.

"Animation" block allows you to set custom animation type effects for your widget's first appearance.

Design - "Preset Name" - this feature contains a drop-down list of preset image values from the Themes section.
 

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: "Link To", "Size", "Alignment", "Spacing", "Responsive" and "Animation".

"Link To" - allows you to enable redirect option for the button.
"None" - redirect option is disabled.

"Go to Page" - this option allows you to enable redirect to the site’s page. You can choose any page from the list of created pages.
"Open URL" - this option allows you to enable redirect to external URL. You can type necessary URL in the second field.
"Open In" feature provides possibility to open URL in the new window or in the current window.
"Mail To" - this option opens a form field, where you can specify e-mail account and receive e-mails.
"Open in Lightbox" - this option allows you to open a Lightbox (you will need to add image to the Lightbox Image section) when click on the button.
"Open File" - with this option you may add file and open it, when click on the button.


"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.

"Spacing" - this feature allows you to edit padding feature (increase/decrease internal indent between the button’s content and column border from 4 sides: left, right, top, bottom). This editing can be made through 4 drop-down lists, which contain the following preset features: "Auto", "0", "Small", "Medium", "Large". "Auto" preset is used by default.

You can modify spacing value with the help of arrow buttons or using ready-made values ("Auto", "0", "Small", "Medium", "Large"). In this case you need to click on the value’s title and choose necessary option from the list.

"Alignment" - this feature re-aligns your button within the column, depending on the alignment side: left, middle or right.

You can preview position of your widget using various devices: regular computer, tablet, landscape phone, portrait phone.

"Animation" block allows you to set custom animation type effects for your widget's first appearance.

Design

This tab provides a possibility to change preset name for your button widget.
"Preset Name" - this feature contains a drop-down list of preset button values from the Themes section.
 

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", "Alignment" and "Spacing".

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

"Alignment" - this feature re-aligns your horizontal divider on the page, depending on the alignment side: left, middle or right.

You can preview position of your widget using various devices: regular computer, tablet, landscape phone, portrait phone.

"Spacing" - this feature allows you to edit padding feature (increase/decrease internal indent between the horizontal divider and column border from 4 sides: left, right, top, bottom). This editing can be made through 4 drop-down lists, which contain the following preset features: "Auto", "0", "Small", "Medium", "Large". "Auto" preset is used by default.

You can modify spacing value with the help of arrow buttons or using ready-made values ("Auto", "0", "Small", "Medium", "Large"). In this case you need to click on the value’s title and choose necessary option from the list.


"Animation" block allows you to set custom animation type effects for your widget's first appearance.

Design

This tab provides a possibility to change a preset name for your horizontal divider.

Space

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

There are three main features: "Height", "Spacing" and "Visible On".

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

"Spacing" - this feature allows you to edit padding feature (increase/decrease internal indent between the widget and border from 4 sides: left, right, top, bottom). This editing can be made through 4 drop-down lists, which contain the following preset features: "Auto", "0", "Small", "Medium", "Large". "Auto" preset is used by default. 

You can modify spacing value with the help of arrow buttons or using ready-made values ("Auto", "0", "Small", "Medium", "Large"). In this case you need to click on the value’s title and choose necessary option from the list.


"Visible On" - this feature allows you to enable/disable space feature for various types of devices (tablet, mobile landscape, mobile portrait). Disabled device will be grayed out. PC is set by default and can't be disabled.

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".

"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.

You can preview position of your widget using various devices: regular computer, tablet, landscape phone, portrait phone.

"Alignment" - this feature re-aligns your menu widget within the column, depending on the alignment side: left, middle or right.

"Spacing" - this feature allows you to edit padding feature (increase/decrease internal indent between the image and column border from 4 sides: left, right, top, bottom). This editing can be made through 4 drop-down lists, which contain the following preset features: "Auto", "0", "Small", "Medium", "Large". "Auto" preset is used by default.

You can modify spacing value with the help of arrow buttons or using ready-made values ("Auto", "0", "Small", "Medium", "Large"). In this case you need to click on the value’s title and choose necessary option from the list.

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.

"None" - redirect option is disabled.

"Go to Page" - this option allows you to enable redirect to the site’s page. You can choose any page from the list of created pages. Also you can enter an Anchor (that was previously set on the page).

"Go to Blog" - this option allows you to redirect user directly to the main Blog page of your site.

"Go to Post" - this post allows you to redirect user to the necessary post of your Blog section.

"Open URL" - this option allows you to enable redirect to external URL. You can type necessary URL in the second field.

"Open In" - this option allows you to choose, whether to open URL in the same window or in the new window.

"No follow" - this option allows search engine to ignore mentioned link.

"Open In Lightbox" - this feature provides possibility to open image using Lightbox effect. You can choose necessary image from the Media Library by using "+" button within the Lightbox Image field.

"Open File" - this option allows you to open file from the Media Library. You can either preview or download it (depends on the file type).

"Mail To" - this option opens a form field, where you can specify e-mail account and receive e-mails.

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".
"Settings" tab contains the following features and blocks: "Email To", "Spacing", "Form Fields", "Form Settings" and "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.

"Spacing" - this feature allows you to edit padding feature (increase/decrease internal indent between the widget and column border from 4 sides: left, right, top, bottom). This editing can be made through 4 drop-down lists, which contain the following preset features: "Auto", "0", "Small", "Medium", "Large". "Auto" preset is used by default.

You can modify spacing value with the help of arrow buttons or using ready-made values ("Auto", "0", "Small", "Medium", "Large"). In this case you need to click on the value’s title and choose necessary option from the list.

"Animation" block allows you to set custom animation type effects for your widget's first appearance.

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

Powered by Zendesk