Comment créer des boîtes de contenu dans WordPress

Une boîte de contenu est un conteneur visuellement distinct qui permet d'encadrer un contenu spécifique et de le faire ressortir du reste. Il vous permet de mettre en évidence des informations clés ou des annonces spéciales, en attirant l'attention des utilisateurs sur des détails importants.

Les boîtes de contenu permettent de présenter des sections d'appel à l'action, des témoignages, des critiques et les principales caractéristiques de produits ou de services. Il existe plusieurs façons de créer des boîtes de contenu dans les sites web WordPress.

Dans la suite de cet article, nous vous présenterons trois méthodes pratiques pour créer des boîtes de contenu dans WordPress. Restez avec nous jusqu'à la fin.

Première méthode : utilisation du bloc des colonnes

Vous pouvez créer et concevoir une boîte de contenu de base en utilisant le bloc Colonnes par défaut de WordPress. Suivez les étapes expliquées ci-dessous.

Étape 01 : Ajouter le bloc de colonnes à l'éditeur

Trouver le Bloc de colonnes de la bibliothèque de blocs Gutenberg en appuyant sur la touche bouton plus (+) et l'ajouter à votre éditeur.

Ajoutez le bloc Colonnes à votre éditeur

Sélectionnez la colonne d'une cellule parmi les options disponibles.

Sélectionnez la mise en page de la colonne à cellule unique

Étape 02 : ajouter des blocs de contenu à la colonne

Le bloc Colonnes vous permet d'ajouter d'autres blocs à l'intérieur de celui-ci. Vous pouvez ajouter n'importe quel bloc pour organiser votre contenu.

Ajouter des blocs de contenu à la colonne

Cliquez sur le bouton icône plus (+) sur le bloc de la colonne. Cela ouvrira la bibliothèque de blocs de Gutenberg, à partir de laquelle vous pourrez choisir et ajouter le bloc bloc de paragraphes.

Ajouter le bloc Paragraphe au bloc Colonnes

Nous pouvons voir que nous avons déjà ajouté du texte au bloc de la colonne. Ensuite, vous pouvez ajouter d'autres blocs aux colonnes comme vous le souhaitez. Supposons que nous ajoutions le bloc Image.

Cliquez sur le bouton Icône des colonnes dans la barre d'outils. Appuyez sur la touche icône plus (+). Recherchez et sélectionnez le Bloc d'images de la bibliothèque.

Ajouter le bloc d'images au bloc de colonnes

Vous pouvez voir que nous avons ajouté une image au bloc de colonnes.

Image ajoutée au bloc de colonnes

Étape 03 : Personnalisation de l'ensemble du bloc de colonnes

Sélectionner toute la section de la colonne en cliquant sur l'icône de la colonne dans la barre d'outils. Accédez à la colonne Onglet Paramètres. Vous pouvez ajuster le Largeur de la colonne de l'option correspondante.

Personnaliser l'ensemble du bloc des colonnes

Ensuite, venez à la Onglet Styles. Vous aurez la possibilité de modifier la couleur du texte, la couleur d'arrière-plan, la typographie et les dimensions du bloc.

Styliser le bloc de colonnes

En faisant défiler la section, vous obtiendrez d'autres options pour ajouter espacement des blocs et frontière au bloc de colonnes.

Ajouter un espacement et une bordure au bloc des colonnes

Deuxième méthode : utiliser le plugin Ultimate Blocks

Ultimate Blocks est un plugin de marketing de contenu prometteur avec 25+ blocs personnalisés pour alimenter votre éditeur Gutenberg. Il dispose de plusieurs blocs étonnants grâce auxquels vous pouvez créer d'autres boîtes de contenu attrayantes sur votre site.

Étape 01 : Installer et activer le plugin Ultimate Blocks

Aller à Plugins > Ajouter un nouveau plugin. Trouver le Plugin Ultimate Blocks en tapant son nom dans le champ de recherche. Installer et activer une fois que le plugin apparaît ci-dessous.

Installer et activer le plugin Ultimate Blocks

Étape 02 : Ajouter le bloc de boîtes stylisées du plugin à votre éditeur Gutenberg

Le plugin Ultimate Blocks comprend un bloc dédié nommé Boîte de style pour créer des boîtes de contenu. Trouvez-le et ajoutez-le à l'éditeur.

Ajouter le bloc stylé du plugin à votre éditeur Gutenberg

Le bloc vous propose quatre types de boîtes. Choisissez celui qui vous convient pour afficher votre message. Chacune d'entre elles dispose d'un ensemble unique de fonctionnalités.

Dans le cadre de ce tutoriel, nous sélectionnerons l'option Boîte à outils.

Boîtes stylisées

La boîte de caractéristiques vous permet d'ajouter une image, un titre et une description. J'espère que vous pouvez le faire vous-même.

Ce que vous pouvez ajouter à la boîte à outils

Étape 03 : Ajouter du contenu au bloc

Par défaut, le bloc vous permet d'afficher un produit et de décrire ses caractéristiques. Mais vous pouvez ajouter et afficher plusieurs produits avec le bloc. Sélectionner le type de colonne vous souhaitez définir le nombre de produits à afficher.

Sélectionner le type de colonne

Maintenant, ajoutez du contenu aux options que vous voyez dans la rubrique Bloc de boîtes stylisées.

Ajouter du contenu au bloc de boîtes stylisées

Vous pouvez voir que nous avons ajouté du contenu au bloc.

Contenu ajouté au bloc de boîtes stylisées

Étape 04 : Personnaliser et styliser le bloc de boîtes stylisées

Venez au Onglet Paramètres. De la Sélectionner l'option ModeEn outre, vous pouvez remplacer la boîte de caractéristiques par d'autres boîtes stylisées comme celles présentées ci-dessus, telles que la boîte de notification, la boîte bordée et la boîte de chiffres.

Ensuite, à partir du Option de contrôle réactifVous pouvez masquer le blocage pour un type d'appareil particulier.

Personnaliser le bloc Styled Box

Ensuite, venez à la Onglet Styles. Vous pouvez modifier les Rembourrage et Marge du bloc à partir de cet onglet.

Styliser le bloc Styled box

Ainsi, vous pouvez créer une boîte de contenu à l'aide du plugin Ultimate Blocks.

Troisième méthode : Utiliser le plugin TableBerg

TableBerg est un puissant plugin de construction de tableaux qui peut améliorer la solution de construction de tableaux par défaut de WordPress. Vous pouvez également créer des boîtes de contenu attrayantes avec le plugin. Voyons comment procéder.

Étape 01 : Installation et activation du plugin TableBerg

Comme pour la méthode ci-dessus, il faut aller sur Plugins > Ajouter un nouveau plugin. Trouver le Plugin TableBerg en tapant son nom dans le champ de recherche. Installer et activer il.

Installer et activer le plugin TableBerg

Étape 02 : Ajouter le bloc TableBerg à l'éditeur

Le plugin est livré avec un bloc nommé TableBerg. Ajoutez-le à l'éditeur.

Trouvez et ajoutez le bloc TableBerg à votre éditeur Gutenberg.

Si vous envisagez de construire un tableau, vous pouvez définir le nombre de lignes et de colonnes ici, comme dans le bloc de tableau par défaut.

Définir les colonnes et les lignes d'un tableau

Mais sélectionnez la ligne 1 et la colonne 0 pour créer une boîte de contenu. Vous pouvez voir que la mise en page a été créée instantanément.

Ajouter du contenu à la boîte TableBerg

Étape 03 : Ajouter du contenu à la boîte TableBerg

TableBerg vous permet d'ajouter différents types de contenu à ses lignes et à ses colonnes en ajoutant des blocs de contenu.

Une fois que vous avez placé votre curseur sur la boîte, vous verrez l'option de blocage apparaître dans le coin inférieur droit.

Ajouter du contenu à la boîte TableBerg

Sélectionnez un à un les blocs que vous souhaitez ajouter à la boîte pour créer le contenu souhaité. Nous commencerons par ajouter le bloc image.

Ajouter le bloc d'images

Ensuite, vous pouvez voir que nous avons ajouté un texte descriptif sur le produit. Nous avons ajouté et utilisé l'élément Bloc de paragraphes pour cela.

Ajouter un paragraphe au bloc

Enfin, nous avons ajouté un bouton CTA.

Ajouter un bouton CTA à la boîte TableBerg

Étape 04 : Personnalisation de la boîte TableBerg

Vous pouvez personnaliser chaque bloc individuellement que vous avez ajouté à la boîte TableBerg. Ensuite, vous pouvez personnaliser et styliser l'ensemble de la boîte TableBerg.

Nous ne montrons pas comment personnaliser les blocs individuels, car cela rendrait le tutoriel trop long. Vous pouvez le voir sur notre page de documentation.

Sélectionnez toute la boîte en cliquant sur l'icône TableBerg dans la barre d'outils.

Personnaliser les paramètres de la boîte TableBerg

Dans l'onglet Paramètres, vous pouvez définir la largeur souhaitée pour la boîte.

Personnaliser la largeur du tableau

A partir de la Onglet StylesVous pouvez personnaliser la couleur d'arrière-plan, le remplissage, la marge et l'espace de la boîte.

Personnaliser la boîte de contenu

Ainsi, vous pouvez créer une boîte contextuelle avec le plugin TableBerg.

Notes de fin d'année !

Ultimate Blocks et TableBerg sont deux plugins multifonctionnels qui visent à révolutionner le système Gutenberg, permettant aux utilisateurs de créer facilement des contenus sophistiqués.

TableBerg est encore en cours de développement et promet de proposer très prochainement de nombreuses fonctionnalités avancées. D'un autre côté, Ultimate Blocks est déjà un plugin populaire utilisé par plus de 60 000 sites web dans le monde entier.

Si vous avez des questions à ce sujet, n'hésitez pas à nous les poser à tout moment dans la boîte de commentaires.



L'équipe Tableberg

L'offre de réservation anticipée est en ligne dès maintenant !
Texte par défaut de la barre de notification