Using the Responsive Editor

The Responsive Editor is the tool ERS provides to edit your front end live website. IMPORTANT NOTE: if you're new to the system, the web development department is probably in the process of building your website, and you should let them finish their work before making any edits. Otherwise the process will take longer.

To open the Responsive Editor, Navigate to Admin>Website>Responsive Setup and click the pencil and page icon and the Responsive Editor will open in a new window.

Note: Ensure you are using Google Chrome to prevent any issues using the Responsive Editor.

Once clicked, the Responsive Editor will open. Notice the gear icon on the left side and the “Back to CP” at the top:

To edit sections, click on specific areas such as text boxes, pictures, background pictures, titles, etc. Try clicking in various areas to see what is editable. Clicking on the text in the above photo will open the text editor. Many of the sections will contain a "WYSIWYG" editor, meaning some controls that will allow you to change the font, color, formatting, etc., of the web section you're working on.

Note: most content boxes allow for custom HTML, such as font tags (to change size and style), links, and headers.

When hovering over a template, 3 icons will appear in the top right:

• The pencil icon shows additional template options available (as seen in the screenshot below)

• Pressing and holding the crosshairs icon allows you to move templates. When moving a template, wait for a blue bar to appear indicating the placement area.

• The trash can icon will remove the template.

The majority of templates have different arrangement options available. Some will change the position of text and buttons while others will let you change the number of sections. Click the pencil icon (as seen above) to see additional choices.

Hover over the gear icon on the left side to see a pop-out menu. The pop-out menu allows you to insert templates into the page, change templates, and save the page:

To insert templates, drag and drop the small template boxes onto your webpage. A blue bar will appear indicating the placement of the template.

Click the blue “change style” to see a list of available templates:

There is an extensive list of templates, each with different configurations within the pencil icon. Experiment with several to build your website to your needs. Click on a template to select it and replace the existing template in the box (as seen above).

Once you are finished making changes, hover over the gear icon on the left side to get the pop-out menu. Click the green “save” button to commit your changes. It is a good idea to save frequently if you are making several changes.