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

La famille de templates Montauk (Julia, Kent, Montauk et Om) propose des bannières de page et un index de navigation avec miniatures polyvalent grâce auxquels vous pouvez mettre en avant vos informations, vos produits, et même votre histoire d’amour.

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

Pages prises en charge

Montauk prend en charge les types de pages suivants :

• Pages Album
• Pages Blog - Liste
• Pages de couverture
• Pages Événements
• Pages Galerie - Empilées
• pages Index - Grille
• 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 Montauk, l’en-tête comprend le titre ou le logo du site, les liens de la navigation supérieure et une zone personnalisable appelée « sous-titre de l’en-tête ».

• Définissez le type de disposition à l'aide de l'ajustement Style de la zone de contenu dans la section Options.
• Pour les dispositions à gauche et à droite, utilisez l'ajustement navigation empilée dans la section Options pour empiler les liens de navigation.
• Modifiez l’espacement dans l’en-tête et entre les liens de navigation à l’aide des ajustements Tailles et valeurs.

Choisissez les éléments à afficher dans le sous-titre de l'en-tête à l'aide de l'ajustement Sous-titre de l'en-tête dans la section Options.

• Utilisez Adresse pour afficher l’adresse et le numéro de téléphone qui sont définis dans les champs Emplacement physique des Informations sur l’entreprise.
• Utilisez Slogan pour afficher le slogan de votre site.
• Sélectionnez Personnaliser pour ajouter un texte ou un autre contenu. Quittez le panneau Styles du site et double-cliquez sur le texte d’espace réservé « Votre texte personnalisé ici » pour le remplacer par des blocs.

Bordure

Ajoutez une bordure autour de l’ensemble de votre site et en haut et en bas du contenu principal.

• Définissez la couleur à l'aide de l'ajustement Couleur de la bordure de page dans Couleurs.
• Définissez l'épaisseur à l'aide de l'ajustement Bordures de page dans la section Options.
• Masquez la bordure en sélectionnant Bordures de page : aucune dans la section Options.
• Si le style de la Zone de contenu est défini sur le logo dans le Masthead à gauche ou à droite, la bordure externe ne s'affiche pas.

Arrière-plan

Dans la section Couleurs des styles du site :

• Définissez la couleur d'arrière-plan du site avec Arrière-plan du site ou ajoutez une image d'arrière-plan avec Image d'arrière-plan du site.
• Définissez l’arrière-plan de la zone de contenu principale et de l’en-tête du site avec l’ajustement Arrière-plan de la zone de contenu.
• La couleur d’arrière-plan du site peut s’afficher brièvement en attendant que l’image d’arrière-plan soit chargée.
• Utilisez le curseur d’opacité dans l’ajustement Arrière-plan de la zone de contenu pour que l’arrière-plan soit visible, comme illustré ci-dessous.

Astuce : la bordure entoure la zone de contenu.

Pieds de page

Montauk a trois pieds de page que vous pouvez personnaliser à l’aide de blocs.

Il existe des pieds de page spécifiques à chaque page.

• Chaque élément de collection (comme les billets de blog) a son propre pied de page.
• Les pieds de page spécifiques à chaque page ne s’affichent pas sur les pages Galerie et Disposition ouvertes à partir d’un index.

Il existe également deux pieds de page présents dans l’ensemble du site :

• Pied de page d'informations - Choisissez de l'afficher ou non avec l'ajustement Masquer le pied de page d'informations dans Options. Masquez ses icônes de réseaux sociaux intégrées avec Masquer les icônes de réseaux sociaux.
• Pied de page inférieur

Bannières de page

Vous pouvez créer une bannière avec du texte superposé en haut des pages Blog, Événements et Disposition et des pages d’index. Ajoutez des bannières dans les paramètres de la page avec des images mises en avant ou des URL de vidéo.

• Utilisez la section Options des styles du site pour indiquer si les bannières, les titres de page et les lignes de séparation doivent apparaître.
• Lorsque les pages Disposition sont ouvertes à partir d’un index, les bannières ne s’affichent pas.
• Pour être affichées, les bannières vidéo doivent avoir une image de remplacement pour appareil mobile.

Largeur et hauteur

La largeur et la hauteur sont fixes :

• Largeur : les bannières de page occupent toujours toute la largeur de la zone de contenu.
• Hauteur : la hauteur est définie par l’image (ou par l’image de remplacement pour appareil mobile dans le cas des bannières vidéo). Vous pouvez la modifier dans l’éditeur d’image intégré. Pour créer une apparence uniforme, vérifiez que toutes les images de votre bannière ont la même valeur de proportion.

Texte de la bannière

Le titre et la description des pages peuvent s’afficher sur les bannières.

• Pour que le texte apparaisse, la page doit avoir une image ou une vidéo de bannière.
• Les descriptions ne s’affichent pas dans les navigateurs dont la largeur est inférieure à 767 pixels.
• La couleur du texte correspond à l'arrière-plan de la zone de contenu (Arrière-plan de la zone de contenu dans la section Couleurs).
• Modifiez les polices à l'aide des ajustements du Titre de la page et de la Description de la page dans la section Typographie.
• Les titres des pages ont une taille fixe sur les navigateurs de petite taille.
• Pour utiliser un autre texte dans les résultats de recherche, ajoutez un titre et une description SEO.

Pour masquer le texte sur toutes les pages, cochez le réglage sur Masquer les bannières de page. Vous pouvez également supprimer des descriptions de pages individuelles à partir des paramètres de page.

Pages Blog

Les pages Blog Montauk s'affichent sous forme de liste de publications empilées verticalement.

Sur la page de destination :

• L’image mise en avant de la page crée une image de bannière.
• La date et le nom de l’auteur sont affichés au-dessus de chaque publication. D’autres métadonnées sont affichées en dessous.
• Les blocs Image, Vidéos et Galerie Valorisés s'affichent sous le titre de la publication pour les publications contenant des extraits.
• Les extraits contiennent des liens « En savoir plus ».
• Le contenu complet des publications individuelles s'affiche sous le titre pour les publications sans extraits.
• Les pages Blog permettent d'afficher une barre latérale, une bannière et un pied de page.

Sur les publications individuelles :

• L’image mise en avant de la page blog crée une image de bannière.
• La date et le nom de l’auteur sont affichés au-dessus de chaque publication. D’autres métadonnées sont affichées en dessous.
• La navigation vers les articles précédents et suivants s'affiche sous les commentaires.

Personnaliser les pages Blog

Changez les couleurs du titre, du texte et des métadonnées de la publication à l'aide des ajustements Couleur du Titre 1, Couleur du texte et Couleur des métadonnées du blog de la section Couleurs.

Dans la section Styles de blog des styles du site :

• Indiquez si le nom de l’auteur doit être affiché à l’aide de l’ajustement Masquer l’auteur de l’article.
• Modifiez l'espace entre les publications avec Espacement entre les billets de blog.
• Modifiez la police du titre avec Titre du billet de blog.

Barre latérale dans le blog

Une barre latérale s’affiche sur les pages de destination et sur les billets de blog. Vous pouvez la personnaliser en utilisant des blocs. Si votre site comporte plusieurs blogs, la même barre latérale est affichée sur chacun d’entre eux. La barre latérale défile vers le haut en même temps que la page.

Dans la section Styles de blog des styles du site :

• Activez la barre latérale et choisissez où elle doit être affichée à l’aide de l’ajustement Disposition du blog.
• Pour masquer la barre latérale, sélectionnez Disposition du blog : centre.
• Définissez la taille de la barre latérale avec Largeur de la barre latérale du Blog.

Astuce : si votre barre latérale est vide lorsque vous l’activez pour la première fois, quittez Styles du site, survolez la partie supérieure de la page Blog et cliquez sur l’annotation Contenu de la barre latérale > Modifier.

Pages Galerie

Les pages Galerie Montauk empilent les images et les vidéos à la verticale. Le titre et la description de la page sont affichés sur un côté et les images sur l'autre. Personnalisez les pages Galerie à l'aide des ajustements de styles d'index suivants :

• Inversez la disposition à l'aide de l'ajustement Disposition du projet
• Changez la taille de l'image en modifiant la largeur de la barre latérale d'Index.

Texte de la galerie

Pour les titres et descriptions de page :

• Définissez la police du titre à l'aide de l'ajustement Titres des miniatures de l'index dans la section Styles d'index.
• Modifiez la taille du titre à l'aide de l'ajustement Titre 2 dans la section Typographie.
• Le texte de la description suit l’ajustement Corps de texte.
• Pour utiliser un autre texte dans les résultats de recherche, ajoutez un titre et une description SEO.
• Pour masquer le texte, supprimez le titre ou la description dans les paramètres de la page. Si vous faites cela, ajoutez un titre et une description SEO. Ces derniers n’apparaîtront pas sur votre site, mais ils seront utiles pour le SEO.

Le titre et la description des images s’affichent sous chaque image.

• Le texte suit l’ajustement Corps de texte.
• Le titre des images est toujours en gras.
• Pour masquer le texte, supprimez le titre ou la description dans l’éditeur d’image.

Remarques concernant les pages Galerie

• Ajoutez des contenus personnalisés dans la partie inférieure à l’aide des pieds de page spécifiques à chaque page.
• La navigation apparaît en bas lorsque la page est ouverte à partir d’un index.
• Montauk ne prend pas en charge les URL de destination, les URL de lien profond ni la fonctionnalité lightbox.
• Les bannières de page ne s’affichent pas.
• Pour créer une disposition différente, utilisez une page Disposition avec un bloc Galerie.

Pages Index

Les pages Index Montauk créent des grilles de miniatures qui permettent aux visiteurs de découvrir différentes pages.

• La grille de navigation affiche des images mises en avant de la page. L’image mise en avant s’affiche dans la grille même si une page possède une bannière vidéo.
• Les titres de page s’affichent en dessous des miniatures.
• Vous pouvez ajouter une bannière de page et un pied de page spécifique.
• Sur les appareils mobiles, les pages Index affichent une miniature par ligne.

Pages prises en charge

Vous pouvez ajouter les pages suivantes à un index :

• Pages Disposition
• Pages Galerie
• Pages Blog
• Pages Événements
• Pages Boutique
• Pages Album

Personnaliser le style de l’index

Personnalisez les pages Index avec les ajustements de la section style d'index suivants :

• Définissez la couleur du titre de la page à l’aide de l’ajustement Couleur du titre miniature de l’index.
• Choisissez le nombre de miniatures à afficher horizontalement à l’aide de l’ajustement Miniatures par ligne.
• Définissez la hauteur des images miniatures avec Ratio des miniatures.
• Choisissez la quantité de couleur d’arrière-plan qui doit être visible à l’aide de l’ajustement Opacité de la miniature.
• À l’aide de l’ajustement Opacité de la miniature au survol, choisissez dans quelle mesure la miniature s’estompe lorsqu’un visiteur la survole.

Pages Galerie et de Disposition dans les index

Les pages Galerie et Disposition ouvertes à partir d’un index ont une mise en forme spéciale :

• La partie supérieure de la page s’affiche sur la partie supérieure du navigateur. Les visiteurs peuvent faire défiler l’écran vers le haut pour voir l’en-tête du site.
• Les miniatures cliquables des autres pages de l’index s’affichent sous le contenu de la page, avec les éléments de navigation.
• Les bannières ne s’affichent pas sur les pages Disposition. Si la page Index comporte une bannière, celle-ci s’affiche. Dans le cas contraire, il n’y a pas de bannière.
• L’URL contient un hashtag (#). La mise en forme spéciale ne s’affiche pas si l’URL de la page ne comporte pas de #.

Titres et descriptions des pages

Le titre et la description des pages peuvent s’afficher :

• Sur la bannière de la page pour les pages de Disposition, Blog, Événements et les pages Index.
• Sur la page pour les pages Galerie.

Icônes sociales

Le pied de page d’information comporte des icônes sociales intégrées facultatives.

Astuce : dans le pied de page inférieur, le contenu de démonstration Montauk comprend un bloc Liens sociaux que vous pouvez supprimer.

Polices

Pour le texte sur votre site :

• Modifiez les polices et les tailles à l'aide des ajustements de la section Typographie.
• Modifiez les couleurs à l'aide des ajustements de la section Couleurs.

Barre latérale

Montauk dispose d’une barre latérale sur les pages Blog et les billets de 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.

• La navigation s’affiche sous forme d’un lien Menu situé en haut au centre.
• Le lien Menu s’affiche toujours sur les appareils mobiles, même lorsque la navigation supérieure est vide.
• L'arrière-plan du menu correspond à l'Arrière-plan de la zone de contenu dans la section Couleurs.
• Les images de galerie sont empilées en dessous de la description de la page.
• Vous pouvez désactiver les styles mobiles, mais nous vous déconseillons de le faire.

L’apparence des bannières peut être différente sur les appareils mobiles :

• Les descriptions de page ne s’affichent pas sur les smartphones et dans les navigateurs dont la largeur est inférieure à 767 pixels.
• Il arrive parfois que les bannières vidéo ne s'affichent pas sur les appareils mobiles, en fonction de la vitesse de connexion et de la version du navigateur utilisé par les visiteurs. Définissez une image de remplacement pour appareil mobile, qui apparaîtra lorsqu'une bannière vidéo ne peut être chargée.
• Découvrez nos conseils pour résoudre les problèmes liés aux bannières mobiles et au recadrage des images d’arrière-plan.

Options de langue

Dans cette famille, les templates Julia, Kent et Om prennent 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.

Résolution de problème avec le template Montauk

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 bogues ou de problèmes n’est pas notre priorité. Nous nous concentrons sur notre plateforme actuelle, à savoir la version 7.1.

Les personnes peuvent-elles confirmer leur présence à un événement sur notre site ?

Vous pouvez créer un bouton RSVP sur une page de disposition à l'aide d'un bloc Formulaire. Ce bloc collecte des informations auprès des visiteurs. Assurez-vous que l'option Activer l'effet lightbox est cochée dans l'onglet Avancé de l'éditeur de blocs Formulaire. Le mode Lightbox définit le formulaire pour qu'il s'ouvre lorsqu'on clique sur un bouton plutôt que sur la page elle-même.

Pour voir un exemple de ce à quoi cela ressemble en pratique, consultez le contenu de démonstration du template Naomi :

Comment modifier la police de l'en-tête de ma page Galerie ?

Les ajustements de la police et de la taille de l'en-tête de la page Galerie s'effectuent de façon séparée :

• Utilisez l'ajustement Titres des miniatures d'index dans la section Styles d'index des styles du site pour modifier la police.
• Utilisez l'ajustement Titre 2 de la section Typographie pour modifier la taille.

Comment recréer des pages de cours ou d'ateliers à partir du contenu de démonstration du template Om ?

Les pages de cours sont des pages avec une Disposition personnalisée qui contient des blocs Formulaire. Pour intégrer l'option de réservation, consultez la page Ajouter une réservation en ligne à votre site.

La page des ateliers affichée dans le contenu de démonstration est une page Événements. Consultez l'article sur les pages Événements pour obtenir de l'aide.

Comment recréer la page de liste de mariage à partir du contenu de démonstration du template Julia ?

Les liens de liste de mariage présents dans le contenu de démonstration sont créés sur une page avec une disposition contenant un bloc Galerie en grille, qui utilise des images avec des URL de destination.

Comment mettre à jour les informations relatives à mon entreprise ?

Les informations relatives à votre entreprise peuvent s'afficher sous forme de sous-titre dans l'en-tête de votre site. Les informations qui s'afficheront seront celles renseignées dans la section Emplacement physique du panneau d'informations de votre entreprise.

Pour les modifier :

1. Ouvrez le panneau Paramètres et cliquez sur Informations sur l’entreprise.
2. Faites défiler l'écran jusqu'à Emplacement physique et mettez à jour les informations.
3. Cliquez sur Enregistrer.

Veuillez noter que les modifications apportées aux champs d'adresse professionnelle n'apparaîtront pas dans le sous-titre.

Le menu mobile ne s'ouvre pas sur mon appareil

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.

L'image d'arrière-plan n'est pas fixe sur les appareils mobiles

Bon nombre de navigateurs mobiles, comme iOS, ne prennent pas en charge les images d'arrière-plan fixes. Pour obtenir un effet similaire, essayez les options de style de l'image d'arrière-plan Taille : Couverture et Taille : Contenir. Notez que les paramètres de style de l'image d'arrière-plan s'appliquent à votre site sur les deux versions (mobile et ordinateur).

Pour en savoir plus, consultez nos conseils pour résoudre des problèmes liés au design réactif.

Mon pied de page d'informations a disparu

Si l'option Modifier l'annotation du pied de page d'informations n'apparaît pas :

1. Ouvrez le panneau Styles du site.
2. Faites défiler jusqu'à la section Options.
3. Décochez Masquer le pied de page d'informations.
4. Cliquez sur Enregistrer.
5. Quittez les styles du site et actualisez la page. L'annotation doit apparaître.

Les lignes de mon bloc ne s'affichent pas

La couleur des lignes de bloc est définie à l'aide de l'ajustement Couleur de la bordure de page dans la section Couleurs des styles du site. Assurez-vous que la transparence est définie sur opaque pour que toutes les lignes et les bordures restent visibles.

Ma navigation s'affiche sur deux lignes

Si les liens de votre navigation supérieure ne tiennent pas sur une seule ligne, la navigation supérieure s'affichera alors sur deux lignes.

Si vous avez sélectionné Style de zone de contenu : logo en en-tête à droite ou logo en en en-tête à gauche et que la navigation supérieure est trop longue pour s'afficher à côté du titre ou du logo du site, la navigation supérieure se déplacera en dessous.

Si vous n'aimez pas l'apparence de votre navigation supérieure, il existe plusieurs façons d'en ajuster la disposition :

• Réduisez le nombre de pages dans la navigation. L’une des méthodes consiste à utiliser un menu déroulant.
• Renommez les pages pour que leur nom soit plus court.
• Dans la section Tailles et valeurs des styles du site, réduisez l'espacement entre les liens de navigation pour les rapprocher, ou augmentez la largeur sur les côtés pour augmenter la largeur de l'ensemble du site.

Le titre et la taille de la description de ma page ne changent pas

Le titre et la description des pages ont une taille de police fixe dans les navigateurs dont la largeur est inférieure à 480 pixels. Selon la taille de votre écran, la fenêtre d’aperçu peut ne pas être suffisamment large lorsque vous êtes dans le panneau Styles du site pour voir les modifications de taille que vous effectuez.

Si c'est le cas, enregistrez vos modifications, quittez les styles du site et ouvrez l'aperçu complet pour voir le titre de la page mis à jour et la hauteur de la description. Vous pouvez également enregistrer les modifications et afficher votre site dans une fenêtre de navigateur privé distincte.

Le titre de ma page paraît plus grand dans les navigateurs plus étroits

Les titres des pages s'affichent au-dessus des bannières. Pour les navigateurs dont la taille est inférieure à 1041 pixels, leur taille est fixe :

• 767 pixels ou plus étroit - La taille de la police est de 21 px
• 768 - 1040 pixels - La taille de la police est de 52 px

Dans les navigateurs de 1041 pixels ou plus, définissez la taille à l'aide de l'ajustement Titre de la page de la section Typographie des styles du site.

Le titre de la page ne s'affiche pas

Le titre d'une page dans un template Montauk doit apparaître au-dessus d'une bannière de page. Si le titre de votre page ne s'affiche pas :

• Assurez-vous d’avoir défini une image mise en avant ou une URL de vidéo pour cette page.
• Dans la section Options des styles du site, assurez-vous que Masquer le pied de page d'informations et Masquer la bannière de page ne sont pas cochés.

La bannière vidéo ne s'affiche pas

Si votre bannière vidéo ne s'affiche pas, ajoutez une image de remplacement pour appareil mobile :

1. Ouvrez les paramètres de la page.
2. Dans l'onglet Médias, cliquez sur Vidéo.
3. Faites défiler l'écran vers le bas et faites glisser une image dans l'outil de chargement d'images.
4. Cliquez sur Enregistrer.

À retenir :

• La hauteur de l'image de remplacement pour appareil mobile définit la hauteur de la bannière.
• Pour les pages Index, la vidéo crée une bannière sur la page de destination de l'index, mais les miniatures de la grille d'index n'affichent pas de vidéos.

Il y a une ligne horizontale sur ma navigation supérieure et les boutons J'aime et partager

Cette ligne est visible lorsque l'ajustement de l'Arrière-plan de la zone de contenu dans la section Couleurs des styles du site est sur transparent ou partiellement opaque. Vous pouvez modifier l'ajustement de l'Arrière-plan de la zone de contenu ou rendre la Couleur de la bordure de la page transparente pour masquer complètement la ligne.

Pourquoi mon pied de page contient-il deux ensembles de liens vers des réseaux sociaux ?

Le template Montauk possède deux options intégrées pour afficher les icônes de réseaux sociaux : dans le pied de page d'informations et dans un bloc Liens sociaux dans le pied de page inférieur (partie du contenu de démonstration).

Par défaut, le pied de page d'informations et ses icônes de réseaux sociaux sont masqués, et le bloc Liens sociaux s'affiche dans le pied de page inférieur.

• Pied de page d'informations : décochez la case Masquer le pied de page d'informations dans la section Options des styles du site pour afficher les icônes. Utilisez ensuite l'ajustement de style d'icône de réseaux sociaux pour modifier leur apparence, ou utilisez l'ajustement Masquer les icônes de réseaux sociaux pour les masquer.
• Pied de page inférieur : modifiez le bloc Liens sociaux pour modifier leur apparence, ou supprimez le bloc pour les enlever.