👉 Grundlegende WordPress Bildausrichtungen erklärt - WinningWP

Alexa Rang – Screenshot

Das Thema der Ausrichtung von Bildern wird oft von WordPress-Neulingen missverstanden. Wenn Sie ein Bild zu Ihrem Inhalt hinzufügen (innerhalb von Posts oder Seiten), bietet Ihnen WordPress vier Möglichkeiten, das Bild auszurichten: "Links ausrichten", "Zentrieren" ausrichten, "Rechts" ausrichten und "Keine" ausrichten *.

Sehen wir uns diese nacheinander an:

1. Nach links ausrichten

Ein Bild, dem eine linke Ausrichtung zugewiesen wurde, wird effektiv nach links von dem Abschnitt der Seite verschoben, auf dem es sich befindet (z. B. die linke Begrenzung Ihres WordPress-Posts mit dem Seiteninhalt), und jeder andere Inhalt (z. B. Text) Umschlinge die anderen drei Ränder und fülle den Bereich rechts neben dem Bild.

Beispiel:

Lorem ipsum dolor sit amét, consectetur adipiscing elit, sed do eiusmod temporé incididant ut labore et dolor magna aliqua. Duis aure irure dolor in represenderit in voluptate velit esser cillum dolores eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt molli anim id est laborum. Lorem ipsum dolor sit amét, consectetur adipiscing elit, sed do eiusmod temporé incididant ut labore et dolor magna aliqua. En en en ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul Duis aure irure dolor in represenderit in voluptate velit esser cillum dolores eu fugiat nulla pariatur.

2. Richten Sie das Zentrum aus

Wenn Sie möchten, dass Ihr Bild innerhalb des Abschnitts der Seite zentriert wird, in dem es sich befindet (d. H. Mit gleichem Abstand zwischen der Kante des Inhaltsbereichs und dem linken und rechten Rand), wählen Sie eine Ausrichtung "Zentral" aus. Anders als bei der oben erwähnten Ausrichtung "Links" wird kein benachbarter Inhalt (z. B. Text) um das Bild gelegt, sondern entweder über oder unter dem Bild (abhängig davon, wo im Text Sie eingefügt haben) das Bild).

Beispiel:

Lorem ipsum dolor sit amét, consectetur adipiscing elit, sed do eiusmod temporé incididant ut labore et dolor magna aliqua. Duis aure irure dolor in represenderit in voluptate velit esser cillum dolores eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt molli anim id est laborum.

3. Richten Sie rechts aus

Das richtige Ausrichten eines Bilds ist, wie Sie erwarten würden, ziemlich genau die umgekehrte Ausrichtung eines Bildes nach links – das Bild wird nach rechts von dem Abschnitt der Seite verschoben, in dem es sich befindet (dh der rechten Grenze Ihres Bildes) WordPress-Post des Seiteninhalts), und jeder andere Inhalt (wie Text, usw.) wird um seine anderen drei Ränder gelegt, wodurch der Bereich links davon ausgefüllt wird.

Beispiel:

Lorem ipsum dolor sit amét, consectetur adipiscing elit, sed do eiusmod temporé incididant ut labore et dolor magna aliqua. Duis aure irure dolor in represenderit in voluptate velit esser cillum dolores eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt molli anim id est laborum. Lorem ipsum dolor sit amét, consectetur adipiscing elit, sed do eiusmod temporé incididant ut labore et dolor magna aliqua. En en en ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ven ul ul ul ul ul ul ul ul ul ul ul ul ul ul ul Duis aure irure dolor in represenderit in voluptate velit esser cillum dolores eu fugiat nulla pariatur.

4. Richten Sie keine aus

Bilder, denen keine Ausrichtung zugewiesen wurde (indem ihnen eine Ausrichtung von "Keine" zugewiesen wird), sitzen genau an dem Ort, an dem Sie sie finden – dh wenn Sie ein Bild mit einer Ausrichtung von "Keine" innerhalb eines Textabschnitts positionieren (siehe das folgende Beispiel unten), wird es inline mit diesem Text positioniert, was dazu führt, dass Text sowohl links als auch rechts vom Bild ist (vorausgesetzt, das Bild hat nicht die gleiche Breite – oder breiter – als der Bereich in dem es sitzt **). Allerdings wird ein Bild, dem BEIDES eine Ausrichtung von "None" zugewiesen wurde und sich in einem eigenen Absatz befindet (dh auf einer neuen Zeile im WordPress-Editor und / oder speziell in HTML-Tags "p"), auf der linken Seite positioniert von dem Bereich, in dem es sich befindet (ähnlich wie es wäre, wenn es linksbündig wäre), aber ohne Text rechts davon. Warum? Weil ein Bild keine spezifische Ausrichtung hat (oder, in technischer Hinsicht: kein spezifisches Links-oder-Recht-Float), das in seinem eigenen Absatz liegt (ohne andere Elemente im selben Absatz), wird es von seinen beiden vorhergehenden getrennt und dem Inhalt nach Zeilen vordefinierter Leerstellen folgen – ähnlich wie bei jedem anderen Absatz!

Beispiel:

Lorem ipsum dolor sit amét, consectetur adipiscing elit, sed do eiusmod temporé incididant ut labore et dolor magna aliqua. Duis aure irure dolor in represenderit in voluptate velit esser cillum dolores eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nicht proident, sunt in culpa qui officia deserunt molli anim id est laborum.

Was geht hier eigentlich vor sich?

Warum passiert das alles? Das liegt tatsächlich an einer Computersprache, die verwendet wird, um die Präsentation (Layout, Abmessungen, Farben usw.) von Webelementen auszudrücken, die als Cascading Style Sheets – kurz "CSS" – bekannt sind. Jedes Mal, wenn Sie beispielsweise einem Bild in einem Post oder einer Seite eine linke Ausrichtung zuweisen, hängt WordPress beispielsweise den HTML-Klassennamen "alignleft" an das Bild an, wodurch das Bild effektiv dazu gezwungen wird, auf einen bestimmten Satz zu verweisen von vordefinierten CSS-Befehlen, die sagen, wo es auf der Seite sitzen muss – einfach! In ähnlicher Weise weist WordPress für jede der anderen erwähnten Alignments unterschiedliche Klassennamen zu – z. B. 'aligncenter' (für Bilder, die zentral ausgerichtet werden sollen), 'alignright' (für Bilder, die rechts ausgerichtet sein sollen) und 'alignnone' (für Bilder, die keine bestimmte Ausrichtung zugewiesen zu haben) – dass jeder auf verschiedene Sätze von CSS-Befehlen Bezug nimmt.

Zugegebenermaßen (leider) kann die Idee, den Kopf um die Welt der CSS-Befehle zu wickeln, für den durchschnittlichen WordPress-Benutzer mehr als nur ein wenig abschreckend sein; Wenn Sie jedoch Interesse daran haben, mehr über sie zu erfahren, können Sie schnell einen ganz neuen Grad an Freiheit erlangen, wenn es um die Gestaltung Ihrer Inhalte geht – oder sogar Ihrer gesamten Website! Wenn du daran interessiert bist, etwas zu lernen, schau dir unseren früheren Post an, in dem es am besten ist, CSS online zu lernen – oder, alternativ, gehe einfach zum guten alten Google und mach dich bereit! ;)

Zusammenfassung

Also da hast du es: Bildausrichtungen erklärt! Kurz gesagt: Verwenden Sie eine linke Ausrichtung, wenn Sie möchten, dass ein Bild nach links zeigt, und andere Elemente (wie Text usw.), um es nach rechts zu verschieben; Verwenden Sie eine zentrale Ausrichtung, wenn Sie möchten, dass ein Bild in der Mitte / Mitte Ihres Inhalts platziert wird und keine anderen Elemente auf beiden Seiten davon vorhanden sind. Verwenden Sie eine rechte Ausrichtung, wenn ein Bild rechts liegen soll, und andere benachbarte Webelemente, um es nach links zu verschieben; und verwenden Sie eine Ausrichtung von "none", wenn Sie möchten, dass Ihr Bild genau dort sitzt, wo Sie es relativ zu seinen benachbarten Elementen platzieren (dh Text usw.) – UND schließlich, wenn Sie möchten, dass ein Bild links vom Inhalt platziert wird -Bereich, in dem es sich befindet ABER möchte nicht, dass rechts davon ein Text usw. erscheint, weisen Sie dem Bild eine Ausrichtung von "None" zu und stellen Sie sicher, dass es in einem eigenen privaten Absatz steht!

* über ein Dropdown-Menü unten rechts im WordPress-Fenster "Medienbibliothek" unter der Unterüberschrift "Anhang-Anzeigeeinstellungen".

** In diesem Fall kann der Text, der normalerweise auf jeder Seite des Textes steht, nirgendwo anders als über oder unter dem Bild erscheinen – beachten Sie, dass solche Fälle oft zu Verwirrung zwischen allen vier Ausrichtungen führen können, da kein Platz für andere ist Text / Elemente auf beiden Seiten des Bildes wird es im Grunde keinen Unterschied machen, welche Ausrichtung Sie verwenden möchten!

Sinnvoll?

Schau das Video: Alex Strangelove. Offizieller Trailer [HD]. Netflix

Like this post? Please share to your friends:
Schreibe einen Kommentar

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