Le type de contenu "Page builder" permet de créer des pages HTML sur mesure : page d'accueil, landing page ....

Pour utiliser l'outil, accédez à la section "Créer un contenu" de la rubrique "Paramétrage" puis sélectionnez "Page builder".

Création de la page

Choisissez le titre de votre page puis valider en cliquant sur "Enregistrer". Une fois la page enregistrée, vous pourrez "construire" votre page en modifiant sa structure HTML et en y ajoutant des blocs.

Ajouter du contenu

Le bouton Personnaliser la page fait basculer l'affichage en mode édition. Plusieurs icônes apparaissent au niveau de chaque bloc de contenu et de chaque section :

Ajouter un bloc

Pour ajouter du contenu à votre page, cliquez sur Ajouter un bloc puis choisissez parmi les différents blocs possibles :

• Bannière : cet élément est généralement placé en haut de page pour présenter son contenu. L'élément bannière est composé d'un champs texte "HTML" et d'une illustration de type "Média".
• Catégorie : Cet élément affichera les catégories ou sous catégories sous forme de liste avec une image libre en arrière-plan. Chaque catégorie renverra vers la page de listing associée.
• Média : Création d'un bloc composé d'une image ou d'une vidéo YouTube.
• Slider : Création d'un diaporama. Deux formats de diaporamas sont actuellement disponibles.
• Éditeur HTML : Création de HTML sur mesure. L'éditeur HTML utilise l'outil n1ed (https://n1ed.com/) qui permet de facilement créé du contenu HTML sur mesure. L'éditeur HTML s'appuie également sur le framework Bootstrap 4, toutes les classes sont disponibles pour personnaliser votre contenu. Des connaissances en HTML est recommandé.

Modification du template de la page

Le template de la page correspond à sa structure, construit sur le modèle de colonnes Bootstrap 4. Par défaut, la page dispose d'une structure simple d'une colonne et les blocs s'empilent les uns sur les autres. Lorsque vous ajouter un bloc de type "Éditeur HTML", vous avez la possibilité via l'outil n1ed de créer des lignes et des colonnes pour organiser votre contenu. Toutefois, si vous souhaitez disposer les différents blocs autrement que sur une seule colonne, vous pouvez modifier la structure HTML de la page, c’est-à-dire créer des lignes et des colonnes. Des connaissances HTML et Bootstrap sont nécessaires pour manipuler la structure de la page.

Pour modifier la structure de la page :

1. Cliquez sur l'onglet "Modifier l'affichage" en haut de page.
2. Sélectionnez au choix "mise en page" ou "contenu"
   
   
   L'option "mise en page" vous permet de sélectionner une structure de page existante (une colonne, deux colonnes, trois colonnes .....), l'option "contenu" vous permettra de configurer la structure choisie. Par défaut, la structure choisie est "Bootstrap 4", ce qui permet de personnaliser sans limite la structure.

Pour modifier la structure "Bootstrap 4", cliquez donc sur "contenu" puis "Montrer l'outil de mise en page". Vous voyez apparaître ainsi la structure actuelle (composée de lignes et de colonnes) comme le montre la capture d'écran ci-dessus :

Les différents éléments sont :

• Conteneur : Enveloppe qui contient les lignes (souvent associé à la classe "container" ou "container-fluid" de Bootstrap)
• Lignes : Une ligne au sens Bootstrap 4 (associé à la classe "row") et qui par défaut peut contenir 12 colonnes.
• Colonnes : Chaque ligne est composé de colonnes dont la largeur varie de 1 à 12, 12 correspondant à la largeur totale de la ligne. Pour chaque colonne, vous pouvez donc définir :
  
  • Largeur : la largeur de la colonne, de 1 à 12
  • Ordre : L'ordre d'affichage de la colonne. L'ordre peut s'inverser selon la taille de l'écran.
  • Décalage : Correspond au décalage (entre 1 et 12) de la colonne.
• Région : Les régions accueilleront les différents blocs de la colonne.

Pour en savoir davantage sur les notions de grille et de colonnes Bootstrap 4, veuillez vous référencer à la documentation en ligne suivante : https://getbootstrap.com/docs/4.0/layout/grid/