Design de mise en page Drupal : comment gérer et créer des blocs de contenu

Design de mise en page Drupal : Créer, positionner et gérer intelligemment les blocs de contenu

Le système de blocs fait partie des fonctionnalités de mise en page les plus importantes de Drupal. Alors que les contenus tels que les pages, les articles ou les billets de blog apparaissent généralement dans la zone principale d'un site web, les éléments récurrents sont gérés via des blocs. Cela inclut, par exemple, les navigations, les encadrés de contact, les champs de recherche, les inscriptions à la newsletter, les zones de call-to-action, les colonnes de pied de page, les logos, les liens vers les réseaux sociaux, les sélecteurs de langue ou les boîtes d'information personnalisées.

Dans Drupal, un bloc est un conteneur indépendant de contenu ou de fonctionnalité, qui est attribué à une région spécifique de votre thème. Les régions sont les zones de mise en page prévues d'un thème, par exemple le Header, le Primary Menu, la Sidebar, le Content, le Footer ou d'autres zones définies par le thème. Les régions disponibles dépendent du thème Drupal utilisé. C'est précisément pour cela que le système de blocs est très flexible : vous pouvez afficher des contenus à différents endroits du site sans avoir à modifier manuellement chaque template.

Cet article explique comment gérer les blocs dans Drupal, créer vos propres blocs de contenu, positionner les blocs dans les régions et utiliser judicieusement les règles de visibilité. De plus, vous y trouverez des conseils pratiques concernant la sécurité, la performance, le SEO et une structure de site web propre.

Qu'est-ce que les blocs dans Drupal ?

Les blocs sont des éléments réutilisables qui s'affichent dans des zones spécifiques de la mise en page d'un site Drupal. Ils peuvent être constitués de texte simple, contenir du HTML, être générés par un module ou être composés de champs définis individuellement. Un formulaire de recherche, un menu, une navigation par fil d'Ariane ou un bloc de connexion sont des exemples typiques de blocs fournis par Drupal ou par des modules installés.

Parallèlement, vous pouvez créer vos propres blocs personnalisés. Ceux-ci sont particulièrement adaptés aux contenus qui ne doivent pas apparaître comme une page normale, mais qui doivent tout de même être visibles à un endroit stratégique. Exemples : une brève note de support dans le pied de page, un encadré de contact dans la barre latérale, une bannière sur la page d'accueil ou un avis de travaux de maintenance.

Un grand avantage de Drupal réside dans le fait qu'un bloc peut non seulement être positionné, mais aussi configuré. Vous pouvez définir sur quelles pages un bloc est visible, pour quels rôles il s'affiche, dans quelle langue il doit apparaître ou sous quelles conditions il doit être masqué. Cela permet de mettre en œuvre des concepts de mise en page et de contenu très précis.

La différence entre contenu, bloc et région

Il est important, surtout pour les débutants, de comprendre que Drupal fait la distinction entre contenu, bloc et région :

• Contenu : Contenus de page normaux tels que des articles, des pages, des actualités, des billets de blog ou des informations produits.
• Bloc : Un élément de mise en page individuel qui s'affiche à un endroit précis du site web.
• Région : Une zone fournie par le thème dans laquelle les blocs peuvent être positionnés.

Un exemple : Vous créez un encadré de contact avec un numéro de téléphone et une adresse e-mail. Cet encadré est un bloc. Vous positionnez ce bloc dans la région « Sidebar » ou « Footer ». Le contenu réel de la page, par exemple une sous-page « À propos de nous », reste distinct de ce bloc. Ainsi, vous pouvez afficher le même encadré de contact sur de nombreuses pages sans avoir à le copier dans chacune d'elles.

Ouvrir la mise en page des blocs dans Drupal

Pour gérer la mise en page des blocs de votre site Drupal, connectez-vous avec un compte utilisateur disposant de droits d'administration suffisants. Naviguez ensuite dans le back-end de Drupal vers :

Structure -> Mise en page des blocs

Sur cette page, vous voyez les régions disponibles pour votre thème actif. Selon le thème, celles-ci peuvent avoir des noms différents. Les régions courantes sont :

• Header : Zone supérieure du site web, souvent utilisée pour le logo, la navigation ou la fonction de recherche.
• Primary Menu : Navigation principale du site web.
• Highlighted : Zone mise en avant, par exemple pour des annonces importantes.
• Content : Zone de contenu principale de la page.
• Sidebar First / Sidebar Second : Barre latérale gauche ou droite.
• Footer : Zone inférieure du site web, souvent utilisée pour les coordonnées, les liens ou les mentions légales.

Tous les thèmes ne proposent pas les mêmes régions. Si vous changez de thème, la mise en page des blocs disponibles peut donc également changer. Après un changement de thème, vérifiez toujours si tous les blocs importants apparaissent toujours à la position souhaitée.

Positionner des blocs existants

Pour positionner un bloc existant dans une région, procédez comme suit :

1. Ouvrez Structure -> Mise en page des blocs.
2. Cherchez la région souhaitée, par exemple Sidebar, Header ou Footer.
3. Dans cette région, cliquez sur Placer le bloc.
4. Sélectionnez le bloc souhaité dans la liste.
5. Cliquez sur Placer le bloc ou sur le bouton correspondant.
6. Configurez le titre, la visibilité et les autres paramètres.
7. Enregistrez la modification.

Après l'enregistrement, vous devriez vérifier le site web côté frontend. Ne regardez pas seulement la page d'accueil, mais aussi les sous-pages, les pages de contenu et les affichages mobiles. Un bloc peut être esthétique sur ordinateur, mais occuper trop d'espace ou apparaître à un endroit inapproprié sur smartphone.

Créer ses propres blocs personnalisés

Les blocs personnalisés sont idéaux lorsque vous souhaitez gérer vos propres contenus indépendamment des contenus de page normaux. Cela comprend, par exemple :

• Des blocs de contact avec numéro de téléphone, adresse e-mail et horaires d'ouverture
• Des informations sur le support, la maintenance ou des actions saisonnières
• Des blocs de call-to-action tels que « Demander un devis maintenant »
• Des colonnes de pied de page avec les informations sur l'entreprise
• Des éléments de confiance (Trust elements) tels que des certificats, la mention "Hébergé en Suisse" ou des informations de sécurité
• De courts encadrés promotionnels pour des services, produits ou téléchargements

Pour créer votre propre bloc, la procédure générale est la suivante :

1. Ouvrez Structure -> Mise en page des blocs.
2. Allez dans l'onglet Bibliothèque de blocs personnalisés ou sélectionnez l'option d'ajout d'un bloc personnalisé au sein de la mise en page des blocs.
3. Cliquez sur Ajouter un bloc personnalisé.
4. Choisissez le type de bloc approprié, par exemple Basic block (Bloc de base) ou un type de bloc personnalisé.
5. Attribuez-lui une description interne claire.
6. Saisissez le contenu du bloc.
7. Enregistrez le bloc.
8. Positionnez ensuite le bloc dans la zone de mise en page souhaitée.

La description interne doit être explicite. Au lieu de « Bloc 1 », un nom tel que « Pied de page Bloc Contact FR » ou « Page d'accueil CTA Hébergement Web » est bien préférable. Vous garderez ainsi une vue d'ensemble, même sur les grands sites web comportant de nombreux blocs.

Créer ses propres types de blocs avec des champs

Drupal permet non seulement de créer de simples blocs de texte, mais aussi des types de blocs personnalisés dotés de champs structurés. C'est particulièrement utile lorsque plusieurs blocs similaires doivent être créés. Un exemple est un bloc de call-to-action doté des champs suivants :

• Titre
• Court texte de description
• Image ou icône
• Texte du bouton
• Lien du bouton

L'avantage : Les rédacteurs n'ont pas besoin d'écrire du HTML à chaque fois. À la place, ils remplissent des champs définis. Cela réduit les erreurs, garantit un design uniforme et facilite les ajustements ultérieurs. Sur les sites Drupal professionnels, cette méthode de travail structurée est généralement préférable à du code HTML formaté librement dans chaque bloc individuel.

Pour les sites simples, le type de bloc standard suffit souvent. Pour les sites d'entreprise plus importants, les portails, les sites multilingues ou les équipes éditoriales, il est toutefois avantageux de planifier correctement des types de blocs personnalisés.

Gérer la visibilité des blocs

L'une des fonctionnalités les plus puissantes du système de blocs de Drupal réside dans les paramètres de visibilité. Vous pouvez définir quand et où un bloc doit s'afficher. Les règles de visibilité typiques sont :

• Par pages : Un bloc apparaît uniquement sur certains chemins, par exemple uniquement sur la page d'accueil.
• Par type de contenu : Un bloc s'affiche uniquement pour certains types de contenu, par exemple uniquement pour les articles de blog.
• Par rôle d'utilisateur : Un bloc est visible uniquement pour les utilisateurs connectés, les rédacteurs ou les administrateurs.
• Par langue : Un bloc s'affiche uniquement dans une version linguistique spécifique.

Ces règles sont particulièrement importantes lorsque vous vous adressez à différents publics. Par exemple, une note de support destinée aux clients connectés ne doit pas obligatoirement apparaître sur chaque page publique. De même, un bloc de texte pertinent pour le SEO peut être judicieux sur une page d'atterrissage (landing page), mais perturbateur sur une page de commande ou de formulaire.

Trier les blocs et modifier l'ordre

Plusieurs blocs peuvent être positionnés dans une même région. L'ordre détermine quel bloc s'affiche en premier. Dans la mise en page des blocs, vous pouvez généralement déplacer les blocs par glisser-déposer ou les trier via des poids (poids numériques). Après chaque modification, vous devez enregistrer le nouvel ordre.

Évaluez l'ordre du point de vue des visiteurs. Les éléments importants doivent apparaître en premier. Dans un pied de page, par exemple, l'adresse de l'entreprise peut figurer avant des liens secondaires moins importants. Dans une barre latérale, un bloc de contact placé avant un bloc d'archives ou de tags est souvent plus judicieux.

Désactiver ou supprimer des blocs

Lorsqu'un bloc n'est plus nécessaire, vous devez faire la distinction entre le désactiver, le retirer d'une région et le supprimer définitivement :

• Retirer de la région : Le bloc ne s'affiche plus, mais il continue d'exister en arrière-plan.
• Désactiver : Selon la configuration, le bloc reste présent mais n'est pas utilisé activement.
• Supprimer : Le bloc ou le contenu du bloc est définitivement effacé.

Ne supprimez des blocs que si vous êtes certain qu'ils ne serviront plus. Sur les sites multilingues ou les mises en page complexes, un bloc peut encore être pertinent à un autre endroit. Documentez les modifications majeures apportées à la mise en page afin que les futurs travaux de maintenance restent compréhensibles.

Sites web Drupal multilingues et blocs

Une attention particulière est requise pour les sites multilingues. Un bloc en allemand ne doit pas apparaître par inadvertance sur une page française ou italienne. Vérifiez donc pour chaque bloc :

• Le bloc est-il traduisible ?
• Les versions linguistiques correspondantes existent-elles ?
• Les règles de visibilité sont-elles correctement configurées ?
• Les liens internes renvoient-ils vers la bonne version linguistique ?
• Les textes des boutons, les coordonnées et les mentions légales sont-ils correctement localisés ?

En Suisse en particulier, avec plusieurs langues nationales, une logique linguistique propre est essentielle. Pour les entreprises, les associations et les organisations, il est plus professionnel que la navigation, le pied de page, les blocs de contact et les éléments de call-to-action soient cohérents sur le plan linguistique.

Sécurité lors du travail avec les blocs

Les blocs peuvent contenir du HTML, des liens, des médias intégrés ou des scripts. C'est pourquoi seuls les utilisateurs de confiance doivent recevoir l'autorisation de créer des blocs ou d'utiliser du HTML non filtré. Un bloc mal configuré peut non seulement endommager la mise en page, mais aussi engendrer des failles de sécurité.

Veillez particulièrement aux points suivants :

• N'attribuez les droits de gestion des blocs qu'à des personnes formées.
• Utilisez des formats de texte sécurisés et évitez le HTML non filtré inutile.
• Vérifiez soigneusement les liens externes et les contenus intégrés.
• N'utilisez pas de scripts copiés depuis des sources inconnues.
• Testez d'abord les nouveaux blocs dans un environnement de staging ou de test si le site web est critique pour votre activité.

Performance : Trop de blocs peuvent ralentir le site Internet

Les blocs sont pratiques, mais ils peuvent également influencer le temps de chargement. Les blocs particulièrement dynamiques, les intégrations externes, les grandes images, les vidéos ou les vues (views) complexes peuvent générer une charge serveur supplémentaire. Veillez donc à ce que les blocs ne chargent pas une quantité inutile de données.

Recommandations pour une meilleure performance :

• Utilisez des images optimisées aux dimensions adaptées.
• Évitez les scripts externes inutiles dans les blocs.
• Utilisez le système de mise en cache de Drupal à bon escient.
• Examinez attentivement la page d'accueil, les pages d'atterrissage et l'affichage mobile.
• Supprimez les blocs anciens ou devenus inutiles.

Un hébergement rapide est tout aussi important. Drupal tire profit de ressources serveur stables, de versions de PHP à jour, d'une performance de base de données propre et d'un cache fiable. C'est particulièrement vrai pour les sites web comportant de nombreux blocs, des vues, des contenus multilingues ou des workflows éditoriaux. Vous trouverez des informations sur les offres d'hébergement adaptées dans la section Hébergement web suisse.

SEO et GEO : Utiliser intelligemment les blocs pour une meilleure visibilité

Les blocs peuvent soutenir le référencement naturel et la visibilité dans les systèmes de recherche basés sur l'IA lorsqu'ils sont utilisés judicieusement. Il est important que les contenus des blocs ne soient pas uniquement décoratifs, mais qu'ils apportent un réel contexte. Les moteurs de recherche et les systèmes d'IA analysent de plus en plus les contenus de manière sémantique. Des thématiques clairement nommées, des liens internes explicites et des informations complémentaires utiles peuvent donc avoir un impact positif.

Domaines d'application SEO et GEO pertinents pour les blocs :

• Maillage interne : Renvoyez depuis des pages thématiquement proches vers des prestations, guides ou pages de contact pertinentes.
• Signaux locaux : Utilisez les blocs de pied de page ou de contact pour afficher des coordonnées d'entreprise, des informations de localisation et des options de contact cohérentes.
• Blocs FAQ : De courtes questions complémentaires utiles peuvent orienter les utilisateurs et les systèmes d'IA.
• Éléments de confiance : Les mentions relatives à la localisation des serveurs en Suisse, à la protection des données, au support ou à la sécurité renforcent la confiance.
• Call-to-Action : Des étapes suivantes claires améliorent le parcours utilisateur.

Évitez cependant le bourrage de mots-clés (keyword stuffing). Un bloc comportant des termes répétés artificiellement comme « Hébergement Drupal Suisse pas cher rapide sécurisé » manque de professionnalisme et peut nuire à la qualité de la page. Privilégiez des contenus formulés naturellement qui répondent à des questions concrètes.

Erreurs typiques avec les blocs Drupal

Dans la pratique, des problèmes similaires surviennent souvent lors de la gestion des blocs :

• Le bloc ne s'affiche pas : Vérifiez la région, la visibilité, la langue, le rôle utilisateur et le cache.
• Le bloc apparaît sur les mauvaises pages : Contrôlez les conditions de page ou de type de contenu.
• Le bloc s'affiche en double : Vérifiez si le même bloc n'a pas été positionné plusieurs fois.
• La mise en page est décalée : Vérifiez la structure HTML, la taille des images et la compatibilité du thème.
• Les modifications ne sont pas visibles : Videz le cache de Drupal et, le cas échéant, le cache du navigateur ou du serveur.
• Le bloc est absent après un changement de thème : Vérifiez si l'ancienne région existe dans le nouveau thème.

De nombreux problèmes d'affichage ne sont pas directement liés au bloc lui-même, mais aux régions du thème, au CSS, au cache ou aux règles de visibilité. Procédez donc de manière systématique en ne vérifiant qu'une seule cause à la fois.

Workflow recommandé pour les nouveaux blocs

Pour obtenir des résultats propres, le processus suivant est recommandé :

1. Définir l'objectif : Que doit accomplir le bloc ?
2. Choisir la position : Quelle région est adaptée pour cela ?
3. Rester concis : Les blocs doivent compléter, et non remplacer des pages entières.
4. Planifier la visibilité : Le bloc doit-il apparaître partout ou seulement sur certaines pages ?
5. Vérifier le multilinguisme : Toutes les versions linguistiques sont-elles prêtes ?
6. Tester l'affichage mobile : Le bloc fonctionne-t-il sur smartphone et tablette ?
7. Vérifier la performance : Des images, scripts ou contenus externes lourds sont-ils chargés ?
8. Vider le cache et contrôler le frontend : La modification n'est considérée comme finalisée qu'après vérification.

Questions fréquentes sur les blocs Drupal

Puis-je positionner le même bloc plusieurs fois ?

Oui, selon le type de bloc et sa configuration, Drupal permet de positionner des blocs à plusieurs endroits. Chaque emplacement peut avoir ses propres paramètres et règles de visibilité. C'est utile, mais cela doit être fait sciemment pour éviter de créer des contenus en double ou contradictoires.

Pourquoi est-ce que je ne vois pas mon nouveau bloc ?

Vérifiez d'abord si le bloc a bien été attribué à une région active. Contrôlez ensuite les règles de visibilité, la langue, le rôle utilisateur et le cache. Souvent, le bloc est correctement créé mais masqué par une condition, ou pas encore visible avant d'avoir vidé le cache.

Les blocs sont-ils bénéfiques pour le SEO ?

Les blocs können soutiennent le SEO s'ils offrent des informations complémentaires pertinentes, des liens internes clairs et une orientation utile. Ils ne doivent cependant pas être utilisés pour répéter les mêmes longs textes optimisés sur des mots-clés sur chaque page.

Qu'est-ce qui est le mieux : la mise en page des blocs ou le Layout Builder ?

La mise en page des blocs classique convient bien pour les zones globales du site telles que le header, la barre latérale et le pied de page. Le Layout Builder est davantage orienté vers des mises en page individuelles pour des types de contenu ou des pages spécifiques. La solution idéale dépend de l'architecture de votre site Drupal et des exigences de votre projet.

Conclusion

Le système de blocs confère à Drupal une grande flexibilité. Vous pouvez positionner précisément des contenus, des fonctionnalités et des éléments récurrents aux endroits souhaités de votre site web. Le système devient particulièrement performant grâce aux règles de visibilité, aux types de blocs personnalisés et aux champs structurés.

Pour un site web Drupal professionnel, les blocs ne doivent cependant pas être utilisés au hasard. Planifiez soigneusement l'objectif, la position, la visibilité, la langue, la sécurité et la performance. Une mise en page des blocs claire améliore l'expérience utilisateur, soutient le SEO et garantit que votre site reste facile à maintenir même lorsque son volume augmente.

Si vous souhaitez faire fonctionner Drupal sur un hébergement stable avec un support suisse, vous trouverez chez CURIAWEB des solutions adaptées pour les sites professionnels, les pages d'entreprise et les projets CMS exigeants : Hébergement web cPanel de CURIAWEB.