Construire et modifier les pages de votre front-end à l'aide du builder

Construire et modifier les pages de votre front-end à l'aide du builder Le builder est un outil simple et intuitif pour créer vos pages sans avoir besoin de connaissances particulière en développement ou en intégration. Dans cet article, nous vous expliquons comment l'utiliser.

Rendez-vous au menu Administration - Front-end Cliquez sur l'onglet "Pages". Recherchez la page que vous souhaitez construire ou modifier. Vous pouvez effectuer une recherche via le champ de recherche et/ou utiliser les filtres par type de page et statut ou encore la trouver directement dans la liste des pages créées.

Quand vous avez trouvé votre page, cliquez sur l'icône du builder en bout de ligne. Vous êtes maintenant dans le builder. Voici à quoi ressemble une page vide. Vous rencontrerez rarement ce cas, cet affichage indique que la page que vous configurez n'a aucun composant, et n'a pas non plus d'entête ni de pied de page. Si tel est le cas, nous vous invitons tout d'abord à configurer les composants de votre en-tête et de votre pied de page, après les avoir créés. Retrouvez plus d'informations sur la création de ce type de page ici. Ajoutez des composants à vos pages Pour ajouter un composant à votre page, cliquez sur le composant de votre choix dans la barre de droite, puis glissez et déposez le à l'emplacement de votre choix. Une ligne verte doit apparaître pour vous indiquer que le composant va correctement être déposé.

Pour modifier un composant de votre page, cliquez sur le composant en question Un petit menu s'affiche alors sur la droite, en haut ou en bas, selon la taille du composant. Dans ce menu, vous retrouvez dans l'ordre : • La flèche vers le haut : le clic sur cette icône vous fait remonter d'un cran dans la sélection de votre composant. Par exemple, si vous sélectionnez le logo sur l'écran ci-dessous, un petit menu s'affichera juste au-dessus du logo (le logo est un sous-composant du composant "menu compact") ; si vous cliquez sur la flèche, cela aura pour effet de vous faire sélectionner le composant "menu compact" et donc d'afficher le menu que l'on voit sur la copie d'écran ci-dessous. • La flèche multi-directionnelle : si vous cliquez sur cette icône sans relâcher, vous pouvez déplacer le composant parmi les autres composants. • La duplication : le clic sur cette icône crée une copie du composant. • La corbeille : le clic sur cette icône supprime le composant de votre page. • La roue crantée : le clic sur cette icône vous permet d'accéder aux paramètres du composant ou du sous-composant. Configurez les paramètres de chaque composant. Chaque composant ou sous-composant a ses propres paramètres. Nous vous invitons à essayer les divers paramètres afin de tester leur rendu.

Vous pouvez par exemple modifier quel menu de votre front-end vous souhaitez afficher dans le composant "menu compact" Pour apprendre à créer et configurer vos menus, cliquez ici@. Pour modifier une image dans un composant, double-cliquez dessus. Une pop-in de chargement d'image apparaît alors.

Une fois votre nouvelle image chargée, vous pouvez la sélectionner en cliquant dessus. Elle s'applique automatiquement. Vous pouvez ensuite quitter la pop-in en cliquant sur la croix en haut à droite de la pop-in, ou en cliquant sur le builder visible en fond. Pour modifier une icône dans ce type de composant, ouvrez les paramètres du composant Dans "Type d'icône", sélectionnez le type d'icône à utiliser Vous pouvez utiliser des images, ou des icônes. Si vous choisissez le type "Image", il vous suffira de double-cliquer sur chaque icône pour la modifier.

Si vous choisissez le type "Icône", modifiez chaque icône en affichant ses paramètres comme suit : Dans les paramètres de l'icône, indiquez le nom de l'icône à afficher Le nom est composé ainsi : • Il commence par "bi-" (préfixe par défaut) • Il se termine par le raccourci de l'icône bootstrap. Pour vous aider, vous retrouverez une liste d'icônes bootstrap sur ce site : icons.getbootstrap.com Exemples d'icônes : bi-box, bi-circle, bi-arrow-down-left-square... Pour éditer les couleurs de votre front-end, cliquez sur l'icône "palette". La palette de couleur est configurée pour l'ensemble de votre front-end. Elle sera la même pour toutes les pages.

Modifiez les couleurs de la palette de votre front-end. Définissez les couleurs principales de votre thème. Celles-ci pourront être utilisées dans la configuration de chaque composant de votre front-end. Pour modifier une couleur, cliquez sur le carré de couleur. Définissez vos couleurs à l'aide d'une pipette, ou en remplissant directement les champs RGB. Cliquez sur le bouton "Sauvegarder" chaque fois que vous avez terminé de configurer un composant ou votre palette.

Il est possible d'éditer le CSS mais... ... nous vous déconseillons fortement d'utiliser cette fonctionnalité si vous n'avez pas l'habitude d'intégrer en CSS. A noter : le CSS est configuré pour l'ensemble du builder. Il sera le même pour toutes les pages. Toute modification effectuée dans cet éditeur sera susceptible d'altérer le bon fonctionnement de votre front-end. Toute intervention de nos équipes liée à l'utilisation de cet éditeur sera facturée. La barre d'accès rapide. Depuis cette barre, vous pouvez : • Changer le statut de votre page en cliquant sur l'état en cours : passer de brouillon à publiée, ou de publiée à brouillon (hors ligne). • Editer les paramètres de la page en cliquant sur l'icône "page". • Changer de page en cliquant sur l'icône "flèches inversées".

La barre de publication Depuis cette barre d'icônes, vous pouvez (dans l'ordre) : • Visualiser votre page avant publication. • Enregistrer le brouillon de vos dernières modifications. • Annuler vos modifications. • Publier vos dernières modifications. N'oubliez pas de configurer tous vos composants dans chaque langue affichée sur votre front-end Attention, l'ajout ou la suppression d'un composant dans une langue, affecte les autres langues. Seule la configuration est indépendante langue par langue. Pour quitter le builder, cliquez sur l'icône de sortie