Créer un site avec Squarespace : Tutoriel étape par étape (pour débutants)

Créer un site web en quelques minutes : c'est la promesse du logiciel de création de sites web Squarespace. Cependant, en réalité, cela prend souvent plus de temps. Pour obtenir un site Squarespace professionnel et unique, il est nécessaire d'investir du travail. Les débutants peuvent rapidement se sentir dépassés

Nous vous guidons à travers les étapes nécessaires et détaillons dans notre tutoriel comment créer votre propre site Squarespace pas à pas, même si vous n'avez aucune expérience préalable.

Chaque projet Squarespace est unique, mais vous devez suivre ces huit étapes pour préparer votre site à accueillir des visiteurs :

Tout d'abord, vous avez besoin d'un compte Squarespace. Rendez-vous sur le site Squarespace*, cliquez en haut à droite sur le bouton « Commencer » et suivez les instructions.

Vous n'avez rien à payer au début : vous pouvez essayer Squarespace gratuitement pendant 14 jours sans fournir de données de paiement, avant de décider de souscrire un abonnement (plus d'infos ici).

Lors de votre inscription, Squarespace vous demande quelques informations sur votre projet. Les questions concernant le thème et les objectifs de votre site aident Squarespace à sélectionner des modèles adaptés à vos besoins. Vous pouvez également ignorer ces questions et parcourir les modèles manuellement. Passons maintenant à l'étape suivante.

Les modèles sont la structure visuelle de votre site. Ils déterminent comment vos contenus sont présentés et quelles fonctions sont intégrées par défaut. Le modèle choisi fournit donc la structure de base de votre site, que vous pouvez ensuite personnaliser.

Bien que vous deviez choisir un modèle initial lors de l'inscription, vous pouvez le changer ultérieurement ou créer un nouveau site avec un autre modèle.

Utilisez les filtres dans la sélection de modèles pour trouver des modèles adaptés à vos besoins spécifiques. Les modèles sont classés par type (par ex. Blog, Portfolio, site one-page) et par thème (par ex. Art & Design, Photographie, Mode, Voyage).

Vous avez trouvé un modèle qui vous plaît ? Ouvrez un aperçu interactif pour vérifier ses qualités. Vous pouvez naviguer sur un site de démonstration créé avec ce modèle et également choisir différentes options de couleurs.

Utilisez le site de démonstration pour vous familiariser avec la mise en page, la navigation et l'esthétique générale. Vous pourrez ajuster de nombreux aspects du design plus tard. Plus le modèle répond à vos attentes dès le départ, moins vous aurez de travail à faire dans l'éditeur.

Lorsque vous êtes satisfait de votre choix, cliquez sur « Commencer avec ce design » pour finaliser l'inscription et configurer votre site. Vous devrez ensuite donner un nom à votre site, que vous pourrez modifier plus tard.

Après l'inscription, vous serez redirigé vers l'éditeur Squarespace. Un court tutoriel vous y attend pour vous présenter les bases de l'éditeur. Nous allons examiner cela de plus près dans le point suivant.

Prenez quelques minutes pour vous familiariser avec l'interface de gestion de Squarespace. Plus vous comprendrez rapidement où trouver les différentes fonctions, plus il sera facile de personnaliser votre site plus tard.

Cette interface est le centre de commande de votre projet Squarespace. Vous y gérez tous les paramètres de base de votre site. En plus de l'éditeur visuel pour modifier le contenu de votre site, vous trouverez de nombreux outils et fonctions pour gérer et optimiser votre présence en ligne, comme les paramètres SEO, les analyses, les outils marketing et les contrôles d'accès.

L'interface de gestion est divisée en sections suivantes :

Une fois que vous êtes à l'aise avec le tableau de bord Squarespace, vous pouvez commencer à adapter le contenu et le design de votre site à vos besoins. Il y a bien sûr de nombreux aspects différents à considérer. Le mieux est de procéder étape par étape – commençons par le style du site :

Le style du site est un bon point de départ pour la conception, car il est défini globalement pour l'ensemble du site. Les paramètres que vous définissez ici s'appliquent donc à toutes les pages et sous-pages de votre site et sont automatiquement adoptés par celles-ci.

Pour ouvrir la section des styles du site, cliquez sur l'icône de pinceau dans la barre de menu en haut à droite :

Vous trouverez ici sept catégories de styles, regroupées en deux sections.

Les polices, bien que moins visibles que les couleurs ou les images, jouent un rôle crucial dans le design et l'image de marque de votre site. Si elles ne sont pas harmonieuses ou ne correspondent pas à l'identité de votre marque, l'apparence générale de votre site peut en pâtir.

Heureusement, Squarespace vous facilite la tâche pour trouver des polices cohérentes pour votre site. Vous pouvez choisir des packs de polices prédéfinis qui sont déjà harmonisés. En général, deux polices différentes sont utilisées : une pour les titres, une pour les paragraphes.

Une fois que vous avez choisi un pack de polices, vous pouvez ajuster individuellement chaque police dans la section « Styles de texte généraux ». Vous pouvez également définir des polices pour les boutons et autres textes, tels que les étiquettes ou les prix des produits dans les boutiques en ligne.

Une fois que vous avez trouvé la police appropriée, cliquez en haut à gauche sur « Enregistrer ».

Les couleurs sont également configurées de manière globale. Squarespace vous aide à trouver des combinaisons de couleurs harmonieuses tout en vous offrant de nombreux outils pour ajuster le design dans les moindres détails.

Vous pouvez commencer par choisir une palette de couleurs prédéfinie. Squarespace combine automatiquement ces couleurs de différentes manières pour conférer à votre site un design unique.

Cependant, vous n'êtes pas obligé de conserver la sélection par défaut de Squarespace. Vous pouvez ajuster individuellement chaque élément coloré de votre site. Utilisez une couleur de la palette choisie ou sélectionnez une couleur personnalisée. Vous pouvez également utiliser des codes de couleur Hex, RGB, ou HSL pour une précision maximale.

Une fois que vous êtes satisfait de la conception des couleurs de votre site, cliquez sur le bouton « Enregistrer » pour appliquer les paramètres sur l'ensemble du site.

En plus des polices et des couleurs, vous pouvez effectuer quelques autres réglages de style pour l'ensemble du site :

Vous pouvez bien entendu toujours ajuster et affiner ces éléments si vous remarquez des incohérences au cours de la conception de votre site.

Une fois que vous avez défini le design de base, il est temps de structurer et de remplir votre site. Pour la structure, les trois questions suivantes sont importantes :

Il est préférable de choisir un modèle qui se rapproche de la structure de page souhaitée. Mais vous pouvez également ajouter manuellement d'autres pages et ajuster la navigation selon vos besoins.

Cliquez sur « Site Web » dans le menu d'administration pour accéder au menu des pages. Vous y verrez les différentes pages de votre site, divisées en pages liées et non liées. Les pages non liées ne sont pas affichées dans la barre de menu de votre site, ce qui est utile pour des pages comme la page d'accueil ou les mentions légales.

Vous pouvez déplacer les pages par glisser-déposer pour ajuster leur position dans le menu de navigation.

Au début, seules les pages de démonstration de votre modèle de site sont enregistrées. Vous pouvez les modifier ou les supprimer et les remplacer.

Pour ajouter une nouvelle page, cliquez sur le symbole plus. Vous verrez alors une sélection de types de pages. Vous pouvez créer une page vide et la remplir avec votre contenu.

C'est plus rapide si vous choisissez des pages préfabriquées que vous pouvez ensuite personnaliser. Squarespace offre un large choix couvrant tous les types de pages importants.

Dans les mises en page des pages, vous trouverez des pages de contenu régulières, comme des pages d'information, de contact, des galeries ou des pages d'équipe. Une fois sélectionnées, elles seront automatiquement ajoutées à votre site et adaptées au design global prédéfini.

Il existe également des types de pages avancés appelés collections. Cela inclut les blogs, les boutiques, les portfolios et les événements. Ces pages sont composées de plusieurs éléments de contenu, comme des articles de blog, des produits ou des éléments de portfolio.

Vous pouvez gérer ces éléments de contenu dans un sous-menu dédié. Sur une page de blog, vous trouverez une liste de vos articles ainsi que la possibilité de mettre certains articles derrière un paywall, vous permettant ainsi de monétiser votre blog. Sur une page de boutique, vous bénéficiez d'une gestion complète de vos produits.

En cliquant sur l'icône d'engrenage à côté d'un titre de page dans le menu de navigation, un sous-menu avec les paramètres de la page s'ouvre. Ceux-ci sont divisés en plusieurs sections :

Dans « Général », vous pouvez définir le titre de la page et de la navigation, ainsi que le slug URL qui s'affichera dans la barre de votre navigateur. Vous trouverez également l'option de dupliquer la page, ce qui peut vous faire gagner du temps si vous créez plusieurs pages similaires. Vous pouvez aussi définir la page actuelle comme page d'accueil ou la supprimer.

Vous trouverez également dans cette section des paramètres SEO et de réseaux sociaux, ainsi que la possibilité de personnaliser votre page avec du code ou des scripts.

Squarespace prend également en charge les sous-pages, qui sont un peu cachées. Vous les trouverez dans la sélection de pages que vous ouvrez en cliquant sur le symbole « plus », tout en bas de la section « Plus » sous « Dropdown ».

En cliquant dessus, vous ajoutez un dossier déroulant à votre menu de navigation. Il s'agit d'un point de menu principal qui ouvre plusieurs sous-pages dans un menu déroulant.

Les sous-pages sur Squarespace.

Malheureusement, Squarespace est un peu rigide ici : vous ne pouvez pas transformer la page principale en une véritable page avec mise en page et contenu distincts. Elle reste simplement un élément de menu pour votre sous-page. De plus, les sous-sous-pages ne sont pas prises en charge.

Chaque nouvelle page que vous créez est initialement vide ou remplie de contenu de démonstration, que vous devez ajuster manuellement selon vos besoins.

C'est là qu'intervient l'éditeur de design de Squarespace, qui simplifie la conception de sites web grâce à sa fonction de glisser-déposer. Pour y accéder, cliquez sur le bouton « Modifier » en haut à gauche de la page actuelle.

Les éléments d'organisation centraux dans l'éditeur Squarespace sont les sections et les blocs. Familiarisez-vous d'abord avec leur fonctionnement :

Chaque page Squarespace est composée de sections et de blocs.

Pour créer une nouvelle section sur votre page, cliquez sur le bouton « Ajouter une section » qui apparaît entre les sections marquées par des lignes bleues.

Comme pour les pages, vous pouvez choisir parmi une palette de sections prédéfinies, classées en catégories telles que « Contact », « Info », « Équipe » ou « Services ». Par exemple, nous avons créé une section sur notre page d'accueil qui renvoie aux derniers avis de notre blog de théâtre.

Ajoutez de nouvelles sections et modifiez leur design et leur mise en page.

En haut à droite de chaque section, une petite boîte apparaît. Vous pouvez utiliser cette boîte pour déplacer la section actuelle vers le haut ou vers le bas, la copier, ou l'ajouter à vos favoris afin de pouvoir créer rapidement des sections avec le même design et la même mise en page plus tard.

Selon la section, vous trouverez différentes options dans cette boîte. Dans une section Équipe, vous pouvez ajouter les noms, titres et photos de vos collaborateurs. Dans une section Galerie, vous pouvez gérer les différentes photos de votre galerie.

Modifiez le contenu de votre section.

En cliquant sur « Modifier la section », vous pouvez ajuster les paramètres généraux du format, de l'arrière-plan et des couleurs de la section. Vous y trouverez des options pour les effets d'arrière-plan et la palette de couleurs de la section.

Vous pouvez également définir le nombre et la taille des lignes ou des grilles, ce qui est important pour la répartition des blocs dans la section.

Chaque section d'une page Squarespace est composée de plusieurs blocs, qui sont des éléments de contenu spécifiques. Vous pouvez ajouter un nouveau bloc en cliquant sur le bouton « Ajouter un bloc » en haut à droite de la section.

Vous avez également accès à de nombreux éléments prédéfinis que vous pouvez filtrer via la barre de recherche. Le choix est vaste, allant des blocs de texte et d'image classiques aux formulaires, bandes interactives et codes d'intégration.

Lorsque vous sélectionnez un bloc, vous pouvez le faire glisser et le déposer sur votre page. Les grilles de la section deviennent alors visibles : chaque section est divisée en petits blocs où les éléments de contenu s'alignent. Ainsi, vous ne pouvez pas déplacer les blocs librement mais uniquement à l'intérieur des grilles prédéfinies. Cela garantit que la mise en page reste cohérente et que la position des éléments est structurée.

Vous pouvez maintenant continuer à éditer le contenu de vos blocs. Les options sont en grande partie intuitives : vous pouvez modifier la taille des blocs comme dans un outil de retouche photo et ajuster les textes directement dans l'aperçu en direct.

En cliquant sur un bloc, un petit menu de sélection apparaît en haut à gauche avec d'autres options. Vous pouvez ajuster l'alignement du contenu dans le bloc, le mettre au premier ou à l'arrière-plan, le dupliquer ou le supprimer.

Le bouton pinceau vous dirige vers d'autres paramètres qui varient selon le type de bloc. Par exemple, dans un bloc de texte, vous trouverez des options classiques de traitement de texte, tandis que dans un bloc d'image, vous pouvez ajuster le contenu et le design de vos images.

Il existe bien sûr de nombreuses autres options et paramètres que nous ne pouvons pas touts aborder en détail ici. Dans l'ensemble, l'éditeur Squarespace est assez intuitif, ce qui vous permettra de trouver rapidement tous les outils importants dont vous avez besoin.

Une fois que vous avez ajusté le design, créé vos pages et ajouté du contenu, vous êtes presque prêt. Avant de publier votre site web, jetez un œil à votre en-tête et à votre pied de page.

Ce sont des éléments qui apparaissent sur chaque page de votre site web. La modification de ces zones est également simple avec Squarespace.

Pour modifier votre en-tête, survolez simplement la section supérieure de votre site web avec la souris et cliquez sur « Modifier l'en-tête du site ».

Vous avez maintenant plusieurs options :

Si vous êtes satisfait de votre en-tête, cliquez sur « Enregistrer » en haut à gauche comme d'habitude.

Vous pouvez modifier le pied de page tout aussi facilement. Contrairement à l'en-tête, il s'agit d'une section régulière que vous pouvez personnaliser plus librement. Vous pouvez ajouter et configurer différents blocs.

N'oubliez pas de lier vos mentions légales et votre politique de confidentialité dans le pied de page.

Vous êtes satisfait du design et du contenu de votre site web, et vous avez terminé toutes les pages et sous-pages, configuré vos services et produits, et mis en forme l'en-tête et le pied de page ? Vous êtes presque prêt – votre site Squarespace est enfin prêt à être publié.

Techniquement, votre site Squarespace est déjà publié, mais seulement sous un domaine Squarespace intégré et peu pratique. Pour le rendre accessible sous un domaine personnalisé, vous devez d'abord souscrire à un abonnement Squarespace payant.

Vous pouvez configurer l'abonnement pendant la période d'essai en cliquant sur « S'abonner » dans la barre d'information de la période d'essai, qui vous rappelle constamment le compte à rebours. Vous pouvez également trouver l'option de souscription sous Paramètres > Site web > Disponibilité du site web.

Suivez les instructions et choisissez l'un des abonnements disponibles. Il y en a actuellement quatre, qui diffèrent par leurs fonctionnalités, le nombre d'éditeurs ou les frais de transaction : Personnel, Business, Commerce basique et Commerce avancé.

Examinez attentivement les conditions et les fonctionnalités des différents forfaits et choisissez celui qui répond à tous vos besoins. Si vous hésitez, il est judicieux de commencer par l'abonnement « Personnel », le moins cher — vous pouvez toujours passer à un niveau supérieur ultérieurement. Cependant, notez que les fonctionnalités de commerce électronique ne sont pas prises en charge dans le forfait « Personnel ».

Tous les forfaits Squarespace incluent un domaine personnalisé que vous pouvez utiliser gratuitement la première année. Vous pouvez configurer le domaine immédiatement après la commande, ou trouver l'option dans le tableau de bord sous Paramètres > Domaines et e-mail.

Vous avez deux options :

Une fois l'abonnement souscrit et votre domaine configuré, votre site est prêt et enfin accessible aux visiteurs.

Mais utiliser le mot « prêt » peut être trompeur, car un site web n'est jamais vraiment terminé. Vous avez sûrement déjà des idées de modifications, d'ajouts ou même de suppressions à envisager.

Un site web est un produit vivant qui nécessite des ajustements constants, des optimisations et des révisions. Maintenant que la base est établie, cela devrait être plus facile à gérer.

Squarespace est l'un des logiciels de création de sites web les plus conviviaux. Même sans compétences en codage ou en design, vous pouvez créer un site moderne et professionnel en quelques étapes. Il vous suffit de trouver le bon modèle, d'adapter le style du site à vos besoins, de définir toutes les pages et menus, et de modifier le contenu dans l'éditeur de Squarespace par glisser-déposer.

Vous avez peut-être constaté que Squarespace n'est pas le meilleur choix pour vous ? Dans notre comparatif des meilleurs logiciels de création de sites web, nous avons testé 17 fournisseurs afin de vous aider à prendre une décision éclairée. De plus, nous avons compilé les meilleures alternatives à Squarespace pour vous orienter.