Le style et les fonctionnalités de la famille de templates Bedford.

La famille de templates Bedford (Anya, Bedford, Bryant, Hayden) est très polyvalente : vous pouvez l’utiliser pour tout type de site, aussi bien pour un site à but non lucratif que pour un site immobilier. Grâce aux bannières et aux boutons spéciaux personnalisables, à la navigation par barre latérale et à une page Index avec défilement, vous pouvez mettre l’accent sur vos produits, sur votre mission ou sur les informations d’un événement.

Ce guide présente les fonctionnalités et les options de design de la famille de templates Bedford. Les ajustements des styles du site et la section sous laquelle ils s’affichent dans le panneau Styles du site apparaissent en gras.

Types de pages pris en charge

Bedford prend en charge les types de pages suivants :

• Pages Album
• Pages Blog - Liste
• Pages de couverture
• Pages Événements
• Pages Galerie – Standard
• Pages Index – Empilées
• Pages Disposition
• Pages Boutique - Classique

En-tête

Les visiteurs utilisent l’en-tête dans la partie supérieure de la page pour naviguer sur votre site. Dans Bedford, l’en-tête comprend le titre ou le logo du site ainsi que la navigation principale. Les slogans ne sont pas affichés. L’en-tête a une position fixe sur les pages Index.

Personnalisez le titre ou le logo du site à l’aide de ces ajustements dans En-tête du site :

• Utilisez l’ajustement Transparent sur les images de bannière pour choisir si le branding et la navigation apparaissent en superposition des bannières de page ou de la couleur d’arrière-plan de l’en-tête.
• Redimensionnez le logo à l’aide de l’option Largeur du conteneur de logo. La hauteur maximale est fixée à environ 100 pixels ; la taille du logo ne peut pas aller au-delà.

Utilisez les ajustements Navigation du site pour modifier les paramètres d’affichage de la navigation principale.

• Lorsque l’ajustement Activer le bouton de navigation est sélectionné, la dernière page de la navigation principale s’affiche sous forme de bouton. Vous pouvez modifier son apparence avec les ajustements Bouton de navigation. Les menus déroulants ne deviennent pas des boutons.
• S’il n’y a pas suffisamment de place dans la fenêtre du navigateur pour afficher tous les liens de navigation sur l’en-tête, l’icône ☰ (également appelée icône de menu ou icône hamburger) apparaît.

Bannières

Ajoutez des images et des vidéos de bannière en pleine page en haut de vos pages, puis superposez des titres, du texte et des boutons personnalisables. Vous pouvez ajouter des images et des vidéos de bannière aux éléments suivants :

• Pages Disposition
• Pages Album
• Pages et billets de blog
• Pages Événements et événements individuels
• Pages Boutique

Important :

• Vous pouvez sélectionner Transparent sur les images de bannière dans la section En-tête du site du panneau Styles du site pour afficher le contenu de l’en-tête sur la bannière.
• Vous pouvez ajouter des bannières en diaporama aux pages Disposition et Blog.
• Vous pouvez empiler plusieurs bannières sur les pages Index.
• Utilisez les ajustements Section de bannière pour modifier les polices, les couleurs, les styles des boutons et du texte superposé, et ce quelle que soit la bannière.

Bannières de page

Créez une image ou une vidéo de bannière en haut des pages Disposition, Album, Blog, Événement ou Boutique en ajoutant des images mises en avant ou des URL de vidéo dans les paramètres de la page.

Ajoutez une superposition de texte dans le champ Description de la page de l'onglet Général. N'oubliez pas que seuls les utilisateurs disposant d'autorisations de Propriétaire ou d'Administrateur sur un site peuvent ajouter une description de page. Vous pouvez formater le texte comme les en-têtes et les boutons. Le texte du titre de la page ne s'affiche pas.

Bannières diaporama

Créez une bannière en diaporama en haut d’une page Disposition en choisissant un bloc Galerie en diaporama comme premier bloc de la page.

• Le bloc Galerie ne s’affiche pas sur la page.
• Les bannières en diaporama remplacent les bannières de page.
• Les vidéos ajoutées au bloc Galerie apparaissent dans la bannière, mais elles ne sont pas lues automatiquement. Elles possèdent un contenu sonore et affichent le texte de la bannière.
• Pour un résultat optimal, sélectionnez l’option Recadrer automatiquement les images dans l’onglet Design de l’éditeur de bloc.
• Si votre bannière comporte un texte superposé, sélectionnez Afficher le titre et la description dans l’onglet Design. Le titre ne s’affichera pas.
• Les bannières de diaporama ont une hauteur fixe :
• Ordinateur : 600 pixels. Si vous sélectionnez Transparent sur les images de bannière dans la section En-tête du site du panneau Styles du site, la hauteur fixe de l’image s’agrandira à 700 pixels.
• Mobile : 300 pixels. Les appareils qui dépassent 640 pixels utilisent la même hauteur de bannière qu’un ordinateur.
• Les pages Blog créent également des bannières en diaporama à partir des publications « À la une ».

Pour ajouter du texte superposé, survolez une image et cliquez sur , puis ajoutez votre texte dans le champ Description. Si vous avez créé un lien vers une galerie existante, modifiez les descriptions sur la page Galerie.

• Vous pouvez afficher le texte sous forme d’en-tête et de bouton.
• Si le texte de la bannière en diaporama dépasse la hauteur fixe, le texte de description qui n’est pas en gras ne s’affichera pas. Le texte de description qui est en gras sera recadré.

Boutons et texte de bannière

Pour les bannières de page et les bannières en diaporama :

• Le texte en gras deviendra un en-tête.
• Le texte normal deviendra le corps de texte.
• Les liens présents sur la dernière ligne deviendront des boutons. Le lien ne peut pas contenir de texte en gras ni une autre ligne sous le lien.
• Augmentez la hauteur de la bannière de la page en insérant des espaces vides.

Conseil : Après avoir créé un lien du bouton, vous pouvez modifier le texte du bouton directement depuis l'éditeur de page. Notez que si vous supprimez tout le texte, le lien disparaîtra également et vous devrez l'ajouter à nouveau dans les paramètres de la page.

Bannières de billet de blog et d’événement

Les images mises en avant des éléments de collection s’affichent en haut des billets de blog et des événements. La hauteur de ces bannières est fixe.

• Événements : aucun texte n’est affiché dans la bannière.
• Billets de blog : le titre du billet et un type de métadonnées (à choisir avec l’ajustement Priorité des métadonnées) s’affichent sur l’image de bannière.

Ajouter un filtre de couleur

Ajoutez un filtre de couleur à toutes les images ou à toutes les vidéos de bannière à l’aide de l’ajustement Couleur de la superposition de la bannière dans la section Bannière du panneau Styles du site.

• La couleur s’affiche dans la zone de bannière lors du chargement de l’image de bannière, même si l’ajustement est défini sur Transparent.
• La couleur est affichée sur les appareils mobiles si la bannière vidéo ne peut pas être chargée et qu’aucune image de remplacement pour appareil mobile n’a été définie.

Remarques concernant les bannières

• N’utilisez pas les descriptions de page pour le contenu SEO, car ce contenu s’afficherait alors sur la page. Pour en savoir plus sur l’optimisation de votre site, consultez l’article Améliorer la visibilité de votre site dans les moteurs de recherche.
• Pour obtenir des conseils sur le recadrage des images, consultez l’article Résoudre les problèmes de recadrage.
• Pour une aide sur des questions générales, consultez l’article Ajouter des images de bannière.

Pieds de page

Dans Bedford, les zones de contenu du pied de page et du pied de page secondaire sont personnalisables à l’aide de blocs.

• Le pied de page et le pied de page secondaire peuvent inclure automatiquement du contenu, comme un bloc Liens sociaux ou un bloc Texte. Supprimez ou modifiez ces blocs pour les remplacer par votre propre contenu.
• Les liens hypertexte du pied de page et du pied de page secondaire sont soulignés.
• Les modifications que vous apportez au pied de page sont appliquées à l’ensemble de votre site.

Personnalisez le contenu du pied de page à l’aide de ces ajustements dans Pied de page :

• Personnalisez le style de la navigation en pied de page à l’aide des ajustements Navigation en pied de page.
• Utilisez l’ajustement Navigation centrale/Infos pour aligner la navigation en pied de page et les coordonnées.
• Utilisez les ajustements Informations du site pour personnaliser le style du numéro de téléphone, de l’adresse e-mail et de l’emplacement géographique définis dans la section Informations sur l’entreprise.
• Sélectionnez Masquer les informations du site pour masquer toutes les informations de contact.

Astuce : si vous ne voyez pas les ajustements Informations du site et Masquer les infos du site, prévisualisez un autre template sur votre site, puis annulez l’aperçu.

Navigation via la barre latérale

Bedford crée des barres latérales de navigation sur les pages Boutique et les pages des menus déroulants, des sites réservés aux membres et des index.

• Utilisez les ajustements Barre latérale pour modifier les polices et les couleurs, masquer les titres de la barre latérale ou masquer entièrement la navigation par barre latérale.
• La navigation par barre latérale ne prend pas en charge les blocs.
• Chaque page ajoutée à un menu déroulant ou à un site réservé aux membres apparaît sous forme de lien dans la navigation via la barre latérale. La barre latérale est présente sur toutes les pages Disposition du menu déroulant ou du site réservé aux membres.
• Les pages d’un index n’affichent la navigation par barre latérale que lorsqu’un visiteur accède à l’URL directe de cette page.
• Sur les pages Boutique, la navigation par barre latérale affiche des liens vers différentes catégories de produits. Lorsque vous cliquez sur un lien, seuls les produits de cette catégorie sont affichés.

Arrière-plan

Utilisez ces ajustements pour définir les couleurs dʼarrière-plan de votre site :

• Zone de contenu principale : Arrière-plan des pages dans Contenu principal
• En-tête : Couleur d’arrière-plan de l’en-tête dans En-tête du site
• Pied de page secondaire : Arrière-plan du pied de page secondaire dans Pied de page secondaire
• Pied de page : Arrière-plan du pied de page dans Pied de page

Polices

Modifiez le style, la taille et la couleur du texte à l’aide des ajustements Texte de la page et Titre dans Contenu principal.

L’en-tête du site, la navigation par barre latérale et les bannières de page ont leurs propres options de police et de couleur.

Pages Index

Dans Bedford, les pages Index organisent le contenu de plusieurs pages en sections empilées. Ceci permet de mettre en avant simultanément différentes images et différentes informations. Les sections de contenu sont créées à partir des pages Disposition. Elles permettent d’ajouter du texte, des boutons et d’autres blocs.

• Ajoutez des images mises en avant de page pour créer des images ou des vidéos de bannière ou pour créer un diaporama de bannière.
• Empilez plusieurs bannières en créant des sections avec des images de bannière mais aucun contenu de page. Pour les nouvelles pages, supprimez le bloc Texte par défaut. Vous verrez toujours l’espace réservé lorsque vous vous connecterez à votre site.
• Modifiez les couleurs et les polices de la page Index en utilisant les mêmes ajustements que les autres pages. Il n’y a pas d’ajustements spécifiques à la page Index.
• Le titre du site et la navigation principale restent dans une position fixe après défilement de l’écran au-delà de la première page. Utilisez l’ajustement Couleur d’arrière-plan de l’en-tête pour changer la couleur d’arrière-plan de l’en-tête fixe.
• Les pages Index prennent en charge les liens d’ancrage d’index. Lorsque les visiteurs cliquent sur ces liens, ils accèdent directement à une section spécifique de votre page Index. Pour vous faire une meilleure idée de ce dont il s’agit, cliquez sur le bouton « Découvrez nos réalisations » dans le contenu de démonstration de Hayden.
• Lorsque vous accédez à l’URL directe d’une page qui fait partie d’un index, toutes les pages de cet index s’affichent dans une navigation par barre latérale.

Pages Blog

Dans Bedford, les pages Blog s’affichent sous forme de liste dans laquelle les publications sont empilées verticalement.

Sur la page de destination :

• Un lien « En savoir plus » apparaît sous les publications ayant des extraits. Le texte et la flèche de ce lien suivent la police Texte des pages et les ajustements de style Couleur des liens de page.
• Le contenu complet des publications individuelles s'affiche sous le titre pour les publications sans extraits.

Sur les publications individuelles :

• L’image mise en avant s’affiche sous forme de bannière lorsque vous consultez un billet de blog individuel depuis son URL directe.
• Les tags, les URL sources, les commentaires, les partages et les J'aime s'affichent toujours sous la publication.
• Les catégories s'affichent toujours au-dessus de la publication.
• La navigation vers les publications précédentes et suivantes s'affiche sous les commentaires.

Personnalisez le style des pages Blog dans la section Blog du panneau Styles du site :

• Utilisez Priorité des métadonnées pour sélectionner les métadonnées (date, catégories ou nom d’auteur) qui s’affichent au-dessus du contenu de la publication sur la page de destination.
• Désélectionnez Masquer le pied de page de l’entrée de la liste pour afficher les tags, l’URL source, les commentaires, les partages et les mentions « J’aime » en dessous de la publication sur la page de destination.
• Pour centrer le titre et les métadonnées d’une publication sur la page de destination, sélectionnez Centrer le titre et les métadonnées de l’entrée.
• Affichez ou masquez le nom des auteurs du blog aussi bien dans la page de destination que dans les publications individuelles à l’aide de l’ajustement Masquer l’auteur de l’entrée. Cet ajustement n’est pas disponible si l’ajustement Priorité des métadonnées : Auteur est sélectionné.

Barre latérale

Chaque page Blog est dotée d’une barre latérale personnalisable. Cette barre latérale est affichée sur tous les billets de ce blog.

Activez les barres latérales en désélectionnant Masquer la barre latérale du blog dans la section Barre latérale du panneau Styles du site, puis ajoutez du contenu à l’aide de blocs.

Bannières diaporama

Sur la page de destination, une bannière en diaporama est créée à partir des cinq publications « À la une » les plus récents.

• Sur chaque diapositive sont affichés le titre du billet de blog, un type de métadonnées (à choisir avec l’ajustement Priorité des métadonnées) et un lien Afficher la publication.
• L’image mise en avant est affichée derrière le texte. Si la publication n’a pas d’image mise en avant, le texte s’affiche sur la couleur de la superposition de la bannière.
• Utilisez l’ajustement Contrôles du diaporama de bannière pour contrôler les éléments de navigation de la bannière en diaporama de votre blog.
• Si aucune de vos publications n’est marquée comme étant « En vedette », la bannière de page s’affiche sur la page Blog.

Mobile

Grâce au design réactif intégré de Squarespace, votre site bénéficie d’un affichage optimal quel que soit l’appareil.

• Le contenu de la barre latérale du blog s’affiche sous le contenu principal des pages Blog et des billets de blog.
• Les barres latérales de navigation sont masquées par défaut. Appuyez sur + en haut à droite pour afficher les barres latérales de navigation des pages Boutique, des pages d’un menu déroulant et des sections de page Index auxquelles les visiteurs accèdent via un lien direct.
• Les bannières en diaporama ont une hauteur fixe de 300 pixels. Si le texte de la bannière en diaporama est trop long, le texte de description est masqué.
• Vous pouvez désactiver les styles mobiles, mais nous vous déconseillons de le faire.

Un lien Haut de page s’affiche en bas de la page.

• Le lien suit les ajustements Police de la navigation en pied de page et Couleur des liens de la navigation en pied de page de la section Pied de page du panneau Styles du site. Si ces ajustements n’apparaissent pas, ajoutez temporairement des pages à votre navigation en pied de page.
• Le lien ne s’affiche pas en mode Vue par appareil.

Sur les smartphones :

• Lorsque la navigation est réduite, le symbole ☰ apparaît en haut à droite. L’icône ☰ s’affiche toujours sur les appareils mobiles, même lorsque la navigation principale est vide.
• La couleur d’arrière-plan du menu superposé est la même que celle de l’en-tête.
• Les pieds de page qui présentent des informations sur l’entreprise affichent un lien E-mail au lieu d’une adresse e-mail complète.

Options de langue

Bedford prend en charge deux options de langue :

• Vous pouvez choisir la langue du texte intégré de votre site (comme celui des formulaires et du message de confirmation des commandes).
• Vous pouvez créer un nouveau site en utilisant un template en français, en allemand, en italien, en portugais ou en espagnol.

Dépannage pour Bedford

Voici quelques problèmes courants avec ce template. Certains sont des bogues ou des problèmes connus. Même si nous prenons toujours en charge la version 7.0 de Squarespace, la correction de bugs ou de problèmes n’est pas notre priorité. Nous nous concentrons sur notre plateforme actuelle, à savoir la version 7.1.

Une page Disposition de mon index chevauche un autre contenu

Lorsqu'une page Disposition comprise dans un index comporte le slug d'URL /en-tête, votre site traitera la page entière comme en-tête de l’index. Cela peut entraîner le chevauchement des différentes pages et affecter l’édition de leur contenu.

Pour résoudre ce problème, renommez le slug d’URL de la page en évitant d’utiliser /en-tête. Veillez également à prendre en compte nos conseils de formatage et les slugs d’URL réservés.

Un des liens de la bannière ne se transforme pas en bouton

Seuls les liens présents sur la dernière ligne de la description prennent la forme d’un bouton. Si votre lien ne s’affiche pas sous forme de bouton, vérifiez le texte superposé dans la description de la page ou la description de l’image. Le lien ne doit être ni en gras, ni suivi par des sauts de ligne.

Si le lien n'est pas en gras et qu'aucune ligne ne figure en dessous, procédez comme suit :

1. Ouvrez la description de la page ou la description de l’image de cette bannière.
2. Copiez tout le texte du champ de description et appuyez sur les touches Ctrl + X (Commande + X sur Mac).
3. Appuyez sur Ctrl + Maj + V (Commande + Maj + V sur un Mac) pour coller sans mise en forme.
4. Ajoutez à nouveau le lien dans la dernière ligne. Assurez-vous qu’il n’y a pas de texte ni de saut de ligne en dessous.
5. Enregistrez, puis actualisez la page.

Le texte de description de la bannière ne s'affiche pas sur les smartphones

Sur mobile, les bannières en diaporama ont une hauteur fixe de 300 pixels. Si le texte de la bannière en diaporama est trop long, le texte de description sera masqué.

L'image de la bannière ne s'affiche pas

Pour les bannières de page :

1. Ouvrez le panneau Pages.
2. Survolez votre page et cliquez sur .
3. Vérifiez qu’une image mise en avant ou une URL de vidéo est chargée dans l’onglet Médias.
4. Si vous avez ajouté une URL vidéo, faites défiler vers le bas dans l'onglet Médias pour vérifier qu'il existe bien une image de remplacement pour appareil mobile. Cette dernière s'affiche si le chargement de la vidéo de bannière échoue.
5. Cliquez sur Enregistrer et actualisez la page.

Pour les bannières en diaporama :

1. Survolez l’aperçu de la page, puis cliquez sur Modifier pour ouvrir l’éditeur de page.
2. Assurez-vous que le bloc Galerie de diaporamas est le premier bloc de la page.
3. Survolez le bloc Galerie en diaporama et cliquez sur Modifier pour ouvrir son éditeur.
4. Assurez-vous que les images ou les vidéos sont bien présentes.
5. Cliquez sur Enregistrer et actualisez la page.

Pour les bannières de blog en diaporama, vérifiez si les paramètres de chaque publication comportent une image mise en avant.

Les pages Galerie ne prennent pas en charge les images de bannière.

Les bannières sont plus courtes sur un autre ordinateur

Le design réactif de Squarespace prend en compte à la fois la taille de la fenêtre du navigateur et la résolution de l'écran. Sur les appareils de résolution inférieure (en dessous de 1366 x 768), les bannières sont plus courtes pour s’adapter à la résolution de l’écran.

Une page de l'index est inaccessible

Dans le panneau Pages, si vous cliquez sur une page de l’index, vous accédez à l’emplacement de cette page sur la page d’index afin de découvrir son affichage dans son contexte. Vous pouvez ainsi organiser efficacement votre index.

Pour découvrir l’affichage de la page à l’extérieur de l’index, accédez à l’URL directe de la page après vous être déconnecté(e) ou en mode incognito.

Le bloc Newsletter est invisible

Lorsque vous ajoutez un bloc Newsletter à une page Disposition, l’arrière-plan du bloc par défaut est transparent avec un texte blanc. Si la page est blanche également, le texte sera invisible.

Pour résoudre ce problème, accédez à la section Bloc Newsletter du panneau Styles du site et définissez Style de la newsletter sur Clair ou modifiez la transparence à l’aide de l’ajustement Couleur d’arrière-plan.

Une bande de couleur apparaît lorsque je fais défiler l’écran de mon appareil mobile jusqu’en bas

Lorsque vous faites défiler l’écran d’un iPhone ou d’un iPad jusqu’en bas d’un site web, l’effet « élastique » d’Apple fait qu’une zone vide s’affiche après la fin de votre site.

Avec la famille Bedford, la couleur de cette zone correspond à la couleur du pied de page. Pour changer ce paramètre :

1. Ouvrez le panneau Styles du site.
2. Faites défiler l’écran jusqu’à la section Pied de page et utilisez l’ajustement Arrière-plan du pied de page.

Pour que vos couleurs soient homogènes, nous vous conseillons de choisir une couleur sans transparence, car cette zone est toujours totalement opaque. Par exemple, si votre pied de page est défini sur un rouge plutôt transparent, il apparaîtra comme rose clair, mais la zone avec « l’effet élastique » en dessous sera rouge vif.

Comment recréer le bouton « Découvrir nos réalisations » ?

Le bouton « Découvrir nos réalisations » présent dans le contenu de démonstration du template Hayden est un lien d'ancrage pour page Index.

Le lien de navigation ne s'affiche pas sous forme de bouton

Avant de résoudre ce problème, voici quelques aspects à prendre en compte :

• Seule la dernière page de la navigation principale peut s'afficher sous la forme d'un bouton.
• Les menus déroulants ne prendront pas la forme d’un bouton.

Si votre bouton de navigation ne s’affiche pas, procédez comme suit :

1. Ouvrez le panneau Styles du site.
2. Faites défiler vers le bas jusqu’à la section Navigation du site.
3. Assurez-vous d'avoir coché le bouton Activer la navigation.
4. Enregistrez, puis actualisez la page.

L'icône du menu de navigation s'affiche dans la version ordinateur

L'icône ☰ apparaît lorsque la fenêtre du navigateur ne permet pas d'afficher tous les liens de navigation. Cliquez sur l'icône de menu pour afficher un menu de navigation superposé.

L'icône de menu et le menu de navigation superposé rendent votre site convivial, adaptatif et plus facile à parcourir. Cette fonctionnalité ne peut pas être supprimée. Vous pouvez toutefois réduire la largeur et afficher tous les liens comme suit :

• Réduisez le nombre d’éléments de navigation. L’une des méthodes consiste à ajouter l’option « menus déroulants » pour créer des menus déroulants.
• Réduisez la taille de police et l’espacement de la navigation à l’aide de l’ajustement Police du lien de navigation dans la section Navigation sur le site du panneau Styles du site.
• Diminuez la largeur du titre du site ou du conteneur de logo dans la section En-tête du site du panneau Styles du site.

Mon menu mobile ne s’ouvre pas

Le menu mobile ne s'ouvre pas si vous avez ajouté une bannière vidéo à la page d'accueil avec une URL non valide ou un code intégré. Pour modifier l'URL de la vidéo :

1. Ouvrez le panneau Pages.
2. Survolez le titre de la page d'accueil dans le panneau de gauche, puis cliquez sur .
3. Cliquez sur l’onglet Médias, puis sur l’onglet Vidéo.
4. Vérifiez que le champ URL de la vidéo contient une URL valide.

La bannière de page est trop courte ou recadre l’image

Pour augmenter la hauteur des bannières de page, appuyez sur les touches Retour ou Entrée au-dessus ou en dessous de la description de votre page et ajoutez des espaces. Cette solution vous permet de résoudre les problèmes de recadrage et d’augmenter la taille globale de la bannière sur la page pour obtenir un effet spectaculaire.

Pour ajouter des espaces sous un bouton, appuyez sur Maj + Entrée ou sur Maj + Retour pour chaque ligne que vous souhaitez insérer.

Empiler des bannières dans un index

Pour empiler les images de bannière sans aucun espace vide entre elles, créez des pages Disposition qui comportent des images mises en avant, mais aucun contenu de page. Pour chaque page, seuls s’afficheront les images de bannière et le texte de superposition. Pour chaque page Disposition, veillez à supprimer le bloc Texte par défaut, car ce dernier ajoute un espace vide entre les différentes bannières.