Créer des tableaux de prix avec l'éditeur de blocs Gutenberg

En plus d'un an, nous avons vu une grande évolution dans l'éditeur de blocs Gutenberg. Par rapport à l'éditeur WordPress classique, nous pouvons désormais concevoir des éléments dans nos articles et pages qui auparavant ne pouvaient être réalisés que par codage.

Par exemple, avec l'éditeur classique, le moyen le plus simple d'afficher un tableau dans un article était de créer créer ledit tableau dans une feuille de calcul, de l'exporter sous forme d'image, puis de l'insérer dans l'article où vous vouliez l'afficher. Mais l'un des blocs que l'on retrouve désormais dans le nouvel éditeur WordPress est le bloc table. Voyons comment on crée un tableau avec Gutenberg et dans quelle mesure on pourrait créer un tableau de prix avec ce même bloc.

Le bloc de table

Créer un tableau est aussi simple que d'ajouter un nouveau bloc Tableau dans lequel nous indiquons le nombre de lignes et de colonnes que nous voulons et leur alignement.

Dans un bloc Table, nous pouvons personnaliser les propriétés suivantes :

Nous pouvons également indiquer dans chaque cellule l'alignement du texte et si la police est en gras ou en italique, et ajouter des liens. De plus, nous pouvons modifier le tableau à tout moment en ajoutant ou supprimant des lignes et/ou des colonnes.

De cette façon, on voit qu'on peut facilement créer le tableau suivant :

C'est beaucoup plus simple et rapide que ce que l'on pourrait faire avec l'éditeur classique. Et le résultat obtenu peut sûrement servir à montrer un tableau de données.

Limitations des blocs de table

Bien qu'il nous ait été très facile de créer le tableau précédent, nous avons rencontré pas mal de limitations. D'une part, les tableaux que vous concevez avec le bloc Type de tableau dans Gutenberg ne sont pas réactifs. C'est-à-dire que le tableau ne se brise pas mais devient plus petit sans pouvoir afficher les différents éléments du tableau par colonnes :

Un tableau qui s'adapte entièrement aux appareils montre les éléments du tableau en divisant le tableau en colonnes, de sorte que toutes les cellules s'affichent beaucoup mieux.

En plus de la (in)capacité à s'adapter aux appareils, comme vous l'avez peut-être remarqué, dans un bloc de tableau, nous ne pouvons pas facilement changer le type et la taille de la police, les couleurs, etc. dans chaque cellule. C'est-à-dire qu'en raison de toutes ses limitations, le bloc tableau Gutenberg n'est pas utile pour créer un tableau de prix attractif pour vos produits.

Comment pouvons-nous créer ces tableaux réactifs ?

Alternatives

Le bloc des colonnes

Une alternative serait d'essayer de disposer le tableau avec le bloc de colonnes :

De base

pour les indépendants et les sites personnels

29 € / mois

1 emplacement

5 000 visites sur les pages testées

S'abonner

Professionnel

pour les petits entrepreneurs

89 € / mois

5 chantiers

35 000 visites sur les pages testées

S'abonner

Entreprise

pour les équipes axées sur l'optimisation

259 € / mois

? 10 chantiers

200 000 visites sur les pages testées

S'abonner

L'avantage du bloc colonnes, par rapport au bloc Table, c'est qu'il est entièrement responsive, et sur un écran mobile on verra que chacun des plans s'affiche derrière l'autre.

On voit que les colonnes sont entièrement responsives. Et sûrement les colonnes, pour montrer peu d'informations et sans trop de complications, sont une alternative à considérer.

Plugins de bloc de tableau de prix

Ma recommandation si vous devez créer des tableaux de prix attractifs est d'installer certains des plugins qui incluent des blocs pour cela. Ils peuvent ne pas vous permettre, sans toucher au code, tout type de personnalisation, mais dans de nombreux cas, vous pouvez obtenir des résultats très élégants. Regardons quelques exemples entièrement intégrés à l'éditeur de blocs Gutenberg.

CoBlocs

Coblocks est un plugin qui regroupe tout un ensemble de blocs totalement adaptés à Gutenberg. L'un d'eux est le bloc Tableau des prix.

C'est très simple et facile à utiliser et, sans codage, vous pouvez personnaliser le nombre de colonnes et certains aspects liés à la typographie, ainsi que les couleurs des colonnes et du texte. Vous disposez rapidement d'un tableau de prix entièrement réactif comme celui présenté dans l'image suivante.

Getwid

De même, le plugin Getwid comprend également tout un ensemble de blocs entièrement compatibles avec l'éditeur Gutenberg. Rapidement, vous pouvez facilement créer un tableau de prix entièrement réactif comme celui-ci :

Dans ce cas, vous pouvez personnaliser les polices et les couleurs de fond et de texte.

Blocs Premium pour Gutenberg

Le plugin Premium Blocs for Gutenberg comprend également des blocs avec lesquels vous pouvez créer des tableaux de prix très attractifs. Ci-dessous, je vous montre une image de tableau de prix que j'ai créée avec le bloc Tableau de prix inséré dans les colonnes.

Ce bloc vous permet de personnaliser les couleurs, les polices, le type de boutons, si vous souhaitez inclure une icône, les propriétés d'affichage du prix, les fonctionnalités et la description, entre autres. Comme vous pouvez le voir, il vous permet une personnalisation très complète.

Plugins avec éditeurs intégrés

Alternativement, vous trouverez d'autres types de plugins qui incluent un éditeur de tableau de prix intégré qui s'intègre dans votre tableau de bord WordPress et avec lequel vous pouvez créer des tableaux très complets et personnalisés. Une fois le tableau souhaité construit, ce tableau peut être inclus dans n'importe quelle page ou publication en utilisant un shortcode. Voyons quelques exemples :

Tableau de tarification réactif

Responsive Pricing Table est un plugin qui ajoute un nouvel éditeur à votre WordPress afin que vous puissiez créer des tableaux de prix. Vous pouvez ajouter un grand nombre de plans et personnaliser chacun d'eux.

Pour chaque plan, vous pouvez ajouter le nom, le sous-titre, la description et le prix. Vous pouvez également ajouter une liste de fonctionnalités, personnaliser le bouton d'achat et modifier la palette de couleurs du plan.

Une fois le plan créé, il vous suffit de l'ajouter à l'aide d'un shortcode sur la page de tarification.

Tableau des prix par Supsystic

Le plugin Supsystic Pricing Table ajoute un éditeur glisser-déposer à votre tableau de bord WordPress avec lequel vous pouvez créer des tableaux. Il vous offre de nombreuses conceptions de table réactives. Dans la version gratuite, vous avez jusqu'à 7 modèles disponibles.

Après avoir sélectionné le design de tableau souhaité, vous disposez d'un éditeur qui vous permet de modifier le nombre de colonnes et de personnaliser un grand nombre de fonctionnalités de chacun des plans affichés. Et vous pouvez également modifier la mise en page à tout moment. Enfin, comme auparavant, le tableau peut être inclus dans n'importe quelle page ou publication avec un shortcode.

Les autres plugins gratuits qui intègrent les éditeurs de tableaux de prix sont :

• Tableau des prix par ARPrice
• Tableaux de tarification WordPress Plugin – Tableaux de tarification faciles par Fatcat Apps
• Générateur de tableau de tarification réactif - wpPricing Builder
• Tableaux de tarification WRC
• Générateur de tableaux de tarification - AP Pricing Tables Lite
• Tableau des prix TC par thèmesCode
• Tableau des prix – bh A WP Life

Conclusion

Comme vous le voyez, dans WordPress, vous disposez d'une grande variété d'alternatives pour créer des tableaux de prix sans frais supplémentaires et sans avoir à coder directement. Il s'agit donc simplement de choisir l'option qui correspond le mieux à vos besoins.

N'oubliez pas que la page où vous affichez les prix de vos produits finit par être la plus critique pour attirer des clients. Ainsi, le temps que vous passerez à le rendre attractif ne sera pas vain. Et pour vous inspirer, vous pouvez jeter un œil au design de la grille tarifaire de notre produit Nelio A/B Testing, qui est celui qui ressort comme image vedette de ce post ?.