Building the Visions template

This tutorial walks you through taking the Visions template — one of the most popular Foundation-based starter templates in Site Designer — and turning it into a finished, personalized website. By the end you’ll have a live, multi-page site ready to publish.

What you’ll build: A five-page business website with a hero, feature section, testimonials, contact form, and footer — all responsive.

Time to complete: ~45 minutes.

Prerequisites: Site Designer installed, a CoffeeCup account, basic familiarity with the canvas.

Step 1: Create the project

1. Open Site Designer and create a new project

   Go to File → New Project. In the framework picker, select Foundation. Name your project “Visions Site.”

2. Apply the Visions template

   Click the Templates icon in the toolbar. Search for “Visions” or scroll to find it. Click Apply to current page.

3. Preview the starting state

   Press ⌘P (or Ctrl+P on Windows) to open a quick browser preview. Familiarize yourself with the layout — hero, three-column features, testimonial, CTA, footer.

Step 2: Update the hero section

The hero is the first thing visitors see. Replace the placeholder content with your own.

1. Edit the headline

   Double-click the hero <h1> text on the canvas. Select all and type your headline. Keep it under 10 words for maximum impact.

2. Update the subheadline

   Double-click the paragraph below the <h1>. Replace with a one-sentence description of what your site offers.

3. Replace the hero background image

   Click the hero section to select it. In Design → Style → Background, click the image thumbnail. Choose Upload new image and select your hero photo. Set background-size to cover and background-position to center center.

4. Update the CTA buttons

   Select the primary button. In the Content pane, update the text and href to your target page or action.

Step 3: Customize the features section

1. Replace feature icons

   Each feature card uses a Foundation Icon Font icon. Select the icon element, go to Content pane, and change the class to a different Foundation icon class (e.g., fi-star, fi-heart, fi-settings).

2. Update feature copy

   Double-click each feature heading and body text. Write two-sentence descriptions of your core value propositions.

3. Adjust the column count

   The template defaults to three columns. To change to two, select the grid row container, open Design → Style, and change the grid-template-columns to repeat(2, 1fr). The third card will wrap or you can delete it from the Outline pane.

Step 4: Update the testimonials section

1. Edit testimonial text

   Double-click each blockquote and replace with a real quote. Keep quotes under 40 words for best readability.

2. Update author names and photos

   Select the author photo <img> element. In the Content pane, update the src to a photo from Resources, and update alt to the person’s name. Update the name text below.

Step 5: Add your pages

1. Open Page Manager

   Click the Pages icon in the toolbar. You should see the single default page (index.html).

2. Add an About page

   Click + to add a new page. Name it “About.” Apply the Visions — Interior template (or a blank page and copy the header/footer from index).

3. Link the navigation

   Select the nav item for “About” and update its href in the Content pane to /about.html.

Step 6: Publish

1. Open Settings → Publish

   Go to Settings → Publish → S-Drive. Enter your CoffeeCup credentials if not already saved.

2. Click Publish Now

   Click Publish Now. Site Designer uploads all pages and assets. A success dialog shows your live URL.

3. Test the live site

   Open the URL in your browser. Check all pages, links, images, and the contact form. Test on mobile by resizing the browser window.