Module 2 : Création des pages
La page d’accueil
Aperçu de la leçon
Durée totale des vidéos : 2h30
La page d’accueil est la porte d’entrée de ton activité. Tu dois donner une importance particulière à cette page. Le visiteur ne t’accordera que quelques secondes d’attention et ensuite passera à autre chose s’il n’est pas intéressé par ce que tu proposes ou si ton offre n’est pas claire.
90% des visiteurs ne reviendront jamais sur ton site. Alors mieux vaut l’optimiser au mieux afin de garder le lien avec lui.
Pour le moment nous allons nous occuper du squelette de ton site. Les outils marketing seront vu dans une prochaine leçon.
Je te conseille de clarifier ton offre et de l’afficher sur l’en-tête pour que le visiteur comprend de suite ce que tu proposes.
(La page d’accueil est la plus longue à concevoir car elle inclut l’en-tête et le pied de page. Mais il seront à ne faire qu’une seule fois, ce qui rendra plus rapide la conception des autres pages. )
Cette page est composée de plusieurs sections. Nous allons ajouter:
Ta partie d’en- tête
Une bannière
Un message de Bienvenue
Tes services
Des témoignages multiples
Derniers articles de blog
Un bas de page
Dans cette leçon tu apprendras à:
Ajouter de nouvelles sections sur une page
Utiliser des modèles de section
Déplacer les sections dans la page
Ajouter et structurer des blocs de contenu
Utiliser les blocs d’images
Tutoriel Vidéo
Temps total: 2 heures 30 minutes
1 - En tête (19 minutes)
L’en-tête est la barre de navigation qui se trouve sur tous les sites internet. C’est ici que tu y trouves le logo, et les principaux liens de navigation du site. Egalement tu peux placer l’action principale du site par un bouton. Pour une ergonomie optimale ne dépasse pas 7 liens de navigation, L’idéal est 5 liens.
2 - Bannière (27 minutes)
La bannière indique tout de suite à ton visiteur ce que tu proposes et a qui tu t’adresses. Il est important que ton offre soit claire pour attirer l’attention du visiteur idéal. Facilites lui la tâche! Un visiteur n’a pas à deviner ce que tu proposes. Ajoutes un appel à l’action pour te contacter ou vers ta meilleure offre.
Mise à jour
Squarespace a mis à jour la présentation des blocs de contenus. Il n’y a plus les bulles grises. Cela ne change en rien les fonctionnalités.
Voici la nouvelle disposition (clique sur l’image pour l’agrandir).
Cette information te sera utile pour la vidéo suivante.
Rédaction du texte de bannière (9 minutes)
3 - Message de bienvenue (20 minutes)
Le message de bienvenue donne un aperçu de ta personnalité ou permet d’attirer la curiosité du visiteur. Tu peux aussi placer un témoignage client très pertinent à cet endroit.
Le bloc image présente qui tu es ou ton univers. Tu n’es pas obligé de placer une photo personnelle. Une illustration qui représente ton environnement ou ton atelier est très appréciable. Ce bloc introduit la page à propos.
4 - Tes services en 3 blocs (18 minutes)
Les blocs de services servent à présenter tes offres à tes visiteurs dès la page d’accueil. Le prospect n’a plus qu’à cliquer sur l’offre qui l’intéresse pour en savoir un peu plus et réserver ou acheter.
5 - Des témoignages multiples (11 minutes)
Les témoignages sont quasi-obligatoires pour apporter une preuve sociale et d’expertise auprès des visiteurs de ton site. Un prospect ne te connait pas et il est bien de lui prouver que ton offre est sérieuse et concluante auprès d’autres personnes.
6 - Derniers articles de blog (9 minutes)
Optionnel: Tu peux rajouter un bloc avec les derniers articles de blog ou des informations à mettre en avant.
7 - Pied de page (33 minutes)
Le pied de page est un raccourci qui inclut plusieurs informations utiles de ton site. C’est aussi la que tu places tes liens légaux. Nous placerons le bloc Newsletter à cet endroit pour convertir tes visiteurs en prospects.
Voici le code que tu peux insérer à ton pied de page pour une mise à jour automatique de l’année:
<p>Copyright © <script>document.write(new Date().getFullYear())</script> Ton Site Tous droits réservés</p>
Tu peux le copier et le coller directement dans le bloc Markdown.
Conseil: Pour un rendu professionnel associes la couleur de ton pied de page avec celle de l’en-tête.