Scroll

Welcome to our LiveChat! Please press "Start Chat" button to proceed

Start Chat

Preset Builder

1. Accordion
2. Audio and Video Player
3. Button
4. Back to Top
5. Cookie Notification
6. Countdown Timer
7. Divider
8. Forms
9. Grid Gallery
10. Image
11. Menu 
12. Pagination
13. Slider and Carousel
14. Social Links
15. Tabs
16. Tile Gallery

"Preset Builder" is a feature that allows you to edit widgets styles. It can be accessed through the "Design" section of your website's admin panel.

Each widget has a unique number of presets which are presented within the Design tab of each widget. These presets must be customized through the Design - Widgets menu item.

Each preset contains a certain amount of features, which allow you to customize widget's appearance on the page (font style, colors, background for both Normal and Hover styles).

You can modify presets for the following widgets: "Accordion", "Audio and Video Player", "Button""Back to Top", "Cookie Notification""Countdown Timer", "Divider", "Forms", "Grid Gallery", "Image", "Menu", "Pagination", "Slider and Carousel", "Social Links" "Tabs" and "Tile Gallery".
Screenshot_15.png

Please be informed that all widgets have different number of features within each preset, depending on the template's theme.

The provided instruction is related to a specific theme and functions can vary in each template - please pay attention to this!

Accordion

"Accordion" widget contains 3 customizable presets.
763.jpg

You can customize the following blocks in Preset 1: "Title" (font settings), "Item Border", "Title Border", "Item" and "Title" (color settings).
Screenshot_27.png

"Title" (font settings) block allows you to change font type, style, item spacing, title size, title icon size, closed/opened item's icon size and add icon for both closed and opened item .
Screenshot_28.png

Items Spacing can increase/decrease the space between the Accordion items up to 200px.
Screenshot_28.png

The "Devices" feature is a common widget setting.
Screenshot_29.png

"Title Icon Size" will enlarge the chosen icon appropriately (up to 100px).
Screenshot_27.png

"Closed/Opened Item's Icon Size" feature allows you to change item's size for both opened and closed states up to 100px.
Screenshot_30.png

"Icon" feature allows you to edit/remove/add an icon for both closed and opened states.
Screenshot_31.png

Once "Edit" icon is clicked, a new "Icons" window will appear. It consists of a "Search" feature and a set of Font Awesome icons.
Screenshot_7.png

"Search" feature allows you to quickly find one of the present icons by typing a word associated with it.
Screenshot_8.png

If you need to remember and search later a particular icon, point your mouse on it and you will see the icon's name.
Screenshot_9.png

In addition you can configure Content Border's style, width and corners for both "Normal" and "Hover" states of the "Opened Item".
Screenshot_34.png

"Item Border" block allows you to modify style, width and corners of the item's border for both closed and opened states.
Screenshot_35.png

"Title Border" block allows you to modify style, width and corners of the title's border for both closed and opened states.
Screenshot_36.png

"Item" block allows you to change the color of Accordion item's open/close icon and border for both "Normal" and "Hover" states.
Screenshot_37.png

"Title" (color settings) block allows you to enable/disable underlining for the title, change font color and icon color, set background and border color for the Accordion widget's area.
Screenshot_38.png

"Content" block allows you to set background and border color for the opened item's area.
Screenshot_39.png

Audio and Video Player

"Audio and Video Player" contains 1 customizable preset.

The following features can be customized for both Normal and Hover states: "Font Type", "Font Style", "Font Size"," Font Color", "Background", "Progress Bar", "Volume Control and Border Color". In addition it's possible to customize the colors of Icons and Background for Control Buttons in both selected/non-selected states.

You can set various font types, styles and sizes within the Audio and Video Player.

You can set various colors within the Audio widget for the following parts: "Font Color", "Background", "Progress Bar", "Volume Control" and "Border Color".

"Control Buttons" block allows you to change the color of "Play"/"Stop" and "Volume" buttons and also the background behind "Play"/"Stop" buttons.

"Selected Control Buttons" block allows you to change the color of "Repeat" button and background behind it.

Button

"Button" widget contains 5 customizable presets.

The following features can be customized: "Font Type", "Font Style", "Font Color" and "Background" for both "Normal" and "Hover" state and also "Icon Color".

You can choose various font styles from the list of available fonts. Please note that some fonts can use only "Regular" style.

 "Font Color" and "Background Color" can be modified for both "Normal" and "Hover" states.

Click on the color palette to choose necessary color. There are presented 25 preset colors and 5 additional (independent) colors. If you wish to change colors, please click "More Colors" link.

If you wish to change colors, please click "More Colors" link.
Screenshot_17.png

Within the color picker area you can choose any color. In order to save results please click "Ok" button. If you wish to abandon changes - please click "Cancel" button.
Screenshot_18.png

"Opacity" feature allows you to set the visibility of your color from 0% (transparent) to 100% (solid).
Screenshot_24.png

You can specify the "Opacity" % value in the corresponding field.
Screenshot_25.png

"Current" feature allows you to reset your color to the original one when picking a new color.
Screenshot_21.png

Just click on the "Current" color and you will see that "New" becomes the same.
Screenshot_22.png

You can specify a hex color value that you want in the corresponding field and the color picker will quickly adjust to this color.
Screenshot_20.png

!Imporant! The "Background color" feature is present in Preset 1, Preset 3-5. It changes a background color of the Button.
Screenshot_16.png

"Icon Color" allows you to choose various colors for your button's icon.

Back to Top

"Back to Top" widget contains 1 customizable preset.
Screenshot_1.png

!Important! Please note that any changes of this preset will only be applied to the custom "Back to Top" button. In order to enable it please go to "Settings" - "General" - "Back to Top" Button - and choose "Enable with custom design".
Screenshot_44.png

Preset 1 consists of general settings, "Border" and "Animation" blocks.

"Icon" feature allows you to edit/remove/add an icon for your "Back to Top" button.
Screenshot_33.png

"Position" - this feature relocates "Back to Top" button's position according to the chosen arrow button (Right Bottom arrow button is used by default).
Screenshot_11.png

"Icon size", "Width", "Height" features allow you to configure the size of the button.
Screenshot_52.png

"Horizontal Spacing" feature allows you to set the necessary spacing in front of your button. Minimum spacing is 0px. Maximum spacing is 200px.
Screenshot_17.png

"Vertical Spacing" feature allows you to set the necessary spacing above your button. Minimum spacing is 0px. Maximum spacing is 200px.
Screenshot_18.png

!Imporant! Please note that "Horizontal Spacing" and "Vertical Spacing" features are strictly bound to "Position" arrow button you choose.

If you select Middle Top or Middle Bottom arrow button, you will be able to use "Vertical Spacing" only.
Screenshot_19.png

If you select Middle Left or Middle Right arrow button, you will be able to use "Horizontal Spacing" only.
Screenshot_20.png

If you select any diagonal arrow button, you will be able to use both "Vertical Spacing" and "Horizontal Spacing".
Screenshot_21.png

The "Devices" feature is a common widget setting.
Screenshot_23.png

"Icon Color", "Background Color", "Border Color" features can be customized for both "Normal" and "Hover" states.
Screenshot_29.png

"Border" block allows you to change style, width and corners of the border around the button.
Screenshot_33.png

"Animation" - is a general setting of each widget.
Screenshot_1.png

"Cookie Notification"  widget contains 1 customizable preset.
Screenshot_21.png

Please note that you can enable and disable the notification on your website in "Advanced Settings". Just click on the settings link.
Screenshot_22.png

Preset 1 consists of a "Background Color" feature and a " "Close" button" block.
Screenshot_23.png

"Background Color" feature allows to change the color of the "Cookie Notification" body.
Screenshot_25.png

" "Close" button " block contains "Normal Color" and "Hover Color" features which allow you to change the color of the close button for both "Normal" and "Hover" states.
Screenshot_27.png

Countdown Timer

"Countdown Timer" widget contains 3 customizable presets.

The following preset allows you to edit the following features: "Font", "Background Color", "Delimiter Color", "Digits", "Text", "Border" and "Sizes".
Screenshot_17.png

"Font" feature affects the type of your digits and text.
Screenshot_18.png

"Background Color" feature affects the shape color.
Screenshot_19.png

"Delimiter Color" feature allows you to set various colors for your delimiter.
Screenshot_20.png

"Digits" block allows you to change style, font color of the counter digits.
Screenshot_21.png

"Text" block allows you to change style, font color of the counter text.
Screenshot_22.png

"Border" block allows you to change style, color, width and corners of the border around the counter.
Screenshot_23.png

The "Sizes" block allows you to adjust "Background""Delimiter""Spacing""Digits""Text" sizes.
Screenshot_7.png

The "Devices" feature allows you to configure the sizes for every device, so the timer can be displayed properly.
Screenshot_6.png

Divider 

"Divider" widget contains 3 customizable presets.

You can modify the following features of your Divider: "Style", "Color" and "Height".

Forms

"Forms" tab contains 3 customizable presets for all site's forms ("Contact Form", "MailChimp", Store "Checkout" etc).

Customize the appearance of your contact form by changing "Font Type", "Background Color", "Input Style", "Text Message Format" and "Checkbox Style".
Screenshot_6.png

"Input Style" block allows you to modify the style of the following blocks: "Text Input Format", "Normal Color" and "Error Color".

"Text Input Format" block allows you to set necessary font style within the Contact Form fields. Please note that some fonts can use only in "Regular" style.

"Normal Color" block allows you to set custom "Font Color", "Background" and "Border Color".

"Error Color" block allows you to set custom "Font Color", "Background" and "Border Color" for the error messages directly.

"Text Message Format" block allows you to modify the style of the following blocks: "Error Mandatory Fields", "Success Message" and "Error Sending".

"Error Mandatory Fields" block allows you to set custom font color for the following system message: "Field is required" (message can be edited and modified within the Contact Form settings).

"Success Message" block allows you to set custom font color for the following system message: "Your Message Was Sent Successfully" (message can be edited and modified within the Contact Form settings).

"Error Sending" block allows you to set custom font color for the following system message: "Sorry, Your Message Was Not Sent" (message can be edited and modified within the Contact Form settings).

"Checkbox Style" block allows you to modify the appearance of your contact form checkbox with these features: "Size", "Border Color""Icon Color" and "Error Border Color".
Screenshot_7.png

"Size" feature allows you to increase/decrease the size of your checkbox. Minimum size is 10px. Maximum size is 50px.
Screenshot_8.png

"Border Color""Icon Color" and "Error Border Color" features allows you to set various colors for form's border, icon and border's error.
Screenshot_41.png

Please note: the icon color can be seen only in website preview mode when checkbox is clicked.

Please note: the error border color can be seen only in website preview mode when checkbox is not clicked and is set to mandatory.

Grid Gallery

"Grid Gallery" widget contains 3 customizable presets.

"Caption" block allows you to customize the following features: "Font Type","Font Style", "Font Color" for both "Normal" and "Hover" state and "Image Border Color".

You can choose various font styles from the list of available fonts. Please note that some fonts can use only "Regular" style.

"Text Color" and "Background Color" can be modified for both Normal/Hover states.

"Layer" block allows you to set custom "Layer Color" and "Layer Border Color" for the images within the Grid Gallery.

Image

"Image" widget contains 5 customizable presets.

The following features can be customized: "Image Border Color" for both "Normal" and "Hover" state.

"Layer" block allows you to set custom "Layer Border Color" for the Image.

"Menu" widget contains 3 customizable presets.

Menu and sub menu appearance can be edited for two devices: "Regular Computer" and "Mobile Device".

"Menu Items" block allows you to edit "Menu Font Type", "Font Style" for both Normal and Hover states, change "Font Color" for menu items and selected item.

Same can be applied for "Submenu Items" block. In addition you can set Background Color for sub menu items.

"Mobile Device" tab allows you to customize "Hamburger Icon", "Menu Items" and "Selected Item".

"Hamburger Icon" block allows you to customize "Icon Color" and "Background" area for your "Hamburger Icon" once you choose it.

"Menu Items" block allows you to customize "Font Color", "Background" and "Delimiter Color" of your menu widget's area.

"Selected Item" block allows you to set custom "Font Color" and "Background" for the selected menu items.

"Submenu Items" block allows you to set custom "Font Color", "Background" and "Border Color" for the submenu items and selected item of your submenu widget.

"Pagination" widget contains 1 customizable preset.

You can change "Font", "Styles" and "Font Size" for selected item and pagination items.

"Selected Item" block allows you to change "Style" of selected item, it's "Font Color", "Background" and "Border Color".

You can also customize such "Pagination Items" block features as "Font Color", "Background" and "Border Color" for both "Normal" and "Hover" state.

Slider and Carousel

"Slider and Carousel" widget contains 2 customizable presets.

You can customize the following blocks: "Slider Caption", "Carousel Caption", "Slider and Carousel", "Arrows", "Pagination" and "Selected Pagination".

"Slider Caption" block allows you to set custom font type, style, text color and background color for the Slider Caption.

"Carousel Caption" block allows you to set custom color for the Carousel Caption background.

"Slider and Carousel" block allows you to preview applied changes for Slider and Carousel widgets in both Normal and Hover states.

"Arrows" block allows you to set custom "Color" and "Background" for your slider's arrow buttons.

"Pagination" block allows you to set custom color for your slider's pagination buttons.

"Selected Pagination" block allows you to set custom color for your slider's selected pagination buttons.

Social Links

"Social Links" widget contains 3 customizable presets.

Preset 1 consists of general settings and "Border" block.
Screenshot_1.png

General settings consist of the following features: "Background Autosize", "Devices", "Icon Size", "Width", "Height", "Horizontal Spacing", "Vertical Spacing", "Icon Color", "Background Color", "Border Color".
Screenshot_2.png

"Background Autosize" feature - if enabled, the background will fit the proportions of the icon.
Screenshot_3.png

!Important! When "Background Autosize" feature is enabled you can not configure width and height as they are configured automatically in this case. You can only configure it if you do not need the background to fit the proportions of the icon.
Screenshot_51.png

"Icon Size", "Width", "Height" features allows you to configure the size of your button.
Screenshot_53.png

"Horizontal Spacing" feature allows you to set the necessary horizontal spacing between your "Social Links" icons. Minimum spacing is 0px. Maximum spacing is 200px.
Screenshot_4.png

"Vertical Spacing" feature allows you to set the necessary vertical spacing between your "Social Links" icons. Minimum spacing is 0px. Maximum spacing is 200px.
Screenshot_5.png

The "Devices" feature is a common widget setting.
Screenshot_8.png

"Icon Color", "Background Color", "Border Color" features can be customized for both "Normal" and "Hover" states.
Screenshot_9.png

"Border" block allows you to change style, width and corners of the border around the "Social Links" widget.
Screenshot_24.png

Tabs

"Tabs" widget contains 3 customizable presets.
Screenshot_29.png

Preset 1 consists of the following blocks and features: "Title" (font settings), "Content", "Devices", "Title Size",  "Title Icon Size", "Closed Item", "Opened Item", "Title Border", "Title" (color settings).
Screenshot_28.png

Title" (font settings) block allows you to change font type and style. It also consists of the following features: "Spacing between Tabs", "Merge Title and Content", "Spacing between Title and Content"
Screenshot_30.png

"Spacing between Tabs" feature allows you to increase/decrease the distance between your tabs. Minimum spacing is 0px. Maximum spacing is 50px.
Screenshot_31.png

"Merge Title and Content" feature eliminates the space between title and content.
Screenshot_32.png

!Important! When this feature is selected, "Spacing between Title and Content" feature won't be available.

"Spacing between Title and Content" feature allows you to increase/decrease the distance between your title and content. Minimum spacing is 0px. Maximum spacing is 100px.
Screenshot_33.png

"Content" block consists of a "Background Color" feature and a "Content Border" block.
Screenshot_34.png

"Background Color" feature allows you to change the background color of the tab content.
Screenshot_35.png

"Content Border" block allows you to change style, border color, width and corners of the border around the content of the "Tabs" item.
Screenshot_36.png

The "Devices" feature is a common widget setting.
Screenshot_8.png

"Title Size" feature allows to increase/decrease tab's title from 6px to 72px.
Screenshot_9.png

"Title Icon Size" feature allows to increase/decrease tab's icon from 6px to 100px.
Screenshot_10.png

"Title Border" block allows you to change style, width and corners of the title border around the "Tabs" widget.
Screenshot_11.png

"Title" (color settings) allows you to enable/disable underlining for the title, change font color and icon color, set background and border color for the Tabs widget's area for both "Normal" and "Hover" states for "Closed Item" and "Opened Item".
Screenshot_16.png

Tile Gallery

"Tile Gallery" widget contains 3 customizable presets.
Screenshot_47.png

Preset 1 consists of the following blocks and features: "Caption", "Icon", "Border", "Icon Color", "Border Color", "Overlay Color"
Screenshot_48.png

"Caption" block allows you to customize the appearance of your "Tile Gallery" caption text. You can set custom font type, font size, style, use underscore, set text color and background color for the "Tile Gallery" Caption and configure the appearance of the gallery on all devices.
Screenshot_49.png

The "Devices" feature is a common widget setting.
Screenshot_50.png

"Font Size" feature allows you to increase/decrease the size of your caption text from 6px to 72px.
Screenshot_53.png

"Icon" block allows to edit/remove/add an Icon in your "Tile Gallery".
Screenshot_32.png

"Border" block allows you to change style, width and corners of the border around the "Tile Gallery" widget.
Screenshot_26.png

"Icon Color", "Border Color", "Overlay Color" features can be customized for both "Normal" and "Hover" states.
Screenshot_40.png

Have more questions? Submit a request

Comments