--- title: "How to edit your website using the website editor" slug: "how-to-edit-my-website" updated: 2026-02-02T06:26:10Z published: 2026-02-02T06:26:10Z canonical: "support.bookingtimes.com/how-to-edit-my-website" --- > ## Documentation Index > Fetch the complete documentation index at: https://support.bookingtimes.com/llms.txt > Use this file to discover all available pages before exploring further. # 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](/v2/docs/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. There is also a [version history](/v2/docs/version-history-for-published-pages) available on all published pages, allowing you to roll-back to any previous versions if desired. ## **Opening the website editor** ### **Steps** 1. Navigate to **Setup** > **Website Content** > **Edit Website** ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28246%29.png) 1. Navigate to the page you want to edit using the menu ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28248%29.png) 1. Click **Edit** to enter Edit Mode ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28259%29.png) 2. To access the HTML directly, please refer to the [Accessing the page or section HTML](/v2/docs/how-to-edit-your-website-using-the-website-editor#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. Custom snippets You can also create your own custom snippets. Please see the [Creating a snippet](/v2/docs/creating-a-snippet) article for more details. ### **Steps** 1. Browse the Snippet Categories to view available snippets ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28261%29.png) 1. Click the desired snippet 2. Drag the snippet onto the page where you would like it positioned ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28263%29.png) 1. 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 ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28264%29.png) 1. 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 ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28265%29.png) --- ## **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 ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28620%29.png) 1. Click **Save Changes** once you are done editing ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28622%29.png) --- ## **Changing images and image sizing** ### **Steps** 1. Click on the image you want to change 2. Click the image icon ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28623%29.png) 1. Click the image you want to insert, or click "**Add Image**" to upload a new image ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-1695270019221.png) 1. If you want to change the image size, click on the image, then on the **3 dots icon**, then on **Settings** ![](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-1697418548600.png) 1. 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 ![](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-1697418785801.png) 1. Click **Save Changes** once you are done editing ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28621%29.png) --- ## **Changing background images** ### **Steps** 1. Click on the section you would like to apply a background image to 2. Click the purple image icon ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28256%29.png) 1. Click the image you want to insert, or click "**Add Image**" to upload a new image ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-1695270019221.png) 1. Click **Save Changes** once you are done editing ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28251%29.png) --- ## **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+** ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28257%29.png) 1. Select the entity you would like to create ![image.png](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image%28258%29.png) 1. The relevant page based on your selection will open up. e.g. New Product page. 2. 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. 3. Click **Save** ![](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-1695267469291.png) ## --- ## 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 ![](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-P11E2DGR.png) 2. You can also access the HTML of each section separately. Simply click on the section, click the yellow … icon, and select HTML ![](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-IAGA7EXB.png) --- ## 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: - Services > Publish tab - Products > Publish tab - Email and letter templates - Marketing sequences - Blogs and articles - Custom pages - Footer ![](https://cdn.document360.io/6926c75e-9b20-4216-bf9f-d7ca1df9c74f/Images/Documentation/image-08GPXY2L.png)