Comment aligner des Images Côte à Côte dans WordPress
L’alignement des images est une lutte constante pour le blogueur WordPress.
Cet article s’adresse à tous ceux qui ont passé plus de temps qu’ils ne voudraient l’admettre à jouer avec l’alignement et le positionnement de l’image dans l’éditeur.
Les deux meilleures méthodes pour aligner les images
Il existe deux techniques à considérer pour placer les images l’une à côté de l’autre. Je vais partager comment utiliser chacun ainsi que les avantages et les inconvénients inclus.
Aligner des images avec une galerie
La méthode la plus fiable pour placer des images côte à côte consiste à utiliser une galerie WordPress.
Si vous n’avez jamais créé de galerie auparavant, suivez ce tutoriel sur la création de galeries.
L’astuce consiste à utiliser une version de taille moyenne des images et à choisir deux colonnes, même si vous n’incluez que deux images. Le résultat ressemblera à ceci:
Contrairement aux images que vous placez dans votre publication, les galeries ont un code HTML spécial qui maintient les images les unes à côté des autres. Cette structure facilite et simplifie l’alignement des images en lignes/ colonnes.
Placez des images avec des codes courts de colonne
Si cela ne vous dérange pas d’ajouter un nouveau plugin à votre site, les codes courts de colonne sont une excellente solution pour aligner les images.
Column Shortcodes est l’un de ces plugins géniaux qui ne remplissent pas votre site de nouveaux menus. En fait, la seule chose qu’il ajoute à votre tableau de bord d’administration est ce bouton pratique au-dessus de l’éditeur.
Pour montrer comment cela fonctionne, je vais créer une seule ligne de trois images.
Comment utiliser les Shortcodes de colonne
La première étape consiste à placer votre curseur sur une ligne vide dans l’éditeur. Cliquez ensuite sur le bouton shortcode et sélectionnez une option de colonne.
Répétez cette étape pour ajouter une deuxième colonne 1/3, puis répétez une fois de plus, mais cette fois en utilisant l’option un tiers (dernier). Le résultat est les shortcodes suivants ajoutés à l’éditeur.
Si vous n’avez jamais utilisé de shortcodes auparavant, vous pouvez d’abord suivre ce tutoriel.
Comme vous pouvez le voir, chaque shortcode a une balise d’ouverture et de fermeture. Maintenant, vous pouvez mettre une image dans chaque shortcode, comme ceci:
Ressemblent à un gâchis, n’est-ce pas?
C’est parce que les shortcodes ne peuvent pas styliser les images dans l’éditeur, mais ce n’est pas un problème. Une fois que vous les afficherez sur le site, ils s’aligneront parfaitement en colonnes, comme ceci:
Codes courts de colonnes par rapport aux galeries
Bien que les codes courts ne s’affichent pas bien dans l’éditeur comme les galeries et peuvent être plus difficiles à utiliser, vous obtenez également un peu plus de contrôle. Par exemple, les galeries forcent toutes les images à se lier à:
- Fichier multimédia
- Page de pièce jointe
- Rien
Avec le plugin columns, les images peuvent avoir des URL personnalisées et chaque lien vers un type de page différent.
Vous pouvez également mélanger et assortir les colonnes. Par exemple, vous pouvez placer une image dans un shortcode 2/3 à côté d’une image avec un shortcode de colonne 1/3.
Pourquoi vous ne devriez pas utiliser les options d’alignement
Ces méthodes produiront les mises en page que vous souhaitez sans tous les maux de tête.
Les galeries WordPress sont le moyen le plus simple et le plus simple d’aligner des images d’affilée. Cependant, les codes courts de colonne est une bonne alternative qui offre plus de flexibilité.
Ils fonctionnent tous les deux si bien car ils placent des images dans une nouvelle structure HTML. Le HTML permet de conserver une mise en page côte à côte, quel que soit l’écran utilisé pour les visualiser.
Y a-t-il quelque chose que j’ai manqué? Vous avez des questions? Postez un commentaire ci-dessous.
Leave a Reply