La Homepage

Modifié le Lun, 4 Sept., 2023 à 3:47 H

La homepage, également appelée page d'accueil, est la première page qu'un utilisateur voit lorsqu'il visite un site web. Elle sert d'interface principale pour présenter un aperçu du contenu, des fonctionnalités et de la navigation du site, permettant aux utilisateurs de s'orienter et de trouver rapidement les informations qu'ils recherchent.

Prérequis : Pour bien démarrer sur Prismic

Voici un exemple de Homepage d'un site de démo de Lizee.

Retrouvez les détails sur la partie qui vous intéresse avec les numéros qui pointent vers différentes parties.

La cartographie de la homepage

TABLE DES MATIÈRES

La cartographie de la homepage

Sur la homepage (uniquement), le header peut être transparent, ce qui vous empêche de voir les couleurs que vous définissez pour les autres pages. Si vous voulez qu'il s'affiche par-dessus l'image Main Hero de la Homepage (cf point 12 de cette page), cochez "Classic" dans Homepage > Main. (bien penser à remplir dans la même section le "logo transparent", qui est utilisé uniquement sur la homepage, quand le header est transparent)
Toutes les autres modifications sont réalisables dans General > Header
Clic sur le petit carré pour accéder au sélecteur de couleur ou ajout direct de la valeur hexadécimale
- Header background pour le fond de la barre
- Header text color pour la couleur des textes
- Header text hover color pour la couleur des textes au passage de la souris

Les icônes (panier, compte, faq) prennent également les couleurs du texte et du survol de texte par la souris.

Option "Header sticky" : only on scroll up = le bandeau du header n'est plus visible quand on descend dans la page, il ne se voit que si l'on remonte. Always = le bandeau reste même quand on descend dans la page.

Modification du texte possible dans le Document Banner (sortir du Document Homepage).
Possibilité de mettre des liens hypertextes vers d'autres pages et des petits logos comme dans l'exemple ci-dessous
Option "is displayed banner on all pages" : true = on affiche la bannière sur toutes les pages, false =on l'affiche uniquement sur la Homepage.
Couleur de la bannière : uniquement modifiable en css

2. Logo principal

Image uploadée dans General > Main > Logo
Dimensions : 74 x 50 px, svg (sinon demande de repasse css pour mettre plus grand)
Voir la partie 0. Header pour mettre un logo différent quand le header est transparent.

General > Header > Cliquer sur un gros "+" gris foncé
Choisir "Primary Menu Item"
Remplir :
- "Nav link" : page vers laquelle le lien du menu va diriger (si clic direct sur le menu sans passer par le sous-menu)
- "Nav link label" : Libellé du menu, visible directement dans le header
Possibilité de changer l'ordre des éléments du menu avec les flèches haut et bas, à droite de la barre de Primary Menu Item

Dans "Repeatable zone", dans un bloc "Primary Menu Item", mGeneral header submenu background colorettre autant de sous-menus que voulu, fonctionnement identique au Primary Menu item.
Possibilité de changer l'ordre des éléments du sous-menu en faisant du glisser-déposer à partir des 3 petites barres en bout de ligne de chaque sous-menu.

Toujours dans General > Header, dans la partie au-dessus > "General header submenu background color" pour la couleur de fond du sous-menu
"General header submenu text color" pour la couleur des textes du sous-menu

Le menu peut être positionné au centre de la page comme dans la cartographie ou bien sur la gauche, comme ça :
Il est aussi possible de ne pas avoir de menu du tout
Ajustable avec la liste déroulante dans General > Header > Main menu (desktop only) : Left, Center ou No Menu

Le 3 barres qui représentent le burger menu peuvent être à gauche ou à droite, le régler dans General > Header > Burger Menu (mobile only) : No Menu, Left, Right
Le logo peut être positionné au centre ou à gauche, avec General > Header > "Logo Position (Mobile Only)"
Pour changer le texte qui permet de fermer le burger menu, aller dans General > Header > "Menu Close Text". Par défaut, le texte est "Fermer" en français.

Accès direct à d'autres pages du web, sans sous-menu
Affiché à gauche des icônes FAQ, compte et panier en mode desktop ; sous le menu en mode mobile
A ajouter depuis General > Header > Clic sur le gros "+" gris foncé > Secondary Menu Item
"Nav link" : page vers laquelle le lien du menu secondaire va diriger
"Nav link label" : Libellé du sous-menu, visible directement dans le header

5. Accès au compte client

Pour changer le libellé du bouton d'accès au compte client : General > Header > "Account Menu text"
Pour que le lien amène systématiquement à la page de connexion au compte avant d'ouvrir le compte, mettre "account_link_to_register" à "true"
Pour ne voir que les icônes et pas les libellés en format desktop, mettre "Menu icon only" à "true" (en format mobile, on ne peut pas afficher les libellés)
Pour modifier l'icône d'accès au compte client : Account > Login > Account button

6. Accès FAQ

Par défaut, le lien mène vers https://urlsite/faq
Si on veut mettre un lien customisé, le mettre dans General > Header > "Custom faq link"
Pour changer le libellé : General > Header > "Faq menu text"
Pour ne voir que les icônes et pas les libellés en format desktop, mettre "Menu icon only" à "true" (en format mobile, on ne peut pas afficher les libellés)
Pour modifier l'icône d'accès à la FAQ : FAQ > Main > Faq button

6 bis. Multi-langues

Si plusieurs langues sont disponibles sur le site, les initiales pour changer de langues sont entre le bouton de la FAQ et celui du panier dans le header
La pop-up informant qu'"en changeant de langue, les produits contenus dans le panier seront perdus" apparait (pop-up anglaise par défaut)
Pour changer ces textes : General > Header
- "change language modal title" pour remplacer 'Choose language'
- "change language modal text" pour remplacer 'Be careful, you are about to change languages. If you have items in your cart, your cart will be lost.'
- "change language modal cancel text" pour remplacer 'to cancel'
- "change language modal validation text" pour remplacer 'Change language'

7. Accès au panier

Pour changer le libellé du bouton qui permet d'ouvrir en grand le panier : General > Header > "General header basket menu text"
Pour ne voir que les icônes et pas les libellés en format desktop, mettre "Menu icon only" à "true" (en format mobile, on ne peut pas afficher les libellés)
Pour modifier l'icône d'accès au panier : Basket > Main > Basket button

8. Titre et sous-titre

En desktop, possibilité d'afficher le titre et le sous-titre à gauche, au centre ou à droite : Homepage > Main > Hero Layout (Desktop only) : Left, Center ou Right

Quand les titres sont au centre, les vignettes de catégories de produit sont au centre et l'image ou la vidéo de Header prend plus de place verticalement.

A gauche :

Au centre :

A droite :

La couleur du titre, du sous-titre et de la phrase en dessous s'ajustent avec Homepage > Main > "Hero text color"
Titre principal défini dans Homepage > Main > "Main Title" (possibilité de passer à la ligne comme ci-dessus) -> tout le texte sera en H1 (css), quelle que soit la mise en page faite dans Prismic
Sous-titre défini dans Homepage > Main > "Description Text" -> mise en page prise en compte cette fois.

9. Sélecteur de date (date picker) et bouton Louer

possibilité de changer le texte qui apparait sous le calendrier de dates dans General > Date Picker > "small text under calendar"
Changer le libellé du bouton "démarrer" ou "Louer" : General > Date Picker > "start_button" (Voir ici si ce bouton ne marche pas)
Par défaut, le bouton "Louer" amène à la page Shop, filtrée sur la première catégorie de la liste des catégories dans Sylius. Pour changer la destination de ce bouton, remplir le chemin d'accès de la page visée dans General > Date Picker > "redirect to shop page from HP"
Le contenu de General > Date Picker > "confirm button" est utilisé dans le Shop, les pages pack et produit, quand la personne modifie ses dates de location en haut de la page
Si une dégressivité des prix est appliquée en fonction des dates sélectionnées, remplir le début du texte de l'info-bulle qui apparait une fois les dates choisies. General > Date Picker > "you save". Le pourcentage est ajouté automatiquement en fin de message. Par exemple : "Prix dégressifs : avec ces dates, vous économisez" + pourcentage ajouté automatiquement.
Possibilité de détailler une durée de moins d'une journée quand les dates de début et de fin sont identiques. General > Date Picker > Morning, afternoon, full day et evening. (ne pas oublier la variable CleverCloud ENABLE_HALF_DAY )

Quand on choisit matin ou après-midi, la durée de location est d'une demi-journée. Quand on choisit "Journée entière" ou "evening", la durée est d'une journée.
Pour l'option "evening", la date de fin de location n'est pas ajustée en conséquence, ce qui peut être un peu perturbant pour le client (à clarifier dans les explications données dans la FAQ par exemple)

Voir aussi : Comment bloquer les locations sur une plage de dates donnée ?

9 bis. Bouton supplémentaire

Possibilité d'ajouter des boutons supplémentaires en allant dans Homepage > Main > Hero cta > Add a new element in Hero ctas
"CTA link" : url vers laquelle le bouton mène
"CTA Label" : ce qui sera affiché dans le bouton
CTA style : Contained : la couleur sera présente dans tout le bouton, Outlined : seul le contour sera coloré, le fond est transparent
CTA color : primary et secondary sont définis au niveau du css, identique pour tout le site.

10. Statements

Vignettes transparentes, avec un logo souvent ajouré, utilisées en homepage et dans les emails si souhaité
A ajouter depuis Statements > Main > Add a new element in Statements
A activer dans la homepage via Homepage > Main > Show statements = true
Ajout d'une phrase dans "bottom sentence" et d'un lien à la suite dans "link"

11. Main Hero Products

Possibilité d'ajouter des vignettes avec image + texte, affichées en carrousel via l'option Homepage > MainHeroProduct > Use carrousel = true + Homepage > Main > Show Featured Products =
Pour ne pas afficher cette section, bien retirer toutes les images de Homepage > Main
Pas de limite de nombre de vignettes
Veillez à mettre une taille d'image réduite pour ne pas allonger le temps de chargement de la homepage
Mettre un lien vers lequel mènera chaque vignette
Le format des images respecte ce qui est défini dans General > Config > Thumbnail ratio (portrait, carré, paysage)

12. Image ou Vidéo de Header (Main Image ou Main Video)

Si une vidéo est ajoutée dans Homepage > Main > Background video, alors elle prévaut sur l'affichage de l'image définie dans Homepage > Main > Hero Image.
Vidéo de taille maxi 1Mb, format mp4, recommandation 10s environ (aller ici pour compresser)
Possibilité de mettre une Hero image différente selon le format desktop (1920 x 855 px), tablette (1440 x 855 px), mobile (1024 x 855 px), mieux en format svg.
Format mobile, utilisation de la vidéo (750 x 1214px) ajoutée dans Background Video Mobile si l'option Enable Background video mobile est activée, sinon utilisation de la 3ème image de Hero Image.

Et si un rectangle blanc se balade au milieu de la main Image ?

Aller dans HomePage, MainHeroProducts et retirer l'image qui est là par défaut :

Pourrait être décalé ailleurs dans la page (sauf au-dessus de l'image ou la vidéo de Header) mais a plus de sens juste sous l'image ou la vidéo de Header. -> Ajustement via la position croissante des sections en bas de Homepage > Main
Homepage > Menu > Display Menu : activé > Add a new element in Menu list
Pas de limite de nombre d'éléments au menu, plus une question d'équilibre visuel

15. Savings

Position réglable par rapport aux autres blocs de la page -> Ajustement via la position croissante des sections en bas de Homepage > Main
Homepage > Savings > Display section = true
Bouton qui redirige soit vers le shop, soit vers les packs (Link destination) : Homepage > Savings > Link Label pour le libellé du bouton
Titre centré au-dessus du bloc : Homepage > Savings > Section Title
Structure fixe : "Pour X€, vous pouvez ..." dans la partie gauche, "acheter X produits ou louer X produits" dans la partie droite. Le mieux est d'essayer le bloc pour voir ce que ça donne avant d'ajuster
- Start saving text : "pour"
- End saving text : "vous pouvez"
- Buy savings text : "acheter"
- Rent saving text : "ou louer"
- Dans chaque élément de Saving range :
  - Budget : montant qui sera dans la partie de gauche
  - Buy ; ce qu'on peut s'acheter avec ce montant
  - Rent : ce qu'on peut louer avec ce même montant.

16. Hero section

Partie qui permet de mettre une image qui prend 50, 60, 70, 80, 90 ou 100% de la largeur de l'écran avec du texte par-dessus
Taille de l'image, recommandée en svg :
- 1920 x 1200 px (desktop)
- 1440 x 900 px (tablette)
- 1024 x 1024 px (mobile)
Configurable dans Homepage > Hero Sections avec "is_herosections_Active" à true
Si plusieurs blocs de Hero Sections sont ajoutés, ils sont forcément à la suite les uns des autres
Le texte peut être à gauche, au centre, ou à droite : Align content
Utiliser les tailles de titres dans l'ordre croissant H2 puis H3 puis H4, plutôt que H2, H4 et H3, car c'est terrible pour le SEO de ne pas respecter l'ordre -> dans Hero Content
Possibilité de mettre un lien dans le corps de texte
Hero CTA Link et Hero CTA Label pour remplir le bouton qui apparait après le texte, toujours sur l'image

17. How it Works

Partie qui contient au moins 3 blocs côte à côte régulièrement utilisée pour expliquer comment le service marche.
Chacun des blocs contient une image, souvent une icône (80 x 80 px, mieux en svg), puis centré dessous un titre et dessous un texte explicatif.
Homepage > HowItWorks > Display section = true
"Display slider hiw section on mobile" : si false, les blocs du How It Works apparaissent l'un au-dessus de l'autre en mobile. (image de gauche) Si true, il faut slider sur le côté pour les voir (image de droite).
2 textes de description affichés au-dessus des blocs du How It Works : descHowItWorks1 et descHowItWorks2
Bouton à la fin du bloc : "cta how it works" pour le libellé du bouton et "cta hiw link" pour la destination du bouton

18. Information

Structure 1 image sur un côté, un texte de l'autre (image puis texte en version mobile)
Homepage > Information > Display section = true
"Background" permet de mettre une couleur d'arrière plan derrière l'ensemble image + texte (qui va jusqu'aux bords de l'écran)
Taille des images : 476 x 400 px, mieux en svg
Pour que les dimensions des images soient respectées, mettre "Fullscreen Layout" à False, sinon les images sont étirées pour remplir la moitié de l'écran (ou tout l'écran en version mobile, avec le texte en-dessous).
Possibilité de mettre plusieurs éléments (en alternant gauche, droite, gauche par exemple) qui se suivent obligatoirement.
Définition du côté de l'image (et donc par défaut du texte) via "image align"
Définition de l'alignement du texte à gauche, centre ou à droite via la liste déroulante "align content"
Toutes les possibilités de contenus présents dans la cartographie pour cette partie

19. Univers - Catégories de produits (grille ou carrousel)

Paramètres communs aux 3 sections (19, 20 et 21)

Les sections 19, 20 et 21 s'activent via Homepage > Universe > Display section = true
Si au moins 2 sections sont remplies, elles s'affichent forcément dans cet ordre : 19 puis 20 puis 21.
Le choix entre grille et carrousel est le même pour les 3 sections : Layout : Classic Grid ou Carrousel (s'il n'y a pas assez d'éléments à afficher pour remplir toute une ligne en mode carrousel, les éléments sont affichés sur la gauche)La taille des images est définie dans General > Config > 'Medium image size' (en pixel)
Le design de l'affichage du texte est modifiable via css uniquement (à demander dans vos repasses).
Par défaut, il est en bas à gauche, dans un cadre blanc pour le carrousel. Il est centré dans un encart au-desuss de l'image dans le mode grille, comme ci-dessous.
Ajout possible d'un titre centré au-dessus des grilles ou carrousels : 'title_universe'
Le format des images respecte ce qui est défini dans General > Config > Thumbnail ratio (portrait, carré, paysage)
Paramètres pour le carrousel :
- Avec ou sans flèches sur le côté. 'Carrousel arrows' : hide ou show
- Espacement entre les vignettes (desktop uniquement) : sans, petit, moyen ou grand espace. 'Carousel cards spacing' : no spacing, small, medium, large.
- Paramètre pour la grille : nombre de vignettes en largeur avant de passer à la ligne. 'Classic Grid Columns', entre 3 et 6. Exemple avec 4 ci-dessous :

Paramètres pour les catégories de produits

A activer via 'Enable taxon product' = true
Titre de la grille ou du carrousel de catégories de produits : 'subtitle_universe1' -> Aligné à gauche par défaut, pas possible de le centrer sans passer par une repasse css.
Paragraphe de description aligné à gauche : 'paragraph_universe1'
Définition du nombre maximal de catégories à afficher, paramètre obligatoire pour un bon fonctionnement du module : 'Product Taxon number limit (MANDATORY)'
On ne choisit pas quelles catégories de produits sont affichées, par défaut ce sont les premières de la liste définie dans Sylius, dans Catégorie produits. Voir aussi : Gérer les catégories de produits
L'image représentant une catégorie de produits vient du Media de la catégorie Produit dans Sylius.

20. Univers - Produits ou Packs (grille ou carrousel)

Voir ce paragraphe pour les paramètres communs
Grille ou carrousel d'éléments libres composés d'une image avec un titre, un sous-titre et un lien hypertexte derrière la vignette.
Habituellement, des produits ou des packs sont mis en avant, avec leur prix en tant que sous-titre.
Activation via Homepage > Universe > Enable Products Carousel = true
Titre de la grille ou du carrousel : 'subtitle_universe3' -> Aligné à gauche par défaut, pas possible de le centrer sans passer par une repasse css.
Paragraphe de description aligné à gauche : 'paragraph_universe3'
Contenu du carrousel entièrement configuré via les éléments 'Carrousel Products', si vous affichez un prix par jour, ne pas oublier de noter l'unité. Le lien hypertexte n'est pas obligatoire mais conseillé pour amener l'utilisateur directement sur le produit mis en avant.

21. Univers - Catégories de packs (grille ou carrousel)

Voir ce paragraphe pour les paramètres communs
A activer via 'Enable taxon pack' = true
Titre de la grille ou du carrousel de catégories de packs : 'subtitle_universe2' -> Aligné à gauche par défaut, pas possible de le centrer sans passer par une repasse css.
Paragraphe de description aligné à gauche : 'paragraph_universe2'
Définition du nombre maximal de catégories à afficher, paramètre obligatoire pour un bon fonctionnement du module : 'Pack Taxon limit number (MANDATORY)'
On ne choisit pas quelles catégories de produits sont affichées, par défaut ce sont les premières de la liste définie dans Sylius, dans Catégories packs.
L'image représentant une catégorie de packs vient du Media de la catégorie de Pack dans Sylius.

22. Commitment + Community

Onglets différents dans Homepage mais toujours utilisés ensemble, le commitment à gauche et le community à droite. En version mobile, commitment au-dessus de community.
Exemples :
Activables avec Homepage > Commitment > Display section = true et Homepage > Community > Display section = true
La couleur de fond du cadre de commitment est à ajuster en css, demandez-le dans une de vos repasses !
Icone (60 x 60 px, mieux en svg), titre et description ajoutables comme suit :
Partie Community, couleur du texte Savings à la couleur de votre charte graphique par défaut, ajustements via repasse css. Taille de l'image : 117 x 131 px

23. Instagram

!! Contrairement aux autres sections, cette partie n'est pas dans le document Homepage car elle est utilisée également dans la page de confirmation de commande.
Images non extraites de posts réels instagram, à ajouter à la main dans Instagram '+ Add a new element in instagramImages'
Taille des images : 355 x 355 px, mieux en svg
En format mobile, seules les 4 premières images sont affichées
Couleurs, taille de police, arrondis définis en repasse css.
Suivre l'exemple ci-dessous pour le remplissage :

24. More information

Section au fonctionnement 100% identique à la section Information, positionnable à un autre endroit dans la page.

25. Testimonials

Activable via Homepage > Testimonials > Display section = true
Affichage de vignettes contenant une image croppée pour rentrer dans un rond (150 x 150 px, mieux en svg), un titre, un sous-titre et une description
Affichées en format carrousel en mode mobile.
Exemple et idée de détournement :

26. FAQ de la Homepage

Activable via Homepage > faq > Display faq = true
Section complètement indépendante de la page FAQ du site : les modifications réalisées sur la faq de la homepage doivent être reportées sur la page FAQ générale et inversement.
En général, contient une sélection des questions clés posées par les clients. Objectif de rassurer tout de suite les clients.
'Faq title' et 'Faq description' pour mettre le titre et la description facultatifs
Design des questions et réponses via repasse css, demandez-la lors de votre projet ! Exemples de designs
Possibilité de faire fermer une question déjà ouverte à l'ouverture d'une seconde question : Homepage > Faq > 'close others on click' = true
Bouton à la fin configurable avec 'Faq CTA Label' et 'Faq CTA'

27. Partners

Affichage de vignettes images avec liens hypertextes derrière
Pas de marge entre les vignettes, pas de centrage spécifique
Format idéal 300 x 300 px, mieux en svg
Activable et configurable dans Homepage > Partners > Display section = true
Exemple :

Section non obligatoire, activable via General > Footer > 'Show Footer Top' = Show
Phrase de gauche dans General > Footer > 'Footer Top Baseline'
Bouton de droite : 'Footer Top Link Label' et 'Footer Top Link'
Couleurs ajustables uniquement par repasse css, par les développeurs.

Vient de General > Footer > footer_logo
Taille 500 x 200 px, mieux en svg

30. Baseline

Affichée collée au logo
General > Footer > Footer tagline

31. Boutons Contact et FAQ

Bouton FAQ non visible sur la cartographie, il pourrait être affiché à gauche du bouton contact (toujours côte à côte en version mobile)
Pages de redirection des boutons dans General > Footer > 'Contact mail' et 'faq link'.
Astuce : pour permettre d'ouvrir directement un template d'email derrière le bouton, mettre dans le lien 'mailto:adresse_email' comme ci-dessous.
Libellé du bouton Contact ajustable plus bas dans la page General > Footer > 'contact us button'

32. Réseaux sociaux

Possibilité d'ajouter les icônes et liens vers les réseaux sociaux de votre marque via General > Footer > '+Add a new element in Social Networks' (le libellé n'est pas affiché)
Taille de logo : 24 x 24px, mieux en svg
Affichés sous les boutons contact et FAQ en version mobile

Ajout d'autant de liens que voulus.
Par défaut affichés les uns à la suite des autres en mobile (cf image ci-dessus), demander à les aligner verticalement si vous le préférez, lors de la repasse css. Exemple :
A ajouter dans General > Footer > '+ Add a new element in footer menu' avec un lien et un libellé à chaque fois

34. Powered by Lizee

Obligatoire (sauf négociation dans votre contrat)
Texte dans General > Footer > Copyright tout à la fin

La Homepage

La cartographie de la homepage

0. Header

1. Banner

2. Logo principal

3. Menu et sous-menu du header

Ajouter un menu

Ajouter un sous-menu

Couleurs du menu et sous-menu

Position du menu en version desktop

Burger menu en version mobile

4. Menu secondaire