Fonctionnalités du modèle


Bouton de navigation

Vous souhaitez placer un appel à l’action percutant dans votre en-tête ? Cochez l’option d’ajustement Activer le bouton de navigation pour transformer le dernier lien de votre navigation principale en bouton.


Zone de bannière

Il existe plusieurs manières d'utiliser la zone Bannière en haut de la page.

 

Bannière de page

Pour créer une grande bannière sur une page, une liste de blog, une liste d’événements, une liste de produits ou encore une page Album, accédez aux paramètres (dans le gestionnaire du site). Téléchargez une miniature et ajoutez votre texte dans le champ Description.

  • Le texte en gras devient un titre
  • Les liens présents sur la dernière ligne prennent la forme d’un bouton

 

Bannière de page en diaporama

Si vous souhaitez afficher une bannière en diaporama grand format sur les collections, vous pouvez placer un bloc Galerie tout en haut de la page, avant les autres blocs.

  • Le bloc Galerie doit être défini sur le mode diaporama
  • Comme pour la bannière de page, si vous ajoutez du texte en gras ou des liens dans la description de chaque diapositive de la galerie, vous créerez des titres et des boutons.

 

Diaporama en vedette du blog

Créez un diaporama de billets en vedette dans la vue en liste du blog en mettant en avant différents billets. Vos cinq billets en vedette les plus récents seront automatiquement placés dans un diaporama en haut de la liste du blog.

 

Bannière de l’élément du blog

Dans la vue Éléments d’un billet de blog, la miniature du billet sera automatiquement placée dans une bannière en haut de la page, accompagnée du titre du billet et des métadonnées de votre choix.

 

Bannière d’image simple

Vous préférez un en-tête moins sophistiqué, sans mots et sans boutons ? Il vous suffit de télécharger une miniature dans une page, une liste de blog, dans des événements, dans une liste de produits ou dans un Album afin de l’afficher sur un fin bandeau en haut de la page.

 

Aucune zone Bannière

Si vous préférez ne pas utiliser la bannière, ne téléchargez aucune miniature, et elle ne s’affichera pas.

 


Barre latérale

Le modèle Hayden propose des barres latérales qui s’affichent comme suit :

  • Navigation dossier, à gauche de toute page à l'intérieur d'un dossier
  • Navigation par catégorie, à gauche de chaque liste de produits avec des catégories
  • Barre latérale du blog, sur le côté droit des pages Blog

Vous pouvez afficher le titre du dossier ou de la collection de produits. Si vous préférez ne pas afficher les barres latérales, vous pouvez les masquer entièrement avec une option de l’Éditeur de style.


Index

L’index du modèle Hayden vous permet d’empiler plusieurs pages les unes sur les autres. Chaque page d’index présentera toutes les options de bannière disponibles pour les autres pages du site, dont les options Bannière de page, Bannière de page en diaporama et Bannière à images simples.


L’index comporte également une navigation fixe, qui s’affiche lorsque vous faites défiler et que vous dépassez la première page de l’index. Cette navigation est disponible uniquement lorsque vous parcourez un index du modèle Hayden.

 

Options de l’éditeur de style


En-tête du site

Couleur d'arrière-plan de l'en-tête - modifiez la couleur d'arrière-plan de la barre d'en-tête figurant en haut de la page.

Police + couleur du titre du site - si aucune image de logo n'est téléchargée, définissez la police, les propriétés des caractères, ainsi que la couleur du titre du site.

En-tête transparent - Si une image de bannière, quel que soit son type, est téléchargée sur une certaine page, l’arrière-plan de l’en-tête devient transparent. Les pages sans images de bannière conserveront la couleur d’arrière-plan de l’en-tête, tout comme les listes déroulantes des dossiers.

Largeur du conteneur de logo - définissez la largeur du conteneur de logo, en modifiant sa taille. Si la taille du conteneur de logo est inférieure à la taille de l’image de logo téléchargée, cette dernière diminuera. En revanche, si le conteneur de logo est plus grand, le logo ne sera pas plus grand que l’image téléchargée. La navigation occupera l'espace restant à droite du conteneur de logo.

Largeur du conteneur de titre du site - définissez la largeur du conteneur de titre du site. Cette fonction permet de contrôler l'habillage du titre du site.


Navigation du site

Police + couleur des liens de navigation – Définissez la police, les propriétés des caractères et la couleur des liens de navigation.

Lien de navigation (actif) - Définissez la couleur des liens de navigation en cas de survol.

Activer le bouton de navigation - transformez le dernier lien de la navigation en bouton (non applicable aux dossiers).

Style du bouton de navigation - Vous avez le choix entre Gras, Contour et En relief.

Style des coins du bouton de navigation – Choisissez un bouton carré, arrondi ou en forme de pilule.

Couleur du bouton de navigation – Définissez la couleur d’arrière-plan du bouton (contour et couleur du texte si le style de bouton « Contour » est sélectionné).

Police + couleur de texte du bouton de navigation - définissez la police, les propriétés des caractères, ainsi que la couleur du bouton de navigation.


Section de bannière

Couleur de superposition de la bannière – Définissez la couleur à superposer aux images des bannières.

Police + couleur du titre de la bannière - définissez la police, les propriétés des caractères, ainsi que la couleur des titres des bannières.

Police + couleur du texte de la bannière - définissez la police, les propriétés des caractères, ainsi que la couleur du corps de texte des bannières.

Style du bouton de bannière - Vous avez le choix entre Gras, Contour et En relief.

Style des coins du bouton de bannière - Choisissez un bouton carré, arrondi ou en forme de pilule.

Couleur du bouton de bannière – Définissez la couleur d’arrière-plan du bouton (contour et couleur du texte si le style de bouton « Contour » est sélectionné).

Police + couleur du bouton dans la bannière - définissez la police, les propriétés des caractères, ainsi que les couleurs du bouton figurant dans la bannière.


Contenu principal

Arrière-plan de la page – Définissez l’arrière-plan de la zone de contenu principale.

Police + couleur du texte de la page - définissez la police, les propriétés des caractères, ainsi que la couleur du corps de texte.

Couleur des liens de page - définissez la couleur des liens du corps.

Couleur des métadonnées des pages - Définissez la couleur du texte des métadonnées (auteurs du blog, dates de publication, etc.).

définissez la police, les propriétés des caractères, ainsi que la couleurTitre 1,Titre 2,etTitre 3.

Police + couleur des citations - Définissez la police, les propriétés des caractères, ainsi que la couleur des blocs Citation.


Barre latérale

Masquer la barre latérale de la page – Choisissez de ne pas afficher la navigation par dossier sur la gauche (sur les pages d’un dossier).

Masquer la barre latérale Produits - choisissez de ne pas afficher la navigation par catégorie de gauche dans la vue Liste des produits.

Masquer le titre de la barre latérale – Choisissez de ne pas afficher le titre dans la barre latérale.

Police + couleur des titres de sous-navigation – Définissez la police, les propriétés des caractères et la couleur des titres dans Navigation par dossiers de pages et Navigation par catégorie de produits.

Police + couleur des liens de sous-navigation - Définissez la police, les propriétés des caractères, ainsi que la couleur des liens de sous-navigation.


Pied de page secondaire

Arrière-plan du pied de page secondaire – Définissez la couleur d’arrière-plan de la zone de pied de page secondaire située juste au-dessus du pied de page.

Couleur du texte du pied de page secondaire - Définissez la couleur du texte du pied de page secondaire.


Pied de page

Arrière-plan du pied de page - Définissez la couleur d’arrière-plan de la zone de pied de page située tout en bas.

Couleur du texte du pied de page - Définissez la couleur du texte du pied de page.

Police + couleur de la navigation en pied de page - Définissez la police, les propriétés des caractères ainsi que la couleur des liens de la navigation en pied de page.

Lien de navigation du pied de page (actif) - définissez la couleur des liens de navigation du pied de page lorsqu'ils sont survolés.

Navigation centrale/Informations - Choisissez si la navigation en pied de page et les informations du site seront alignées à gauche ou au centre.

Masquer les infos du site - masquez les informations du site dans le pied de page.


Blog

Meta priorité - choisissez si la date ou la catégorie d'un billet apparaissent au-dessus du titre dans la vue Liste du blog.

Masquer l’auteur de l’entrée - Masquez la ligne comportant le nom de l’auteur du billet de blog. Cette option est pratique pour les blogs avec un seul auteur.

Masquer le pied de page entrée de liste - choisissez de ne pas afficher le pied de page (Commentaire + Like + Partager) dans la vue Liste du blog.


Styles de la galerie

Navigation pour les images de galerie – Détermine le type de navigation disponible sur la page pour les images de galerie.

Superposition des informations de la galerie - Sélectionnez le type d’affichage utilisé pour le titre et la légende des images.

Valeur de proportion Galerie - contrôle la valeur de proportion (largeur/hauteur) de la diapositive active de la galerie.

Style des flèches Galerie - Détermine le style des flèches utilisées pour parcourir les diapositives.

Transitions de galerie - sélectionnez les styles de transition utilisés pour animer les diapositives en cours de visualisation.

Afficher des flèches dans la galerie – Utilisez des flèches pour faire défiler les diapositives.

Recadrage automatique de la galerie – Choisissez de recadrer automatiquement les diapositives en fonction du rapport sélectionné.

Lecture automatique de la galerie - optez pour un défilement automatique des images de la galerie, sans aucune intervention de la part des utilisateurs.

Lecture en boucle de la galerie - Configurez le défilement de votre galerie pour revenir à la première diapositive après avoir affiché la dernière.

Vitesse de lecture automatique de la galerie - Précisez la vitesse à laquelle la galerie s’arrête sur la diapositive active.

Taille des miniatures de la galerie – Contrôlez la hauteur des miniatures utilisées dans la navigation de la galerie.

Arrière-plan des flèches Galerie - précisez la couleur utilisée pour la forme des flèches de la galerie.

Couleur des flèches Galerie - Précisez la couleur des flèches.

Couleur du cercle de la galerie - Précisez la couleur utilisée pour les flèches circulaires de la galerie.

Arrière-plan des informations de galerie - précisez la couleur d'arrière-plan utilisée pour le titre et la légende des images. 


Styles Événements

Format de l'heure des événements - basculez entre les formats 24 heures ou AM/PM pour afficher l'heure des événements.

Icônes événements - activez les icônes dans l'affichage de l'adresse et de l'heure des événements.

Miniatures des événements - Affichez une image miniature dans la vue en liste.

Taille de la miniature de l’événement - Contrôlez la taille (rapport largeur:hauteur) de l’image miniature de chaque événement.

Étiquette affichant la date de l’événement - Activez la superposition de la date sur la miniature de l’événement.

Heure sur l’étiquette affichant la date de l’événement - Ajoutez l’heure de l’événement dans la superposition de la date.

Extraits d’événements - Affichez un extrait optionnel du texte des événements dans la vue en liste, si disponible.

Date sur la liste d'événements - affichez la date complète (jour, mois, année) de l'événement dans la vue Liste.

Heure dans la liste Événements - affichez le créneau horaire (heure de début et de fin) d'un événement dans la vue Liste.

Adresse dans la liste des événements - Affichez l’adresse de l’événement (si disponible).

Liens Événements iCal/gCal - affichez les liens permettant d'ajouter des événements aux calendriers Apple ou Google.

Boutons « J’aime » et « Partager » pour les événements - Affichez les boutons « J’aime » et « Partager » pour les événements.

Affichage compact Événements - activez une vue empilée simplifiée des événements dans la vue Liste.

Affichage compact Calendrier des événements - activez un affichage simplifié du calendrier, optimisé pour les zones de petite taille.


Styles des produits

Couleur d’arrière-plan du produit – Définit la couleur derrière l’image du produit.

Couleur de superposition Produits - détermine la couleur de la superposition lorsque les titres de la liste de produits sont définis sur « superposition ».

Produits par ligne - détermine le nombre de produits qui seront affichés sur chaque ligne de la liste de produits.

Titres de la liste de produits - contrôle la position du titre d'un produit dans la liste des produits.

Alignement de la liste de produits – Définit l’alignement du titre d’un produit dans la liste des produits.

Taille du produit – Sélectionnez la valeur de proportion de la photo du produit dans la liste des produits.

Recadrage automatique de l'image du produit - détermine si les images des produits remplissent ou s'adaptent à la zone d'image.

Taille de la galerie Produits - sélectionnez la valeur de proportion des images de la galerie Produits sur la page du produit.

Recadrage automatique de la galerie des produits – Détermine si les images des produits doivent remplir la zone de galerie ou s’y insérer.

Afficher le prix des produits – Une fois activée, cette option permet d‘afficher les prix sur la page Liste des produits.

Afficher la navigation des produits - Affiche le lien « Retour à la boutique » sur la page du produit.