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.
Inhalt
Worum gehts es?
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” />
Abstand 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="https://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
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
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
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:
Hier ist der Text neben dem Bild.
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.
43 Kommentare. Wir freuen uns über Ihren Kommentar
Vielleicht kann mir jemand helfen.
Auf meiner Shop Seite sind Kategorien (Bilder, Damen, Herren usw.)
Unter den Produktkategorien steht der jeweilige Name.
Allerdings viel zu groß und nicht mittig sondern links ausgerichtet. Ich nutze Woocommerce, Germanized und das Theme Fastest schnellster Shop Pro.
Wäre für Hilfe sehr dankbar
Hallo, wie bring ich die Texte auf eine Reihe? (08 und 16) sollten auf einer reihe sein.
Beispiel
Öffnungszeit:
Montag: 08:00 – 12:00 Uhr
Dienstag: 16:00 – 21:00 Uhr
Danke!!!! Ich bin schier verzweifelt…
Moin, soweit so gut, so übersichtlich. Schöne Erklärungen, leider nicht für mein konkretes Problem. Aber vielleicht könnt Ihr mir trotzdem helfen. Ich will in einigen Beiträgen Bilder mit 100% Breite anzeigen, sprich responsive. Ich habe ein Theme mit Bootstrap erstellt und benutze für Bilder die Klasse img-responsive. Das klappt auch wunderbar, solange ich keine Bildbeschriftungen nutze und die festgelegten Bildbreiten im Quelltext rausschmeiße. Sobald ich aber eine Bildunterschrift haben möchte, geht es nicht mehr. Anscheinend ist die Caption an die feste Breite gebunden. Es geht nur entweder Unterschrift oder img-responsive. Beides zusammen funktioniert nicht. Habt Ihr einen Tipp?
Hallo
erst einmal vielen Dank für die Erklärung. Sehr leicht verständlich und umsetzbar.
Ich habe jedoch ein erweitertes Problem:
Ich möchte den Text nur auf den mobilen Ansichten unter dem Text beginnen lassen, am Desktop (oder bei entsprechender Bildschirmgröße) soll er weiterhin neben dem Text lesbar sein.
Am Handy erscheinen nur wenige Worte eben dem Bild, das ist gelinde gesagt grottig. Wie lässt sich das umsetzen?
Moin Suzanne,
das lässt sich grundsätzlich nur mit entsprechenden CSS-Anpassungen bewerkstelligen.
Ahoi!
Thorsten
Wow, danke für die schnelle Antwort!
Ich hatte es befürchtet ^^ Wir haben uns gestern aber nochmal Gedanken gemacht und sind auf eine Idee gekommen, wie es funktionieren müsste. Nur die Umsetzung… schauen wir mal.
Grüße
Suzanne
Hallo, ich habe ein Magazin, welches über WordPress läuft. Alles schön, bis mir Apple User (ich bin leider keiner) mitteilten, dass die eingefügten Bilder der Galerie den Text überlagern. Ich habe Screenshots bekommen, sehe das aber bei mir nicht. Woran kann das liegen? Beste Grüße, Sabine http://www.scarlett-magazin de (zb der Beitrag zum Jahreswechsel). Ich gebe die Fotos über die Einfügeoption direkt über WordPress ein.
Sehr hilfreich und verständlich erklärt, danke!
Hallo Elbnetz,
das war das einzige halbwegsverständliche zum Thema, was ich im Netz gefunden habe. Leider verwirft WP im Theme twentyseventeen die Vorschläge immer wieder, dh. die Einfügungen im Quelltext werden automatisch gelöscht.
Gibt es eine Möglichkeit über den Costumizer zusätzliche CSS einzugeben, die für alle Texte unter Bildern und Grafiken den Abstand vergrößert oder verkleinert.
Ich habe sowas gefunden für die Textbreite
.wrap{max-width: 860px !important;}
Das hat wunderbar funktioniert.
Sowas brauche ich für den Abstand unterhalb von Bildern und Grafiken.
Vielen Dank
Andreas
Moin Andreas,
schön, dass wir Dir weiterhelfen konnten. Du kannst sehr gut mit Hilfe von CSS die Abstände regulieren. Je nach Browser offenbart Dir ein Rechtsklick auf das Foto, welche Klassen verwendet werden. Dann lasst Du mit
marginden gewünschten Abstand definieren. Zum Beispiel so:img.alignleft {float: left;
margin: 0 2.5em 2.5em 0;
}
Ahoi!
Thorsten
Guten Tag liebes Elbnetz Team
Leider kriege ich es nicht hin, dass der Text links und das Bild rechts sauber angezeigt wird. Ständig rutscht das Bild zwischen den Text oder unter den Text auch auch den Code verwendet bzgl. clear wie oben beschrieben. Was mache ich falsch?
unter –>Service http://garage-schliere.ch.plato.ch-meta.net
Der code sieht so aus:
Inspektion (alle Marken) nach Werkvorschriften des Fahrzeugherstellers, Klima Service, Pneu
Karosserie-Reparatur, Unterbodenbehandlung und Unfallreparaturen / Original-Qualitäts-Ersatzteile
Verwendung des Motoröl exakt nach Herstellerangaben
Modernste Testgeräte für alle Marken
Bereitstellung / Reinigung für Motorfahrzeugkontrolle (MFK)
Reinigung Gesamtservice, Fahrzeug Innen-/Aussenreinigung, Reinigung Motor und Chassis, Fahrzeug Politur
Räder Hotel (Wir Lagern Ihre Pneus und Räder ein)
Hol- und Bringservice[/column]
[column]
[/column][/column-group]
[/featserv][/one_half]
Vielen Dank
You made my day :-) vielen Dank für diesen ausführlichen Bericht, ohne diesen wäre ich verzweifelt, was die Absätze angeht, die man ohne diesen Code, leider am Handy extrem sieht. Jetzt ist alles gut…….
Hey hey,
ich habe leider folgendes Problem: Mein Theme nutzt bei „Team“ die Bildbeschreibung des Fotos, welche in Der Mediathek hinterlegt wird. Diese steht leider (Text) auf zentriert. Ich möchte ihn aber gern linksbündig haben, bzw. evtl im Blocksatz. Leider suche ich mich seit Tagen tot, nach der Funktion, diesen Text zu verändern. Vielen Dank im Voraus.
Moin Franzi,
wenn Dein Theme dort keine Einstellung bietet, kann man die Ausrichtung nur mit einem CSS-Eintrag nach Deinen Wünschen anpassen.
Hier findest Du ein paar Infos dazu: https://elbnetz.com/advanced-css-editor/
Hallo liebes Elbnetz-team, Eure Tipps sind echt gold wert! Ich habe eine Frage zum Bild/Logo für den Header. Ich weiss nicht, wie ich in meinem Thema das Logo vergrössern kann. Die Logobox scheint mir sehr klein zu sein und daher ist auch mein Logo zu klein. Wie kann ich das beheben? Vielen Dank!
Moin Yvonne,
schön, dass wir Dir schon weiterhelfen konnten. Deine aktuelle Frage lässt sich allerdings nicht einfach beantworten, weil das Problem individuell in Abhängigkeit Deines Themes zu lösen ist. Am einfachsten ist es, Du wendest Dich an den Entwickler des Themes.
Liebe Grüße,
Das Elbnetz-Team
Und wie kann man den Textabstand zur Bildunterschrift ändern?
Hier ein Bild damit man besser versteht was ich meine: https://seinenmangasite.files.wordpress.com/2017/07/beispiel.png
Moin Tom,
das lässt sich nur mit CSS anpassen: Wie Sie das Design Ihres WordPress Themes anpassen.
Ahoi, Thorsten
Hallo liebes Elbnetzteam. Vielen Dank für die guten Erklärungen hier. Ich habe noch eine Frage, die ich bisher hier nicht gefunden habe.
Ich möchte Bilder nebeneinander darstellen, aber NICHT die Galerie Funktion verwenden, weil ich die Bilder einzeln verlinken möchte. Ich finde hierzu keine Hinweise, außer die Tabellenfunktion:
usw.
– wenn ich diese verwende, werden die Bilder aber immer noch untereinander angezeigt. Was mache ich falsch? Gibt es einen anderen html Code?
Plugins kann ich im Moment nicht verwenden.
Herzlichen Dank für Ihre Rückmeldung, viele Grüße, Eva Kirchner
Moin Eva,
wenn Du mehrere Bilder einzeln nebeneinander einfügen möchtest, musst Du die Ausrichtung jeweils auf „linksbündig“ stellen.
Das ist leider die einzige Möglichkeit. Auch von Tabellen ist im Zeitalter von „Responsive Design“ abzuraten.
Besten Gruß,
die Elbnetz-redaktion
Danke für die gute Erklärung. Es klappt alles sehr gut.
ABER: wenn ich ein Bild mit alignright oder alignleft positioniere, bekommt dieses Bild einen störenden Rahmen. Wie bekomme ich den weg?
Das wird am verwendeten Theme (Webdesign) liegen.
Man wird das sich mit CSS-Anpassungen beheben können.
Besten Gruß,
Die Elbnetz-Redaktion
Hallo, mich würde mal interessieren, wie man ein Bild mit seinen unterschiedlichen Größen in einen Beitrag einfügen kann. WordPress legt ja automatisch von jedem hochgeladenen Bild kleinere Größen an, bis hinunter zu 50×50 (wobei man diese Werte ja auch modifizieren kann).
Um ein Bild jetzt responsiv und 100% Suchmaschinenoptimiert einzufügen, sollte man ja eine Skalierung vermeiden (beispielsweise über einen prozentualen width-Wert oder css Klassen wie bei bootstrap img-responsive). Der Grund: Google Pagespeed meckert rum, wenn es ein Bild erkennt, das zB mit einer Breite von 500px ausgegeben wird, aber die Quelldatei 1000px Breite hat. Dann kommt die Meldung „Durch Größenanpassung kann man 50% sparen“ beim Pagespeed Test.
Deshalb wäre es ideal, wenn bei geringeren Breiten automatisch die kleineren, von WordPress erstellten Thumbnails ausgegeben werden.
Meine Frage ist: ist das automatisch möglich? Oder muss man da tatsächlich von Hand das Bild mit der ganzen image alt srcset – Geschichte per html Quellcode einbinden? Vielen Dank!
Hallo, danke für den Beitrag. :) Bei mir ist leider nur eine Frage offen geblieben. Wie kann ich ein Bild im Hintergrund positionieren, sodass sich der Text über dem Bild befindet. Ich habe hier schon nachgelesen http://www.webmaster-crashkurs.de/hintergrundbilder-mit-css.htm ,dass scheint mir aber etwas zu aufwendig zu sein, gibt es auch eine einfache Lösung mit einem Plug in?
Moin,
leider gibt es keine einfacherer Lösung für Hintergrundbilder. Wir kennen auch nur ein Plug-in, das ein Bild im gesamten Hintergrund der Website, aber nicht in den Textfeldern ermöglicht: Simple Full Screen Background Image.
Ahoi & schönen Gruß,
Das Elbnetz-Team
Hallo liebes Elbnetz-Team, danke für die schnelle Rückmeldung. Ich sag mal wow, weil meine Erfahrung war mit WordPress bisher, dass es immer ein Plug in gibt. Egal für was. Ich habe aber bei meinen weiteren Recherchen auch kein Plug in finden können. Damit muss man sich wohl abfinden und den umständlichen Weg gehen :( Mit dem Suchbegriff Hintergrundbild, etc.. findet man immer nur Plug ins, welche wie ihr schreibt immer nur das Bild im gesamten Hintergrund, aber nicht im Textfeld ermöglicht. Erstaunt mich schon ziemlich, da Hintergrundbilder auf Webseiten häufig verwendet werden und ein ein Hintergrundbild eigentlich nichts ausgefallenes ist, sodass ein Plug in, zur einfachen Lösung dafür durchaus Sinn machen würde.
Oh super! Jetzt hab ich es auch gerafft! :)
Vielen Dank für den hilfreichen Beitrag auf dieser Seite. Ich habe einiges umsetzen können.
Sie sind ein Held!!! Danke :-)
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.
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
Top Tipps! Klappt sehr gut. Das mit der manuellen Eingabe des Codes sollte unbedingt beachtet werden. )))
Hab selten so schnell ein Problem gelöst. Vielen Dank.
Super Tipps, haben uns sehr geholfen.
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?
Guten Morgen Mila,
prinzipiell geht das mit Hilfe von CSS:
body {background-image: url("paper.gif");
}
Hier erfährst Du mehr zu dem Thema: http://www.webmaster-crashkurs.de/hintergrundbilder-mit-css.htm
Beste Grüße,
Die Elbnetz-Redaktion
Dankeschön :)
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/
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
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…
als dankeschön für den beitrag;
suche google: wordpress bild text abstand
ergebnis erste auflistung ihr beitrag!
toll
danke
eli
Vielen Dank für die ausführlichen Informationen, waren sehr hilfreich für mich.