Design: 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
17. Category List
18. Callback
19. Advanced Slider

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

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" widget contains 3 customizable presets.

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

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

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

The "Devices" feature is a common widget setting.

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

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

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

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

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

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

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

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

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

 

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

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

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

"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

The "Button" widget contains 5 customizable presets and a possibility to create custom presets.

Custom Preset

If you wish to create a custom Button preset - click the "Add" button.

Regular Button 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.

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.

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

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

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

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

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

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

"Back to Top" widget contains 1 customizable preset.

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

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.

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

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

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

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

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

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

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

The "Devices" feature is a common widget setting.

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

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

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

"Cookie Notification"  widget contains 1 customizable preset.

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

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

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

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

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

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

"Background Color" feature affects the shape color.

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

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

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

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

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

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

"Divider" widget contains 3 customizable presets.

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

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

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

"Font Size" feature allows you to increase/decrease the font size of the text within the forms.

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

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

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

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

"Font Size" feature allows you to enable a possibility to increase/decrease the size of the menu and submenu items.

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

"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" widget contains 3 customizable presets.

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

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

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

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

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

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

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

The "Devices" feature is a common widget setting.

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

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

"Tabs" widget contains 3 customizable presets.

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

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

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

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

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

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

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

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

The "Devices" feature is a common widget setting.

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

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

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

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

"Tile Gallery" widget contains 3 customizable presets.

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

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

The "Devices" feature is a common widget setting.

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

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

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

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

"Category List" widget contains 2 customizable presets.

"Title" (font settings) block allows you to change font type and style: "Font Size", "Icon Size", "Vertical Spacing", "Spacing Between Icon and Text". 

"Delimiter" block allows you to edit height, color and style of your category's delimiter.

"Callback" widget contains one customizable preset.

"Background" and "Icon Color" allows you to change the background color and icon color for the Callback widget.

"Position" block contains the following features: "Alignment Arrows", "Devices", "Vertical Spacing", "Horizontal Spacing", "Width" and "Height".

"Alignment Arrows" feature allows you to change the position of Callback button on the page (align it either to the left or right sides of the page).

"Devices" - this feature allows you to set settings for various devices: desktop, tablet, landscape phone,portrait phone.

"Vertical Spacing", "Horizontal Spacing", "Width", "Height" and "Icon Size" features allow you to change icon's size, its position from the screen sides and make either larger, higher or smaller.

"Activate Button Border" block contains the following features: Style, Color, Width and Corners, which allow you modify the button's styles.

"Content Border" block contains the following features: Style, Color, Width and Corners, which allow you to modify the style of border around the content.

"Delimiter" block contains  the following features: Color, Height, Normal/Hover buttons, which allow you to modify the styles of the Delimiter, which separates Callback form in two areas (content with icons and social activity buttons).

"Advanced Slider" widget contains two customizable presets.

"Preloader" block allows you to change the color of your preloader.

"Arrows" tab allows you to configure various visual styles of the navigation arrows.

"Previous" and "Next" features allow you to change the arrow icons within the widget from the list of available icons.

"Font Size" feature allows you to increase/decrease the icon's size, width, and height on any device.

"Border" block allows you to change the border style of the arrows and enable/disable the round corners of the border.

"Icon Color", "Background" and "Border Color" allow you to set the required color for the arrows in both Normal and Hover mode.

"Pagination" tab  allows you to configure various visual styles of the pagination icons.

"Font Size", "Width" and "Height" features allow you to increase/decrease the visual size of the pagination numbers. "Spacing Between Elements" feature increases/decreases the gap between pagination icons. "Font" and "Styles" features change the visual style of the pagination numbers.

"Border"  block allows you to change the border style of the pagination icons and enable/disable the round corners of the border.

"Icon Color", "Background" and "Border Color" allow you to set the required color for the pagination icons in both Normal and Hover mode.

"Selected Item" block allows you to change the icon color, background and border color of the pagination icons.

"Play/Pause" tab allows you to change the visual style of the play/pause icons.

"Icon Size" feature allows you to increase/decrease the size of the icon.

"Icon Color" allows you to set the required color for the icon in both Normal and Hover mode.