Beitrag

 
Tipps und Tricks beim Ausrichten von Text und Bildern

Tipps und Tricks beim Ausrichten von Text und Bildern

Eines der wichtigsten Kapitel in unseren WordPress-Workshops nimmt das Thema Einfügen, Ausrichten und Positionieren von Bildern ein. Die Bild- und Text-Ausrichtung ist nicht selten ein Grund für Frustrationen für Website-Betreiber, denn das Vermengen von Text und Bildern ist in HTML nicht ganz so einfach wie in Microsoft Word.

Lesen Sie hier ein paar Tipps, wie Sie die Ausrichtung der in WordPress eingefügten Bilder finetunen können.

Bilder einfügen und ausrichten

Wie man Bilder in WordPress über den Editor einfügt und im Textverlauf ausrichtet, haben wir ausführlich in unserem WordPress Handbuch beschrieben.

In dem Handbuch erfahren Sie, dass man Bilder nicht nur für sich alleinstehend in einen eigenen Absatz einfügen muss, sondern die Bilder auch links- oder rechtsbündig in den Text einfließen lassen kann.

In Kurzform sieht der HTML-Code, der dem Bild die jeweilige Ausrichtung gibt wie folgt aus: <img class=”alignleft” src=”Bildadresse” /> für links- oder rechts ausgerichtet: <img class=”alignright” src=”Bildadresse” />

ABilder in WordPress einfügenbstand zwischen Bild und Text kontrollieren

Nun kann es sein, dass einem die vom Layout vorgegebenen Textabstände neben oder unter dem Bild nicht gefallen. Was nun? Nun muss man etwas Hand an den HTML-Code legen. Verwenden Sie sonst immer den Visuell-Editor, um die Texte Ihrer Website zu verfassen, dann ist es jetzt an der Zeit, Neuland zu betreten: Klicken Sie rechts über dem Editor-Feld auf den HTML-Reiter.

Sie sehen jetzt den HTML-Code Ihres Artikel. Der gesamte HTML-Code für das oben eingefügte Bild sieht zum Beispiel so aus:

<img src="http://elbnetz.com/wp-content/uploads/2012/09/Bilder-in-WordPress-einfügen.jpg" alt="Bilder in WordPress einfügen" title="Bilder in WordPress einfügen" width="375" height="249" />

Abstand zum Text vergrößern

Bilder in WordPress einfügen Möchten Sie beispielsweise den Abstand zwischen Bild und Text rechts und unten vergrößern, dann fügen Sie den in rot gekennzeichneten „Style-Tag“ dem HTML-Code des Bildes hinzu:
<img class=”alignleft” src=”Bildadresse” style=“margin-right: 40px; margin-bottom: 40px;“/>

Fällt Ihnen der breitere Abstand zwischen Bild und Text auf? Wir haben auch einen extra großen Abstand gewählt :-). Sorry, aber hier muss noch etwas Text hin, damit Sie den Abstand nach unten sehen…)

Abstand zum Text verkleinern

Bilder in WordPress einfügen Es kann auch Situationen geben, in denen man den Abstand verkleinern möchte. In diesem Fall setzt man einfach ein Minuszeichen vor den passen Style-Code:
<img class=”alignleft” src=”Bildadresse” style=“margin-bottom: -5px;“/>
Das was hier ziemlich unpassend aussieht, kann bei einigen Webdesigns (WordPress Themes) durchaus nötig sein. Speziell, wenn der Abstand zum Text unter dem Bild zu groß ausgefallen ist. Das ist zum Beispiel beim Standard-Theme Twentyeleven der Fall.

Einen neuen Absatz unter einem ausgerichteten Bild beginnen

Bilder in WordPress einfügen Normalerweise wird der Text neben dem Bild solange weitergeführt, bis der Platz aufgebraucht ist. Also auch

Eine Überschrift,

oder ein neuer Absatz sind neben dem Bild ausgerichtet. Das stört nicht selten. Hier ist ein neuer Absatz, von dem ich möchte, dass er nachdem Bild startet. Wie Sie sehen, funktioniert das nicht automatisch. Ich konnte in einer Reihe von Zeilenumbrüche setzen <br/>, aber die genaue Zahl hängt von der Breite der Anzeige ab und kann gerade bei Betrachtung auf dem iPad oder iPhone zu unschönen Lücken führen.

Man könnte auch eine HTML-Tabelle verwenden, aber dadurch entstehen neue Probleme und außerdem ist das auch zu viel des Guten. Hier ist eine elegantere Lösung: Wickeln Sie den neuen Absatz einfach in den folgenden Code ein: <div style=“clear:both;“> … </div>, zum Beispiel:

Bilder in WordPress einfügen Hier ist der Text neben dem Bild.

Genau vor diesem Text (in HTML) haben wir <div style=“clear:both;“> hinzugefügt. Abgeschlossen mit einem </div>. Der Text ist unter dem Bild. Das funktioniert natürlich auch mit Überschriften.

UPDATE: Bitte kopieren Sie nicht einfach den Code, denn die Anführungszeichen werden eventuell falsch im HTML übernommen. Diese müssen unbedingt ersetzt werden, damit der Code funktioniert.

Haben Sie noch Tricks zu diesem Thema?

Titelfoto: ‚wordjam #2 [read and create]‘ von Paul G gefunden auf Flickr.com unter CC-Lizenz.

Autor:

Elbnetz ist ein Team enthusiastischer WordPress-Fans. Wir sind davon überzeugt, dass niemand überkandidelte, komplizierte Websites braucht. Mit WordPress ist es möglich, grandiose Websites zu entwickeln.

  • Rita

    Vielen Dank für die ausführlichen Informationen, waren sehr hilfreich für mich.

    Antworten
  • eli flame

    als dankeschön für den beitrag;

    suche google: wordpress bild text abstand

    ergebnis erste auflistung ihr beitrag!
    toll
    danke
    eli

    Antworten
  • Julian

    Schade, wieder nicht geklappt. Bin langsam am verzweifeln. Mit jedem amateurhaften Programm lässt sich ein Abstand ohne einen Code einfügen zu müssen einstellen…

    Antworten
  • liegeradler

    Hallo,
    ich schaffe es nicht, sauber Text rechts neben Bildern zu platzieren!
    Ständig rutschen diese kurzen Copyright-Texte nach unten oder oben und ich muss mit Absätzen nachhelfen, sie wieder zu verschieben…
    Ich füge die Bilder mit dem Attribut „linksbündig“ ein und versuche dann, den Text rechts daneben einzufügen. Wenn ich dann auf Betrachten der Seite gehe, steht dieser wieder woanders oder der Text, der nach dem Bild weitergeht, ist rechts neben das Bild gerutscht.
    Gibt es eine Methode, sowas sauber einzurichten?
    Aktueller Artikel: http://kinogucker.wordpress.com/2014/09/22/mr-turner-meister-des-lichts/

    Antworten
    • Elbnetz Redaktion

      Hallo Herr oder Frau liegeradler,

      unser Erfahrung nach ist es besser, man startet mit dem Text, setzt den Curser der Maus vor den ersten Buchstaben des Absatzes, in dem das Bild erscheinen soll und fügt dann das Bild in gewünschter Größe und Ausrichtung ein. Damit der Absatz oder die Überschrift nicht neben, sondern unter dem Bild erscheint, müssen Sie den oben beschrieben Code <div style=“clear:both;“> … </div> verwenden.

      Beste Grüße,
      Das Elbnetz Team

      Antworten
  • Mila

    Geht das auch, dass man das Bild hinter den Text legt? Also dass man ein Bild hat und dann der Text auf dem Bild liegt?

    Antworten
  • Klaus

    Super Tipps, haben uns sehr geholfen.

    Antworten
  • Yvonne

    Hab selten so schnell ein Problem gelöst. Vielen Dank.

    Antworten
  • Gerhard

    Top Tipps! Klappt sehr gut. Das mit der manuellen Eingabe des Codes sollte unbedingt beachtet werden. )))

    Antworten
  • Sebastian

    Wie kann Ich Bilder untereinander einfügen, ohne das diese einen Abstand zueinander haben? Sprich ich will verhindern, dass zwischen den Bildern weißer Hintergrund zu sehen ist.

    Antworten
    • Elbnetz Redaktion

      Moin Sebastian,

      mit einzelnen Bildern wird das schwierig bis unmöglich. Wir würden die Galerie-Funktion empfehlen. Man könnte mittels CSS-Anpassungen dann den Abstand entsprechend verringern.

      Besten Gruß,
      Das Elbnetz-Team

      Antworten
  • Karo

    Sie sind ein Held!!! Danke 🙂

    Antworten
  • Mathias Gierens

    Vielen Dank für den hilfreichen Beitrag auf dieser Seite. Ich habe einiges umsetzen können.

    Antworten
  • Birgit

    Oh super! Jetzt hab ich es auch gerafft! 🙂

    Antworten

Ein Kommentar? Gern!

Ihnen gefällt unser Blog?

Dann wird Sie unser
Buch begeistern!

Mehr erfahren

Ihnen gefällt unser Blog?