👉 Principaux alignements d'images WordPress expliqués - WinningWP

Alexa Rank – Capture d'Ă©cran

Le sujet de l'alignement des images est celui qui est généralement mal compris par les débutants de WordPress. Lorsque vous allez ajouter une image à votre contenu (dans des publications ou des pages), WordPress vous propose quatre méthodes par défaut pour aligner cette image: aligner «Gauche», aligner «Centrer», aligner «Droite» et «Aucun» *.

Jetons un coup d’œil à chacun d’eux:

1. Aligner à gauche

Une image à laquelle un alignement de gauche a été attribué sera effectivement placée à gauche de la section de la page dans laquelle elle se trouve (comme la limite gauche du contenu de votre page WordPress) et tout autre contenu (tel que du texte) sera entourez ses trois autres bordures – remplissez la zone à droite de l’emplacement de l’image.

Exemple:

Lorem ipsum dolor assis amet, consectetur adipiscing elit, sed do eiusmod temporel incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit en volupté velout esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor assis amet, consectetur adipiscing elit, sed do eiusmod temporel incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercice ullamco laboris nisi ut aliquip ex ea commodo conséquat. Duis aute irure dolor in reprehenderit en volupté velout esse cillum dolore eu fugiat nulla pariatur.

2. Aligner le centre

Si vous souhaitez que votre image soit centralisée dans la section de la page dans laquelle elle se trouve (c.-à-d. Avec un espacement égal entre le bord de la zone de contenu et ses bordures gauche et droite), choisissez un alignement «central». Contrairement à l'alignement «gauche» mentionné ci-dessus, tout contenu voisin (tel que du texte) ne sera pas enroulé autour de l'image: il sera placé au-dessus ou au-dessous de l'image (selon l'endroit du texte que vous avez choisi d'insérer) ladite image).

Exemple:

Lorem ipsum dolor assis amet, consectetur adipiscing elit, sed do eiusmod temporel incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit en volupté velout esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

3. Aligner à droite

L'alignement correct d'une image est, comme on peut s'y attendre, à peu près exactement l'inverse de l'alignement gauche d'une image – l'image sera poussée à droite de la section de la page dans laquelle elle se trouve (c'est-à-dire la limite droite de votre image) WordPress affiche le contenu de la page), et tout autre contenu (tel que du texte, etc.) entoure ses trois autres bordures: remplissant ainsi la zone située à gauche.

Exemple:

Lorem ipsum dolor assis amet, consectetur adipiscing elit, sed do eiusmod temporel incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit en volupté velout esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor assis amet, consectetur adipiscing elit, sed do eiusmod temporel incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercice ullamco laboris nisi ut aliquip ex ea commodo conséquat. Duis aute irure dolor in reprehenderit en volupté velout esse cillum dolore eu fugiat nulla pariatur.

4. Aligner Aucun

Les images qui ne sont pas alignées (en leur attribuant un alignement de «Aucun») seront placées exactement à l'endroit où vous les localiserez – c.-à-d. Si vous choisissez de positionner une image avec un alignement de «Aucun» dans un paragraphe de texte. (voir l'exemple ci-dessous), il sera placé en ligne avec ce texte, ce qui entraînera la présence de texte à gauche et à droite de l'image (en supposant que l'image n'est pas la même largeur ou plus large que la zone) dans lequel il siège **). Cependant, une image qui a à la fois été associée à «Aucun» ET se trouve dans son propre paragraphe (c.-à-d. Sur une nouvelle ligne dans l'éditeur WordPress et / ou dans les balises HTML 'p) sera confuse. de la zone dans laquelle il réside (de la même manière que si elle avait été alignée) mais sans texte à droite. Pourquoi? Comme une image n’a pas d’alignement spécifique (ou, en termes techniques, pas de «flottant» gauche ou droit spécifique) qui se trouve dans son propre paragraphe (sans autres éléments dans le même paragraphe), elle sera séparée des deux précédentes. et suivre le contenu par des lignes d'espace blanc prédéfini – de la même manière que tout autre paragraphe le fera!

Exemple:

Lorem ipsum dolor assis amet, consectetur adipiscing elit, sed do eiusmod temporel incididunt ut labore et dolore magna aliqua. Duis aute irure dolor in reprehenderit en volupté velout esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Alors, qu'est-ce qui se passe réellement ici?

Pourquoi tout cela arrive-t-il? Tout cela est dû au langage informatique utilisé pour exprimer la présentation (mise en page, dimensions, couleurs, etc.) des éléments Web, appelés feuilles de style en cascade (CSS). Essentiellement, chaque fois que vous attribuez, par exemple, un alignement à gauche à une image dans un article ou une page, par exemple, WordPress ajoute un nom de classe HTML «alignleft» à cette image, ce qui force alors l'image à référencer un ensemble spécifique. des commandes CSS prédéfinies qui indiquent où il faut s'asseoir sur la page – simple! De même, pour chacun des autres alignements mentionnés, WordPress attribue des noms de classe différents, tels que «aligncenter» (pour un alignement central des images), «alignright» (pour que les images soient alignées à droite) et «alignnone» (pour les images). pour ne pas avoir d'alignement particulier assigné) – qui font référence à différents ensembles de commandes CSS.

Certes (malheureusement), l'idée de faire le tour du monde des commandes CSS peut être un peu intimidante pour l'utilisateur WordPress moyen; Cependant, si vous avez intérêt à en apprendre davantage à leur sujet, ils vous permettront rapidement d'acquérir une toute nouvelle liberté en ce qui concerne le style de votre contenu – ou même de l'intégralité de votre site Web! Si vous êtes intéressé à apprendre, consultez notre publication précédente sur la meilleure façon d’apprendre l’utilisation de CSS en ligne – ou, alternativement, rendez-vous sur Google et passez à la vitesse supérieure! ;)

Résumé

Alors voilà: les alignements d'images expliqués! En bref: utilisez un alignement à gauche lorsque vous souhaitez placer une image à gauche et d'autres éléments (comme du texte, etc.) par-dessus. utilisez un alignement central lorsque vous souhaitez placer une image au centre / au centre de votre contenu sans aucun autre élément de chaque côté; utilisez un alignement à droite lorsque vous voulez qu'une image soit placée à droite et que d'autres éléments Web voisins l'enroulent vers la gauche; et utilisez un alignement de «none» si vous voulez que votre image soit située exactement où vous choisissez de la placer par rapport à ses éléments voisins (c.-à-d. du texte, etc.) – et enfin si vous voulez qu'une image se trouve à gauche du contenu -dans la mesure où il réside MAIS ne veulent pas que du texte, etc. apparaisse à droite, attribue à l'image un alignement de "Aucun" et s'assure qu'elle se trouve dans son propre paragraphe privé!

* via un menu déroulant situé en bas à droite de la fenêtre WordPress "Media Library", sous le sous-en-tête "Attachment Display Settings".

** Dans ce cas, le texte normalement placé de chaque côté n’aura nulle part où aller au-dessus ou au-dessous de l’image – notez que de tels cas peuvent souvent entraîner une confusion entre les quatre alignements car il n’ya pas d’autre texte / éléments de part et d'autre de l'image cela ne changera rien à l'alignement que vous choisissez d'utiliser!

Utile?

Like this post? Please share to your friends:
Laisser un commentaire

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: