L'usage des blocs dans le page builder
Dans le back-office, lors de la modification d'une page, vous trouverez sur la partie droite un panneau dédié listant différents éléments appelés "blocs". Chaque bloc est structuré d'une façon sur mesure, en fonction de votre design et des fonctionnalités souhaitées.
Sur le back-office Ibexa du site Inforca, la liste des blocs se situe à droite
Le système de drag & drop
Le système de drag & drop d'Ibexa DXP est conçu pour maximiser votre efficacité et votre créativité. Après avoir sélectionné votre bloc, vous le faites simplement glisser vers l'emplacement choisi sur votre page.
Cette flexibilité vous permet d'ajuster votre page sans limite. Ajoutez des colonnes pour structurer votre contenu, insérez des espaces pour aérer votre mise en page, intégrez des boutons d'appel à l'action pour engager vos visiteurs, ou présentez les produits de votre catalogue en ligne de manière attrayante.
On "drag & drop" un bloc depuis la liste des blocs, dans le contenu
Visualisez vos modifications en direct
Une fois le bloc inséré sur la page, cliquez sur "Paramètres du bloc" afin de pouvoir le configurer. L'outil offre une large gamme d'options de personnalisation pour chaque bloc.
Vous pouvez modifier les titres, les boutons d'appel à l'action, le style graphique des éléments (couleurs, polices) mais aussi certains éléments importants pour le SEO comme les métadonnées.
Validez vos modifications et vous aurez un aperçu des changements en temps réel sur la page.
Paramétrage d'un bloc
Les différents types de blocs
Le bloc titre
L’idée est de pouvoir faire un Titre, avec un H1 ou un H2, pour les pages.
Dans l’exemple suivant, nous avons ajouté la possibilité de sélectionner des portions de textes à mettre en avant (ici en rouge) grâce à du markdown.
Exemple de bloc "titre" sur le site MonServicePublic du Gouvernement de Monaco
Le bloc hero
Développement d'un carrousel full width (pleine largeur) permettant d’afficher plusieurs images de haute résolution avec un titre, un paragraphe, un CTA personnalisé.
Exemple de bloc "hero" sur la page d'accueil du site Engeco
Le bloc hero filter
Nous avons développé un bloc permettant de mettre en avant et effectuer une recherche directement sur la page d'accueil du site. Cette recherche peut être affinée grâce aux différents filtres mis à disposition de l’utilisateur.
Exemple de bloc "filter" sur la page d'accueil du site FPMC Agency
Le bloc chiffres clés
Nous avons conçu ce bloc d’affichage de chiffres clés avec une animation lors du scroll de la page. L'animation consiste à faire défiler les chiffres jusqu’à arriver à une certaine valeur.
Exemple de bloc "chiffres clés" sur le site Engeco
Exemple de bloc "chiffres clés" sur le site Inforca
Exemple de bloc "chiffres clés" sur le site des Pompiers de Monaco
Le bloc recherche avec résultats
Ce module permet d’effectuer une recherche sur un site web, et de proposer des résultats pertinents selon la recherche de l’utilisateur. Sur cet exemple, les différents éléments comprenant le mot ‘Monaco’ sont directement mis en avant pour aider l’utilisateur dans sa recherche.
Exemple de bloc "résultats de recherche" sur le site Monservicepublic
Le bloc agenda
Ce bloc permet de mettre en avant les événements dans un format dédié, et qui fait remonter les informations de plusieurs calendriers ou thématiques en même temps.
Exemple de bloc "agenda" sur le site Monservicepublic.mc
Le bloc de remontées automatiques (dernières actualités)
Ce bloc a pour but d’afficher une liste de contenus, du type que vous souhaitez voir remonter automatiquement sur une page lorsqu’il a été créé en back-office.
Sur le site Engeco, nous avons configuré le bloc pour faire remonter automatiquement la liste des contenus présents sous le dossier “Société”.
Sur le site MonServicePublic, nous avons configuré une disposition différente avec la mise en avant d'une actualité à gauche et des articles à droite.
Le bloc localisation
Il permet de créer un effet dynamique entre les points placés sur une carte et le détail de chaque lieu. Lors du clic sur un point présent sur la carte, les informations affichées sur la droite changent. Il est aussi possible de naviguer via les boutons présents en bas à droite.
Exemple de bloc "localisations" présent sur la page d'accueil du site Inforca