This document will detail everything you need to know about editing the new Winston sites! Everything has been designed for ease of use and efficiency.

The website uses a plugin called Elementor. This plugin is the backbone of all of the layout and styling. It is very simple to use and eliminates the need for any coding knowledge! So let’s get started.

Document Settings

With Document Settings, you control some basic and useful WordPress settings. 

Click on the gear icon  located at the bottom left of the panel.

---

---

---

Style & Settings Configuration Menu

A click on the top left hamburger icon in Elementor will open Elementor's Style & Settings Configuration menu. Here, you can set Elementor's Default Colors, Default Fonts, and the color palette for the Color Picker. You can also change various global settings and navigate to other areas of the site.

---

Navigator

In Elementor Version 2.2 added a useful design feature to help you clear your pages clutter.

Navigator is a navigation tree panel providing easy access to every element on the editor with just one click. Navigator enables the user to drag elements throughout the page and edit them, quickly and easily.

Navigator is particularly useful for long pages or pages with complex multi-layered design, and for elements combining Z-Index, minus margin, position absolute, etc. It allows you to access element handles that may be positioned behind other elements.

---

Access Navigator

You can access Navigator in one of 3 simple ways:

1. Right-click any element and then click on Navigator. This will automatically redirect you to the specific element in the navigation tree.
2. Click on the elements button  in the panel's footer.
3. Use the Cmd/Ctrl + I keyboard shortcut.

---

Choose an element to edit

Click once on any element to immediately scroll to its Edit panel.

---

Rearrange elements

Drag any element up or down and drop before or after any other element.

---

Right-click options

Right-click an element to enable all of its normal right-click menu options, such as Edit, Duplicate, Copy, Paste, etc.

---

Hide / Show elements

Click the element’s View button  to show or hide the element, enabling you to better focus on design.

Note: This will not affect the front end of your website.

---

Name elements

1. Double-click the element name. The area will change to a blue highlight, indicating you are in insert/edit mode.
2. Type a custom name to help you easily identify the element at a later time.

---

Collapse/Expand one element

Click an individual element’s arrow button to expand or collapse that element.

---

Collapse/Expand all elements

Click the up  or down  arrow button in the upper left of the Navigator panel to expand or collapse all of the elements at one time.

---

Position Navigator panel

Float

Drag the Navigator panel anywhere on the page

Dock

Pin the Navigator panel to the side of the screen by dropping it inside the vertical blue drop zone that appears when the panel is dragged near the right side of the screen.

Revision History, Undo and Redo

Elementor includes a built-in Revision History, as well as Undo and Redo. With these features, you get a log for every action and save made on the editor.

---

How to Delete a Widget

There are two easy ways to delete a widget from an Elementor column. In this example, we’ll first delete the widget from the Navigator. Then, we’ll use History to undo our deletion. Finally, we’ll delete the widget again from the Edit Widget handle.

---

Delete A Widget From The Navigator

1. Click the Navigator icon to open the Navigator.
2. Find and select the widget element you wish to delete.
3. Right-click the element and choose Delete from the drop-down selections.

Delete A Widget From The Widget’s Handle

1. Right-click the widget’s Edit Widget handle.
2. Choose Delete from the drop-down selections.

How to Move Sections in Elementor

It is very easy to move an Elementor section above or below another section, in either one of two ways.

Drag and Drop The Section Using the Navigator

The Navigator is a quick and easy way to move sections, and is often preferred, since you don’t have to drag the mouse far up or down a page. Access the Navigator in one of three ways:

1. Click on the Navigator button in the panel's footer, or use the Cmd/Ctrl + I keyboard shortcut.
2. Alternately, you can right-click any element and then click on Navigator. This will automatically redirect you to the specific element in the navigation tree.
3. Once the Navigator is open, left-click and hold the mouse button down on the section element you want to move, and drag it up or down, dropping it before or after any other element.

---

Drag and Drop The Section Via The Section Handle

1. Click and hold your left mouse button on the handle of the section you wish to move. 
2. While you continue to hold the mouse button down, drag the section to its new location.
3. When you see the blue line appear in the correct place, let go of the mouse button. This will place the section into the blue drop zone. The move is now complete.

Editing and adding elements to the website is simple. Elementor is designed for the end user, meaning there isn't any code you need to learn! Everything is set up in a drag and drop format with easy controls for where objects go, and what they look like.

Editing a Page

1. In the Wordpress Admin Menu; Select "Pages" from the side navigation
2. Find and select the page you would like to edit.
3. In the page's back-end, select "Edit with Elementor"

Adding a New Page

Adding a New Product

Adding a New Employee

Adding a Header Image

Changing Background Images

Templates and Where to Find Them