Le contenu visuel joue un rôle crucial pour capter l'attention des utilisateurs en ligne. Ce qu'une simple image peut transmettre nécessite souvent des centaines de mots. En outre, les images peuvent susciter des émotions et améliorer l'esthétique générale.
Une façon efficace de mettre en valeur les images est de les placer côte à côte. Cette technique est particulièrement utile pour comparer plusieurs produits, présenter des images avant et après et raconter une histoire.
Dans cet article, nous allons vous montrer trois façons simples de placer des images côte à côte dans WordPress.
Créer de belles tables
Avec l'éditeur de blocs
Première méthode : utiliser le bloc de la galerie
WordPress est livré avec le bloc Galerie par défaut. Vous pouvez présenter des images côte à côte avec le bloc de la manière suivante.
Étape 01 : Ajouter le bloc de galerie à WordPress
Ouvrez simplement un message ou une page. Trouvez l'icône Bloc de galeries dans la bibliothèque de blocs Gutenberg en appuyant sur la touche bouton plus (+). Ajoutez-le à l'éditeur.
Cliquez sur le bouton Bouton de téléchargement pour ajouter sur le côté des images fraîches provenant de votre espace de stockage local. Vous pouvez également les télécharger à partir de vos fichiers existants en cliquant sur le bouton Bibliothèque des médias bouton.
Pour ce tutoriel, nous allons télécharger des images à partir de la bibliothèque multimédia. Sélectionnez les images que vous souhaitez ajouter. Appuyez sur le bouton Créer une nouvelle galerie à la fin.
Une fois les images ajoutées à l'éditeur, vous les verrez apparaître côte à côte. Vous pouvez ensuite personnaliser les paramètres et les styles du bloc Galerie en utilisant les options correspondantes dans la barre latérale droite.
Remarque : Si vos images ne sont pas affichées côte à côte par défaut, sélectionnez le bloc entier en cliquant sur le bouton Icône de la galerie dans la barre d'outils. Spécifiez les numéros de colonne dans la barre latérale droite.
Deuxième méthode : utilisation du bloc des colonnes
Le bloc Colonne vous permet de diviser votre contenu en plusieurs colonnes. Vous pouvez ajouter d'autres blocs pour ajouter différents types de contenu dans chaque colonne.
Étape 01 : Ajouter le bloc de colonnes à votre site
Ajouter le Bloc de colonnes à votre éditeur en suivant la même méthode que celle décrite ci-dessus.
Sélectionnez la disposition des colonnes comme vous le souhaitez. Vous pouvez afficher un nombre égal d'images côte à côte, correspondant au nombre de colonnes que vous ajoutez. Nous avons sélectionné la disposition en deux colonnes pour le bloc.
Ajouter le Bloc d'images en appuyant sur la touche bouton plus (+) au sein de la Bloc de colonnes.
Téléchargez une image de la même manière que nous vous l'avons montré ci-dessus.
Remarque : Comme il s'agit du bloc Image, vous pouvez ajouter une seule imagecontrairement au bloc Galerie.
De la même manière, ajoutez le Bloc d'images à la deuxième colonne.
Vous pouvez voir que la deuxième image est apparue à côté de la première. Vous pouvez maintenant ajouter des textes alternatifs et d'autres paramètres pour les images une par une.
Method Three: Using the Tableberg Block
Tableberg est un plugin de construction de tableaux basé sur des blocs. Il vous permet de créer des colonnes et d'afficher des images côte à côte. Suivez les étapes expliquées ci-dessous après en installant et activant le plugin.
Étape 01 : Ajouter le bloc TableBerg
Le plugin est livré avec un Bloc TableBerg. Ajoutez-le à votre éditeur.
Vous pouvez sélectionner plusieurs lignes si vous le souhaitez. Mais nous expliquerons le tutoriel d'aujourd'hui avec une seule ligne et plusieurs colonnes.
TableBerg vous permet d'ajouter différents types de blocs aux cellules du tableau. Ajouter le bloc Bloc d'images aux cellules du tableau.
Télécharger une image à la cellule du tableau de la même manière que nous vous l'avons montré dans les deux méthodes précédentes.
Continuez à ajouter des images à d'autres colonnes du tableau à l'aide de la fonction Bloc d'images. J'espère que vous y parviendrez seul.
Voir l'image ci-dessous. Nous avons affiché trois images côte à côte dans le tableau créé avec le bloc TableBerg.
# Supprimer le bord du tableau
Vous pouvez voir une bordure autour de la table. Pour l'enlever, cliquez sur l'icône TableBerg trois fois dans la barre d'outils. Aller à Onglet Styles > Bordure sur la barre latérale droite. Mettez le valeur zéro (0) pour définir la taille de la bordure du tableau.
Vous pouvez ainsi afficher des images côte à côte sur les sites web WordPress.
Conclusion
L'affichage d'images côte à côte est très avantageux, tandis que la comparaison visuelle entre différents produits, options, caractéristiques et variantes est essentielle. J'espère que vous pourrez le faire seul aujourd'hui grâce à ce tutoriel.
Vous pouvez faire plus sur votre site en créant différents types de tableaux à l'aide du plugin TableBerg. Jetez un coup d'œil à Comment créer un tableau de comparaison des produits Amazon dans WordPress.
