Skip to main content
Skip table of contents

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.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.