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.

Method 1: Using the Columns Block

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.

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

É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.

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.

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.

Vous pouvez voir que nous avons ajouté une image 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.

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.

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

Method 2: Using the TableBerg Plugin

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.

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

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

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.

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.

É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.

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.

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.

Enfin, nous avons ajouté un bouton CTA.

É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.

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

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.

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

Method 3: Using the Ultimate Blocks Plugin

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.

É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.

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.

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.

É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.

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

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

É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.

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

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

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.