Comment utiliser le module de contenu de publication dans le générateur de thème Divi

Le module de contenu de publication est un module spécial disponible lors de la création d'une disposition de la zone du corps pour un modèle dans le générateur de thème Divi. Comprendre ce qu'est le module de contenu de publication et comment l'utiliser sera extrêmement utile lors de la conception de modèles personnalisés avec Divi Theme Builder.

Dans ce tutoriel, nous allons expliquer comment fonctionne le module de contenu de publication et comment l'utiliser au mieux lors de la conception de modèles dans Divi.

Plongeons-nous !

Abonnez-vous à notre chaîne Youtube

À propos du module de contenu de publication de Divi

La fonction principale du module de contenu de publication est d'afficher (et de styliser) le contenu d'une publication ou d'une page dans un modèle de publication ou de page donné. Le module est exclusivement conçu pour fonctionner avec Theme Builder, il ne sera donc pas disponible en utilisant Divi Builder pour éditer une page ou une publication régulière.

Dans le générateur de thème, le module de contenu de publication crée une zone pour le générateur Divi à utiliser dans la zone de corps d'un modèle de générateur de thème. Il peut également être utilisé pour afficher et styliser le contenu d'un article ou d'une page créé à l'aide de l'éditeur WordPress par défaut. Cela le rend particulièrement utile pour créer des modèles de publication de blog.

Le module peut être ajouté à la disposition de la zone du corps de n'importe quel modèle en utilisant le processus normal d'ajout d'un nouveau module dans Divi. Cliquez simplement sur l'icône d'ajout de module et sélectionnez le module de contenu de publication dans la liste.

Cela fera apparaître le modal des paramètres de contenu de la publication qui inclut toutes les options de conception disponibles pour ajouter des éléments de style par défaut à hériter par les publications ou les pages attribuées au modèle.

Le contenu fictif est là pour nous donner un visuel utile sur l'apparence de ces éléments sur une page ou une publication en direct.

Maintenant que nous avons une brève introduction au module de contenu de publication, explorons comment nous pourrions l'utiliser sur notre propre site Divi.

Utilisation du module de contenu de publication pour les modèles de publication

Utilisation du module Post Content pour afficher le contenu de publication créé avec l'éditeur classique ou par défaut (pas Divi)

Une application très pratique du module de contenu de publication consiste à utiliser le module pour ajouter un style au contenu de publication sur le modèle afin de publier du contenu créé avec l'éditeur de publication par défaut de WordPress (sans utiliser le Divi Builder).

Par exemple, nous pourrions créer un nouveau modèle attribué à toutes les publications sur notre site Divi.

Utilisez ensuite l'éditeur de mise en page de modèle pour concevoir le modèle de publication de blog à l'aide d'éléments de conception statiques et de contenu dynamique.

Identifiez la zone du modèle dans laquelle vous souhaitez que le contenu réel de la publication d'une seule publication soit affiché. Ajoutez ensuite le module Post Content à la mise en page du modèle.

Ensuite, ouvrez les paramètres du module de contenu de publication pour ajouter le style que vous souhaitez appliquer à tout contenu de publication ajouté à une publication nouvelle ou existante sur votre site. Le module de contenu de publication a un contenu fictif intégré avec divers éléments qui peuvent être stylisés. Ce contenu fictif sera remplacé par le contenu réel de la publication lors de la visualisation d'une publication sur le site Web.

Avec le module de contenu de publication ajouté au modèle avec les styles ajoutés aux paramètres du module de publication, le modèle de publication est prêt à être utilisé par nos articles de blog sur le site en direct.

Nous pouvons créer une nouvelle publication ou modifier une publication existante à l'aide de l'éditeur par défaut ou de l'éditeur classique de WordPress.

Si nous utilisons l'éditeur classique, tout contenu ajouté à la zone de contenu à l'aide de l'éditeur wysiwyg remplira la zone du modèle stylisée par le module de contenu de publication.

Si nous utilisons l'éditeur WordPress par défaut (ou l'éditeur de blocs), tout contenu que nous créons avec l'éditeur de blocs remplira (et héritera du style de) la zone du module de contenu de publication du modèle.

Les blogueurs qui préfèrent l'éditeur par défaut/classique n'auront pas à se soucier du style du contenu car il héritera du style qui a été défini dans le module de contenu de publication sur le modèle. Ainsi, les écrivains peuvent se concentrer davantage sur le contenu réel. De plus, le modèle de publication aura une conception supplémentaire et un contenu dynamique entourant le contenu de la publication pour compléter la conception globale de la publication.

Voici un aperçu du backend d'un post fictif construit avec l'éditeur par défaut/classique.

Voici le même message lors de la visualisation sur le front-end.

En plus de la conception et du contenu dynamique qui existe sur le modèle, notez le style du contenu de la publication à l'aide du modèle

Utilisation du module de contenu de publication pour afficher le contenu de publication construit avec Divi.

Lorsque vous utilisez un modèle de publication pour les articles de blog, nous pouvons décider d'utiliser le générateur Divi pour concevoir un ou plusieurs de nos articles de blog au lieu d'utiliser l'éditeur par défaut. Cela nous donnera un meilleur contrôle sur la conception de chaque élément du contenu de la publication au lieu de simplement compter sur l'éditeur par défaut et le style du module de contenu de publication dans le modèle.

Gardez à l'esprit que même si nous utilisons Divi Builder pour concevoir la publication, l'espace total de la conception du contenu de la publication sera contenu dans la zone désignée par le module de contenu de la publication dans le modèle de publication.

Pour plus d'informations, consultez notre documentation sur la façon de créer un modèle de publication de blog à l'échelle du site.

Utilisation du module de contenu de publication pour les modèles de page

Malgré son nom, le module de contenu de publication peut être utilisé pour les publications et les pages. Ainsi, si nous voulions créer un modèle de corps pour une ou plusieurs pages de notre site Web, nous devrons utiliser le module de contenu de publication pour nous assurer que le contenu de la page est affiché.

Dans la plupart des cas, il n'est pas nécessaire de créer un modèle de corps pour une ou plusieurs pages, car chaque page se compose généralement d'un contenu statique unique qui est construit page par page. Cependant, il peut arriver qu'un modèle de corps soit également utile pour les pages. Cela peut être utile pour ajouter une conception et un contenu au niveau du modèle que nous souhaitons afficher automatiquement sur les pages.

Par exemple, nous pouvons souhaiter inclure le même design de titre de page pour toutes les pages de notre site. Ou, nous pouvons vouloir inclure un CTA comme un Email Optin au bas de toutes (ou certaines) nos pages.

Voici un exemple de la façon dont cela fonctionnerait sur un site Web.

Tout d'abord, accédez au Divi Theme Builder et créez un nouveau modèle. Attribuez ensuite le modèle à toutes les pages et ajoutez une zone de corps personnalisée au modèle. Après cela, cliquez pour modifier la zone du corps personnalisée.

Dans l'éditeur de mise en page de modèles, utilisez Divi Builder pour concevoir une section de titre de page à l'aide de contenu dynamique. Nous suggérons d'utiliser un module de texte et d'insérer l'élément de contenu dynamique Titre de publication/archive pour le contenu du corps du module de texte. Le titre de la publication/de l'archive affichera également les titres des pages.

Créez ensuite une nouvelle section pour le module de contenu de publication. Encore une fois, cela est nécessaire car sans le module de contenu de publication, le modèle n'affichera aucun contenu ou conception de page individuelle.

Étant donné que ce module de contenu de publication sera le conteneur parent du contenu de notre page, il est judicieux de permettre au module de contenu de publication de s'étendre sur toute la largeur de la page. Nous pouvons toujours ajuster l'espacement lors de la conception du contenu de la page individuelle lors de l'utilisation du Divi Builder.

Ensuite, nous pouvons ajouter une section au bas du modèle qui sera affichée sur toutes les pages. Puisque nous voulons que le contenu soit affiché sous le contenu réel de la publication/de la page, nous devons l'ajouter sous la section contenant le module de contenu de la publication.

Voici un exemple de section créée sous le contenu de la publication contenant des icônes sociales et un optin par e-mail.

Remarque : puisque nous utiliserons Divi Builder pour concevoir des pages réelles dans Divi, nous n'avons pas vraiment besoin d'ajouter un style au module de contenu de publication.

Maintenant que notre modèle de page est en place, nous pouvons créer une nouvelle page dans Divi en allant dans Pages > Ajouter un nouveau. Ajoutez ensuite un titre et déployez le Divi Builder.

Cliquez ensuite pour construire sur le front-end.

Vous pouvez concevoir le contenu de la page sur le front-end à l'aide de Divi. Mais remarquez comment le générateur frontal (visuel) sera contenu dans la zone du module de contenu de publication du modèle de page affecté à la page. Lors de la modification d'un article ou d'une page dans Divi Builder, l'ensemble de l'interface utilisateur de Divi Builder s'affiche dans la colonne dans laquelle se trouve le module de contenu de publication. Tout le reste en dehors de ce module est statique et ne peut pas être modifié en dehors de Theme Builder.

Ainsi, pour cet exemple, la page se compose des zones suivantes :

1. En-tête global (ajouté à la zone d'en-tête personnalisé du modèle de page)
2. Section de titre (ajoutée à la disposition de la zone de corps personnalisée du modèle de page au-dessus du contenu de la page)
3. Section de contenu de publication (ajoutée à la disposition de la zone de corps personnalisée du modèle de page ; se compose du module de contenu de publication qui détermine l'espace de construction pour le Divi Builder)
4. Section CTA (ajoutée à la disposition de la zone de corps personnalisée du modèle de page sous le contenu de la page)
5. Pied de page global (ajouté à la zone Pied de page personnalisé du modèle de page)

Voici à quoi cela ressemble lors de l'édition de la page sur le front-end avec le Divi Builder.

Le module de contenu de publication fonctionne bien pour la conception de pages WooCommerce générées par des codes courts.

Le module de contenu de publication sera également utile chaque fois que nous créerons des modèles de page pour les pages WooCommerce. Les pages WooCommerce génèrent du contenu de page à l'aide de codes courts. Ces shortcodes existent dans la zone de contenu de la page WooCommerce.

Voici à quoi ressemble une page de compte par défaut lors de la modification de la page dans Divi.

Pour concevoir un modèle pour cette page WooCommerce, nous n'avons pas besoin de déployer le Divi Builder sur l'éditeur de page. Nous pouvons créer un modèle dans le Divi Theme Builder et cibler la conception du contenu de la page généré par le shortcode (au moins une partie) à l'aide du module de contenu de publication.

Lorsque vous créez le modèle, assurez-vous d'attribuer le modèle à la ou aux pages WooCommerce.

Important : Le module de contenu de publication n'affichera pas le contenu des pages d'archive/catégorie. Assurez-vous de ne pas affecter la page de la boutique à un modèle qui dépend du module de contenu de publication pour afficher le contenu. La page de la boutique n'affichera aucun contenu. Ainsi, puisque nous prévoyons d'utiliser le module de contenu de publication dans le modèle, nous devrons limiter notre affectation de modèle pour inclure uniquement le panier, le paiement et/ou la ou les pages Mon compte.

Nous pouvons maintenant ajouter une zone de corps personnalisée au modèle et la créer à l'aide de l'éditeur de mise en page de modèle.

Personnalisez ensuite le modèle de page à l'aide du Divi Builder. Lorsque vous ajoutez le module de contenu de publication, assurez-vous de mettre à jour les paramètres de conception afin de cibler la conception des éléments de page WooCommerce générés par le shortcode.

Et voici à quoi ressemblerait la page Mon compte sur le front-end avec le style du module de contenu de publication en place.

Malheureusement, le module de contenu de publication ne pourra pas styliser directement chaque élément du contenu généré par la page WooCommerce. Mais cela fournira un bon bonus lors de la conception de modèles de page woocommerce.

Pas pour les modèles de pages d'index/d'archives/de catégorie

Étant donné que le module de contenu de publication est conçu pour afficher le contenu d'une page ou d'une publication particulière créée dans Divi, il ne fonctionnera pas avec les modèles de page d'index (archive). Si le modèle est utilisé sur une page d'index (archive), le module n'est pas rendu sur le front-end et donc aucun contenu n'est affiché.

Si ce module existe dans une zone de corps, mais qu'aucun contenu de publication n'existe (ou si le modèle est utilisé sur une page d'index (archive)), le module n'est pas rendu sur le front-end.

En bref, n'utilisez pas le contenu du module de publication pour afficher le contenu des pages d'archives, y compris la page de résultats de recherche et la page 404.

Utilisez le module Blog pour les modèles de pages d'archives.

Si nous voulons construire un modèle pour les pages d'archives, le module de blog de Divi inclut la possibilité d'afficher le contenu de la page en cours. Cela générera le contenu associé à la catégorie ou à la page d'archive.

Pour plus d'informations, consultez cet article sur la façon de créer un modèle de page de catégorie pour votre blog.

Pas pour les modèles de page de produit

Lors de la création d'un modèle de page de produit pour les produits WooCommerce dans Divi, il est préférable de ne pas dépendre du module de contenu de publication pour afficher les informations sur le produit dans la zone du corps du modèle. Divi dispose de tous les modules Woo dont nous avons besoin pour extraire dynamiquement les informations sur les produits au niveau du modèle. L'utilisation du module de publication de contenu sur un modèle affecté à une page de produit n'affichera que le contenu inclus dans la zone de contenu (qui, par défaut, n'est que la description du produit).

Pour plus d'informations, découvrez comment créer un modèle de page de produit.

Avertissement si le module de contenu de publication est manquant

Si le module Contenu de la publication n'est pas inclus dans le corps du modèle de générateur de thème et que nous choisissons « Utiliser le générateur Divi » pour modifier une publication à l'aide de ce modèle, une boîte de dialogue d'avertissement nous indique qu'il nous manque le Affichez le module de contenu sur le modèle utilisé. Il y a aussi un bouton pour nous amener directement au générateur de thème pour apporter les modifications nécessaires au modèle.

Dernières pensées

Lors de la conception de nouveaux modèles pour un site Divi, il est important de comprendre comment utiliser le module Post Content. Le module est peut-être mieux utilisé en conjonction avec des éléments de contenu dynamiques pour créer un modèle pour les articles de blog, ce qui peut rationaliser le flux de travail de création d'articles de blog sans avoir à déployer le Divi Builder. Mais le module de contenu de publication peut également être utile pour les modèles de page, même les pages WooCommerce.

Quelle a été votre expérience avec le module de contenu de publication jusqu'à présent ?

J'ai hâte de vous entendre dans les commentaires.

À votre santé!