Comment ajouter une image de fond à un tableau dans WordPress (3 étapes faciles)

Si vous cherchez une réponse à la question "comment ajouter une image de fond à un tableau dans WordPress", vous ne trouverez pas de réponse directe. Il n'y a pas non plus d'option directe pour en ajouter.

Mais si vous êtes assez créatif, vous pouvez le faire facilement en vous aidant des autres blocs de base fournis par WordPress. Aujourd'hui, je vais vous montrer comment ajouter une image de fond à un tableau dans WordPress en trois étapes.

Pourquoi ajouter une image de fond à un tableau dans WordPress ?

L'ajout d'une image d'arrière-plan à un tableau dans WordPress peut avoir plusieurs objectifs, en fonction de vos objectifs de conception et du contenu que vous présentez.

Voici quelques raisons courantes pour lesquelles vous pourriez l'envisager :

Améliorer l'attrait visuel: Une image d'arrière-plan peut rendre un tableau simple plus attrayant. Elle ajoute une couche de créativité et peut aider votre contenu à se démarquer, en particulier si le tableau fait partie d'une page d'atterrissage ou d'un article visuellement riche.

Cohérence de la marque: Si votre site web suit un thème de conception ou une image de marque spécifique (couleurs, motifs ou images), une image d'arrière-plan dans le tableau peut aider à maintenir la cohérence.

Présentation créative: Les images d'arrière-plan sont utiles pour les tableaux affichant un contenu créatif ou non technique, comme les chronologies d'événements, les catalogues de produits ou les portfolios. Elles peuvent faire passer le tableau de l'état purement fonctionnel à celui de partie intégrante du design.

Passons maintenant à la partie principale.

Comment ajouter une image de fond à un tableau dans WordPress

Pour notre tutoriel d'aujourd'hui, nous utiliserons Tableberg. Si vous ne le saviez pas, Tableberg est un plugin de table réservé à Gutenberg qui vous permet de créer des tableaux magnifiques et réactifs dans Gutenberg.

Il vous permet d'ajouter des images, classement par étoiles, boutons, rubans, HTML personnalisé, texte, listes stylisées, etc., pour créer un tableau fonctionnel et dansant dans l'éditeur de blocs Gutenberg. En outre, il dispose de fonctionnalités avancées telles que la fusion et la division de cellules, la définition de la hauteur et de la largeur des cellules, l'en-tête collant, etc. Là encore, vous pouvez utiliser des modèles de tableau pour commencer rapidement.

Créer de belles tables
Avec l'éditeur de blocs

Essai gratuit

Obtenir un Pro

Étape 1 : Créer d'abord un groupe

Puisque le bloc WordPress Tableberg et Core table ne vous permet pas d'ajouter une image de fond, nous utiliserons la balise Bloc du groupe et Bloc de couverture.

Avant de créer une table, créez d'abord un groupe.

Accédez à votre message et insérez d'abord le bloc de groupe. Pour insérer le bloc de groupe, cliquez sur le bouton "+icône " (Ajouter une icône de bloc) dans l'éditeur (1) et tapez "Groupe"dans la boîte de recherche (2). Cliquez sur "Groupe" pour l'insérer dans l'éditeur(3).

Sélectionnez maintenant la première mise en page.

Appuyer sur la touche Bouton Ajouter un bloc à l'intérieur du bloc Groupe (1). Type "Couverture" dans la boîte de recherche (2) et sélectionner les Bloc de couverture (3).

Sélectionnez l'option de téléchargement de votre image.

Après avoir inséré votre image, supprimez le bloc Titre dans le bloc Couverture.

Étape 2 : Créer votre tableau Tablberg

Aujourd'hui, créez votre tableau à l'intérieur du bloc Cover. Je cliquerai sur le bouton "+icône " (Ajouter une icône de bloc) dans l'éditeur (1) et tapez "Tableberg"dans la boîte de recherche (2). Maintenant, je vais cliquer sur "Tableberg pour l'insérer dans l'éditeur(3).

J'insérerai un modèle de tableau de Tablberg (1) pour commencer rapidement et modifier mes données en conséquence.

Je vais maintenant en choisir un dans la bibliothèque de modèles.

Voici ce que cela donne ci-dessous.

Étape 3 : Personnalisation du bloc de couverture

Vous devez maintenant personnaliser l'image de couverture afin que tout le monde puisse facilement comprendre les données de votre tableau. Sélectionnez l'image Il suffit de cliquer à l'extérieur du tableau pour couvrir le bloc. Naviguez jusqu'à la page Paramètres (1) > Bloc (2) > Styles (3).

Modifier le Opacité de la superposition selon vos besoins (1).

Modifier la marge et l'espacement en "Aucun ” (1). Bien que vous puissiez voir que la marge et l'espacement sont définis sur none, vous devez le faire vous-même à nouveau. Sinon, l'image restera en dehors du tableau. (N.B. Elle est facultative si vous êtes d'accord avec l'étape précédente.)

La démo de l'arrière-plan de la table se trouve ci-dessous.

Dernières réflexions !

L'ajout d'une image de fond à un tableau dans WordPress n'est pas seulement une question d'esthétique : il s'agit d'améliorer l'expérience de l'utilisateur tout en préservant la cohérence visuelle de votre site web.

J'espère que cet article vous a été utile. Maintenant, ajoutez un arrière-plan à votre tableau et adaptez-le au design de votre site web.

Laissez-moi savoir ce que vous en pensez dans la section des commentaires ci-dessous. N'hésitez pas non plus à poser des questions relatives à ce tutoriel. Je me ferai un plaisir de vous aider. Partagez cet article avec vos amis sur les médias sociaux si vous le trouvez utile.