Customize a template and go live in minutes

Browse the template gallery

Go to themes.coffeecup.com and explore the available templates. You don't need an exact match for your business — you'll be replacing all the images and text. Focus on finding a template whose page structure and navigation match your needs.

For example, if you're building a single-person freelance site, avoid templates with pages for employees, teams, or multiple service locations.

Download your chosen template

On the template detail page, click "Download for Site Designer". The download produces a file ending in .rsdtheme — for example, Northgate.rsdtheme. This single file contains the entire template.

Open the template file

You have two ways to open the downloaded template:

Choose and load the template

The Template Chooser dialog opens. In the left panel, click Northgate to select it, then click the preview thumbnail. Finally, click Choose in the bottom-right corner to open the project.

Site Designer opens the Northgate project on the canvas, ready to edit.

Save the project before making changes

Before editing anything, save the project: File → Save (or ⌘S / Ctrl+S). Choose a meaningful location — for example, C:\business\clinic\mca-health.rsd.

This creates the .rsd project file. Everything you do from here is saved in this file.

Open the Resources Manager

All images, fonts, and other project assets live in the Resources Manager. Click Resources on the main toolbar to open it.

The Resources window opens. You'll see the project's existing asset folders: socialicons and images (the template's original stock photos).

Create a folder for your images

Keep your custom photos in a separate folder to easily tell them apart from the template's stock images. Click the "+" icon at the bottom-left of the Resources window (or the Add Folder button at the top) to create a new folder.

Upload your images to the folder

With your new folder selected, right-click the right-side panel and choose "Add Files" from the context menu.

A file browser opens. Navigate to where your images are stored, select all the images you want to upload, and click Open.

After uploading, your images appear as thumbnails in the right panel.

Replace the hero background image

The large header image is a CSS background image on a container element — not a standard <img> tag. Replacing it requires the Styles panel.

1. Select the hero container. Click the top-left area of the hero section on the canvas. The breadcrumb at the bottom should show Body:body ▶ Container:hero-index.

2. Open the Styles panel. In the right panel, click the paintbrush icon (Selectors & Styles). Then click the Design tab and scroll to the Background section. Click the pencil (edit) icon next to "Image: hero-index.jpeg".

3. Choose your new image. The Resources window opens with the current stock image highlighted. In the left panel, click your image folder (mca-images), select your new hero image, and click Select at the bottom-right.

The hero section updates immediately with your new image.

Replace section images

Below the hero, Northgate has three standard picture elements (General Practice, Physiotherapy, Mental Health). These use a different workflow — the Element Properties tab instead of the Styles panel.

1. Click a section image on the canvas to select it.
2. In the right panel, click the </> (Element Properties) tab.
3. Under Selected Element Properties, click the pencil icon next to the current image filename.

4. The Resources window opens. Navigate to your folder, select the replacement image, and click Select.

5. Repeat for each remaining section image (Physiotherapy, Mental Health).

Edit text content on the canvas

Text editing in Site Designer is direct — you click on the canvas, not in a panel. Double-click any text element to enter edit mode. If the element is nested, you may need to click two or three times to select the right level.

1. Double-click a text element. A cursor appears — you're in edit mode.
2. Select and replace the text. Use Ctrl+A / ⌘A to select all text in the element, then type your replacement.
3. Click outside to exit edit mode.

Work through each section: clinic name, tagline, body copy, button labels, footer. The template uses placeholders like [PRACTICE NAME] and [CITY] — search for brackets to find everything that needs updating.