You can easily build a feature-descriptive and stunning pricing table with various styling options.

Let’s know how to create a pricing table in the Gutenberg editor on your WordPress website.

Your WordPress site needs to have the GutenKit plugin installed. Then, follow the below steps:

How to Use GutenKit Pricing Table #

Step 1: Add the Pricing Table Block #

Start to edit an existing page or add a new page and click the “+” icon > Search for the Tableau des prix in the block library > Drag & drop the block to the editor screen.

Step 2: Add Pricing Table Content #

Open the block settings and go to the content tab. At first, we’ll enter the pricing table name and additional information. 

Entête: #

• Table Title: Enter the text of your table header title. 
• Balise HTML de titre: Select the heading’s HTML tag to H1- H6, Div, Span, or Paragraph.
• Table Subtitle: Use this box to write the subtitle for the pricing table.
• Header Icon or Image: Add an icon or image for the table header. You can also choose to display none.

Step 3: Enter Pricing Info #

Price Tag: #

• Devise: Add a sign or word to show the monetary standard. 
• Prix: Enter a value for the price.
• Durée: Enter the text to show the package duration.

Step 4: Add Package Details #

From the feature settings area, you will add the details of your package.  

Caractéristiques: #

• Features Style: Select a style from the dropdown to display the feature between a paragraph or list.

• Table Content: If you choose the paragraph style this option shows up. Enter the package details in the box.

• Liste: Selecting the List option will open up settings for adding a feature list. To add an item, hit the + Ajouter un article button. You can also copy an item by clicking the “Cloner un élément” icon and delete one with the “X” icon. Now, click any of the items and there will be the following options.

• List Text: Enter text for the feature or package.
• Add Icons: Enable this toggle button to show an icon with the feature.
• Icône: Select an icon from the library or upload it from your device.
• Couleur: Select a color for your icon.
• Info Text: Add any special info about the feature in this box. It will enable an info icon.

Step 5: Add Pricing Table Button #

Using this settings area, you can add a button within the pricing table

Bouton: #

• Étiquette: Saisissez le texte de votre bouton.
• Lien: Enter the link address of the webpage you want the visitor to go to.
• Ajouter une icône: Show an icon with the button text.
  • Icône: Choose an icon from the library or upload your own one. 
  • Position: Place the icon before or after the text.
• Espacement des icônes: Use the slider to define the gap between the button text and the icon.
• Class & ID: Add a specific Class & ID in these boxes to target the custom CSS from the Stylesheet.

Step 6: Configure Element Ordering #

Custom Ordering: #

• Enable Ordering: Activate this toggle button to set the ordering of items. Drag an item up or down to place it in your preferred position.

Step 7: Style Content Area #

Now, we’ll focus on styling the text content of the pricing tale. You need to enter the “Onglet Style».

Pricing Body: #

• Alignement: Set the horizontal position of the pricing table to left, center, or right.

Up next, there will be Table Title and Subtitle options. Both settings have similar settings.

Table Title: #

• Alignement: Align the table title to left, center, or right.
• Typographie: Open this setting area to get all the typography customization for the table title.

The following options are applicable for both normal and hover options.

• Couleur: Use the color picker to choose a color for the title.
• Frontière: Get all the border customizations like color, style, and thickness.
• Rayon de frontière: Define the roundness of the border roundness.

• Rembourrage: Add spaces around the title.
• Marge: Define the distance of the title with other elements.

Step 8: Customize Pricing Info #

Price Tag: #

• Position Right: Adjust the left/ right position of the price tag background.
• Largeur: Use the slider to extend or shrink the background width. 
• Rembourrage: Add inner space to the pricing tag.
• Marge: Adjust the distance of the pricing tag with other elements.
• Typographie: Open this setting to style the typography of the price tag.

Durée:

• Couleur du texte: Choose a color for the duration text for the normal state.
• Text Hover: Set the text color on hover as in the previous option.
• Typography: Get all the typography options for the duration text.
• Position verticale: Define the vertical position of the duration text within the pricing tag. (Top, Middle, Bottom)

Symbole de la monnaie:

• Typographie: Style the currency text.
• Position: Place the currency symbol before or after the pricing number.
• Position verticale: Set the vertical positioning of the currency symbol.

• Couleur: Select a color for displaying your currency.
• Type d'arrière-plan:Ajoutez un type d'arrière-plan entre la couleur unie et le dégradé.
• Frontière: Set the thickness, color, and style of the border.
• Rayon de frontière: Enter a value to measure the roundness of the border.
• Boîte ombre: Beautify this portion with a box shadow animation effect.

Step 9: Customize Package Details #

Caractéristiques #

• Alignement: Align the feature paragraph text or list to left, center, or right.
• Typographie: Change the feature text style, font family, weight, transform, spacing, etc.

The following styling features can apply to both normal and hover options.

• Couleur: Pick a color for the feature text.
• Frontière: Customize the border style, color, and thickness.
• Rayon de bordure : Ajustez la rondeur de la bordure.
• List Gap: This option only appears when you select the list option in the features setting in the content tab. Use this slider to define the gap between all the list items.

• Marge: Add spaces surrounding the feature text area.
• Rembourrage: Expand the space around the feature text area by entering a value in this box.

Icône:

• Icon Size: Use this slider to measure the icon size of the list.
• Spacing: Define the gap between the icon and the text of the list.

Step 10: Customize Pricing Table Button #

Bouton: #

• Alignement: Place the button to the left, center, or right.
• Typographie: Get various styling options for button text.
• Couleur: Give a color to the button text.
• Type d'arrière-plan: Choose a classic or gradient background type.
• Boîte ombre: Give a shadow effect to your border.
• Frontière: Define the border thickness, style, and color.
• Rayon de frontière: Ajustez la rondeur de la bordure.
• Rembourrage: Increase space inside the button border.

Step 11: Configure Advanced Settings #

Dans l'onglet Paramètres avancés, vous pouvez configurer la disposition du bloc Accordéon, l'arrière-plan, les styles de bordure et contrôler sa visibilité.

Mise en page: #

• Marge: Définissez l'espace autour de la disposition des blocs. Cela aide à définir l’écart entre un autre bloc.
• Rembourrage: saisissez une valeur pour définir l'espace autour du bloc dans sa disposition.
• Largeur: En plus de conserver la largeur de mise en page par défaut.
  • Pleine largeur: En sélectionnant cette option, la mise en page s'étendra sur toute la largeur de l'écran.
  • En ligne (auto): Son application aura la même largeur que l'élément de bloc.
  • Coutume: Choisir cette option fera apparaître un curseur pour définir l'espace horizontal de la disposition des blocs.
• Indice Z: utilisez le curseur pour spécifier l'ordre de pile du bloc avec d'autres blocs.

Position: #

Sous la liste déroulante, vous verrez trois options : Défaut, Absolu, et Fixé. 

• Absolu: La sélection de cette option vous donnera une position absolue du bloc, ce qui signifie que les éléments rentreront dans leur conteneur.
• Fixé: L'option Position fixe permettra à l'élément de s'adapter à la totalité de la fenêtre ou de l'écran.

Les options Absolue et Fixe ont des paramètres similaires comme ci-dessous :

• Orientation horizontale: Choisissez la direction de positionnement entre gauche et droite.
• Compenser: Utilisez le curseur ou mettez une valeur manuellement pour ajuster le positionnement horizontal du bloc.
• Orientation verticale: Sélectionnez la direction de positionnement entre le haut et le bas.
• Compenser: Utilisez le curseur ou mettez une valeur manuellement pour ajuster le positionnement vertical du bloc. 

Arrière-plan: #

• Arrière-plan: Choisissez une option d’arrière-plan entre couleur unie, dégradé ou image.

Sous l'option Survol :

• Image: Si vous choisissez l'option image, les options suivantes s'ouvriront :
  • Image: Choisissez une image dans la médiathèque ou téléchargez la vôtre.
  • Taille de l'imagee : Sélectionnez la taille de l'image entre Vignette, Moyenne, Grande ou Complète.

• Position: Sélectionnez la position des 10 options différentes.
• Pièce jointe: Spécifiez la relation de l'image d'arrière-plan fixe ou défilante avec le reste de l'écran du navigateur.
• Répéter: sélectionnez une option pour définir la manière dont les images d'arrière-plan sont répétées.
• Taille d'affichage: Sélectionnez une taille d’affichage parmi quatre options différentes.

• Durée de la transition: Utilisez le curseur pour ajuster la transition d'arrière-plan de l'état Normal à l'état de survol.

Frontière: #

• Frontière: Sous cette option de configuration, vous obtiendrez des options de configuration des bordures telles que la largeur, le style et la couleur.
• Rayon de frontière: Définissez la rondeur de la bordure en saisissant une valeur.
• Boîte ombre: obtenez tous les paramètres tels que la couleur, l'horizontal/vertical, le flou, la répartition, etc. pour donner des effets d'ombre à la bordure. 

Sous l'option de survol :

• Durée de la transition: Vous pouvez ajouter une valeur manuellement ou utiliser le curseur pour définir l'heure de modification du motif de la bordure en survol.

Visibilité: #

Le module de visibilité vous permet de contrôler l'affichage des conceptions de blocs en fonction du type d'appareil. Il y aura trois options d'appareil (ordinateur de bureau, tablette, mobile) avec un bouton bascule. Activez le bouton bascule pour masquer la conception de bloc de cet appareil.

Cependant, vous pouvez toujours le voir dans la vue de l'éditeur.

Avancé: #

• Nom du bloc: donnez un nom pour identifier ce bloc de manière unique lors de la création de liens ou de scripts pour styliser le bloc.
• Ancre HTML: Ajoutez une URL pour lier une page de site Web.

• Classes CSS supplémentaires: Attribuez des classes CSS supplémentaires au bloc qui vous permettront de styliser le bloc comme vous le souhaitez avec du CSS personnalisé. 

N.-B.: Vous pouvez ajouter plusieurs classes séparément avec des espaces.

That’s it! Now, it’s your turn. Create an amazing pricing table from the block editor on your WordPress website.