Block : onepage nav

Ce block possède une double fonction : créer une landing page plus ou moins indépendante du reste de votre site ou créer un élément de navigation interne à votre page.

Contenu

  • Menu (groupe) : c’est ici que vous allez construire votre menu de navigation interne à la page ou à votre landingpage. Chaque item se décompose ainsi :
    – Titre (texte) : l’intitulé de vote élément de navigation
    – Type (choix) : le type de lien, pouvant être un lien interne, un lien externe, ou, cas plus spécifiquement utile ici, un élément de votre page (inner section), identifié par son attribut ID. Il est donc impératif que vous définissiez un ID différent pour chaque section de votre page dans les réglages communs de chacun des blocks (general > custom section identifier). Selon votre choix vous aurez d’autres champs à renseigner
    – Section ID (url, choix ou texte)  : selon le choix précédent, ce champs sera à renseigner de l’url de destination (liens externes), de l’url de la publication (liens internes) ou de l’identifiant du block/section associé (inutile de préciser le #)
    – Class(es) (texte) : la ou les classes CSS à attribuer à cet élément de navigation. Bon à savoir : l’élément courant (celui correspondant à la section visible à l’écran) se verra attribuer automatiquement la classe « active » (possibilité donc de lui attribuer des propriétés CSS dans l’onglet custom settings > custom CSS).
    – Vertical offset (nombre) : permets de définir, dans le cas d’une lien de  type inner section, le décalage vertical de la section appelée par le lien
  • Before menu content (contenu) et After menu content (contenu) : permets de renseigner avant et après la navigation que vous venez de définir
  • Before menu content class(es) (texte) : la ou les classes CSS à attribuer au conteneur du contenu pre-navigation
  • Menu content class(es) (texte) : la ou les classes CSS à attribuer au conteneur  de votre navigation
  • After menu content class(es) (texte) : la ou les classes CSS à attribuer au conteneur du contenu post-navigation

Réglages

  • Menu position (choix) : permet de définir la position et le comportement de cette zone de navigation
    – Top : position fluide en haut
    – Sticky top : position fixe en haut
    – Sicky left : position fixe à gauche
    – Sticky right : position fixe à droite
    – Replace existant element : assigner le contenu de cette navigation à un élément existant dans la page.  Cette sélection fait apparaitre un autre champ, Item to replace (texte), afin de désigner cet élément de destination via une classe (.classe) ou un identifiant (#identifiant).
    – Normal : laisser la navigation dans sa position courante dans la page
    – None : masquer la navigation (utile pour utiliser le peeling mode seulement – voir plus loin)
  • Menu container class(es) (texte) : classes css à attribuer au container de la navigation
  • Hide site header (choix) : masquer ou non le header général du site sur cette page, ce qui aidera à la constitution d’une landing page indépendante du reste du site
  • Hide site footer (choix) : masquer ou non le footer général du site
  • Top position (nombre) : définit la position absolue par rapport au haut de page, n’apparait que si la position du menu est sur « sticky left » ou « sticky right »
  • Menu container width (nombre) : définit la largeur du conteneur de la navigation en px, n’apparait que si la position du menu est sur « sticky left » ou « sticky right »
  • Mobile adaptation (groupe) : définit le comportement de la navigation sur mobiles
    – Mode (choix) : « Do nothing » pour aucun changement, « Bullets sidebar navigation » pour la remplacer par une discrète navigation via des bullets points latéraux ne génant pas la lisibilité de votre page sur des résolutions restreintes. Les autres choix n’apparaissent que si cette dernière option est séléctionée.
    – Sidebar class(es) (texte) : classes CSS à attribuer à cette navigation mobile
    – Sidebar width (nombre) : définit la largeur en px de cette navigation mobile
    – Trigger width (nombre) : définit le seuil de résolution pour que cette navigation mobile se mette en place
    – Transparent background (choix) :  si sélectionnée, cette option annule le réglage CSS définissant la couleur de fond de la navigation en version classique
    – Sidebar position (choix) : définit la position latérale de cette navigation mobile
    – Sidebar top position (nombre) : définit la position verticale de cette navigation mobile par rapport au haut de page
    – Bullet size (nombre) : définit la taille en px des bullets points
    – Bullet color (couleur) : définit la couleur des bullets points
  • Peeling mode (groupe) : active ou non le peeling mode, c’est à dire remplacer le scroll naturel par la page par un effet de défilement/superposition
    – Direction (choix) : définit le sens de cet effet de défilement, vertical ou horizontal
    – Vertical centering (choix) : active ou non le centrage vertical des contenus dans les sections
    – Scrolling speed (nombre) : définit la vitesse de l’effet de défilement
    – Side navigation (choix) : active ou non une navigation latérale sous forme de points
    – Color side navigation (couleur) : définit la couleur de ces points
    – Position side navigation (choix) : définit la position des points
    – Normal scroll sections (texte) : champ destiné à renseigner les éléments de la page pour lesquels ce peeling mode ne doit pas s’appliquer. Y entrer des classes ou des identifiants séparés par des virgules