How To Use Layers When Using The Site Editor

When creating or editing your PitStop Website for Shop Success Pro you will use layers to structure the content and layout of your site.

Rows
Columns
Background Image Slider
Inner Rows

The Layers option in the side panel of the website editor offers a structured, top-down view of your website page's components, allowing you to easily navigate and manage complex structures. Here, you can quickly identify the arrangement of widgets, columns, and sections, simplifying the process of locating and adjusting specific elements.

A website is built from a header, footer, rows, sections, and columns. Every content item or widget you add is inserted into one of these.

Rows

Rows are the horizontal sections of your site. When you add widgets and columns to your site, they are placed within these rows.

You can add rows to your site by dragging and dropping widgets into the site. When you drag a widget between rows or into a space where you want to add a row, a new row will be created.
To delete a row, right-click anywhere on the row to open the context menu, and then click Delete. Alternatively, click the Row button at the top left corner of the row and click Delete.

To configure rows:
Hover over the top left of a row until a row button appears, and click Row. The Row editor menu appears. You can use the row editor to change the row's background (color or image), add a border, or adjust the inner and outer spacing of the row.
Click the Move row up and Move row down arrows to move the current row up or down.

To open the Row design editor, click Edit Design.
To add a row or column click +Add and select one of the following:
- Row above. Add a new row above the current row.
- Row below. Add a new row below the current row.
- Section. Add a section to the row.
- Column. Add a column to the row.
- Inner row. Add a row within the current row.
To clear the inner spacing inside the row, click Clear Padding.
To revert the spacing to what you defined in theme spacing, click Reset To default spacing.
To add an entrance animation to the row (for example, fade from right, bounce in, zoom in), click Entrance Animation, and select an option.
To save the row as a section, click Save as Section and select to save only the current row, multiple rows, or the full page.
To hide the current row on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.
To copy the row, click Copy.
To anchor the row to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.
To delete the row, click Delete.

To edit the background style or spacing of the row:
Hover over the top left of a row until a row button appears, click Row, and then click Edit Design.
On the Settings tab, you have the following options:

Full bleed row. To change the row into a full bleed row, which allows content to span the entire width of the screen, click the Full bleed row toggle. If you choose not to have full bleed rows, the content width is limited to 960px.

On the Style tab, you can select to use a Background Color, Image, or Video. You have the following options:
- Color
  - Select a Background color. Gradient color overrides image, and vice versa.
  - Click Border to select a border type, and move the slider to set the border width.
  - To add a shadow, click the Shadow toggle, and select a color, type, and position for the shadow.
- Image
  - To add an image to the background, click + to open the image picker.
  - To create a background image slider, select multiple images from the image picker.
  - Select to have the image display as a Cover, Full image, Tile, or No repeat.
  - Configure the Position, Background overlay, Border, and Shadow for the image.

Columns

Every row contains at least one column. Columns contain all the widgets in your site and control their arrangement. Whenever you add a new column, it appears alongside the existing column in that row.

While desktop and tablet views allow each row to hold up to four columns, mobile websites can only show at most two columns in a row. Columns added in desktop or tablet views will assume the full width of the page when switched to mobile view; to create a row with two columns in the mobile view, first switch to mobile view, then add a two-column widget.

To delete a column, right-click anywhere on the column to open the context menu, and then click Delete. Alternatively, click the red X at the top right corner of the column.

You can place widgets directly into columns, or structure the column further by adding inner rows.

Column Editor

Use the Column editor to change a column's background (color or image), add a border, or adjust the inner and outer spacing of the column. Use columns to organize and arrange the content in a row.

To configure a column:

Right click on the column. The column editor menu appears.
- Note - If there is no padding on the column, the right click will not be directly accessible. To access the column in this case, right click on a widget that is in the column (this should bring up the context menu for the widget and will note the name of it at the top), click Select Container, select Column. It should now say Column at the top.
Click the Move column left and Move column right arrows to move the current column left or right (not available if there is only one column).
To open the Column design editor, click Edit Design.
Click +Add and select one of the following:
- Column. Add a new column to the current row (a max of 4 columns can be added per row on desktop and 2 on mobile).
- Inner row. Add a row within the current column.
- Widget below. Add a widget.
To clear the inner spacing inside the column, click Clear Padding.
To revert the spacing to what you defined in theme spacing, click Reset To default spacing.
To add an entrance animation to the column (for example, fade from right, bounce in, zoom in), click Entrance Animation, and select an option.
To hide the current column on a specific device (desktop, tablet, mobile), click Hide On Device, and select the device.
To copy the column, click Copy.
To anchor the column to the page or delete an existing anchor, click Set As Anchor or Edit Anchor.
To delete the column, click Delete.

Column Design Editor

To edit the background style or spacing of a column:

Right click on the column, then click Edit Design.
- Note - If there is no padding on the column, the right click will not be directly accessible. To access the column in this case, right click on a widget that is in the column (this should bring up the context menu for the widget and will note the name of it at the top), click Select Container, select Column. It should now say Column at the top.
On the Style tab, select to use a Background Color or Image. You have the following options:
- Color
  - Select a Background color. Gradient color overrides image, and vice versa.
  - Click Border to select a border type, and move the slider to set the border width.
  - To add a shadow, click the Shadow toggle, and select a color, type, and position for the shadow.
- Image
  - To add an image to the background, click + to open the image picker.
  - To create a background image slider, select multiple images from the image picker.
  - Select to have the image display as a Cover, Full image, Tile, or No repeat.
  - Configure the Position, Background overlay, Border, and Shadow for the image.

Background Image Slider

Background Image Sliders can be used to set background images for rows or columns.

After selecting multiple images in the image picker, click Done. Once the slider is created, select a Slide transition from the drop-down menu, and move the slider to select a Slide speed (seconds).

Any of the other background image options such as Background Overlay, Positioning, and display style can be applied to the slider.

Inner Rows

Inner rows allow extra design flexibility by enabling you to add rows inside columns. With the help of inner rows, you can vary the column layout and keep the general design of the row (for example, background, spacing, bleed).

Just like regular rows, inner rows can have their own background and spacing, be split into up to four columns, and have their column order changed on mobile. Columns in inner rows can be populated by any widget, but inner rows cannot be added to such columns.

To add an inner row to a column, do one of the following:

Right-click the row, and click Add Inner Row. If there are multiple columns in the row, choose which column you want to add the inner rows.
Right-click the column, and click Add Inner Row.
Right-click the inner row, and click Add Row to place an inner row below the current one.