How to edit your website using the website editor

You can edit your website home page and supporting pages (including your services, products, email templates etc) easily yourself using the BookingTimes website editor. This drag and drop editor allows you to quickly setup and edit pages, products, services, page SEO (refer to the Edit page SEO article) and more. It also allows you to change the look of your website quickly via the use of existing snippets.

You also have the ability to view the full HTML source code of the page, or view the HTML of each particular section should you prefer to edit that instead.

Opening the website editor

Steps

1. Navigate to Setup > Website Content > Edit Website

2. Navigate to the page you want to edit using the menu

3. Click Edit to enter Edit Mode
   
   

4. To access the HTML directly, please refer to the Accessing the page or section HTML section within this article.
   
   

Adding a new section

You can select a "Snippet" from the side menu and drag it onto the page to create a new section. You can edit the text and images in the snippet to suit your brand - the formatting is already done for you.

Steps

1. Browse the Snippet Categories to view available snippets 

2. Click the desired snippet

3. Drag the snippet onto the page where you would like it positioned

4. If the snippet is not positioned correctly, you can move it up or down by clicking on the section and clicking the yellow dot menu

5. Click Move Up or Move Down

Removing a section

Steps

1. Click on the section

2. Click the orange "X" icon to delete the section

Editing text

Steps

1. Click on the text you want to edit

2. Type or backspace to change the text

3. Use the toolbar to format the style of the text

4. Click Save Changes once you are done editing

Changing images and image sizing

Steps

1. Click on the image you want to change

2. Click the image icon

3. Click the image you want to insert, or click "Add Image" to upload a new image 

4. If you want to change the image size, click on the image, then on the 3 dots icon, then on Settings

5. Edit the Dimension text boxes as desired

   1. Tip:  Setting the width to 100% (not px) is a good way to get the image to take up the available space

6. Click Save Changes once you are done editing

Changing background images

Steps

1. Click on the section you would like to apply a background image to

2. Click the purple image icon 

3. Click the image you want to insert, or click "Add Image" to upload a new image 

4. Click Save Changes once you are done editing 

Creating a new page

You can also create a new staff member, service, product etc. by clicking an option via the website editor and selecting the entity you want to create. This will then take you to the appropriate page (that's usually accessible via the Setup menu) where you can create that entity.

Steps

1. Click New+

2. Select the entity you would like to create 

3. The relevant page based on your selection will open up. e.g. New Product page.

4. Enter all the relevant details. For this page to appear on your website ensure you enter details on the Publish tab and mark it to published.

5. Click Save

Accessing the page or section HTML

1. If you would like to access the full HTML source code for this page, please click on the Edit Html </> link in the top toolbar
   
   
   
   

2. You can also access the HTML of each section separately. Simply click on the section, click the yellow … icon, and select HTML
   
   
   

   
   

Editing other supporting pages

This editor is also available when you're publishing other information on your website via the admin Setup menus. For example, the editor can be accessed by clicking the diagonal red arrows icon on the following items: