Créez votre site sans aucune notion de code avec Squarespace

INTRODUCTION

Chez l'équipe créative, nous créons des sites web Squarespace depuis 2015 et nous formons tous nos clients à l’utilisation de leur site. Notre spécialité c’est de créer des sites sur mesure pour nos clients puis de les rendre entièrement autonomes dans la gestion de leur business en ligne.

Aujourd’hui c’est plus de 170 clients qui développent leur activité en ligne avec nous.

On sait, grâce à notre expérience, qu'avec Squarespace tout le monde peut y arriver. On a donc créé cette formation pour vous montrer comment faire.

SOMMAIRE

8/ PARAMÈTRES ET SEO

9/ POUR ALLER PLUS LOIN

10/ METTRE EN LIGNE

11/ MARKETER SON SITE

🔒 CRÉER SON ESHOP

🔒 DESIGNER SON ESHOP

🔒 PARAMÈTRER LE E-COMMERCE

1/ AVANT DE COMMENCER

Dénifir son identité, affiner ses envies et préparer son contenus à l’avance.

Lorsque vous vous lancez dans la création d'un site web, il est essentiel de préparer une liste d'éléments pour garantir sa réussite.
Voici la liste des éléments clés à prévoir avant de démarrer.

  • Avant de commencer la conception du site web, assurez-vous d'avoir une identité de marque clairement définie. Cela comprend votre logo, vos couleurs, vos polices et votre ton de communication. Ces éléments aideront à transmettre votre image de marque de manière cohérente sur votre site.

  • Effectuez une recherche approfondie sur des sites web similaires ou dans le même domaine que le vôtre. Analysez leur conception, leur fonctionnalité et leur contenu pour vous inspirer et vous assurer de rester compétitif. Notez les aspects que vous aimez et ceux que vous souhaitez éviter sur votre propre site.

  • Préparez le contenu que vous souhaitez afficher sur votre site web. Rédigez des textes accrocheurs, informatifs et optimisés pour le référencement. Assurez-vous également d'avoir des images de haute qualité correspondant à votre marque et à votre contenu. Vous pouvez utiliser des photographies professionnelles, des illustrations ou des graphiques pertinents.

  • Réfléchissez à la manière dont vous souhaitez organiser votre site web. Créez une structure de navigation logique qui facilite la découverte de l'information pour vos visiteurs. Pensez à créer des catégories, des menus déroulants ou des sous-pages pour une meilleure organisation.

  • Commencez à réfléchir aux fonctionnalités spécifiques que vous souhaitez inclure sur votre site web. Il peut s'agir d'un formulaire de contact, d'un système de recherche, d'une boutique en ligne, d'une section blog, de galeries d'images, etc. Identifiez les principales fonctionnalités nécessaires pour répondre aux besoins de votre entreprise ou de votre projet. Pensez aux boutons d’appels à l'action pour améliorer l'expérience de l'utilisateur.

Quelques conseils

pour définir votre

identité visuelle

LOGO

Élément central de votre identité, votre logo doit exprimer qui vous êtes, ce que vous faites et mettre en valeur la singularité qui vous caractérise. Pensez à définir aussi un pictogramme format carré pour votre favicon.

TYPOGRAPHIE

Vos typographies doivent être cohérentes avec votre logo et avec votre identité. 
Choisissez 2 typographies : l’une impactante pour les titres et l'autre simple et lisible pour les paragraphes. 

COULEURS

Choisissez entre 2 et 5 couleurs.
2 ou 3 couleurs neutres + 1 ou 2 couleurs vives. Les vives vont venir apporter des touches de dynamisme et appeler le regard. Idéal pour les boutons par exemple.

Quelques conseils

pour créer vos contenus

Votre menu de navigation sera composé de plusieurs pages. Vous allez donc devoir penser aux contenus qui composeront toutes ces pages avant de vous lancer dans la création de votre site web. 

  • Prévoyez illustrations et icônes pour illustrer vos propos, photos de vos services, et de vos réalisations, photos de vous ou de votre équipe, photos de vos produits, etc.

  • Tagline 1 ou 2 phrases maximum

  • Description concise pour votre page d’accueil.

  • Description plus longue pouvant inclure votre histoire, présentation de votre équipe, vos valeurs…

  • Listez vos offres, décrivez vos produits, donnez des détails sur votre fonctionnement.

  • Cadrez la façon dont vous souhaitez être contacté : Formulaire en ligne, adresse email, téléphone, formulaire de demande de devis en ligne, etc. 

  • Quelle est l’action principale qu’un client peut effectuer sur votre site ? Vous contacter, demander un devis, prendre un rdv en ligne, s’inscrire à la newsletter, acheter ? Placez vos call to action intelligemment pour convertir au maximum.

Ressources utiles

Nous vous avons répertorié les outils les plus utiles en matière de création (polices, palettes de couleurs, banques images, icônes...). Servez-vous en comme source d'inspiration ou si vous manquez de contenus.

2/ CRÉER SON COMPTE ET CHOISIR SON TEMPLATE

Choisir son point de départ

Les templates Squarespace sont des modèles de base, des points de départ. Ils ont tous les mêmes fonctionnalités et servent juste à vous inspirer. L'idée est de vous approprier votre template pour en faire un site à votre image. Ne vous inquiétez pas si le template choisi ne propose pas toutes les pages ou toutes les fonctionnalités dont vous avez besoin car vous pourrez le faire évoluer et le modifier à 100%. Vous ne serez jamais bloqué par le choix de votre template.

Vous pouvez choisir votre template en fonction de votre secteur d’activité et des fonctionnalités que vous souhaitez proposer (e-commerce, Blog, Portfolio, etc.).

En effet, en fonction de votre activité vous aurez besoin de certaines pages plutôt que d’autres. Nous avons créé le template parfait pour vous aider à concevoir votre site quels que soient vos besoins. Pour le recevoir gratuitement remplissez le formulaire ci-dessous.

Découvrez notre template offert conçu pour vous aider à bien démarrer quel que soit votre domaine d’activité.

Grâce à ce template offert, vous bénéficiez d'une période d'essai de 6 mois (au lieu de 14 jours) et de -20% sur votre forfait Squarespace.

2/ DÉCOUVRIR SQUARESPACE

Squarespace c'est l'outil le plus puissant et le facile à utiliser. Le meilleur moyen de créer vous-même le site de vos rêves.

Une fois que vous avez créé votre compte Squarespace et choisis votre template, vous allez avoir accès au backoffice de votre site. C’est ici que vous allez pouvoir gérer tous les paramètres de votre site, créer vos pages, intégrer votre design, etc.

MENU PRINCIPAL

MODIFIER VOTRE SITE

CHANGER DE VUE

NB: Nous utilisons la version anglaise de Squarespace donc nos indications concernant les actions à effectuer sur l’interface Squarespace sont en anglais. Par exemple il se peut que chez vous le bouton “EDIT” s’appelle “MODIFIER” si vous utilisez la version Française de Squarespace.

4/ INTÉGRER SON IDENTITÉ

Appliquer son identité à son template en moins de 5 minutes.

Une fois le template sélectionné, vos pages sont créées grâce à des modèles de pages pré-conçues et des contenus temporaires. Vous allez maintenant intégrer votre ADN à ces pages préfabriquées.

Pourquoi paramétrer d'abord le design avant d’intégrer ses contenus ?

Parce que c’est très rapide, cela s’applique automatiquement à l’ensemble du site et cela permet de visualiser le rendu final en même temps que l'on crée son site. 

Cliquez sur DESIGN puis SITE STYLE (Style du site si vous êtes sur la version française de Squarespace) pour faire apparaître l’éditeur de style.

Cliquez sur DESIGN puis SITE STYLE

🖍️

Cliquez sur DESIGN puis SITE STYLE 🖍️

  • Squarespace a prévu des Packs de police qui fonctionnent bien ensemble. Vous pouvez choisir une de ces propositions ou créer votre propre combinaison de police.

    Choisissez une typographie pour vos titres et une typographie pour vos paragraphes. Définissez également leurs tailles, l'espacement des lettres, l'interlignage, et la graisse de la typo indépendamment pour vos titres et vos paragraphes.

    Vous pouvez paramétrer 4 tailles de titres et 3 tailles de paragraphes que vous pourrez ensuite utiliser sur votre site en sélectionnant la typo de votre choix au moment de l’intégration de vos contenus.

    Il est aussi possible d’assigner les types de typo souhaités aux différents éléments de votre site (navigation, bloc newsletter, portfolio, etc.)

  • Appliquez vos couleurs à votre palette et créez vos "thèmes".

    3 couleurs neutres + 2 couleurs vives est un bon ratio. Les couleurs vives vont venir apporter des touches de dynamisme et appeler le regard. Idéal pour les boutons et les liens par exemple.

    Notre recommandation :
    Blanc
    Couleur neutre (claire)
    Couleur vive
    Couleur vive
    Noir (ou foncé)

  • C'est à partir de cette palette que vous créerez les différents "thèmes" qui composeront votre site, c’est-à-dire différentes façons d'utiliser vos couleurs sur vos pages.

    Lorsque vous créez vos thèmes identifiez minimum 1 thème sur fond blanc, un thème sur fond de couleur clair et un thème sur fond de couleur foncé pour pouvoir créer des pages avec des fonds alternés.

    Vous n'êtes pas obligé d'utiliser tous les thèmes mis à votre disposition. 3 thèmes peuvent suffire pour construire votre site.

    Avec une couleur de fond foncée, on choisit une typo claire. Avec un fond clair, on choisit une typo foncé pour gagner en lisibilité.

    Choisissez une seule couleur pour vos boutons et vos liens afin qu'ils soient identifiés facilement par vos clients.

  • Choisissez l'animation qui vous convient et qui s'appliquera de façon générale sur tout votre site. Il n'y a pas vraiment de règle pour choisir son animation. C'est en fonction de vos goûts et de l'univers de votre marque (luxe, startup, corpo, etc.)

    Conseil : Paramétrez l'animation en "Rapide" pour être sur qu'une personne qui scroll rapidement sur votre site voit bien tous les contenus apparaître. Toujours privilégier la lisibilité au gadget.

  • Vous pouvez paramétrer jusqu'à 3 styles de boutons. En réalité un seul style de bouton suffit pour l'ensemble de votre site.

  • Votre contenu ne s’affichera pas de la même façon selon la taille d’écran de vos visiteurs. Pour éviter que vos textes et vos images s’étirent de façon exagérée sur grand écran, on va donner une largeur maximale à notre contenu. On vous conseille entre 1400px et 1800px

Autres paramétrages

liés au Design

Éléments à paramétrer

Design > Icone de navigateur

Votre icône doit impérativement être au format carré et de préférence de couleur (ni noir, ni blanc) et sur fond transparent pour bien ressortir sur les navigateurs.


Design > Page erreur 404

La page Erreur 404 Cette page s'affiche lorsqu'un utilisateur accède à une URL non valide sur votre site. Squarespace paramètre une page par défaut mais il est possible d'en créer une plus personnalisée.

Éléments non obligatoires

Design > La Checkout page

A destination des sites e-commerce, personnalisez le design de votre page de paiement.


Design > Lock screen

Personnalisez la page qui s'affiche aux visiteurs lorsque votre site ou des pages individuelles sont protégés par un mot de passe.


Design > Access denied screen

Uniquement lorsque vous avez des comptes clients, c'est ce que les visiteurs voient s'ils visitent une page réservée aux membres alors qu'ils sont déconnectés. Vous pouvez personnaliser cette option pour chaque espace membre.

Design > Social sharing

C’est l’image qui sera utilisée pour représenter votre site lorsque vous partagerez vos pages sur les réseaux sociaux.

Design > custom css

Cette zone vous permet d'injecter des règles CSS personnalisées dans votre site.

5/ NAVIGATION, HEADER ET FOOTER

Rendez-vous dans la rubrique PAGES

🖍️

Rendez-vous dans la rubrique PAGES 🖍️

Choisir les pages de sa navigation

Pensez votre menu de navigation pour qu’il soit concis et clair. Avoir une expérience utilisateur fluide et instinctive rendra votre site et vos call to action plus efficaces. C’est ce qui fera toute la différence pour convertir vos visiteurs en clients.

Rendez-vous dans la rubrique "Pages" : vous y retrouverez l'ensemble des pages de votre site. C'est ici que vous pourrez les organiser et en modifier le contenu. Votre template contient les pages les plus essentielles.

Nous allons démarrer par placer dans la navigation principale celles que vous souhaitez afficher dans votre menu de navigation.
Pour supprimer une page, survolez-la et cliquez sur l'icône corbeille qui apparaît à gauche.

Les pages

Les pages sont triées par types, chacune d’entre elles a des fonctionnalités et spécificités différentes.

Nous pouvons reconnaître des pages de nature différente par leurs icônes.
Par exemple, la page shop aura toujours pour icône un cadis, tandis qu’une page blog sera représentée par la plume d’un stylo.

NAVIGATION PRINCIPALE
Les pages présentes ici s'affichent dans le menu de navigation de votre site. Vous pouvez réarranger l'ordre des pages en les déplaçant par glisser-déposer.

HORS NAVIGATION
Les pages présentes ici ne sont pas accessibles directement depuis votre menu de navigation.
L’intérêt de ces pages est de pouvoir y accéder en cliquant sur un bouton, “En savoir plus” par exemple, qui vous redirigera vers une page explicative sans qu’elle soit visible dans le menu.
Aussi, la page d’accueil est très souvent hors navigation car le logo redirige déjà vers cette page.

Une page n’apparaît pas dans votre template ? Ajoutez une nouvelle page.

Pour ajouter une page, il vous suffit de cliquer sur le signe “+” situé à côté de “Main navigation” ou de “Not Linked” en fonction de si vous souhaitez une page en navigation principale ou hors navigation.

Vous pouvez également passer une page d’une catégorie à l’autre en la déplaçant par glisser-déposer de “Main navigation” à "Not linked” et inversement.

Les différents types de pages

LES PAGES CLASSIQUES
Ce sont les pages les plus utilisées car vous pouvez en modifier le contenu à votre guise. (Accueil, contact, services, à propos, etc.) Ajoutez une page vierge ou cliquez sur "Page Layouts" pour partir d'un modèle. N'hésitez à regarder tous les modèles pour vous donner des idées !

LES PAGES COLLECTION
Blog, boutique, banque de vidéos... Chaque type de collection a sa propre présentation, et ses propres fonctionnalités, alors choisissez celle qui correspond à vos besoins !

AUTRES ÉLÉMENTS
Créer un dossier peut être intéressant quand on a beaucoup de pages dans sa navigation, il vous permet de regrouper plusieurs pages à l’intérieur. Par exemple, un dossier “A propos” pourra contenir des pages “Histoire”, “Valeurs”, “L’équipe” etc.
Les liens quant à eux redirigent directement l’utilisateur où vous le souhaitez, vers un endroit de votre site ou vers un site extérieur.

Paramétrez correctement vos pages

Une fois que toutes vos pages sont créées assurez-vous qu’elles aient le bon titre et la bonne URL. Pour cela, cliquez sur le rouage situé à droite du nom de la page au survol pour accéder à cette fenêtre.

LE TITRE

Vérifiez et renommez si besoin le titre de la page et le titre de la navigation.

Si le titre d'une page est long, on peut modifier le titre de navigation pour qu'il soit plus court.

Par exemple, pour cette page :
Titre de la page : Découvrez notre histoire
Titre de navigation : À propos

Attention, veillez à bien sauvegarder vos modifications en cliquant sur “save” qui apparaîtra en haut à droite de la fenêtre avant de la fermer.

SLUG D'URL

Dès que vous créez ou dupliquez une page, Squarespace lui attribue automatiquement un SLUG D'URL. Mais attention, bien souvent ce SLUG n'est pas optimisé ! Alors vérifiez toujours que les slugs d'URL soient écrits correctement.

À noter : deux pages ne peuvent pas avoir le même SLUG.

Pourquoi les paramétrer tout de suite ?
Lorsqu'on ajoute un lien vers une page, on doit renseigner son URL. Si l'on modifie le slug d'URL de cette page par la suite, on risque de casser les liens existants.

Ciquez sur EDIT puis EDIT SITE HEADER

🖍️

Ciquez sur EDIT puis EDIT SITE HEADER 🖍️

Modifier l'en-tête du site

Votre navigation est créée ! Vous allez maintenant choisir son emplacement et ajouter les autres éléments de votre header (bouton, compte client, panier, réseaux sociaux)

  • Intégrez votre logo ici.
    De manière générale, votre logo doit être en .png sur fond transparent.

    Si vous n'en n'avez pas c'est le titre du site qui s'affichera dans l'en-tête.

    Vous pouvez ajouter un logo mobile si vous souhaitez afficher un logo différent sur mobile.

  • Choisissez les éléments qui viendront s'ajouter à votre navigation.
    - Un bouton pour le contact ou la prise de rdv
    - Les icônes réseaux sociaux
    - L'option site multilingue
    - Le Panier (eshop)

  • De nombreuses options sont possibles pour définir le style de votre en-tête. Ce choix est à faire en fonction du contenu de vos pages pour garder une lisibilité optimal sur votre navigation.

  • Différents modèle sont proposé à vous de choisir celui qui vous convient le mieux.

    Si votre logo est une typo vous pouvez le placer au centre, si c'est un design carré ou à la vertical il vaut mieux le mettre à gauche de l'écran.

    Les boutons, icônes réseaux, sont naturellement à droite.

  • Choisissez l'emplacement des éléments et la couleurs de fond de votre menu mobile. Sur mobile il est d'usage d'avoir le panier à droite et le menu burger à gauche.

FOOTER

Scollez tout en bas d’une page pour afficher le bouton “EDIT FOOTER”.

Différents types de footer sont déjà créés par Squarespace. Choisissez le vôtre en fonction des éléments que vous souhaitez y présenter.

Cliquez sur SAVE et EXIT lorsque vous avez terminé

🖍️

Cliquez sur SAVE et EXIT lorsque vous avez terminé 🖍️

Intégrer son contenu

Vous y êtes ! Votre design est intégré, vos pages sont créées et votre site dispose d’un header et d’un footer. Il ne vous reste plus qu’à intégrer vos contenus dans vos pages.

Comment ça marche ?

  • PAGES

    Une fois votre page créée et bien paramétrée comme expliqué dans la partie “Création des pages”, vous pouvez cliquer sur “Edit” en haut à gauche pour pouvoir y intégrer votre contenu et y effectuer les modifications souhaitées.

    Normalement à ce stade de la formation les contenus qui composeront toutes ces pages (images, textes, vidéos) ont été pensés.

    Vous aurez aussi des fonctionnalités à y intégrer: les réseaux sociaux, Formulaire de contact, inscription à votre Newsletter, etc.

    Préparez vos contenus avant de passer à cette étape, optimisez vos images et pensez à organiser vos contenus par pages.

  • SECTIONS

    Vos pages sont divisées en section.
    Vous pouvez ajouter, supprimer, dupliquer et déplacer les sections pour organiser votre contenu.

    Squarespace vous propose plusieurs choix de sections pré conçues classées en fonction du contenu que vous souhaitez y présenter.

    La plupart des sections utilisent des blocs que vous pouvez réorganiser, sauf si la section comporte une icône i, cela signifie qu’il s’agit d’une section avec disposition automatique utilisée pour les galeries d’images ou les contenus à disposer en liste.

  • BLOCS

    Vous pouvez ajouter une section vide ou une section pré-conçu, c'est à dire qui est déjà composée de blocs. Intégrez vos contenus aux blocs existants ou ajoutez vos propores blocs. Déplacez les blocs en sur la section individuellement sur desktop et mobile pour avoir le rendu désiré.
    Vous allez pouvoir créer votre site en glissant et déposant vos blocs (textes, images...). Simple à utiliser et parfait pour les créatifs.

Modifier le contenu d’une page

Page > La page à modifier

Positionnez votre curseur sur la section que vous souhaitez modifier. Cliquez sur le bouton "Edit" en haut à gauche de l'écran.

Votre écran affiche en mode éditeur.

-> Si vous partez d'une section pré-conçue

Positionnez votre souris sur le texte à modifier et vous n’avez plus qu’à éditer votre texte !

Si il s’agit d’une image cliquez sur petit crayon et une fenêtre s’ouvre. Elle comporte votre image actuelle. Supprimez là et ajouter la nouvelle.

C'est la manière la plus simple de créer un site pour un débutant.

-> Si vous partez d'une section vide

Cliquez sur Ajouter un bloc en haut à gauche et la liste des blocs disponible s'affiche.
Choisissez le bloc et positionnez-le en le glissant déposant.

Page > La page à modifier > La section à modifier

Plusieurs paramètres sont personnalisables sur vos sections :

  • Les marges

  • le fond d'écran (image, vidéo ou animation)

  • La couleur de thème de votre section

  • La forme du bas de la section (avec “divider”)

Vous avez la possibilité de déplacer la section au dessus ou en dessous en utilisant les flèches qui se situent juste en dessous du bouton “edit section”.

Vous pouvez également dupliquer une section en cliquant sur l’icône représentant deux carrés superposés.

Vous pouvez aussi mettre une section en favori en cliquant sur l’icône cœur juste à côté afin de pouvoir la retrouver dans “saved section” quand vous souhaitez créer une nouvelle section.
Cette dernière fonctionnalité est très pratique car elle vous permet de garder le “template” d’une section que vous avez créé tout en vous laissant la possibilité de changer le contenu.

Les principaux blocs

Bloc texte
Choisissez le type de typographie que vous souhaitez utiliser (4 tailles de titre et 3 tailles de paragraphes ont été parametrés au préalable dans la partie Design), changer la couleur de vos textes, créer des liens vers d'autres pages etc.

Bloc Image
Importez votre photo en cliquant sur le bouton “+” du bloc photo, vous avez la possibilité de la charger depuis votre appareil, votre bibliothèque de photos ou encore depuis une banque d’image mise à disposition.

Bloc Galerie
Créez des galeries pour pouvoir afficher un maximum de photos. Choisissez entre différents formats comme mosaïque ou slider par exemple et chargez vos photos. Vous avez la possibilités de les nommer et de leur mettre un lien.

Bloc Bouton
Créez des boutons pour appeler l’utilisateur à l’action, que ce soit en le redirigeant vers une page contact, ou encore pour pouvoir ajouter un article à son panier. Vous avez la possibilité d’enregistrer 3 designs de boutons comme vu précédemment.

Bloc Vidéo
Vous pouvez charger votre vidéo depuis ce bloc en cliquant sur le bouton “+”, dans la limité d’une minute par vidéo si vous la téléchargez directement sur votre site. Vous avez également la possibilité de mettre un lien Youtube ou Vimeo pour pouvoir afficher des vidéos plus longues.

Bloc Newsletter
Proposez à votre audience de s’inscrire à votre newsletter pour connaître vos actualités. Ce bloc permet l’ajout automatique des personnes inscrites à vos abonnés newsletter.

Bloc Instagram
Connectez votre compte instagram et son feed à votre site grâce à ce bloc pour que l’utilisateur ait ait un apperçu de vos réseaux sociaux et qu’il clique pour en voir plus.

Bloc Formulaire
Récupérez les informations de votre choix grâce aux formulaires, elles vous seront envoyés directement par mail à l’adresse de votre choix.

Autres
Il existe de nombreux blocs avec des fonctionnalités différentes, n’hésitez pas à aller les découvrir !

Les erreurs les plus fréquentes à ne pas commettre

  • Ne pas bien designer la page mobile : toujours vérifier sa version mobile pour éviter des mauvaises surprises

  • Ne pas vérifier les URL : un mauvais URL redirigera l’utilisateur vers une page erreur

  • Le manque d'espace : laissez de l’air entre vos contenus pour gagner en lisibilité

  • La page d'accueil trop longue : on veut tout mettre, mais le lecteur se retrouve vite perdu