So richten Sie Bilder nebeneinander in WordPress aus

Die Bildausrichtung ist ein ständiger Kampf für den WordPress-Blogger.

Dieser Beitrag richtet sich an alle, die mehr Zeit damit verbracht haben, als sie zugeben möchten, mit der Bildausrichtung und -positionierung im Editor herumzuspielen.

Die beiden besten Methoden zum Ausrichten von Bildern

Es gibt zwei Techniken, die Sie in Betracht ziehen sollten, um Bilder nebeneinander zu platzieren. Ich werde teilen, wie man jeden benutzt, sowie die Vor- und Nachteile enthalten.

Bilder mit einer Galerie ausrichten

Die zuverlässigste Methode, Bilder nebeneinander zu platzieren, ist die Verwendung einer WordPress-Galerie.

Wenn Sie noch nie eine Galerie erstellt haben, folgen Sie dieser Anleitung zum Erstellen von Galerien.

Der Trick besteht darin, eine mittelgroße Version der Bilder zu verwenden und zwei Spalten auszuwählen, selbst wenn Sie nur zwei Bilder einfügen. Das Ergebnis wird ungefähr so aussehen:

Screenshot einer Beispielgalerie

 Screenshot einer Beispielgalerie

Im Gegensatz zu Bildern, die Sie in Ihren Beitrag einfügen, haben Galerien einen speziellen HTML-Code, der die Bilder nebeneinander hält. Diese Struktur macht es einfacher und weniger Aufwand, die Bilder in Zeilen / Spalten auszurichten.

Platzieren Sie Bilder mit Spalten-Shortcodes

Wenn es Ihnen nichts ausmacht, Ihrer Site ein neues Plugin hinzuzufügen, sind Spalten-Shortcodes eine großartige Lösung zum Ausrichten von Bildern.

Screenshot der Column Shortcodes Plugin-Seite

Column Shortcodes ist eines dieser fantastischen Plugins, das Ihre Site nicht mit neuen Menüs füllt. Tatsächlich ist das einzige, was Ihrem Admin-Dashboard hinzugefügt wird, diese praktische Schaltfläche über dem Editor.

Die Schaltfläche, die durch Spalten-Shortcodes hinzugefügt wurde

 Die Schaltfläche hinzugefügt von Column Shortcodes

Um zu zeigen, wie es funktioniert, erstelle ich eine einzelne Zeile mit drei Bildern.

Verwendung von Spalten-Shortcodes

Der erste Schritt besteht darin, den Cursor auf eine leere Zeile im Editor zu setzen. Klicken Sie dann auf die Schaltfläche Shortcode und wählen Sie eine Spaltenoption.

Anzeigen des Hinzufügens eines Spalten-Shortcodes
Erstellen einer Zeile mit drei Spalten.

Wiederholen Sie diesen Schritt, um eine zweite 1/3-Spalte hinzuzufügen, und wiederholen Sie den Vorgang erneut, diesmal jedoch mit der Option ein Drittel (letzter). Das Ergebnis sind die folgenden Shortcodes, die dem Editor hinzugefügt wurden.

Shortcodes im Editor

 Shortcodes im Editor

Wenn Sie noch nie Shortcodes verwendet haben, sollten Sie zuerst diesem Tutorial folgen.

Wie Sie sehen können, hat jeder Shortcode ein öffnendes und schließendes Tag. Jetzt können Sie ein Bild in jeden Shortcode einfügen, wie folgt:

 Bilder in Shortcodes im Editor

 Bilder in Shortcodes im Editor

Sieht aus wie ein Durcheinander, nicht wahr?

Das liegt daran, dass die Shortcodes die Bilder im Editor nicht formatieren können, aber es ist kein Problem. Sobald Sie sie auf der Website anzeigen, werden sie ordentlich in Spalten wie folgt ausgerichtet:

Beispiel für Bilder in Spalten

 Beispiel für Bilder in Spalten

Spalten-Shortcodes im Vergleich zu Galerien

Während die Shortcodes im Editor nicht wie Galerien gut angezeigt werden und eine größere Herausforderung darstellen können, erhalten Sie auch ein bisschen mehr Kontrolle. Zum Beispiel erzwingen Galerien, dass alle Bilder verlinkt werden:

  • Mediendatei
  • Anhangsseite
  • Nichts

Mit dem Spalten-Plugin können Bilder benutzerdefinierte URLs haben und jeweils auf einen anderen Seitentyp verlinken.

Sie können die Spalten auch mischen und anpassen. Sie können beispielsweise ein Bild in einem 2/3-Shortcode neben einem Bild mit einem 1/3-Spalten-Shortcode platzieren.

Warum Sie keine Ausrichtungsoptionen verwenden sollten

Diese Methoden erzeugen die gewünschten Layouts ohne all die Kopfschmerzen.

WordPress-Galerien sind die einfachste und einfachste Möglichkeit, Bilder in einer Reihe auszurichten. Column Shortcodes ist jedoch eine gute Alternative, die mehr Flexibilität bietet.

Beide funktionieren so gut, weil sie Bilder in eine neue HTML-Struktur einfügen. Der HTML-Code ermöglicht es, ein Side-by-Side-Layout beizubehalten, unabhängig vom Bildschirm, auf dem sie angezeigt werden.

Habe ich etwas verpasst? Haben Sie Fragen? Schreiben Sie einen Kommentar unten.

 Ben Sibley
Ben Sibley
Ben Sibley ist ein WordPress Theme Designer & Entwickler und Gründer von Compete Themes.

Leave a Reply