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.
-
Before you start designing your website, make sure you have a clearly defined brand identity. This includes your logo, colors, fonts and communication tone. These elements will help convey your brand image consistently across your site.
-
Conduct in-depth research on websites similar to or in the same field as your own. Analyze their design, functionality and content to get inspiration and ensure you stay competitive. Make a note of what you like and what you'd like to avoid on your own site.
-
Prepare the content you want to display on your website. Write catchy, informative and SEO-optimized text. Also make sure you have high-quality images that match your brand and content. You can use professional photographs, illustrations or relevant graphics.
-
Think about how you want to organize your website. Create a logical navigation structure that makes it easy for your visitors to find the information they're looking for. Consider creating categories, drop-down menus or sub-pages for better organization.
-
Start thinking about the specific features you want to include on your website. This could be a contact form, a search system, an online store, a blog section, image galleries and so on. Identify the main functionalities required to meet the needs of your business or project. Think about call-to-action buttons to enhance the user experience.
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.
-
Include illustrations and icons to illustrate what you're saying, photos of your services and achievements, photos of you or your team, photos of your products, and so on.
-
Tagline 1 or 2 sentences maximum
-
Concise description for your home page.
-
Longer description that can include your history, team presentation, values...
-
List your offers, describe your products, give details of how you operate.
-
Define how you want to be contacted: online form, email address, telephone, online quote request form, etc.
-
What is the main action a customer can perform on your site? Contact you, request a quote, book an appointment online, sign up for our newsletter, make a purchase? Place your call-to-actions intelligently to maximize conversion.
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.
-
Buy a domain name
-
Create a logo
-
Choosing your typefaces
-
Defining your color palette
-
Find icons
-
Free image bank
-
Reduce the size of your images
-
Writing texts
-
Create an intelligent form
-
Add an online chat
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 🖍️
-
Squarespace has provided font packs that work well together. You can choose one of these or create your own font combination.
Choose a typeface for your headings and a typeface for your paragraphs. You can also define their sizes, letter spacing, line spacing and type weight independently for your headings and paragraphs.
You can set 4 title sizes and 3 paragraph sizes, which you can then use on your site by selecting the typeface of your choice when integrating your content.
It's also possible to assign the desired typefaces to different elements of your site (navigation, newsletter block, portfolio, etc.).
-
Apply your colors to your palette and create your "themes".
3 neutral colors + 2 bright colors is a good ratio. The bright colors will bring a touch of dynamism and catch the eye. Ideal for buttons and links, for example.
Our recommendation:
White
Neutral (light) color
Bright color
Bright color
Black (or dark) -
It's from this palette that you'll create the different "themes" that will make up your site, i.e. different ways of using your colors on your pages.
When creating your themes, identify at least 1 theme with a white background, 1 theme with a light-colored background and 1 theme with a dark-colored background, so that you can create pages with alternating backgrounds.
You don't have to use every theme available. 3 themes can be enough to build your site.
With a dark background, choose a light typeface. With a light background, choose a dark typeface for greater legibility.
Choose a single color for your buttons and links so that they can be easily identified by your customers.
-
Choose the animation that suits you and that will be applied across your entire site. There aren't really any rules for choosing an animation. It depends on your tastes and your brand's universe (luxury, startup, corporate, etc.).
Tip: Set the animation to "Fast" to make sure that someone scrolling quickly through your site will see all the content appear. Always prioritize readability over gimmicks.
-
You can set up to 3 button styles. In reality, a single button style is sufficient for your entire site.
-
Your content will be displayed differently depending on the screen size of your visitors. To prevent your text and images from stretching too far on a large screen, we'll set a maximum width for your content. We recommend between 1400px and 1800px.
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
Rendez-vous dans la rubrique 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).
-
Insert your logo here.
In general, your logo should be in .png format on a transparent background.If you don't have one, the site title will be displayed in the header.
You can add a mobile logo if you want to display a different logo on mobile.
-
Choose the elements that will be added to your navigation.
- Contact or appointment button
- Social network icons
- Multilingual site option
- Shopping cart (eshop) -
There are many options for defining the style of your header. This choice should be made according to the content of your pages, to ensure optimum readability for your navigation.
-
Different models are available, so you can choose the one that suits you best.
If your logo is a typeface, you can place it in the center; if it's a square or vertical design, it's better to place it on the left of the screen.
The buttons, network icons, are naturally on the right.
-
Choose the location of the elements and the background color of your mobile menu. On mobile, it's customary to have the shopping cart on the right and the burger menu on the left.
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.
