The Sites application allows all users to quickly access the drag-and-drop editor included with your website activation.
This document will show you how to access the editor, detail a few key details to note, and provide a link to the help center designed specifically for our website editor.
How to Access the Website Editor
To access the website editor, follow these instructions:
Log in to your account. Then, access the Sites application using the app drawer in the top right corner of the screen.
Within the My Website tab, locate the Edit button in the top-right corner of the page. Click on this button.
A new tab will appear displaying your website within the website editor. You are now free to make changes as necessary. Note - any changes you make will not be live on your website until you click Republish.
Things to Note About the Editor
In this section, we will run through the basics of using the editor, before linking you to our comprehensive help center designed specifically for using these tools.
Navigating the Main Menu
The main editor menu exists as a column on the left side of the page. It features the following tabs with their own submenus:
DESIGN - This houses options for editing global design features. Global design features are features that are reflected throughout the entire website simultaneously.
PAGES - This is where you can create, name, and organize the pages you want on your website. You can also create popups, edit SEO metadata, and restrict access.
WIDGETS - These are the simple applications you can use to create specific sections or features throughout your website. It contains everything from a basic text box or column to Google Maps displays and social media icon links.
CONTENT - This is your content library. The information you provided from your business contact when building the website exists here. The editor pulls information from the content library to instantly customize the website accordingly.
PERSONALIZE - This allows you to build your own custom rules for the various design features and widgets available within the website editor.
BLOG - This allows you to add, manage, and publish blog posts independently from the rest of the site. You can also edit the layout and import posts from an RSS feed.
SETTINGS - This primarily features setup tools for backend settings such as favicons, custom domains, SSL certificates, and much more.
Using the Top Menu
While the top menu doesn’t house as many key features, you will still need to make use of it during your time within the editor. We will move from left to right and explain what each button does below.
Page Selection
Clicking this dropdown provides an alternate way to navigate your main website pages. Be aware that you can also navigate the website by using the menu on-page within the editor.
Device View
Right next to the navigation menu exists three icons representing a desktop PC, a tablet, and a mobile device. Clicking any of these icons will automatically update your page view in the editor to match the browsing experience with that device.
Search the Editor
The magnifying glass located on the right side of the screen allows you to quickly search the editor for tips and help articles. If there’s anything you’re unsure of, you can quickly find assistance by typing in relevant keywords within the search field.
Info & Tools
This menu is indicated by the “i” surrounded by a circle on the right side of the menu. This contains general information about the site where you can change the editor language, preview stats (once it’s live), and grab a preview link to share with your team or clients.
Save Confirmation
Further right you will see a checkmark either in white or in grey. This checkmark serves to indicate whether or not the editor has saved your changes. This will change depending on its status:
White checkmark - All changes are saved.
“ … “ - The ellipses indicate that your recent edits are in the process of being saved.
Grey checkmark - Indicates that you have made edits, but the editor has yet to save them.
Undo and Redo Edits
The arrow icons looping left or right allow you to undo or redo edits respectively. If at any time you are unsatisfied with a change, be sure to click undo edit as soon as possible.
Be aware that if you make any edits and leave the editor, the undo option will not work. You will need to manually change the site back to its previous state.
Developer Mode
This is indicated by </> in the top menu. This opens the text editor for editing HTML and CSS.
Preview
You can quickly transition from editing mode to preview mode using this button.
Editor Help Center
The question mark icon opens a new tab, which takes you to the help center mentioned earlier. This will cover every question you could possibly have in regard to editing your website.
You can quickly access the help center by following this link.
Dashboard (Home)
Finally, this button will take you to a general site overview, which contains general information, visitor statistics, form responses, and more. This section will not be relevant until you purchase and begin using the website.
Conclusion
This is the general information you need to access the editor and familiarize yourself with the tools inside. Be sure to visit the website editor help center to learn how to perform any specific actions within the editor.
Remember, you can undo any changes by utilizing the top menu. Feel free to experiment as the editor is intuitive and will become easier to use as you become more familiar with the tools. Happy editing!