Using Widgets in the Shop Success PitStop Website Editor

 Add Widgets from the Widget Library

• Insert here. The widget will be added to an existing row or column.

• Insert in new row. A new row will be added and the widget will be placed inside of it.

• Insert in new column. A new column will be added and the widget will be placed inside of it.

 Add Widgets from the Canvas

1. Right-click any widget and select Add widget below in the context menu to add widgets immediately below the current widget (Classic editor only).

   1. In Flex mode or Editor 2.0, click the plus (+) icon in the floating menu.

   2. If you are right-clicking on a column, click Add, and select Add widget below

2. Select from the four most popular widgets or click More widgets to open the full menu. After adding the widget, you can edit it as usual.

   1. Click the plus + icon in the floating menu.

   2. If you are right clicking a column, click Add and select Add widget below.

 Edit Design

To access the design editor, right-click the element, and click Edit Design. Or if you are in flex mode or Editor 2.0, select Edit Design from the floating menu to open the design panel. Click the element to open the floating menu, then click the option to edit design.

•  Text Styles - For widgets with text, you can edit the text styles. Any changes you make for a specific widget will override the Theme Text style.
• Layout - Layout options are usually specific to certain widgets. To select from the set of layout options available for that widget, click the layout that appears in the Design Editor (or click the small arrow beside it) to open the Select Layout menu. To change the selected layout, click the layout you want to use instead and it will be updated in the widget.
• Style:
  • Color. Click the round color icon to the right of the setting name to open the color picker and change the color.
  • Border. Change the width of the border using the slider or text box. Click the gear icon (Gray gear shaped icon) for more options.
  • Background. Use a background image or color for this widget using the Choose and Place Images dialog or a video URL.
  • Width and Height. Use the slider or text box to change the number of pixels.
  • Rounded Corners. Increase or decrease the rounded the corners on a widget. Click the gear icon (Gray gear shaped icon) for more options.
  • Shadows. Toggle on or off a shadow for this widget.
  • Text. Set various aspects of the text, such as font family, font weight, etc.
• Buttons - Widgets that incorporate a button will offer the ability to select whether the button inherits the primary or secondary button style defined in the theme panel. In addition, you can choose between the different button layouts, make edits to the button style (width, height) and button text (font, text size), and adjust the inner and outer spacing.
  Any changes you make within the design editor will override styles set at the theme button level. If you need to revert back to the theme button style, click Reset to theme style.
• Spacing - Change the inner spacing (spacing inside the widget edges) and outer spacing (spacing outside the widget edges). Each number in the outer box sets the outer spacing for its own side (top, bottom, left, or right), and each number in the inner box sets the inner spacing for its own side (top, bottom, left, or right).
• Animation - Entrance animations let you animate widgets and page widgets when they are first loaded on your site. Motion and interactivity makes your site more memorable and can emphasize the sections you want visitors to focus on, like a phone number or a contact button.
  Additionally, you can control where the animation starts and ends on the screen by using the Scroll settings.
  • To add an animation: 
    • To access the content editor, right click the widget and select Edit Content. Click the element to open the floating menu, then click the option for the content editor.
    • Navigate to the Animation section.
    • Select a Trigger and Animation.
    • (Optional) Customize the animation. For example, the direction it enters from.
• Alignment - Set whether the widget is aligned to the left, right, or center of its area.
  Some widgets behave very differently in different views. Check the way your widget displays in each view after adding it to make sure it displays correctly.
  To set the alignment, right-click the widget, and click an Align Left, Align Center, or Align Right icon. 
• Select Container - Selects the container the widget is in, allowing you to easily find and edit it. 
• Copy and Paste - A widget can be copied and pasted to another location. The paste option only appears if you have a widget that has been copied. Right-click the widget, and click Copy or Paste. 
• Hide On Device - Use the hide on device feature to change your content depending on the device your visitor uses to access your website. For example, show a click-to-call widget for mobile users or a contact form for desktop users. Right click the widget, click Hide on Device, select a device. If an eye icon is present in the side panel, this indicates there are hidden elements on the device you are currently editing. To view the hidden elements, click the eye icon. 
• Edit Widget HTML/CSS - Allows you to make changes to the widget's HTML or CSS. We only recommend this option if you are comfortable with these languages. Right-click the widget, and then click Edit HTML/CSS.
• Set Widget As Anchor - Anchor links let you send visitors to a specific section of the page, making it easier for them to get from place to place on a longer page or to a specific section that you want to reference.  Right-click the widget, and click Set As Anchor. 
• Delete Widget - To delete a widget, removing it from all views and devices, right-click the widget, and click Delete.