Créer un écran de verrouillage

Alignez le style de la page de votre écran de verrouillage avec le design de votre site.

Un écran de verrouillage s'affiche sur un site ou une page protégé(e) par mot de passe. Vous pouvez créer un design personnalisé pour l'écran de verrouillage dans le panneau Design.

Toutes les mises en page d'écran de verrouillage invitent les visiteurs à entrer un mot de passe. Ces mises en page sont dotées d'un design réactif, ce qui signifie qu'elles s'affichent correctement sur n'importe quel appareil mobile. Nous vous recommandons de créer un design personnalisé pour votre écran de verrouillage dans les cas suivants :

• Vous êtes photographe, professionnel de la création ou une agence. Utilisez l'écran de verrouillage pour permettre aux clients d'accéder à des contenus privés.
• Vous travaillez sur votre site. Utilisez l'écran de verrouillage en tant que page en construction pendant que vous apportez les dernières retouches à votre site ou à une page.
• Vous créez une page ou un site privé(e). Si votre site (ou une partie de votre site) est destiné à un usage interne uniquement, vous pouvez choisir un écran de verrouillage qui corresponde à votre marque.

Regarder une vidéo

Avant de commencer

Voici quelques bonnes pratiques pour utiliser l'écran de verrouillage.

Simplicité

L'écran de verrouillage est potentiellement la première impression que les visiteurs se font de votre site. Il doit guider les visiteurs vers une seule action : saisir un mot de passe. Les options de mise en page sont délibérément minimes pour créer un design efficace et fonctionnel.

Un seul écran de verrouillage pour toutes les pages

Votre site a un seul modèle d'écran de verrouillage pour toutes les zones protégées par un mot de passe. Il ne peut pas être personnalisé par page.

Aucun bloc

Les écrans de verrouillage se comportent un peu différemment du reste de Squarespace. Contrairement aux autres zones de contenu, les écrans de verrouillage ne sont pas créés à l'aide de sections ou de blocs. Vous commencerez par une mise en page pré-établie et la personnaliserez à l'aide d'outils d'édition.

Choisir une nouvelle disposition

Pour commencer à créer votre conception personnalisée :

1. Ouvrez le panneau Écran de verrouillage.
2. Lorsque vous ouvrez le panneau, vous accédez à un aperçu de l'écran de verrouillage, vous permettant de voir les changements en temps réel. Vous commencerez par un design vierge.
3. Cliquez sur Modifier la disposition pour en sélectionner une nouvelle.
4. Parcourez les options de disposition pour trouver celle qui vous convient. Vous changerez l’image d’arrière-plan plus tard. Concentrez-vous dans l’immédiat sur l’emplacement des champs de texte et de mot de passe.
5. Lorsque vous avez trouvé la disposition qui vous convient, survolez-la et cliquez sur Sélectionner.
6. Cliquez sur Enregistrer.

Astuce : vous pouvez ajouter sur l’écran de verrouillage un compte à rebours en tant que disposition personnalisée en ajoutant du code personnalisé. Pour en savoir plus, lisez cette publication sur Squarespace Forum.

Notez bien que les modifications de code personnalisé ne sont pas prises en charge par notre service d’assistance. Nous ne sommes donc pas en mesure de vous aider ni pour la configuration de solutions basées sur du code, ni pour leur dépannage.

Ajouter un branding et un texte

Utilisez le panneau Branding & Text (Branding et texte) pour ajouter du contenu correspondant au style de votre site. Vous pouvez :

• Ajouter un texte de marque ou un logo
• Ajouter un titre de page
• Ajouter un corps de texte plus long
• Masquer ou afficher l'icône de verrouillage

Pour ajouter une image à utiliser comme logo :

1. Sous Branding, choisissez Logo, puis cliquez sur l’icône +
2. Chargez une image depuis votre appareil en cliquant sur Charger un fichier. Vous pouvez réutiliser une image en cliquant sur Sélectionner dans la bibliothèque.
3. Pour confirmer vos modifications, cliquez sur Enregistrer.

Vérifiez que votre logo respecte nos bonnes pratiques ou créez un logo à l’aide de Squarespace Logo.

Après avoir ajouté une image, vous pouvez :

• Modifier votre image ou ajouter des effets d’image
• Définir le point focal de votre image en cliquant sur les trois points, puis sur Point focal
• Changer d’image en cliquant sur Remplacer
• Supprimer l’image en cliquant sur les trois points, puis sur Supprimer

Important :

• L’affichage du branding et du texte dépend de la disposition.
• Vous ne pouvez pas afficher à la fois un logo et un texte de marque.
• Contrairement aux autres pages, les titres et logos des écrans de verrouillage ne renvoient pas à la page dʼaccueil de votre site.
• L’onglet de l’écran de verrouillage affichera toujours le titre de votre site et le mot « Sécurisé ».

Ajouter des images ou une vidéo d'arrière-plan

Utilisez le panneau Médias pour afficher une image, une vidéo ou une couleur d’arrière-plan pleine page sur votre écran de verrouillage. Vous pouvez :

• 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 silencieuse qui sera lue en boucle
• définir une couleur d’arrière-plan.

Important :

• 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. Les images des diaporamas de l’écran de verrouillage changent automatiquement.
• L’ajout d’un grand nombre d’images haute résolution peut affecter le temps de chargement de votre écran de verrouillage.
• 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.

Utiliser 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.

Appliquer un style à l'écran de verrouillage

Utilisez le panneau Style pour modifier la typographie et les couleurs de l’écran de verrouillage. Les styles d’écran de verrouillage sont distincts des autres styles de votre site. Par conséquent, si vous cliquez sur Réinitialiser tous les styles par défaut ou sur Définir les polices système pour tout, seuls les styles de votre écran de verrouillage seront concernés. 

1. Cliquez sur Style dans le panneau Écran de verrouillage.
2. Utilisez les options pour appliquer un style à l’écran de verrouillage. Lorsque vous modifiez le style à l’aide des ajustements du panneau, l’aperçu de l’écran de verrouillage change.
3. Lorsque vous avez terminé, cliquez sur Enregistrer.

Remarque : vous ne pouvez pas appliquer de style au branding, au titre ou au corps de texte sur les sites de la version 7.1.

Champ Mot de passe

Utilisez les réglages de la section Mot de passe pour ajuster le champ Mot de passe.

Si vous sélectionnez Style : Rectangle, vous pouvez changer la couleur d’arrière-plan et la couleur de la police de manière indépendante.

Si vous choisissez Style : Souligné :

• L'ajustement de la couleur s'applique à la fois au soulignement et au texte.
• Le texte s'affiche 50 % plus clair que le soulignement.
• Si votre texte s'affiche en couleur et que vous souhaitez qu'il soit gris, déplacez le curseur du sélecteur de couleurs de droite à gauche.

Définir un mot de passe

Après avoir suivi les étapes ci-dessus, votre écran de verrouillage est prêt à l'emploi. Assurez-vous de définir un mot de passe pour tout le site ou pour la page pour toute zone que vous souhaitez masquer derrière votre nouvel écran de verrouillage.