Skip links

Les Page Builder pour Drupal

Il est souvent considéré que Drupal est destiné aux développeurs expérimentés et qu’il s’agit d’un CMS pour les professionnels. Même si WordPress, Joomla! et d’autres CMS semblent mieux s’adresser au grand public, Drupal a lui aussi des page builder. Donc oui, les novices peuvent réaliser leur site avec Drupal, et il sera d’ailleurs peut-être même plus performant et sécurisé que sur un autre CMS. Mais un constructeur de page, c’est quoi exactement ? Et quels sont les page builder pour Drupal ? Nous en avons sélectionné pour vous.

Qu’est-ce qu’un Page Builder ?

Vous savez peut-être déjà comment sont créés les sites internet. Quel que soit le site, il y a du code derrière. Mais si tout le monde peut faire son site web soi-même aujourd’hui, c’est grâce aux CMS et aux page builder. Comme leur nom l’indique, ce sont des constructeurs de pages. Ils permettent aux personnes n’ayant aucune connaissance en développement de créer des sites, sans toucher au code HTML, au CSS ou au langage JavaScript.

Les page builder s’appuient souvent sur des systèmes drag-and-drop (glisser-déposer) ou WYSIWSG (what you see is what you get : ce que l’éditeur voit est plus ou moins ce qui va s’afficher à l’écran, facilitant ainsi la mise en page). Ce sont donc des systèmes purement front-end. Toutefois, on peut généralement accéder au code qui se cache derrière et intervenir dessus. Cela permet de personnaliser des contenus même à partir d’un page builder qui peut sembler très normé. Ça laisse donc une certaine marge de manoeuvre.

Les page builder sont tout de même souvent critiqués par les développeurs. Alors certes, ça ne s’adresse pas forcément aux experts du développement web. Vous n’aurez jamais un site excellent, 100% sur-mesure et unique avec un page builder. Pour cela, mieux vaut se détacher complètement des CMS et opter pour un CMS Headless ! Toujours est-il que la demande est bel et bien présente, et le cliquer-glisser intéresse de nombreux utilisateurs.

Quelques Page Builder pour Drupal

Selon le Web Technology Survey, en 2020 Drupal est classé quatrième CMS le plus populaire au monde. Environ 1.6 % de tous les sites web, et 2.8% des sites web basés sur des CMS utilisent Drupal. Si WordPress a clairement le monopole des CMS, Drupal n’en reste pas moins un CMS très reconnu, notamment pour sa robustesse. En effet, Drupal est plus adapté à la création de solutions très spécifiques et sur mesure, mais requiert pour cela un niveau un plus avancé en développement (et c’est pourquoi les développeurs l’adorent). Il peut toutefois être utilisé, au même titre que WordPress, pour des solutions simples et par des novices en développement web, d’où l’intérêt des page builders. Drupal offre lui aussi toute une panoplie d’options de configurations et de thèmes, ce qui satisfait tout le monde ! Nous allons dans cet article nous intéresser aux page builder pour Drupal.

Voyons donc quelques plugins que propose Drupal. Beaucoup sont des “drag-and-drop page builders”. Comme on l’évoquait précédemment, cela fait référence au glisser-déposer très intuitif et facile d’utilisation, qui nous permettent de construire des pages sans connaître quoi que ce soit au code HTML ! Nous avons fait une petite sélection et allons vous la présenter sans plus attendre.

shéma : principe du page builder

Glazed builder : 

Glazed Builder est actuellement l’un des éditeurs par glisser-déposer les plus puissants, les plus pratiques et les plus rapides pour Drupal 7 et 8. Alimenté par Bootstrap 3, cet éditeur a l’avantage de prendre en charge les contenus dynamiques, comme les sites web multilingues. Voici plus d’informations sur ce que vous pouvez faire en utilisant Glazed Builder :

  • Insérer n’importe quel bloc de Drupal (il peut s’agir d’un formulaire de connexion, d’un bloc de menu ou d’un bloc de module personnalisé),
  • Implémenter des cartes Google Maps,
  • Créer des content sliders en quelques secondes avec une panoplie d’éléments disponibles,
  • Personnalisez l’affichage des pages en fonction du déplacement du curseur : possibilité d’utiliser des affichages de vues uniques dans diverses configurations,
  • Simplifier les mises à jour du contenu de la barre latérale et du pied de page,
  • Mettre en place des blocs « call to action » en utilisant  Ajax Element ou d’autres contenus qui apparaissent un peu partout sur le site web,
  • Construire des mises en page variées plus rapidement. Avec l’outil de positionnement des éléments, vous pouvez être créatif et utiliser le positionnement absolu pour créer des éléments de conception qui se chevauchent sans avoir à coder,

Le plugin possède une version d’essai. La vidéo de présentation ci-dessous vous donnera une meilleure idée du plugin.

MD Awecontent

MD Awecontent est un autre module visuel visant à aider les utilisateurs de Drupal dans l’édition visuelle. Le constructeur offre de nombreuses options de mise en page responsive : un support pour n’importe quel nœud Drupal (un noeud est une unité de contenu, par exemple un noeud page, un noeud image…). Avec MD Awecontent, on peut créer des nœuds pour tous les types de contenu, y compris les types de contenu personnalisés. Voici d’autres caractéristiques de ce plugin :

  • Support des blocs Drupal,
  • Éditeur frontend. Vous voyez ce que vous éditez en temps réel sans avoir besoin de passer à l’aperçu,
  • Arrière-plan parallaxe : vous pouvez créer un effet de défilement parallaxe avec votre image d’arrière-plan,
  • Possibilité de mettre un arrière-plan vidéo, qui attirera certainement l’attention des visiteurs du site,
  • Animation personnalisée de tout objet à l’aide de 5 effets animés intégrés (élargissement, disparition, suspension, rotation et retournement),
  • Création de sections pleine largeur et pleine hauteur en deux clics,
  • Une multitude de modèles prêts à l’emploi que vous pouvez copier et utiliser au lieu de créer des thèmes à partir de zéro,
  • De nombreuses options de conception. Vous pourrez modifier la taille, la couleur, etc. de chaque élément,
  • Support d’un accès utilisateur : un groupe d’utilisateurs a accès à certaines fonctions du module,
  • Mise en page entièrement responsive,
  • Le cadre Bootstrap rend le processus de développement frontend plus rapide et plus facile,
  • Plus de 600 polices web Google,
  • SEO Friendly,
  • Facilement extensible : créez des objets nouveaux et uniques et intégrez-les facilement dans le thème de votre projet,
  • Exportation et importation : possibilité copier certains paramètres spécifiques en les exportant et en les important sur un autre site,
  • Mises à jour gratuites à vie : ce qui signifie que le page builder ne fera que s’améliorer avec le temps.

Layout Builder :

Layout Builder est l’une des grandes améliorations de Drupal 8.5. Ce page builder s’appuie lui aussi sur le système drag-and-drop. En l’occurrence, Layout Builder s’adresse particulièrement aux novices en développement web, qui veulent créer leur site sans toucher au code HTML. Selon certains adeptes, Layout Builder, c’est :

“La puissance et la flexibilité combinées en un seul outil de conception visuelle visant à améliorer l’expérience de l’éditeur”

On a notamment la possibilité de personnaliser des modèles de mise en page, et de créer ses propres blocs personnalisés, en gardant toujours une structure de contenu propre grâce à l’intervention de Drupal. Cette vidéo vous donnera un meilleur aperçu de ce qu’il est possible de faire avec Layout Builder : 

Il y a des discussions et débats à propos de Layout Builder et Paragraphs, ce dernier étant un plugin qui a plutôt révolutionné l’édition frontend à sa sortie. En bref, il permet de créer des champs dans des champs, augmentant ainsi considérablement la flexibilité des éditeurs. Vous trouverez notamment dans cet article les “pour” et les “contre” de chacune des deux solutions, et pourquoi il ne serait finalement pas tiré par les cheveux de combiner les deux pour en tirer un meilleur profit

Par ailleurs, sachez que joliPixel est une agence experte Drupal. Nous concevons donc des sites qui offrent une expérience d’administration optimale pour ce CMS !

Leave a comment