12 manières de personnaliser votre site web

Vous envisagez de rafraîchir votre site web et d’apporter quelques ajustements à sa conception, mais vous avez l’impression d’avoir déjà exploré en profondeur toutes les options, tous les ajustements de style, tous les types de blocs et toutes les fonctionnalités ? 

Squarespace met constamment à jour et enrichit son ensemble robuste d’outils pour offrir de nouvelles options de personnalisation de votre site web. Cet article met en lumière quelques options que vous ne connaissez peut-être pas encore, mais il est possible qu’il s’agisse simplement des outils que vous recherchez pour affiner l’apparence de votre site. 

Ces outils sont également d'excellents points d'accès pour commencer à explorer les fonctionnalités les plus complètes de la plateforme et vous guider sur une toute nouvelle voie créative. 

Changer de section de page

Les sections de page sont les différents éléments qui constituent le contenu d'une page web, comme une introduction ou la liste de vos services. Examinons certaines des options de design disponibles pour mettre à jour les sections de votre page. 

1. Séparateurs de section

Les séparateurs de section ajoutent des sauts plus visibles entre les sections de page. Vous pouvez choisir d'ajouter une véritable ligne dans différents styles, comme une vague ou une diagonale, ou de recadrer le fond ou l'image d'arrière-plan d'une section pour marquer la rupture. 

Ceux-ci peuvent aider à séparer visuellement le contenu, permettant à chaque section d’avoir son propre espace sans avoir besoin de créer une nouvelle page, produisant ainsi un design plus dynamique. Vous pouvez utiliser des séparateurs de section pour diviser les mises en page de différentes manières, par exemple :

• Créer une rupture entre les sections À propos et Notre équipe sur une seule page, en regroupant deux pages potentielles en une seule

• Création d'un site web d'une page plus organisé

• Ajout d’une séparation entre le contenu de votre page principale et le pied de page de votre site web

Ajouter des séparateurs de section

2. Images de fond et vidéos de la section 

Ajoutez des arrière-plans uniques aux sections de la page pour vraiment attirer l’attention d’un visiteur une fois qu’il arrive sur votre site. Utilisez-les comme alternative à une vidéo d'arrière-plan, pour différencier les sections ou comme introduction visuelle à n'importe quelle page de votre site.

Par exemple, vous pouvez ajouter une vidéo d'arrière-plan dans la première section de la page d'accueil de votre site pour donner un aperçu de votre produit, de votre service ou de l'ensemble de vos œuvres. Vous pouvez également utiliser les images d'arrière-plan des sections pour donner leur propre apparence à des sections spécifiques d'une page. 

Conseil de pro : selon la vitesse de connexion et la version du navigateur, les vidéos d'arrière-plan peuvent ne pas se charger pour tous les visiteurs. Il est utile d'ajouter une image de secours sur mobile à afficher lorsque la vidéo ne fonctionne pas. 

Ajouter des motifs d'arrière-plan de section

3. Disposition automatique

Si vous avez besoin d'un coup de main pour commencer à concevoir une section de page ou si vous souhaitez avoir un modèle à partir duquel vous pouvez travailler, les dispositions automatiques sont un excellent point de départ. Les dispositions automatiques présentent des contenus dans des designs sélectionnés. Les designs incluent des dispositions destinées à différents usages, tels que des colonnes et des rangées, des carrousels ou des diaporamas. 

Elles sont parfaites pour gérer des pages simples dont le contenu doit être mis à jour régulièrement, comme les photos de produits en vedette, les projets récents et les membres actuels de l'équipe. Bien que ce contenu commence par des dispositions prédéfinies, vous pouvez créer des sections supplémentaires pour personnaliser le design. 

Utilisez les dispositions automatiques sur votre site

4. Motif d'arrière-plan

Bien que les images d'arrière-plan des sections soient un excellent moyen d'attirer l'attention des visiteurs, vous pouvez également ajouter des motifs d'arrière-plan à une section de page pour un niveau de personnalisation supérieur. Le motif d'arrière-plan vous permet de créer un look unique en utilisant les couleurs, les motifs et les formes générés sur la plateforme Squarespace.

C'est une excellente option pour créer des sections thématiques sur une seule page, par exemple pour diviser le site d'une école en sections par niveau scolaire ou pour améliorer l'apparence d'une FAQ contenant beaucoup de texte. 

Blocs

Les blocs sont des éléments de design qui peuvent être placés dans des sections de page Squarespace, comme un bloc Texte, un bloc Formulaire ou un bloc Image. Vous trouverez ci-dessous certains types de blocs et de fonctionnalités que vous n'avez peut-être pas encore eu l'occasion d'essayer. 

5. Blocs de défilement

Les blocs Défilement sont un type de bloc unique qui vous permet d'afficher du texte qui défile horizontalement sur la page. Sa fonction est similaire à celle d'un chapiteau de théâtre ou d'un journal télévisé. Vous pouvez contrôler la vitesse et la forme du défilement.

C'est un excellent moyen de donner plus de vie au design de votre site et d'attirer l'attention des visiteurs sur des informations clés.

Vous pouvez utiliser des blocs Défilement pour :

• Mettre en avant les ventes, les lancements ou les produits populaires

• Créer un calendrier des événements à venir

• Afficher les avis et les témoignages des clients 

Ajouter des blocs Défilement à votre site

6. Blocs Forme 

Les blocs Formes vous permettent d'ajouter différentes formes avec un remplissage plein aux sections de votre page. Cela vous permet de modifier la disposition des pages et de créer des designs plus variés. 

Vous pouvez également superposer des blocs Forme à d'autres types de blocs pour créer des dispositions encore plus frappantes. Des formes peuvent être placées derrière les images de votre site pour les faire ressortir de la page ou pour les distinguer du contenu d'une galerie. 

Voici quelques manières dont les blocs Formes peuvent être utilisés :

• Ajouter un bloc Forme en étoile derrière le témoignage d'un client pour souligner son expérience 5 étoiles

• Ajouter des blocs Forme de différentes couleurs autour d'une section de page détaillant vos services de pâtisserie de gâteaux d'anniversaire pour une touche très festive

En savoir plus sur l'utilisation des blocs Forme

7. Blocs Accordéon 

Les blocs Accordéon affichent le texte dans des sections pliables et cliquables. Cela permet de réduire la longueur de page au minimum et de réduire le défilement pour vos visiteurs. Les blocs en accordéon peuvent vous aider à créer un design plus structuré pour les pages contenant beaucoup de texte, comme les FAQ ou les listes de produits. 

Par exemple, utilisez un bloc Accordéon pour afficher des informations importantes concernant un service proposé par votre entreprise, avec des sections clairement divisées sur lesquelles les clients peuvent cliquer pour en savoir plus. Un photographe de mariage peut utiliser un bloc Accordéon pour interrompre le processus de travail avec eux, avec des sections d’accordéon telles que : Meet & Greet, Choisir un forfait, Séance de fiançailles, Rencontre avant le mariage, Jour du mariage, Après le grand jour. 

Ajoutez des blocs Accordéon à votre site

8. Épinglage des blocs

Vous pouvez épingler n'importe quel type de bloc sur une section de page. Cela les maintient en place pendant que les visiteurs font défiler le reste du contenu dans la même section. 

Cela permet également de s'assurer que les informations et contenus importants sont visibles, où que vous fassiez défiler la page. Par exemple, vous pouvez :

• Indiquez le lieu et les heures d'ouverture de votre entreprise pendant que les visiteurs font défiler les produits

• Gardez votre image au premier plan lorsque vous présentez des réussites ou des services

• Soulignez une clause de non-responsabilité si nécessaire

• Gardez votre formulaire de contact ou votre inscription à la newsletter à portée de vue à tout moment

Apprenez à épingler des blocs dans une section de page

Mise en forme du texte

La façon dont vous stylisez le texte de votre site web peut avoir un impact sur l'attention des visiteurs et sur ce dont ils se souviennent. Voici quelques options et fonctionnalités de mise en forme du texte qui vous permettront de tirer le meilleur parti de vos mots. 

9. Mise en évidence du texte 

Pour faire ressortir certains textes, essayez d'utiliser la fonction de surlignage du texte. Cela peut vraiment aider à mettre en valeur les informations clés d'une page, ou à la rendre plus lisible si nécessaire.

Le surlignage du texte dispose des options de style suivantes :

• Animation : animez la forme de votre surlignage pour ajouter du mouvement qui attire davantage l'attention sur votre texte.

• Mettre au premier plan : cela permet à votre surlignage de chevaucher votre texte, pour le faire ressembler à un surlignage réel.

• Couleur : modifiez la couleur de votre surlignage pour le faire ressortir ou pour qu'il corresponde mieux au design de votre site.

• Embouts : ajustez la forme des extrémités du surlignage pour qu'elles soient arrondies ou carrées.

• Épaisseur : ajustez l'épaisseur de la ligne de surlignage. 

C'est une excellente option pour :

• Mettre en lumière les avis des clients

• Mettre l'accent sur les parties clés d'un billet de blog

• Attirer l'attention sur certains éléments d'une page À propos

En savoir plus sur le surlignage de texte

10. Mettre le texte à l’échelle

La mise à l'échelle du texte vous permet d'adapter votre texte à la largeur d'un bloc. C'est un moyen rapide de redimensionner votre texte sans sauts de ligne, quelle que soit la taille du navigateur. Nous recommandons cette fonctionnalité pour les titres courts ou les gros titres. C'est également idéal pour :

• Diviser le contenu en sections à l'aide de titres

• Créer des listes concises

• Présenter des citations importantes de plus grandes parties du texte

Apprenez à redimensionner le texte

Formatage des images

La façon dont vous stylisez et mettez en forme vos images peut également ajouter de la personnalité et un intérêt visuel au design de votre site. 

11. Animations et effets de blocs d'images 

Vous pouvez ajouter des effets aux blocs d'images pour donner aux images un aspect plus stylisé et unique. Certaines options ajoutent une animation, comme une vague subtile ou un effet statique pour mettre en valeur le style visuel de votre site. Les autres effets n'apparaissent que lorsque le visiteur fait défiler cette section de votre site. 

C'est un excellent moyen de :

• Donner de la vie à une zone par ailleurs statique d'un site

• Ajouter du mouvement aux images fixes sans utiliser de vidéo

• Veiller à ce que les images clés puissent toujours attirer l'attention

Ajouter des animations et des effets à des blocs d'images

12. Formes d'images et masques 

Les blocs Images peuvent également être façonnés pour modifier l'apparence de chaque image d'une page. Les options disponibles pour la mise en forme des images sont les suivantes :

• Utiliser des paramètres de rayon d’angle pour arrondir les coins d’une image

• Définir une forme complète, comme un cercle ou un triangle

Le paramètre de forme complète apparaît sur l’image, comme un masque, lui donnant une nouvelle forme. Transformez votre galerie de photos en une série de formes intéressantes ou vos offres de produits en quelque chose qui va au-delà des images standard pour vraiment attirer l'attention. 

Définissez la forme d'un bloc d'image