Comment créer une page de destination Drupal ?

Carte de visite virtuelle, flyer, minisite – tous ces termes reflètent parfaitement la nature et l'essence des pages d'atterrissage. Elles se composent de plusieurs segments horizontaux dans lesquels le contenu publicitaire est présenté, vous incitant à explorer davantage un sujet donné sur d'autres pages dédiées et en taille réelle. Vérifions les possibilités que Drupal nous offre lors de la création de ces sites spécifiques.

Une page faite de blocs

Pour créer un site web d'une seule page composé de segments horizontaux – clairement séparés les uns des autres, mais formant un tout cohérent – nous pouvons utiliser plusieurs outils ou modules disponibles dans le noyau de Drupal. La première option qui vient à l'esprit est l'utilisation de blocs. Dans Drupal, les blocs fonctionnent comme des briques Lego, des éléments contenant tout type de contenu. Ils peuvent être affichés dans différentes régions de la page, les uns au-dessus des autres. Cela semble être quelque chose dont nous avons besoin !

Bien que l'idée d'utiliser des blocs simples, contenant principalement du texte, fonctionne bien dans ce cas, atteindre les exigences visuelles ou le désir d'inclure un contenu légèrement plus compliqué (par exemple, des compteurs, des multimédias, une combinaison de texte et de multimédias, un carrousel, etc.) semble prendre du temps et nécessiter beaucoup de travail. Un haut niveau de personnalisation des blocs nous obligera à créer plusieurs types de blocs et/ou types de contenu et des champs supplémentaires à partir de zéro, ainsi que des classes supplémentaires pour un affichage correct.

Pour les partisans du code propre - Twig

Une des solutions disponibles est également l'option de créer une collection twig, où – en utilisant le code HTML et PHP – nous sommes capables de créer une page d'atterrissage avec n'importe quel niveau de complexité, en utilisant les champs disponibles ou nouveaux. Cette option, cependant, nécessite de passer de nombreuses heures devant l'écran, d'écrire d'innombrables lignes de code, sans parler de la maintenance ultérieure et de la gestion du contenu. Pour mettre en œuvre cette solution, il faut définitivement une personne ayant des connaissances techniques – également lors de l'ajout du contenu.

Créer une page d'atterrissage Drupal - modules

Comme nous l'avons mentionné plus tôt, une page d'atterrissage dans Drupal peut également être construite en utilisant des modules. Voyons lesquels nous pouvons utiliser et comment.

Module Layout Builder

Un outil très utile qui a récemment été ajouté au noyau de Drupal est le module Layout Builder, qui vous permet de créer des modèles pour la structure d'affichage des éléments sur une page. L'utilisateur a la capacité de définir ses propres "régions" pour différents types de contenu, en utilisant une interface de glisser-déposer très pratique. En termes simples, il remplace la fonction de gestion d'affichage par défaut, qui définit comment et quels champs doivent être affichés, et offre en plus la possibilité de placer des blocs en place. Lors de la création d'un modèle, vous pouvez vous sentir comme un graphiste manipulant les éléments, tandis que tous les outils dont ils ont besoin (dans notre cas – les options pour éditer les blocs et les sections) sont à portée de main sous la forme d'une barre d'édition. Pour utiliser ce module, vous devez le lancer manuellement, car il n'est pas activé par défaut lors de l'installation de Drupal.

Lors de la création d'un nouveau type de contenu ou en voulant utiliser Layout Builder pour un existant, allez dans l'onglet de gestion d'affichage. Une section supplémentaire "Options de mise en page" apparaîtra sous la liste des champs, où nous sélectionnerons l'option "utiliser Layout Builder". Au lieu d'une liste de champs, un bouton "gérer l'affichage" sera ajouté, ce qui nous redirigera vers l'interface de Layout Builder. Nous pouvons gérer librement l'ordre des éléments, ajouter des blocs qui peuvent contenir des champs de n'importe quelle entité, des formulaires, du texte brut, des liens, des vues, et même un menu entier. Les blocs sont ajoutés dans des sections. Chaque section peut être organisée en n'importe quel nombre de colonnes entre 1 et 4. L'ordre des sections ne peut pas être modifié ou "glissé", alors faites attention lors de leur ajout.

Malheureusement, Layout Builder ne fera pas tout pour nous. Nous devons fournir davantage d'efforts pour styliser tous les éléments. Cependant, il existe un module supplémentaire – Layout Builder Styles – dédié à la création de nouvelles classes pour les blocs et sections de Layout Builder, avec la possibilité de définir des restrictions concernant les blocs auxquels une classe donnée sera assignable. Une version bêta est actuellement disponible, et notre installation de Drupal ne peut pas être antérieure à la version 8.7.7. Cependant, pour tirer pleinement parti des capacités de gestion de style, sans avoir à interférer avec le code, nous devons installer un module supplémentaire - Asset Injector, où nous définirons tous les paramètres des classes précédemment créées. Ensuite, lors de l'édition de chaque bloc ou section, nous pourrons assigner une classe disponible dans la liste.

Module Paragraphs

La deuxième option la plus fréquemment choisie lors de la création d'une page d'atterrissage Drupal est l'utilisation du module Paragraphs ainsi que Entity Reference Revisions. Paragraphs vous permet de créer des modèles qui seront plus tard des sections (aussi appelées paragraphes d'une page). Un paragraphe peut contenir de nombreux champs de tout type. Une telle collection constituera le type de paragraphe à utiliser par tout type de contenu sélectionné. Par exemple, créons un nouveau type de contenu nommé "Page d'atterrissage". À ce stade, en plus du champ "corps" par défaut, nous ajoutons quelques autres champs qui sont importants pour nous. Cette fois, nous n'avons besoin que d'un champ du type paragraphe.

Maintenant nous allons créer deux nouveaux types de paragraphes : “bannière” et “image + texte”. Sous Structure -> Types de paragraphes -> Ajouter un type de paragraphe, nous créons de nouveaux types de paragraphes et gérons les champs à inclure en eux. Pour une bannière, cela signifiera un champ d'image. Pour le type “image + texte”, cela incluera également un champ d'image et du texte formaté. Comme c'est le cas lors de la création de types de contenu, avec les types de paragraphes, nous pouvons gérer l'affichage des champs et leurs formatteurs. Vous remarquerez sûrement dans la liste que vous pouvez ajouter un champ du type paragraphe, de cette manière nous pouvons créer des paragraphes imbriqués et utiliser ceux déjà existants.

Ayant les types de paragraphes, voyons à quoi ressemblera la création d'une page d'atterrissage. Il est utile de mentionner que sans définir dans les paramètres du type de contenu quel paragraphe spécifique doit en être le contenu, nous sommes présentés avec une liste de tous les types de paragraphes disponibles, que nous pouvons ajouter plusieurs fois grâce au réglage “illimité” lors de la création d'un champ de paragraphe.

Paragraphs est un outil puissant qui vous permet de maintenir un haut degré de flexibilité lors de la création de pages d'atterrissage. Le piège lors de l'utilisation de ce module est la gestion du contenu par la suite, surtout si nous créons une structure complexe avec de nombreux champs imbriqués. La personne qui édite le contenu sur la page peut alors se sentir perdue et submergée par l'énormité des onglets et des paramètres.

Paragraphes optimisés. Création d'une page d'atterrissage dans Droopler

Si vous préférez l'option d'utilisation des paragraphes, vous trouverez sûrement ce que Droopler a à offrir pour la création de sites web d'une seule page encore mieux ! Droopler est notre distribution gratuite de Drupal pour créer des pages web. Elle contient de nombreux modèles et composants prêts à l'emploi.

Pour cet outil, nous avons utilisé l'idée de créer des paragraphes et des paragraphes imbriqués pour "assembler" une page web. Dans la version par défaut, avec l'installation de Droopler nous disposons d'un nombre de types de paragraphes prédéfinis. Ce sont les types de paragraphes les plus couramment utilisés lors de la création de pages web.

Types de paragraphes dans Droopler

Alors pourquoi devrions-nous utiliser Droopler et en quoi se différencie-t-il réellement des possibilités présentées précédemment offertes par le module Paragraphs, à part gagner du temps lors de la création des types de paragraphes les plus populaires ?

Apparence

Déjà à première vue, nous pouvons voir une différence fondamentale – les paragraphes ajoutés ont un aspect professionnel et, si nous sommes satisfaits du schéma de couleurs utilisé, nous n'avons rien d'autre à faire avec eux ! Cependant, si nous décidons de le changer, remplacer le style par défaut ne posera pas de problème. Vous pouvez trouver plus d'informations sur ce sujet ici.

Édition directement sur la page créée

J'ai mentionné plus tôt qu'il peut être déroutant de naviguer dans l'édition d'un type de contenu qui se compose de paragraphes. Ce problème a été résolu dans Droopler grâce à l'utilisation du module Geysir et à la possibilité d'éditer des paragraphes directement sur la page créée, sous la forme de fenêtres modales. L'interface vous permet également de “couper” et “coller” des paragraphes, c'est-à-dire de les réorganiser et de les supprimer sans avoir à aller sur une page d'édition de type de contenu. De cette façon, tout reste clair et nous voyons immédiatement les effets de nos modifications.

Options supplémentaires

Le module Paragraphs est basé sur les champs, vous permet de choisir le formateur et de gérer l'affichage, mais il n'y a pas de place nulle part pour des options supplémentaires liées au style ou à la réorganisation rapide du contenu au sein d'un même paragraphe. Si nous voulons avoir un paragraphe avec une galerie d'images, nous avons besoin de types séparés pour mettre 4 ou 8 vignettes. Il en va de même pour l'utilisation de différents types de médias – un type séparé est nécessaire pour les images et les vidéos.

Droopler est très flexible dans cet aspect. Le type de paragraphe bannière accepte à la fois une image et un fichier vidéo. De plus, pour chaque type de paragraphe dans l'onglet "paramètres" de la fenêtre d'ajout de paragraphe, il est possible de configurer les marges et le padding, ainsi que de définir des classes supplémentaires que nous déterminons dans notre style, et il y a même l'option de choisir un schéma de couleurs prédéfini.

Si nous voulons créer un paragraphe composé de tuiles, nous pouvons choisir lesquelles d'entre elles doivent être mises en évidence en augmentant leur taille par rapport au reste, obtenant ainsi l'effet d'une galerie "en maçonnerie".

Avez-vous un bloc préparé que vous souhaiteriez utiliser et placer parmi les paragraphes ? Dans Droopler, les paragraphes peuvent également se composer de blocs, dans l'onglet, nous pouvons choisir parmi tous ceux qui existent actuellement sur notre page. Le bloc avec des icônes et des liens vers les réseaux sociaux - prêt. Un formulaire de contact rapide ? Cela a également déjà été fait pour nous.

Résumé

Les pages d'atterrissage ou les sites web d'une seule page sont un type de contenu très spécifique que nous pouvons trouver sur le web. Ils doivent être simples, transparents, avoir un aspect moderne et nous encourager à aller vers les pages cibles ultérieures. C'est un outil énorme dans les mains des équipes marketing, donc Drupal a également été conçu pour donner aux utilisateurs, y compris les non-programmeurs, l'option de créer rapidement ces types de pages. Certaines des méthodes présentées dans le post montrent un faible degré de difficulté et peuvent être mises en œuvre par un profane (Layout Builder, Paragraphs). Cependant, elles ont leurs limites et à un moment donné, l'"architecture" créée avec elles devient trop compliquée et difficile à maintenir. De plus, l'intention de créer quelque chose de non standard nécessitera l'aide d'un développeur, en particulier pour le style. En choisissant Droopler, nous pouvons être sûrs que le processus de création de la page d'atterrissage sera simple et agréable, ainsi que visuellement efficace, sans avoir à modifier le code. N'importe qui, sans exception, pourra apprendre à gérer les paragraphes avec facilité, et en moins de temps que prévu.