Widgets Level
Widgets are the building blocks of your site. They are where you start assembling and arranging the visible components of your site. Each widget sits inside a column, and within the widgets are elements.
There are many types of widgets you might work with throughout your site. Each widget type has a pre-designed layout that you can edit within the widget and element settings. We have broken them down into 5 main types:
Core Widgets: Basic, Text Overlay, WYSIWYG
Product Widgets: Product, Product Grid, Product Slider, Product Text Overlay, Bridal Ring Styles, Diamond Search Shapes
Custom Gallery Widgets: Custom Gallery Slider, Custom Gallery Grid
Social Widgets: Social Slider, Social Grid, Social Feed, Single Social, Text Overlay Social, Two Column Social
Store Info Widgets: Reviews, Staff, Staff Slider, Logo Scroller, Repair Status, Store Info, Financing Calculator
Click on each type of widget to learn more about them.
Common Widget Settings
The following settings are shared across all widget types. Certain widgets may have extra functionalities that are described in detail on the specific widget pages.
Widget settings are shared across all elements within a widget. For example, if you change the text style in a widget, it will make this adjustment to all textboxes inside, including header and body text. You can edit individual text styles element-by-element.
Type
Select the type of widget you want in this box. You can see what kind of widget is currently selected in the textbox. If you wish to choose a different widget type, simply select “Choose” and make your selection from the available options in the pop-up window.
Style
Text Color - Change the text color of all text within the widget based on your preset colors. You can change these colors at any time by going to Design → Colors within your main sidebar menu.
Widget Background - Change the background color of the widget. This will alter the background color across all elements. You can change these colors at any time by going to Design → Colors within your main sidebar menu.
Widget Border - Add or remove a border around your widget using the checkboxes to specify a top, bottom, left, or right border. Choose the color using the color dropdown. You can change these colors at any time by going to Design → Colors within your main sidebar menu. Adjust the border size by increasing or decreasing the amount of pixels. The default interval is 10 pixels.
Widget Container Class - Advanced users can specify the CSS class they wish to use on their widget.
Spacing
Control the spacing around your entire widget by adjusting the padding or margin. Use these two options to create space between your widget and the surrounding elements.
Padding refers to the space between the elements within the widget and the total container size. If you have a dark background behind your widget, this will increase the size of that dark background.
Margin refers to the space outside the container size. If you have a dark background behind your widget, this will not increase the size of the background, but it will increase the white space between the widget’s container and the next widget on the page.
You can edit both the padding and margins individually for mobile, tablet, and desktop views. Adjust the top, bottom, left, and right side by incrementing numerically. The default interval is 10 pixels.
Textbox Style
Control the style of all textboxes within the widget by applying textbox styles.
Textbox Background - Apply a colored background to all text boxes by entering a 6-digit alphanumeric hex code or by using the color picker.
Textbox Border - Add or remove a border around your textbox using the checkboxes to specify a top, bottom, left, or right border. Choose the color using the color dropdown. You can change these colors at any time by going to Design → Colors within your main sidebar menu. Adjust the border size by increasing or decreasing the amount of pixels. The default interval is 10 pixels.
Text Box Classes - Advanced users can specify the CSS class or they wish to use on their textboxes.
Textbox Spacing
Control the spacing around every textbox in your widget by adjusting the padding or margin. Use these two options to create space between your textboxes and the surrounding elements within this specific widget. (See Spacing, above, for a detailed description of the difference between padding and margins.)
You can edit both the padding and margins individually for mobile, tablet, and desktop views. Adjust the top, bottom, left, and right side by incrementing numerically. The default interval is 10 pixels.
Textbox Alignment
Text Align - Set the text within each textbox to right-align, center-align, or left-align.
Vertical Align - Set the textbox container to align top, middle, or bottom.
Horizontal Align - Set the textbox container to align left, center, or right.
Textbox Size - Set the textbox size as a percentage of the total column size from 20% to 100% for both height and width. Specify the desired textbox size for mobile, tablet, and desktop views.
Textbox Elements
Use the Textbox Elements to add additional buttons to your widget.
Advanced
Advanced users can use this box to specify custom CSS or Javascript files that will apply on a widget-level.