Willkommen in der Welt der Bildausrichtung! Der beste Weg, um Ebbe und Flut der verschiedenen Bildpositionierungsoptionen zu erkunden ist es, Bilder in einen großen Pool von Wörtern zu werfen. Schnappen Sie sich ein Paddel und los geht’s. Vergewissern Sie sich, dass Sie Ihren Weg im RTL-Modus bestreiten. Links sollte links und rechts sollte rechts bleiben – für beide Leserichtungen.

Zum Thema Ausrichtung sollten Sie wissen, dass Benutzer aus den Optionen Keine, Links, Rechts und Mittig wählen können. Wenn das Theme die Option Ausrichtung Wide unterstützt, können Bilder auch breit und in voller Breite dargestellt werden. Testen Sie diese Seite unbedingt im RTL-Modus.

Darüber hinaus erhalten Sie auch die Optionen der Bilddimensionen 25%, 50%, 75%, 75%, 100% oder eine voreingestellte Breite und Höhe.

Image Alignment 580x300

Das obige Bild ist zufällig zentriert.

Image Alignment 150x150

Der Rest dieses Absatzes ist dazu da, um zu sehen, wie der Text sich um das 150×150-Bild aufstellt, das links ausgerichtet ist.

Wie Sie sehen können, sollte sich etwas Platz oben, unten und rechts vom Bild befinden. Der Text sollte sich nicht direkt an das Bild anschmiegen. Zu nah ist einfach nicht gut. Auch Bilder brauchen Atempausen. Lassen Sie sie wie Ihre Worte sprechen. Lassen Sie sie ihre Arbeit ohne Probleme mit dem Text erledigen. In etwa einem weiteren Satz hier werden wir sehen, dass sich der Text mit nahtlosem Übergang von der rechten Seite des Bildes nach unten unter das Bild bewegt. Nochmals: einfach machen lassen. Mission erfüllt!

Und nun zu einem massiv großen Bild. Es hat auch keine Ausrichtung.

Image Alignment 1200x400

Das obige Bild sollte den Inhaltsbereich nicht überfluten auch wenn es 1200 px breit ist. Es sollte ohne sichtbare Unterbrechung des Inhalts erhalten bleiben.

Image Alignment 300x200

Und jetzt werden wir die Dinge ins rechte Licht rücken. Auch hier sollte genug Platz oben, unten und links vom Bild vorhanden sein. Sehen Sie sich das an … “Hey, Mann! So rockt man die rechte Seite. Es ist mir egal, was das links ausgerichtete Bild sagt, du siehst toll aus. Lass dir von niemandem etwas anderes sagen.”

In nur wenigen Augenblicken sollten Sie sehen, dass der Text beginnt sich unter dem rechts ausgerichteten Bild zu platzieren und sich gut einzufügen. Es sollte noch genug Platz drum herum sein und alles sollte schön sitzen. Ja…. Genau so. Es fühlte sich noch nie so gut an, im Recht zu sein.

Und gerade als Sie dachten, wir wären fertig, werden wir alle Formate noch einmal mit Bildunterschriften machen!

Image Alignment 580x300
Hier bekommt 580×300 ein bisschen Liebe in der Bildunterschrift.

Das obige Bild ist zufällig zentriert. Die Bildunterschrift hat auch einen Link, nur um zu sehen, ob irgendwas passiert.

Image Alignment 150x150
Winzige Bildunterschrift.

Der Rest dieses Absatzes ist dazu da, um zu sehen, wie sich der Text um das 150×150-Bild aufstellt, das links ausgerichtet ist.

Wie Sie sehen können, sollte sich etwas Platz oben, unten und rechts vom Bild befinden. Der Text sollte nicht an dem Bild kleben. Zu nah ist einfach nicht gut. Auch Bilder brauchen Atempausen. Lassen Sie sie wie Ihre Worte sprechen. Lassen Sie sie ihre Arbeit ohne Probleme mit dem Text erledigen. Etwa einen Satz später werden wir sehen, dass sich der Text mit nahtlosem Übergang von der rechten Seite des Bildes nach unten unter das Bild bewegt. Nochmals: einfach machen lassen. Mission erfüllt!

Und nun zu einem massiv großen Bild. Es hat auch keine Ausrichtung.

Image Alignment 1200x400
Massiver Bildkommentar für Ihre Augäpfel.

Das obige Bild sollte den Inhaltsbereich nicht überfluten auch wenn es 1200 px breit ist. Es sollte ohne sichtbare Unterbrechung des Inhalts erhalten bleiben.

Image Alignment 300x200
Es fühlt sich gut an, im Recht zu sein.

Und jetzt werden wir die Dinge ins rechte Licht rücken. Auch hier sollte genug Platz oben, unten und links vom Bild vorhanden sein. Sieh es dir an…. “Hey, Mann! So rockt man die rechte Seite. Es ist mir egal, was das links ausgerichtete Bild sagt, du siehst toll aus. Lass dir von niemandem etwas anderes sagen.”

In nur wenigen Augenblicken sollten Sie sehen, dass der Text beginnt, sich unter dem rechts ausgerichteten Bild zu platzieren und sich gut einzufügen. Es sollte noch viel Platz drum herum sein und alles sollte schön sitzen. Ja…. Genau so. Es fühlte sich nie so gut an, im Recht zu sein.

Stellen Sie sich vor, wir würden eine Verwendung für das extra breite Bild finden! Dieses Bild hat die breite Breitenausrichtung:

Image Alignment 1200x4002

Schaffen wir es noch größer? Dieses Bild hat die volle Breitenausrichtung:

Image Alignment 1200x4002

Und jetzt ist dann aber auch Schluss, yo! Sie haben die turbulente Welt der Ausrichtung überlebt. Bildausrichtung Achievement freigeschaltet! Eine letzte Sache: Das letzte Element im Inhalt dieses Beitrags ist ein Miniaturbild, das nach rechts verschoben ist. Stellen Sie sicher, dass alle Elemente nach dem Inhalt sauber enden.