Les pages de couverture présentent les informations sur une seule page de démarrage, en gras. Elles sont idéales pour afficher une page « En construction », pour annoncer le lancement d’un nouveau produit ou pour collecter les adresses e-mail des visiteurs.

Les pages de couverture sont disponibles avec tous les forfaits site web et Commerce dans la version 7.0. Si vous êtes actuellement abonné(e) au forfait Page de couverture indépendant, votre page restera en ligne tant que la facturation sera active. Vous ne pouvez pas revenir au forfait Page de couverture après être passé(e) à un site complet.

Les pages de couverture ne sont pas disponibles dans la version 7.1. Pour créer un design similaire, vous pouvez masquer l’en-tête et le pied de page sur certaines pages. Vous ne pouvez ni ajouter ni modifier de pages de couverture dans l’application Squarespace.

Regarder une vidéo

Ajouter une page de couverture

Pour ajouter une page de couverture et personnaliser son contenu, procédez comme suit :

1. Ouvrez le panneau Pages, cliquez sur +, puis sélectionnez Page de couverture. Pour en savoir plus, consultez l’article Ajouter des pages à votre navigation.
2. Choisissez une disposition.
3. Ajoutez votre marque, du texte et des fichiers multimédia.
4. Ajoutez des actions telles que des boutons, des liens ou des formulaires.
5. Façonnez le style de la page.

À retenir :

• Pour que la page de couverture soit la première page que les visiteurs voient en arrivant sur votre site, définissez‑la comme page d’accueil.
• Pour supprimer la page de couverture des menus de navigation, déplacez-la dans la section Hors navigation du panneau Pages. Cette option est très utile si vous souhaitez que les visiteurs voient cette page une seule fois avant d’entrer sur votre site ou encore si vous l’utilisez comme page de destination distincte.
• Si vous utilisez le forfait pour page de couverture seule, vous nʼavez pas de panneau Pages et il vous est donc impossible dʼajouter dʼautres pages. Votre menu dʼaccueil affiche les panneaux permettant de modifier votre page de couverture autonome.

Dispositions de la page de couverture

Pour les pages de couverture, chaque disposition agit comme un template doté dʼune page unique, avec ses propres fonctionnalités et paramètres de style. Les pages de couverture nʼutilisent pas de blocs, et les éléments de design tels que le texte et les boutons sʼaffichent en position fixe. Cela garantit une page de couverture esthétique et réactive.

Remarque : les pages de couverture ne prennent pas en charge la mise en forme HTML et Markdown.

Pour modifier votre disposition :

1. Dans le menu Page de couverture, cliquez sur Changer la disposition.
2. Utilisez le menu déroulant pour trier les dispositions par catégorie ou choisissez Toutes les dispositions pour afficher toutes les mises en page.
3. Survolez une disposition et cliquez sur Sélectionner pour la définir comme votre nouvelle mise en page.
4. Cliquez sur Enregistrer en haut de la page pour appliquer la modification.

Bien que vous puissiez adapter la disposition des pages de couverture à nʼimporte quelle fin, nous les avons conçues en tenant compte de thèmes généraux. Consultez la section ci‑dessous pour en savoir plus sur chaque catégorie.

Ajouter un branding et un texte

Utilisez le panneau Gestion de l’image de marque et Texte pour ajouter :

• Un logo ou un texte qui représente votre marque
• Un titre de page
• Un corps de texte

Ces paramètres fonctionnent avec le style de votre disposition afin de vous aider à créer un impact maximal à partir d’une quantité réduite d’informations.

À retenir :

• L’affichage de la marque et du texte dépendent de la disposition.
• Vous ne pouvez pas afficher à la fois un logo et un texte de marque.
• Vérifiez que votre logo respecte nos bonnes pratiques ou créez un logo à l’aide de Squarespace Logo.
• Contrairement aux autres pages, les titres et logos des pages de couverture ne renvoient pas à la page dʼaccueil de votre site.
• Votre texte de marque peut être différent de votre titre SEO. Celui‑ci sert de nom à votre page dans les onglets de navigateur et les résultats des moteurs de recherche.

Ajouter des fichiers multimédias

Utilisez le panneau Médias pour :

• charger des images d’arrière-plan ;
• Ajouter des images d’archives
• réutiliser des images déjà chargées ;
• ajouter une vidéo d’arrière-plan qui sera lue en boucle ;
• définir une couleur d’arrière-plan.

À retenir :

• Mettez vos images au bon format avant de les charger.
• Vous pouvez utiliser l’éditeur d’image intégré pour modifier les images d’origine.
• Vous pouvez charger plusieurs images afin de créer un diaporama ou un arrière-plan en grille.
• Si vous chargez un grand nombre d’images haute résolution, le temps de chargement de votre page de couverture peut être plus long.
• La plupart des dispositions prennent en charge les vidéos d’arrière-plan (qui sont lues silencieusement et en boucle) grâce à un lien vers une URL YouTube ou Vimeo.
• Vous ne pouvez pas ajouter de commandes de navigation ni contrôler la vitesse de transition dans le diaporama d’une page de couverture.
• En raison des contraintes du design réactif, les images et les vidéos sont toujours plus ou moins recadrées, particulièrement sur les appareils mobiles. Le degré de recadrage dépend de la hauteur de l’image, de la largeur du navigateur et de la disposition choisie.

définir une couleur d’arrière-plan.

Pour afficher une couleur d’arrière-plan unie plutôt qu’une image ou une vidéo, sélectionnez Aucun. L’image disparaît alors de l’aperçu. Vous pouvez changer la couleur d’arrière‑plan depuis le panneau Style.

Ajouter des actions

Utilisez le panneau Action pour ajouter des boutons, des liens de navigation et un formulaire ou une demande dʼinscription à la newsletter. Si vous ne voulez pas ajouter dʼactions à votre page de couverture, laissez ces champs vides.

À retenir :

• Vous pouvez ajouter des boutons ou des liens de navigation, mais pas les deux.
• Vous pouvez ajouter jusqu’à deux boutons ou cinq liens de navigation.
• Vous pouvez ajouter un seul formulaire ou une seule demande d’inscription à la newsletter.

Pour ajouter une action :

1. Cliquez sur Action dans le menu de la page de couverture.
2. Sous Sélectionner le type d’action, choisissez une action.

Ajouter des boutons ou des liens de navigation

Les boutons et les liens de navigation dirigent les visiteurs vers une autre page de votre site Squarespace, un autre site web ou un fichier à télécharger. Pour ajouter des boutons ou des liens de navigation :

1. Choisissez Boutons ou Navigation dans le menu Sélectionner le type d’action.
2. Ajoutez un intitulé dans le premier champ. Pour une meilleure mise en forme et une meilleure lisibilité, nous vous conseillons d’utiliser un intitulé court.
3. Cliquez dans le champ URL pour saisir une adresse web ou cliquez sur  pour ouvrir l’éditeur de lien. Vous pouvez créer un lien vers des sites externes, des fichiers à télécharger, des adresses e-mail, des numéros de téléphone ou un contenu de votre propre site. Pour en savoir plus, consultez l’article Ajouter des liens sur votre site.
4. Cliquez sur Enregistrer en haut du panneau pour publier toutes les modifications.

Ajouter un formulaire ou une demande dʼinscription à la newsletter

Les visiteurs peuvent cliquer sur un bouton et remplir le formulaire ou la demande d’inscription à la newsletter qui s’ouvre en superposition. Pour ajouter un formulaire ou une demande d’inscription à la newsletter :

1. Choisissez Formulaire ou Newsletter dans le menu Sélectionner un type d'action.
2. Ajoutez un libellé de bouton dans la zone Texte du bouton.
3. Cliquez sur Modifier le formulaire ou sur Modifier l’inscription à la newsletter pour ajouter un contenu.
4. Vous pouvez donner un nom aux formulaires dans le champ Nom du formulaire. Les visiteurs verront ce nom lorsque le formulaire s’ouvre avec un effet lightbox. Vous ne pouvez pas nommer les inscriptions à une newsletter ni supprimer le titre « Formulaire de newsletter » par défaut qui apparaît dans la lightbox.
5. Dans les formulaires, vous pouvez supprimer les champs d’espace réservé en cliquant sur les icônes corbeille. Vous pouvez aussi cliquer sur le signe + en bas de la page pour ajouter des champs. Si vous voulez rendre un champ obligatoire pour envoyer le formulaire, cochez la case Requis. Les demandes d’inscription à la newsletter disposent uniquement d’un champ Adresse e-mail.
6. Cliquez sur l'onglet Stockage pour nous indiquer où envoyer les soumissions. Si vous utilisez une liste de diffusion Campagnes e-mail comme option de stockage, les abonnés recevront un e-mail de confirmation lors de leur inscription. Il n'est pas possible de désactiver cette option.
7. Dans l’onglet Avancé, personnalisez le texte du bouton d’envoi, configurez une redirection post-envoi ou modifiez le message que les visiteurs voient après avoir envoyé le formulaire. Utilisez un texte standard ou un code HTML.
8. Cliquez sur Enregistrer dans l’éditeur, puis cliquez sur Enregistrer en haut du panneau pour publier toutes les modifications.

Conseil : après avoir connecté votre formulaire ou votre demande d’inscription à la newsletter à l’entité de stockage, nous vous recommandons d’accéder à la version en ligne de votre page et d’envoyer un formulaire de test pour voir si elle fonctionne correctement.

Ajouter une couleur d’arrière-plan au formulaire

Avec la plupart des dispositions, vous pouvez utiliser l’ajustement Couleur de superposition personnalisée du panneau Style pour ajouter une couleur à l’arrière-plan de votre formulaire ou de votre demande d’inscription à la newsletter. Afin d’éviter que cette superposition ne s’affiche sur le reste de la page, rendez-la transparente en utilisant le curseur d’opacité. Les visiteurs verront la superposition après avoir cliqué sur le bouton du formulaire ou de la demande d’inscription à la newsletter.

À retenir :

• La disposition Harbor ne propose pas les paramètres Couleur de superposition personnalisée et Couleur derrière le texte. Avec la disposition Harbor, l’arrière-plan du formulaire et de la demande d’inscription à la newsletter est toujours gris clair.
• Avec certaines dispositions, lʼoption Couleur de superposition personnalisée nʼapparaît quʼaprès avoir ajouté des images dans le panneau Médias.

Dans ces dispositions, lʼarrière-plan du formulaire ou de la demande dʼinscription à la newsletter correspond au paramètre Couleur derrière le texte :

• Backstory
• Carte
• Flagship
• Flash
• Focus
• Monocle
• Session
• Spotlight
• Vignette

Masquer le formulaire

Pour masquer le formulaire ou la demande d’inscription à la newsletter, supprimez le texte du champ Texte du bouton et ne renseignez pas ce champ. Les champs du formulaire seront de nouveau disponibles si vous réactivez le formulaire ultérieurement.

Ajouter des icônes sociales

Pour afficher les icônes sociales, cliquez sur Liens sociaux dans le menu de la page de couverture et cochez l’option Afficher les icônes sociales. Les icônes sociales correspondent aux comptes que vous avez ajoutés dans le panneau Liens sociaux. Le positionnement des icônes dépend de la disposition, mais elles sont généralement affichées vers le bas de la page.

Personnaliser le style de la page de couverture

Cliquez sur Style dans le menu de la page de couverture pour personnaliser le design. Chaque page de couverture dispose d’options de style uniques qui sont indépendantes du template de votre site et des autres pages de couverture.

À retenir :

• Si vous changez de disposition, tous les paramètres de police, de couleur et de taille seront réinitialisés aux valeurs par défaut de la nouvelle disposition. Si vous décidez de revenir à la disposition que vous utilisiez précédemment, les ajustements de style seront également réinitialisés.
• Puisque les pages de couverture sont conçues avec un design réactif, leur aspect sera quelque peu différent sur un appareil mobile. Vous pouvez voir un aperçu de lʼaffichage de votre page sur un appareil mobile avec la fonction Vue par appareil.

Modifier les ajustements de style

Dans le menu Page de couverture, cliquez sur Style. Utilisez les ajustements de style pour personnaliser votre page de couverture. Lorsque vous apportez des modifications, lʼaperçu de la page est mis à jour. Nous vous recommandons dʼexpérimenter jusquʼà trouver un design qui vous plaît.

Voici une liste des ajustements courants pour la page de couverture :

• Positionnement : positionnez le contenu sur la page. Selon la disposition, les options sont Gauche, Centre, Droite ou Haut, Milieu, Bas.
• Branding : définissez la police et la couleur.
• Titre : définissez la police et la couleur.
• Corps : définissez la police et la couleur.
• Arrière-plan : définissez la couleur dʼarrière‑plan (visible si vous nʼutilisez pas une image ou une vidéo) et les options de bordure de la page.
• Imagerie (non disponible dans les dispositions d'emplacement) - Définissez le style sur Complet ou Grille, et personnalisez l'apparence de la grille avec des réglages de styles tels que Densité de la galerie en grille et Ratio de la galerie en grille. Cochez la case Couleur de superposition automatique et Couleur de chargement automatique, ou décochez et définissez les couleurs pour chacune d'elles. Pour en savoir plus sur le Chargement de la couleur voir ci-dessous.
• Boutons : définissez la police, le style et la couleur des boutons.
• Icônes sociales : définissez le style et la couleur des icônes sociales.
• Commandes audio (pour dispositions audio uniquement) : définissez le style du lecteur, ainsi que la police et la couleur des pistes.
• Commandes vidéo (pour dispositions vidéo uniquement) : définissez le style et la couleur du lecteur.
• Carte (pour dispositions dʼemplacement uniquement) : définissez le style de la carte.

Images d'arrière-plan

La plupart des dispositions incluent des options d'images au format Complet et Grille :

• Sélectionnez Complet pour remplir tout l’arrière-plan de votre page de couverture avec une seule image. Si vous chargez plusieurs images, elles s’afficheront l’une après l’autre sous forme de diaporama.
• Sélectionnez Grille pour créer une grille d’arrière-plan avec des images répétées. Si vous n’avez qu’une seule image, elle sera répétée dans la grille pour remplir l’espace.
  
  • L'option Grille n'est pas disponible pour les dispositions Focus, Flagship, Harbor ou Monocle.
  • Dans la disposition Montage, il se peut que la barre de contenu recouvre certaines de vos images.
• Utilisez les ajustements qui apparaissent en dessous pour définir notamment la valeur de proportion et l’orientation de l’image.

Couleur de chargement

La plupart des dispositions destinées aux pages de couverture proposent une option de couleur de chargement. Cette option vous permet d'afficher une couleur d'arrière‑plan distincte le temps que la couleur d'arrière‑plan habituelle ou que l'image charge. Cette couleur peut également s'afficher lors du changement d'image dans un diaporama.

Remarque : les dispositions Flagship, Focus, Harbor et Monocle ne proposent pas de couleur de chargement.

Votre disposition utilise par défaut la couleur automatique du chargement. Cette couleur automatique se base sur la couleur d’arrière‑plan de votre image ou de votre vidéo. Si vous avez plusieurs images d’arrière‑plan, la couleur de chargement se base sur la première image du panneau Médias.

Pour choisir votre propre couleur, décochez la case Couleur de chargement automatique et définissez‑en une nouvelle en cliquant sur Couleur de chargement personnalisée.

Pour désactiver la couleur de chargement, cliquez sur Couleur de chargement personnalisée et cochez l'option Transparent.

Couleur de superposition

À l'exception de Harbor, toutes les dispositions proposent une option de couleur de superposition. Cette couleur ajoute une teinte à votre image d'arrière‑plan ou à votre couleur. Votre disposition utilise par défaut la couleur de superposition automatique. La couleur automatique est généralement une nuance de gris se mariant avec votre image de démonstration.

Pour utiliser une couleur de superposition personnalisée, décochez la case Couleur de superposition automatique, cliquez sur Couleur de superposition personnalisée et choisissez une nouvelle couleur.

Pour utiliser la couleur de superposition personnalisée comme couleur d'arrière‑plan de formulaire sans qu'elle n'apparaisse sur le reste de la page, utilisez le curseur d'opacité pour rendre la couleur transparente.

FAQ

Pourquoi ne puis-je pas augmenter la taille de mon texte au-delà d'un certain point ?

Le texte, les logos et les boutons figurant sur une page de couverture ne peuvent être agrandis qu'à la largeur maximale proposée par chaque type de disposition. Ces limites empêchent le chevauchement de contenu et assurent un design réactif.

Pour être plus précis, le corps de texte s'affiche dans la taille de police définie pour un navigateur de plus de 1 800 pixels de large. Pour les navigateurs d'une largeur de 1 800 pixels ou moins, la police du corps de texte aura une taille maximale variant en fonction de la largeur :

• Largeur de 1 800 pixels : 27 px
• Largeur de 1 600 pixels : 22 px
• Largeur de 1 020 pixels : 18 px
• Largeur de 760 pixels : 17 px
• Largeur de 600 pixels : 16 px

Par exemple, si vous définissez la taille de la police du corps de texte sur 30 px, celle-ci s’affichera à 30 pixels uniquement si la largeur de la fenêtre de navigation du visiteur est de 1801 pixels au minimum. Sinon, elle sera réajustée selon la liste ci-dessus. De même, si vous définissez la taille de la police du corps de texte sur 13 px, celle-ci s’affichera toujours à 13 pixels puisque cette taille est inférieure à toutes les limites existantes.

Il n'en va pas de même pour le branding et le titre. La taille de police fait plutôt office de référence, car le texte évolue en fonction de la hauteur et de la largeur du navigateur. Cette mise à l'échelle varie d'une disposition à l'autre.

Puis-je ajouter du code personnalisé à une page de couverture ?

Les pages de couverture ont des designs très intentionnels et ne sont pas faites pour ajouter du CSS personnalisé. Pour ajuster le style de votre page de couverture (police, couleurs), utilisez plutôt le panneau Style.

Si vous souhaitez malgré tout ajouter du code HTML ou des scripts, utilisez les paramètres de la page de couverture pour ajouter une injection de code sur une page spécifique. Pour en savoir plus, consultez l’article Ajouter du code personnalisé à votre site.

Sur la disposition Projector, le bouton Lecture change de place.

La position du bouton de lecture dans la disposition Projecteur dépend de la quantité de texte figurant dans le champ Corps :

• Le bouton restera centré s'il ne comporte pas beaucoup de texte.
• Lorsque le texte dépasse une certaine largeur, le bouton de lecture se déplace en haut à gauche.
• La position du bouton varie selon la taille du navigateur.