Activez et créez un écran de verrouillage qui reflète le style de votre site.

Si vous êtes encore en train de créer votre site ou si vous souhaitez en limiter l’accès, vous pouvez masquer votre site ou certaines pages en les protégeant par un mot de passe. Leur contenu ne sera alors pas accessible au public. Les visiteurs doivent donc saisir un mot de passe sur un écran de verrouillage pour accéder à votre site ou aux pages concernées.

Astuce : envisagez de monétiser le contenu de votre site en créant un site réservé aux membres.

Suivez ce guide pour découvrir comment créer et personnaliser votre écran de verrouillage.

Activer un écran de verrouillage

Les écrans de verrouillage sont disponibles pour les sites payants et les sites d’essai.

Pour activer un écran de verrouillage :

1. Définissez un mot de passe pour l’ensemble du site ou pour une page spécifique.
2. Créez et personnalisez votre écran de verrouillage. Pour en savoir plus, consultez les sections ci-dessous.
3. Partagez le mot de passe avec toute personne souhaitant prévisualiser votre site.

Personnaliser votre écran de verrouillage

Pour que votre écran de verrouillage reflète le style de votre marque ou de votre site, vous pouvez créer un design personnalisé dans le panneau Design. Voici quelques exemples de cas où un écran de verrouillage personnalisé peut s’avérer utile :

• Si vous êtes un photographe, un professionnel de la création ou une agence, vous pouvez utiliser l’écran de verrouillage pour permettre à vos clients d’accéder à des contenus privés.
• Si vous n’avez pas encore terminé votre site ou votre page, vous pouvez utiliser l’écran de verrouillage pour afficher une page « En construction ».
• Vous pouvez utiliser un écran de verrouillage pour créer un site ou une page destinés à un usage interne uniquement.

Voici un exemple d’écran de verrouillage utilisé comme page « En construction » :

Bonnes pratiques

Tous les écrans de verrouillage sont conçus selon un design réactif afin qu’ils bénéficient d’un affichage optimal, quel que soit l’appareil. Toutefois, il vaut mieux suivre certaines bonnes pratiques.

Un design épuré

L’écran de verrouillage sera peut-être la première impression que les visiteurs se feront de votre site. Il doit guider les visiteurs vers une seule action : saisir un mot de passe. Les options de disposition 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 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 commencez par une disposition prédéfinie et vous la personnalisez à l’aide d’outils d’édition.

Regarder une vidéo

Choisir une nouvelle disposition

Pour choisir la disposition de votre écran de verrouillage, procédez comme suit :

1. Ouvrez le panneau Écran de verrouillage.
2. Lorsque vous ouvrez le panneau, vous accédez à un aperçu de l’écran de verrouillage sur lequel les changements apparaissent en temps réel. Vous commencerez par un design vierge.
3. Cliquez sur Changer la disposition afin de sélectionner une nouvelle disposition pour votre écran de verrouillage. Vous changerez l’image d’arrière-plan plus tard. Dans l’immédiat, concentrez-vous sur l’emplacement des champs de texte et de mot de passe.
4. Pour choisir une disposition, survolez-la et cliquez sur Sélectionner.
5. 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 à partir de 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
• 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 de plusieurs 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 de l’aperçu. Vous pouvez changer la couleur d’arrière-plan dans 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 affecté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.