How to Create a Gym Website in Less Than 30 Minutes (Squarespace Kilpsan template)
About this Squarespace video tutorial
Today, we'll be breaking down the Klipsan template on Squarespace, how to edit it, style it, and get everything ready to go live! I'll go over how to take the basic template and edit the photos, text, and other elements to turn your website into something that will really work for your and your business.
Timestamps
0:00 - Introduction/navigating the template
3:28 - Styling your site
5:14 - Editing your header
7:55 - Editing background images/choosing stock pictures
10:53 - Changing the divider between sections
11:40 - Editing your page
14:13 - Editing forms
15:15 - Finishing your page edit
18:03 - Site footer
19:24 - Mobile view
21:41 - Site maintenance/unlinking pages
22:51 - Going live
Want 20% off your new Squarespace subscription?
Subscribe to the Designing the Row® email list and get the exclusive code sent straight to your inbox. You’ll get email updates when new Squarespace tutorials are published, but you can unsubscribe at any time.
To begin, head over to Squarespace Templates and locate the Klipsan template under the Local Business category. This template is designed for gyms, but it can be customized for any business. For this walkthrough, I’ll be using Katherine’s Gym as an example.
If you’d like to browse other template tutorial videos I’ve created, you can check those out on the blog here.
Once you’ve selected the template, click Continue to start customizing. Before diving into design elements, the first step is adjusting your Site Styles to match your brand.
Customizing Fonts and Colors
Click the paintbrush icon in the top right to open Site Styles.
Adjust your fonts: If you already have brand fonts, type the name in the search bar to see if it’s supported.
Customize your colors: I recommend placing your brightest accent color in the middle swatch for easy access.
Save your changes and exit.
Editing the Header
The site header contains your business name or logo and navigation menu. To edit:
Hover over the header and click Edit Site Header.
Upload your logo if you have one.
Adjust the header layout to match your preference.
Modify social media links by replacing the default Squarespace accounts with your own.
If you want a call-to-action button, enable it in the header settings.
Updating Images and Backgrounds
Klipsan is highly image-focused, so strong visuals are essential. If you don’t have custom photos, you can use Squarespace’s stock image library.
Click on an image, then select Edit Section > Background.
Upload your own image or browse stock images.
Use the focal point tool to position the image correctly.
Adjust the overlay opacity if needed to ensure your text remains readable.
Customizing the Homepage
Once your branding is in place, start editing the homepage content:
Headline & Subtext: Click on text blocks and replace the placeholder text with your business messaging.
Image Sections: Update images following the steps above.
Dividers & Spacing: Adjust the section dividers to add visual interest.
Call-to-Action (CTA): Modify buttons and links to direct visitors to sign up, book an appointment, or learn more.
Editing Forms and Contact Sections
Many local business websites need a contact form for inquiries or scheduling visits.
Click on the form block and select Edit.
Adjust form fields (e.g., Name, Email, Message).
Under Storage, connect it to your email or a Google Sheet to keep track of submissions.
Customize the submit button text to align with your brand’s tone.
Footer Customization
The footer often contains essential business details, such as location, hours, and a newsletter signup.
Newsletter Signup: Ensure you explain the benefit of signing up (e.g., “Get exclusive discounts and updates”).
Business Information: Edit text blocks to include your address, phone number, and hours.
Social Media Links: Verify that all links are updated.
Mobile Optimization
Squarespace allows for separate mobile customizations, ensuring a responsive design. To optimize:
Switch to Mobile View.
Adjust text alignment and image placement.
Modify spacing to enhance readability on smaller screens.
Save changes and preview the site on your phone.
Final Steps & Going Live
Once you're happy with the design:
Connect a custom domain under Settings > Domains.
Choose a Squarespace plan (I recommend the Business Plan for most local businesses).
Review your site on both desktop and mobile.
Click Publish when you’re ready.
If you're looking for a 20% discount on your Squarespace subscription, click here and enter your email to receive the promo code.
Final Thoughts
Customizing a Squarespace template like Klipsan is straightforward with the right approach. By refining your branding, images, and layout, you can create a professional, high-converting website for your business.
For more in-depth tutorials, subscribe to my YouTube channel and drop your website link in the comments so others can get inspired by your design!
The latest Designing the Row tutorials…
