Create your own website with Squarespace - no coding required!

INTRODUCTION

At the Creative Team, we've been creating Squarespace websites since 2015, and we train all our customers on how to use their site. We specialize in creating bespoke sites for our customers and then making them fully autonomous in managing their online business.

Today, more than 170 customers are developing their online business with us.

We know from experience that with Squarespace, anyone can do it. So we've created this course to show you how.

CONTENTS

8/ SETTINGS AND SEO

9/ FURTHER INFORMATION

10/ GO ONLINE

11/ MARKET YOUR SITE

🔒 CREATE YOUR OWN ESHOP

🔒 DESIGN HIS ESHOP

🔒 SET E-COMMERCE PARAMETERS

1/ BEFORE YOU START

Clarify your identity, refine your desires and prepare your content in advance.

When you set out to create a website, it's essential to prepare a list of elements to ensure its success.
Here's a list of key elements to consider before you get started.

A few tips

to define your

visual identity

LOGO

A central element of your identity, your logo must express who you are, what you do and highlight the uniqueness that characterizes you. Don't forget to include a square pictogram for your favicon.

TYPOGRAPHY

Your typography must be consistent with your logo and your identity.
Choose 2 typefaces: one impactful for headlines, the other simple and legible for paragraphs. 

COLORS

Choose between 2 and 5 colors.
2 or 3 neutral colors + 1 or 2 bright colors. The bright ones will add a touch of dynamism and catch the eye. Ideal for buttons, for example.

A few tips

to create your content

Your navigation menu will be made up of several pages. So you'll need to think about the content that will make up all these pages before you start creating your website. 

Useful resources

We've put together a list of the most useful design tools (fonts, color palettes, image banks, icons...). Use them for inspiration or if you're short of content.

2/ CREATE YOUR ACCOUNT AND CHOOSE YOUR TEMPLATE

Choosing your starting point

Squarespace templates are basic models, starting points. They all have the same functionalities and serve only to inspire you. The idea is to make your template your own, and turn it into a site that reflects your image. Don't worry if the template you've chosen doesn't offer all the pages or features you need, because you can make it evolve and change 100%. You'll never be locked into your choice of template.

You can choose your template according to your business sector and the functionalities you wish to offer (e-commerce, Blog, Portfolio, etc.).

In fact, depending on your activity, you'll need certain pages rather than others. We've created the perfect template to help you design your site whatever your needs. To receive your free copy, please fill in the form below.

Discover our free template designed to help you get off to a good start, whatever your field of activity.

Thanks to this free template, you benefit from a 6-month trial period (instead of 14 days) and 20% off your Squarespace package.

2/ DISCOVER SQUARESPACE

Squarespace is the most powerful and easy-to-use tool. The best way to create the site of your dreams.

Once you've created your Squarespace account and chosen your template, you'll have access to your site's backoffice. This is where you'll be able to manage all your site's parameters, create your pages, integrate your design, and so on.

MAIN MENU

MODIFY YOUR SITE

CHANGE YOUR VIEW

NB: We use the English version of Squarespace, so our indications concerning the actions to perform on the Squarespace interface are in English. For example, the "EDIT" button may be called "MODIFIER" if you're using the French version of Squarespace.

4/ INTEGRATING YOUR IDENTITY

Apply your identity to your template in less than 5 minutes.

Once the template has been selected, your pages are created using pre-designed page templates and temporary content. You will now integrate your DNA into these prefabricated pages.

Why set up the design first, before integrating content?

Because it's very fast, it's automatically applied to the whole site and it lets you visualize the final rendering as you create your site. 

Click on DESIGN then SITE STYLE to open the style editor.

Click on DESIGN then SITE STYLE

🖍️

Click on DESIGN then SITE STYLE 🖍️

Other settings

Design-related

Items to be set

Design > Browser icon

Your icon must be square, preferably colored (neither black nor white) and with a transparent background to stand out in browsers.


Design > Page error 404

The 404 Error page This page is displayed when a user accesses an invalid URL on your site. Squarespace sets a default page, but it is possible to create a more customized one.

Non-mandatory elements

Design > The Checkout page

For e-commerce sites, customize the design of your payment page.


Design > Lock screen

Customize the page that visitors see when your site or individual pages are password-protected.


Design > Access denied screen

Only when you have customer accounts, this is what visitors see if they visit a members-only page while logged out. You can customize this option for each member area.

Design > Social sharing

This is the image that will be used to represent your site when you share your pages on social networks.

Design > custom css

This area allows you to inject custom CSS rules into your site.

5/ NAVIGATION, HEADER AND FOOTER

Go to PAGES

🖍️

Go to PAGES 🖍️

Choose your navigation pages

Design your navigation menu to be concise and clear. Having a fluid, instinctive user experience will make your site and your call-to-actions more effective. This is what will make all the difference in converting your visitors into customers.

Go to the "Pages" section, where you'll find all your site's pages. This is where you can organize them and modify their content. Your template contains the most essential pages.

We'll start by placing the pages you wish to display in your navigation menu in the main navigation.
To delete a page, hover over it and click on the trash icon that appears on the left.

The pages

Pages are sorted by type, each with its own specific features and functionalities.

We can recognize pages of a different nature by their icons.
For example, a shop page will always have a cadis icon, while a blog page will be represented by a pen.

MAIN NAVIGATION
The pages presented here are displayed in your site's navigation menu. You can rearrange the order of the pages by dragging and dropping them.

OUT OF NAVIGATION
The pages presented here are not directly accessible from your navigation menu.
The advantage of these pages is that you can access them by clicking on a button, "Learn more" for example, which will redirect you to an explanatory page without it being visible in the menu.
Also, the home page is very often out of navigation because the logo already redirects to this page.

A page doesn't appear in your template? Add a new page.

To add a page, simply click on the "+" sign next to "Main navigation" or "Not Linked", depending on whether you want a page in main navigation or not.

You can also move a page from one category to another by dragging and dropping it from "Main navigation" to "Not linked" and vice versa.

The different page types

CLASSIC PAGES
These are the most frequently used pages, as you can modify their content as you wish. (Home, Contact, Services, About, etc.) Add a blank page or click on "Page Layouts" to start from a template. Feel free to have a look at all the templates to get ideas!

COLLECTION PAGES
Blog, store, video bank... Each type of collection has its own layout and functionality, so choose the one that's right for you!

OTHER ELEMENTS
Creating a folder can be useful when you have a lot of pages in your navigation, as it allows you to group several pages together. For example, an "About us" folder could contain pages such as "History", "Values", "The team" etc.
Links redirect the user directly where you want them to go, to a location on your site or to an external site.

Set up your pages correctly

Once all your pages have been created, make sure they have the right title and URL. To do this, click on the cog to the right of the page name on the hover to access this window.

THE TITLE

Check and rename the page title and navigation title if necessary.

If a page title is long, you can change the navigation title to make it shorter.

For example, for this page:
Page title: Discover our history
Navigation title: About us

Be sure to save your changes by clicking on "save" in the top right-hand corner of the window before closing it.

URL SLUG

As soon as you create or duplicate a page, Squarespace automatically assigns it a URL SLUG. But beware, this SLUG is often not optimized! So always check that URL slugs are written correctly.

Please note: two pages cannot have the same SLUG.

Why set them right away?
When you add a link to a page, you have to enter its URL. If you modify the URL slug of this page afterwards, you run the risk of breaking existing links.

Click on EDIT then EDIT SITE HEADER

🖍️

Click on EDIT then EDIT SITE HEADER 🖍️

Modify site header

Your navigation is created! You will now choose its location and add the other elements of your header (button, customer account, shopping cart, social networks).

FOOTER

Scroll to the very bottom of a page to display the "EDIT FOOTER" button.

Squarespace has already created several types of footer. Choose yours according to the elements you wish to present.

Click on SAVE and EXIT when you're finished.

🖍️

Click on SAVE and EXIT when finished 🖍️

Integrate your content

You're there! Your design is integrated, your pages are created and your site has a header and footer. All that's left is to integrate your content into your pages.

How does it work?

  • PAGES

    Once your page has been created and set up as explained in the "Creating pages" section, you can click on "Edit" in the top left-hand corner to integrate your content and make any changes you wish.

    Normally, by this stage in the training process, the content that will make up all these pages (images, texts, videos) has already been thought through.

    You'll also need to integrate other functionalities: social networks, contact form, newsletter subscription, etc.

    Prepare your content beforehand, optimize your images and organize your content by page.

  • SECTIONS

    Your pages are divided into sections.
    You can add, delete, duplicate and move sections to organize your content.

    Squarespace offers you a choice of pre-designed sections categorized according to the content you wish to present.

    Most sections use blocks that you can rearrange, unless the section has an i icon, which means it's an auto-arranged section used for image galleries or list content.

  • BLOCKS

    You can add an empty section or a pre-designed section, i.e. one that is already made up of blocks. Integrate your content with existing blocks or add your own. Move blocks around the section individually on desktop and mobile to achieve the desired look and feel.
    You'll be able to create your site by dragging and dropping your blocks (text, images...). Simple to use and perfect for creative people.

Modify page content

Page > The page to be modified

Position your cursor on the section you wish to modify. Click on the "Edit" button at the top left of the screen.

Your screen displays in editor mode.

-> If you start from a pre-designed section

Position your mouse over the text you want to modify and all you have to do is edit it!

If it's an image, click on the little pencil and a window opens. It contains your current image. Delete it and add the new one.

This is the easiest way for a beginner to create a site.

-> If you start from an empty section

Click on Add block at top left, and the list of available blocks appears.
Choose the block and position it by dragging and dropping.

Page > The page to be modified > The section to be modified

Several parameters can be customized on your sections:

  • Margins

  • wallpaper (image, video or animation)

  • The theme color of your section

  • The shape of the bottom of the section (with "divider")

You can move the section above or below using the arrows just below the "edit section" button.

You can also duplicate a section by clicking on the icon representing two superimposed squares.

You can also bookmark a section by clicking on the heart icon next to it, so that you can find it in "saved section" when you want to create a new one.
This last feature is very practical, as it allows you to keep the "template" of a section you've created, while leaving you free to change the content.

The main blocks

Text block
Choose the typeface you wish to use (4 title sizes and 3 paragraph sizes have been pre-set in the Design section), change the color of your text, create links to other pages, etc.

Image block
Import your photo by clicking on the "+" button in the photo block. You can load it from your camera, your photo library or from an image bank.

Gallery block
Create galleries to display a maximum number of photos. Choose between different formats, such as mosaic or slider, and upload your photos. You can also name them and add a link.

Button Block
Create buttons to call the user to action, whether by redirecting them to a contact page, or to add an item to their shopping cart. You can save 3 button designs, as seen above.

Video block
You can upload your video from this block by clicking on the "+" button, up to a maximum of one minute per video if you upload it directly to your site. You can also add a Youtube or Vimeo link to display longer videos.

Newsletter block
Offer your audience the chance to subscribe to your newsletter and find out about your latest news. This block automatically adds subscribers to your newsletter.

Instagram block
Connect your instagram account and feed to your site with this block, so that the user gets an overview of your social networks and clicks to see more.

Form block
Use the forms to collect the information of your choice, which will then be e-mailed directly to the address of your choice.

Other
There are many blocks with different functionalities, so don't hesitate to discover them!

The most common mistakes not to make

  • Don't design your mobile page properly: always check your mobile version to avoid unpleasant surprises

  • Don't check URLs: a bad URL will redirect the user to an error page.

  • Lack of space: leave air between your content to improve readability

  • The home page is too long: you want to include everything, but the reader soon finds himself lost.