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 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 :

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 à 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 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 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 d’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 miniatures 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 billets « À la une ».

Pour ajouter du texte superposé, survolez une image et cliquez sur l'icône engrenage, 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é.

bannière en diaporama

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.

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

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 dossiers, des espaces 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 dossier ou à un espace membres apparaît sous forme de lien dans la navigation de la barre latérale. La barre latérale est présente sur toutes les pages Disposition du dossier ou de l’espace 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.

Products Page sidebar navigation.jpg

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 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 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 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 billets 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 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 sous le billet.
  • Les catégories s'affichent toujours au-dessus du billet.
  • La navigation vers les articles précédents et suivants 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 du billet 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 du billet sur la page de destination.
  • Pour centrer le titre et les métadonnées d’un billet 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 billets individuels à 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é.

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 du panneau Styles du site, 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 type 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 billetsde 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 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 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.

vue smartphone et tablette

Options de langue

Bedford prend en charge deux options de langue :

Dépannage pour Bedford

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. Dans le Menu principal, cliquez sur Pages.
  2. Survolez votre page et cliquez sur “the.
  3. Assurez-vous qu’une image miniature 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 billet comportent une image miniature.

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

paramètres de style du bloc newsletter

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. Dans le Menu principal, cliquez sur Design, puis sur 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 d'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 dossiers ne prendront pas la forme d’un bouton.

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

  1. Dans le Menu principal, cliquez sur Design, puis sur 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 à utiliser des dossiers 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. Dans le Menu principal, cliquez sur Pages.
  2. Survolez le titre de la page d'accueil dans le panneau de gauche, puis cliquez sur “the.
  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 miniatures, 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.

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