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

Famille de template 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 d’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 décrit les fonctionnalités et les options de design proposées par la famille de templates Bedford. Les ajustements du panneau Styles du site sont en gras et renvoient vers la liste complète des ajustements Bedford pour vous aider à naviguer dans le panneau.

Astuce : les pages d’aperçu en direct des templates Anya, Bedford, Bryant et Hayden montrent des sites de clients réels qui utilisent ces templates.

Types de pages pris en charge

Bedford prend en charge les types de pages suivants :

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 d’index.

Personnalisez le titre ou le logo du site avec les ajustements de la section 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 de la section 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 dossiers 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 ☰ apparaît. 

en-tête de bedford

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 Produits

À retenir :

  • Vous pouvez sélectionner Transparent sur les images de bannière dans En-tête 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 d’index.
  • Utilisez les ajustements de la section 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 Produits en ajoutant des images miniatures ou des URL de vidéo dans les paramètres de la page.

Ajoutez un texte superposé dans le champ Description de la page de l’onglet Général. Vous pouvez mettre en forme le texte en utilisant des en-têtes et des 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 du 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.
  • Slideshow banners have a fixed height:
    • Ordinateur : 600 pixels. Si l’en-tête est défini sur Transparent sur les images de bannière, 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 billets « À la une ». 

Pour ajouter du texte superposé, cliquez sur une image et 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é.

bannière en diaporama

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

  • Bold text formats as a header.
  • 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

texte superposé dans les paramètres de la page

banner text and buttons.jpg

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

Les miniatures 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 élément 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 Section de bannière

  • 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

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. 

Utilisez les ajustements Pied de page pour personnaliser le style du 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.
Remarque : si vous ne voyez pas les ajustements Infos 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 dans les dossiers et les index, et des barres latérales de navigation par catégorie sur les pages Produits.

  • 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 dossier apparaît sous forme de lien dans la navigation par barre latérale. La barre latérale est affichée sur toutes les pages Disposition dans le dossier.
  • 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 Produits, 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.

Products Page sidebar navigation.jpg

Arrière-plan et polices

Utilisez les ajustements Contenu principal pour personnaliser le style de la zone de contenu principale :

  • Définissez la couleur de l’arrière-plan à l’aide de l’ajustement Arrière-plan de la page.
  • Modifiez le style du texte, la taille et la couleur à l’aide des ajustements Texte de la page et Titre

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 d’index

Dans Bedford, les pages d’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 miniatures 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 bannières mais aucun contenu de page. Pour les nouvelles pages, supprimez le Bloc de 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 d’index en utilisant les mêmes ajustements que les autres pages. Il n’y a pas d’ajustements spécifiques à la page d’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 d’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 d’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

sections de page d’index avec navigation fixe

Pages Blog

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

Sur la page de destination :

  • Un lien « En savoir plus » apparaît sous les articles avec extraits. Le texte et la flèche de ce lien appliquent la police du texte des pages et les ajustements de style de la couleur du lien de page.
  • Le contenu complet des articles individuels s'affiche sous le titre pour les articles sans extraits.

Sur les articles individuels :

  • L'image miniature s'affiche sous forme de bannière lorsque vous consultez un article de blog individuel depuis son URL directe.
  • Les tags, les URL sources, les commentaires, les partages et les J'aime s'affichent toujours.
  • La navigation vers les articles précédents et suivants s'affiche sous les commentaires.

Personnalisez le style des pages Blog avec les ajustements de la section Blog :

  • Utilisez Priorité des métadonnées pour définir la date, les catégories ou le nom de l’auteur au-dessus du contenu du billet.
  • 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 du billet.
  • Pour centrer le titre et les métadonnées d’un billet, sélectionnez Centrer le titre et les métadonnées de l’entrée.
  • Affichez ou masquez le nom des auteurs du blog à l’aide de l’ajustement Masquer l’auteur de l’entrée. Cet ajustement est non disponible si l’ajustement Priorité des métadonnées : Auteur est sélectionné. 

billet de blog

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, puis ajoutez du contenu à l’aide de blocs

barre latérale de la page blog

Bannières diaporama

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

  • Sur chaque diapositive sont affichés le titre du billet de blog, un élément de métadonnées (à choisir avec l’ajustement Priorité des métadonnées) et un lien Afficher le billet.
  • L’image miniature est affichée derrière le texte. Si le billet n’a pas d’image miniature, 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 aucun de vos billets n’est marqué comme étant « En vedette », la bannière de page s’affiche sur la page Blog.

Mobile

Grâce au design adaptatif 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 du blog et des pages d'accueil de blog. 
  • Les barres latérales de navigation sont masquées par défaut. Appuyez sur + dans le coin supérieur droit pour afficher les barres latérales de navigation des pages Produits, des pages d'un dossier et des sections de page d'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. 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. 

vue smartphone et tablette

Options de langue

Bedford prend en charge deux options de langue : 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 54 sur 98
Famille de template Bedford