How to Edit Your Website's Homepage

Contents:

1. Getting Started with the Website Editor
2. Editing Content
3. Editing Style
4. What You Cannot Edit

Getting Started with the Website Editor

1. Log in to your SpotHopper account and select the "Website" tab from the left-hand menu.
   
   

2. On the Website page, click the "Edit Website" button at the top of the screen.
   
   

3. This will open your homepage in the Inline Website Editor, where you can make updates directly on the page.
   
   
   
   
4. At the bottom of the editor, choose whether you want to edit Content or Style — the active option will appear in orange.
   
   
   
   
5. If editing content, click the pencil icon next to the section you’d like to update. 
   
   
6. If editing style, click the pink "Style Section" button in the top-right corner of the section you want to update.
   
   

---

Editing Content - What You Can Edit

To start editing the content, make sure that you are under the "Edit Content" mode:

Then, find what you need to edit, and hit the appropriate pencil icon to start editing. 

With the Inline Website Editor, you have four options to edit the content on your homepage:

1. Change Text:

2. Change Button/CTA Links and Text:

3. Change Images:

Clicking the pencil icon will open your SpotHopper gallery so you can either choose an existing image or upload a new one.

4. Hide/Show and Rearrange Homepage Sections

In the upper right corner of each homepage section, you will see the following options:

• Hide Section – Removes the section from your live homepage.

• Move Up – Moves the section higher on the page.

• Move Down – Moves the section lower on the page.

When a section is hidden, it is removed from the website view but remains saved within the editor. A "Show Section" button will appear on the left side of the page in place of the hidden section. Clicking this button brings the hidden section back.

Once happy with the changes, make sure to save them so they become active. You can do so by clicking the orange "Save Changes" button in the lower right corner of the screen.

---

Editing Style

The Edit Style mode allows you to control the visual presentation of each section on your homepage.

To start, make sure you click the "Edit Style" tab from the banner at the bottom of the screen.

Then, find the section you wish to edit, and click the pink "Style Section" button.

A pop-up with the editing options will appear:

You can not only update the background image of the section, but you can change the color of the text and background, as well as apply other filters to the background image:

Grayscale - Turns the color image into a greyscale image. The pixels become different shades of grey.

Sepia - Adds a warm, brownish, and vintage-looking tone to the image.

Opacity - Adds transparancy to the image

Blur - Applies blurring effect to the image

Why is this important? Well, let's say you change the background image to a section, and now it looks like this:

In this example, the text is clearly difficult to read because the background image is too prominent. The image should be softened so the email field stands out more clearly.

You can adjust the filters by lowering the opacity and adding some blur or subtle grayscale tones to improve contrast and readability.

 

And your image now looks like this:

If you're satisfied with the changes, just hit the "Save Changes" from the lower right corner of the screen. If not, don't worry! You can always reset the changes and start from scratch.

---

What Cannot Be Edited

The Inline Website Editor will help you customize your homepage. However, it will not work for those parts that can be updated directly through your platform.

For instance, in the contact section at the bottom of the homepage, you can only update the title text as seen below:

Information like hours, address, phone number, social icons, etc. should be updated from their respective page on the platform.