Remarque : même si nos guides les plus populaires ont été traduits en français, certains guides sont uniquement disponibles en anglais.

Pages de couverture

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

Les pages de couverture sont disponibles pour tous les forfaits site web et Commerce dans la version 7.0. Si vous utilisez actuellement le forfait pour page de couverture seule, votre page restera en ligne tant que votre facturation est active. Il nʼest pas possible de revenir à un forfait de page de couverture après être passé(e) à un site complet.

Les pages de couverture ne sont pas disponibles dans la version 7.1.

Regarder une vidéo

Ajouter une Page de Couverture

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

  1. Dans le menu Accueil, cliquez sur Pages, puis sur + et sélectionnez Page de couverture. Pour plus dʼaide, consultez 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 Modifier 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. 

Utilisez ces dispositions pour une page personnelle ou professionnelle, pour une page « À venir » ou pour une page dʼinscription à votre newsletter :

  • Carte
  • Couvrir
  • Flash
  • Gazette
  • Jacket
  • Mission
  • Révéler
  • Spotlight
  • Trade

Utilisez ces dispositions pour un profil personnel utilisant principalement du texte ou pour mettre en évidence des images :

  • Backstory
  • Focus
  • Monocle
  • Montage
  • Portrait
  • Prism
  • Silhouette
  • Snapshot
  • Vanguard
  • Vignette

Utilisez ces dispositions pour mettre en évidence des pistes audio dʼun musicien ou dʼun groupe, ou pour partager un épisode de podcast :

  • Broadcast
  • Réglage
  • Session
  • Produits

Pour ajouter des pistes audio, cliquez sur Audio dans le menu Page de couverture, puis déposez un fichier .mp3 dans Ajouter une piste. Pour créer une playlist, déposez plusieurs fichiers .mp3s. Les pages de couverture prennent en charge les fichiers .mp3 jusquʼà 20 Mo par piste.

Utilisez ces dispositions pour partager un film, une bande-annonce ou une autre vidéo :

  • Debut
  • Premier
  • Projector
Remarque : la plupart des dispositions prennent également en charge les vidéos dʼarrière‑plan utilisant une URL YouTube ou Vimeo.

Pour intégrer une vidéo, cliquez sur Vidéo dans le menu Page de couverture. Ensuite, suivez nos instructions pour ajouter une vidéo en utilisant le lien direct ou le code dʼintégration.

Pour les vidéos intégrées, un bouton de lecture sʼaffiche sur la page. Lorsque le visiteur clique dessus, la vidéo sʼouvre dans une lightbox.

Lʼintégration dʼun lien vidéo ne charge pas automatiquement lʼillustration ou lʼimage miniature associée à la vidéo en question. Pour ajouter à votre page des images en lien avec la vidéo, téléchargez une image dans le panneau Médias.

Utilisez ces dispositions pour afficher un emplacement physique, tel quʼun magasin, un studio ou le lieu dʼun événement :

  • Flagship
  • Harbor

Pour ajouter une carte, cliquez sur Emplacement dans le menu Page de couverture. Saisissez une adresse pour lʼépingle, puis cliquez sur le + / - dans le panneau pour modifier le zoom par défaut.

En cliquant sur lʼépingle, lʼemplacement sʼouvre dans Google Maps. Vous ne pouvez pas ajouter plusieurs épingles à la carte.

Utilisez ces dispositions pour afficher un diaporama des derniers tweets issus dʼun fil Twitter ou dʼun filtre de recherche :

  • Echo
  • Status 

Pour connecter un fil Twitter, cliquez sur Twitter dans le menu Page de couverture, puis cliquez sur Ajouter un compte. Vous pouvez afficher les tweets de votre propre compte ou le fil de tweets dʼautres personnes en choisissant un hashtag, des mentions ou tout autre terme avec Utiliser la recherche Twitter.

Conseil pratique : pour connaître les directives de Twitter sur lʼutilisation des opérateurs de requête dans leur recherche, consultez la documentation API de Twitter.

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.
  • Assurez-vous que votre logo respecte nos bonnes pratiques ou créez un nouveau 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 :

À 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 adaptatif, les images et les vidéos sont toujours plus ou moins recadrées, en tout particulier sur les appareils mobiles. Le 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 “the 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 le type d’action.
  2. Ajoutez un libellé de bouton dans la zone Texte du bouton.
  3. Cliquez sur Modifier le formulaire ou sur Modifier la demande d’inscription à la newsletter pour ajouter un contenu.
  4. Vous pouvez donner un nom aux formulaires dans le champ Nom du formulaire. Vous ne pouvez pas donner de nom à vos demandes d’inscription à la newsletter.
  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. Click the Storage tab to tell us where to send submissions. If you use an Email Campaigns mailing list as your storage option, subscribers will receive a confirmation email when they sign up. It's not possible to disable this.
  7. Dans l’onglet Avancé, personnalisez le texte du bouton d’envoi, configurez une redirection postenvoi 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.
  • Dans certaines dispositions, lʼoption Couleur de superposition personnalisée nʼapparaît quʼaprès avoir ajouté des images au panneau Média .

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 représentent les 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

Utilisez le panneau 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 modifiez votre 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 précédemment utilisée, les modifications de style seront également réinitialisées.
  • Puisque les pages de couverture sont conçues avec un design adaptatif, leur aspect sera quelque peu différent sur un appareil mobile. Vous pouvez prévisualiser lʼaffichage de votre page sur mobile grâce à 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 votre contenu sur la page. Selon votre 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.
  • Média (non disponible pour les dispositions Emplacement) : définissez le style comme Complet ou Grille et personnalisez lʼapparence de la grille. Cochez les cases Couleur superposée automatique et Couleur de chargement automatique. Sinon, décochez ces deux options et définissez vous-même les couleurs pour chacune dʼentre elles. Vous trouverez ci-dessous plus dʼinformations sur la couleur de chargement.
  • 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.
  • Twitter (pour dispositions Twitter uniquement) : définissez la police, le style et la couleur des tweets (Corps) et de l'identifiant Twitter (Nom et Métadonnées).

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 télé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 image, la grille répètera cette image 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 la valeur de proportion, l'orientation de l'image et plus encore.

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 de chargement automatique. 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 alors 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 adaptatif.

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 FAQ sur le code personnalisé.

Pourquoi mon fil Twitter ne se met-il pas à jour ?

Le fil Twitter intégré se met à jour toutes les cinq minutes. Si vous remarquez un délai plus long, actualisez manuellement la connexion :

  1. Dans le menu Page de couverture, cliquez sur Icônes sociales, puis sur Comptes connectés.
  2. Cliquez sur votre compte Twitter.
  3. Cliquez sur Réinitialiser les données. Vous verrez un message indiquant que vos données sont en cours de réinitialisation et que votre fil sera actualisé dans quelques minutes.
  4. Cliquez sur Enregistrer.

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.
Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 382 sur 595