In diesem Tipp der Woche verwende ich ausnahmsweise den visuellen Editor, da dieser sehr wohl
einige praktische Funktionen mitbringt, die man für die Bildanbindung verwenden kann.
Wenn ich jetzt also einen Text habe und mir das vielleicht erstmal in der Vorschau anschaue,
dann sieht das Ganze noch etwas langweilig aus, etwas waddaus, weil vielleicht einfach
die passenden Bilder fehlen.
Und um das zu ändern, gehe ich jetzt auf neue Seite erstellen hier und wechsle erstmal
eine neue Zeile, um hier dann das Bild einzufügen.
Es gibt hier zwei Möglichkeiten, wie Sie das Bild an dieser Position einfügen können.
Die eine Möglichkeit ist über den Button Dateien hinzufügen.
Der macht natürlich dann Sinn, wenn Sie die Bilder schon in der Mediathek haben.
Weil Sie die Bilder aber aktuell noch auf Ihrem Rechner haben, dann macht es vielleicht
mehr Sinn, hier einfach Ihren Finder zu öffnen, Ihren Dateiexplorer zu öffnen, ein Bild
aus einem Ordner auszuwählen und dann in den visuellen Editor zu ziehen.
Man sieht schon, Dateien für Upload bereitstellen.
Wenn ich das mache, dann wird sich automatisch die Mediathek öffnen und das Bild wird hochgeladen.
Hier gleich vorweg.
Am besten ist es, wenn man die Bilder als.jpg oder.jpg hochlädt, weil die dann auch
automatisch etwas verkleinert werden.
In diesem Beispiel ist das Bild immer noch sehr groß, mit 821 KB.
Idealerweise lädt man Bilder hoch, die entsprechend kleiner sind.
Das heißt, man sollte sie schon vorher komprimieren, etwas verkleinern.
Das geht zum Beispiel mit Gimp, das funktioniert auch mit zum Beispiel Photoshop.
Eine andere Möglichkeit, die ich gerne verwende, ist zum Beispiel die Seite compressedjpg.com,
denn hier kann ich das Bild theoretisch auch packen aus dem Finder und einfach hochladen,
also hineinziehen und dann wird das automatisch verkleinert.
Das heißt, in diesem Fall sind es jetzt 13%.
Wenn ich aber darauf klicke und hier etwas nach unten scrolle, dann kann ich hier auch
die Qualität zum Beispiel weiter runterschrauben.
Bis ich eine komprimierte Form habe, die vielleicht gerade unter 350 liegt.
Ich sage mal idealerweise unter 350 KB.
Machen Sie sich hier keine Sorgen, selbst wenn Ihr Bild nicht super komprimiert ist,
ist das nicht weiter schlimm.
Ich lade das Bild jetzt hier von dieser Seite herunter und gehe dann wieder zu meiner Mediathek.
Hier lösche ich das sehr große Bild erstmal heraus und klicke dann über den Button Dateien
hochladen und ich wähle dann Dateien hochladen aus und wähle das komprimierte Bild aus,
was ich eben heruntergeladen habe.
Dieses Bild ist jetzt schon deutlich kleiner, deutlich komprimierter und ich habe nur noch
332 KB, die hier dann eben hochgeladen werden.
Unter Alternativtext kann ich einen passenden Alternativtext vergeben, zum Beispiel Vogel
auf Waldgrund schaut in die Kamera.
Und dann am Ende des Alternativtextes vergebe ich einen Punkt, damit der Screenreader hier
eine kurze Pause macht.
Unter Beschriftung haben Sie die Möglichkeit eine Bildbeschriftung hinzuzufügen, zum Beispiel
bei Gruppenfotos von links nach rechts etc.
Die müssen Sie nicht verwenden, ich lasse meine Bildbeschriftungen meistens leer.
Es macht aber natürlich Sinn, wenn Sie Personen auf dem Bild haben, diese vielleicht kurz
zu erwähnen.
Und ansonsten gehen wir jetzt auch zum Einbinden des Bildes weiter und zwar scroll ich hierfür
an das Seitenende.
Hier habe ich erstmal verschiedene Möglichkeiten und in diesem Video werde ich jetzt alle einfach
mal ausprobieren und vorstellen.
Beginne ich mit der Ausrichtung und damit Ausrichtung so richtig sichtbar wird, muss
man die Größe auf Mittel stellen, idealerweise auf Mittel oder Groß- oder Vorschaubild.
Ich würde Mittel empfehlen einfach, weil man wenn man ein Bild links ausrichtet, dieses
natürlich auch eine gewisse Größe mit sich bringen muss, damit man diese Linksausrichtung
überhaupt sieht.
Damit Sie das vielleicht verstehen, zeige ich mal wie ein links ausgerichtetes Bild
mit vollständiger Größe ausschauen würde.
Wenn ich das jetzt nämlich in die Seite einfüge, dann sieht man hier schon, dass sogar im visuellen
Editor dieses Bild natürlich die volle Größe einnimmt.
Wenn ich das jetzt aber in der Vorschau anschaue, dann kann ich sehen, dass ich gar nicht erkenne,
dass dieses Bild links ausgerichtet wurde, weil es ebenso unfassbar groß ist.
Und um das zu ändern, lösche ich dieses Bild hier wieder raus über die Entfernen-Taste
und klicke dann wieder auf Dateien hinzufügen hier oben, werde das Bild erneut aus, scroll
nach unten und stelle für die Größe jetzt erstmal Mittel ein.
Ich werde gleich die anderen Größen auch noch kurz zeigen, wie das so ausschauen würde,
aber jetzt erstmal zur Ausrichtung.
Hier gibt es links, zentriert, rechts und keine.
Ich beginne erstmal mit keine, denn wenn ich das jetzt in die Seite einfüge, dann sieht
das Ganze im visuellen Editor erstmal so aus, ziemlich unspektakulär.
Das heißt das Bild ist einfach, zumindest hier im visuellen Editor, passend wie der
Text, links am Anfang ausgerichtet.
Wenn ich mir das in der Vorschau anschaue, dann sehe ich, dass das Bild eben hier bündig
zum Text links anfängt und dann hier oben rechts daneben aber nichts nebendran ist.
Das heißt der Text fließt nicht um das Bild, das merken wir uns jetzt erst einmal.
Denn wenn ich zurück gehe und jetzt im visuellen Editor einfach mal die Ausrichtung ändern
möchte, dann kann ich auf das Bild draufklicken.
Ich sehe hier keine Ausrichtung ist zur Zeit ausgewählt und jetzt kann ich hier auf links
bündig wechseln.
Sobald das Bild links bündig ist, wechselt der Text und springt automatisch neben das
Bild.
Wenn ich mir das in der Vorschau wieder anschaue, sehe ich das Bild daneben der Text.
Genauso sieht das Ganze natürlich auch aus, wenn das Bild rechts bündig ausgerichtet
wird.
Auch hier sehe ich, dass der Text um das Bild fließt und entsprechend dann eben eine Zweispaltigkeit
erstellt, die an der einen oder anderen Stelle bestimmt Sinn macht.
Zu guter Letzt zeige ich noch das Zentrieren.
Wenn man ein Bild zentriert, dann wird der Text nach unten gepresst.
Das heißt auch in der Vorschau sieht man, dass das Bild dann hier mittig ist und der
Text eben verschwindet.
Denn der wird dann eben in die nächste Zeile gepresst.
Jetzt werden Sie sich vielleicht fragen, wie wird das Ganze denn dann ausschauen, wenn
man mehrere Bilder hat, die vielleicht verschiedene Größen haben.
Und das probieren wir jetzt einfach aus.
Das heißt hier erstelle ich wieder eine neue Zeile, klicke Dateien hinzufügen und wähle
jetzt vielleicht ein Bild, das ein anderes Format hat.
Bei Größe wähle ich erneut Mittel aus, 300 x 200 und bei Ausrichtung erneut links.
Wenn ich das in die Seite einfüge, sehe ich schon, ich habe hier eine Kante drin.
Das gefällt manchen Leuten mehr, anderen Leuten vielleicht weniger.
Wenn ich das jetzt anschaue, dann sehe ich, dass das vielleicht nicht so optimal ist,
wie ich das gerne hätte.
Und hier gibt es Abhilfe durch einen Shortcode, der das Ganze schon etwas auflockern kann.
Und zwar kann ich vor dem Bild einfach einen Umbruch einfügen und den Shortcode divider
setzen.
Wenn ich hier an der Stelle divider schreibe mit einer eckigen Klammer, also öffnende
eckige Klammer, divider, schließende eckige Klammer und das in der Vorschau anschaue,
dann sehe ich, dass ich jetzt hier erstmal eine klare Trennung habe.
Vielleicht erkennen Sie das auf dem ersten Blick nicht, weil man jetzt hier vielleicht
nicht so erkenntlich diesen Abstand sieht, allerdings wird es klar, wenn ich dieses Bild
jetzt statt links rechts ausrichte.
Und dann könnte ich zum Beispiel hier erneut einen divider setzen, das mache ich erneut
hier und darunter könnte ich dann einfach ein weiteres Bild einfügen.
Zum Beispiel könnte ich dann hier nochmal ein Bild einfügen, das vielleicht wieder
eine andere Ausrichtung hat, zum Beispiel links und das dann eben dann neben diesem
Text hier unten erscheinen soll.
Wenn ich das in der Vorschau betrachte, sehe ich hier links ein Bild, hier rechts ein Bild
und hier links wieder ein Bild.
Und das mit Hilfe eines einzelnen Shortcodes, der das ganze einfach separiert.
Ich stelle mit diesem Shortcode divider also sicher, dass dieser Text ein separierter Block
ist.
Nähere Informationen finden Sie auch im letzten Tipp der Woche zum Thema unsichtbarer Trenner.
Das heißt, das sind schon mal die Möglichkeiten der Ausrichtung.
Man hat also Linksausrichtung, Rechtsausrichtung und man kann natürlich auch ein Bild zentrieren.
Ich könnte jetzt zum Beispiel am Anfang dieses Textes vor dem Bild vielleicht eine Überschrift
einfügen und diese Überschrift hat dann natürlich zum Beispiel Überschrift 2 und
darüber habe ich vielleicht noch ein Bild, was ich geschossen habe vor einem Tag, zum
Beispiel von diesem Meeresblick hier.
Dann könnte ich das natürlich hier unten unter Anzeigeeinstellungen so konfigurieren,
dass ich sage, es hat bei mir keine Ausrichtung, ist dafür aber vollständige Größe, also
nimmt den gesamten Raum ein, den es einnehmen kann.
Ich könnte auch sagen, das Bild wird zentriert und der Link zur Mediendatei, dazu erzähle
ich gleich mehr, was das ausrichtet, was das macht.
Und dann wird dieses Bild eben hier oben noch eingefügt.
Wenn ich das jetzt in der Vorschau wieder betrachte, dann sehe ich, hier habe ich oben
ein Bild, das den gesamten Raum einnimmt, darunter sehe ich dann Überschrift Text,
Text und so weiter, Linksausrichtung, Rechtsausrichtung, Linksausrichtung und diese Bilder haben immer
maximal 300 Pixel Breite.
So viel also erstmal zu den Basics, sage ich mal, also zur Ausrichtung von Bildern.
Ich werde am Ende des Videos vielleicht noch etwas mehr in die komplexeren Details eingehen,
aber das ist jetzt erstmal das, was Sie nur brauchen, wenn Sie so ein Bild ausrichten
wollen, einfügen möchten und dann verschiedene Elemente gestalten wollen.
Mein Tipp wie immer, der Shortcode Divider hilft Ihnen da bei diesen links und rechts
ausgerichteten Bildern, wie Sie das eben gesehen haben.
Was bedeutet dann jetzt eigentlich dieses Link zur?
Und das steuert einfach nur, was passiert, wenn man auf das Bild klickt.
Bei keine passiert nichts, wenn man auf das Bild klickt.
Das heißt, wenn ich hier drauf klicke, keine auswähle, in die Seite einfüge und mir das
in der Vorschau anschaue, so hier oben über den Button Vorschau, dann sehe ich, dass dieses
Bild nichts macht, wenn ich mit der Maus drauf klicke.
Kann klicken, so viel ich möchte und nichts passiert.
Ich sehe ja auch keinen Hoverrahmen, also kein Rahmen, der irgendwie sichtbar wird, weil
es auch keinen Link gibt für dieses Bild.
Wenn ich einmal zurück gehe und das Bild hier wieder entferne, dann könnte ich auch
über Dateien hinzufügen, das gleiche Bild auswählen oder ein anderes Bild auswählen
und dieses Mal einen Link zum Mediendatei setzen.
Wenn ich Link zum Mediendatei setze und in die Seite einfüge und mir dann in der Vorschau
anschaue, dann erhalte ich ein Bild, das Sie vielleicht schon kennen, denn wenn ich hier
jetzt drauf klicke, dann öffnet sich diese Lightbox, diese interaktive Box, die das Bild
vergrößert für den Besucher, dass er es eben in voller Größe anschauen kann.
Das macht natürlich immer dann Sinn, wenn Sie so kleinere Bilder haben und Sie sagen,
ja, das Bild ist jetzt hier vielleicht nur auf der Größe 300x200 Pixel, aber wenn der
Nutzer draufklickt, dann soll er es trotzdem in voller Größe sehen können.
Also das ist das nächste, was es gibt, also Link zum Mediendatei.
Jetzt kann ich wieder hergehen, Seite bearbeiten, das Bild hier auswählen und dann eben nochmal
entfernen.
Über Dateien hinzufügen wähle ich wieder ein anderes Bild aus oder das gleiche Bild
und wähle jetzt einmal Link zur Anhangseite.
Wenn ich das jetzt hier einfüge und die Seite wieder aktualisiere, also in der Vorschau
anschaue, dann erhalte ich jetzt ein Bild, das anders funktioniert, bzw. der Link leitet
mich auf die Bildseite und hier sehe ich alle Details zum Bild, die man vielleicht als
Nutzer gar nicht sehen sollte und eben auch eine eigene Seite, eine eigene Inhaltsseite
mit Header und Footer.
Das heißt, wenn man Link zur Anhangseite verwendet, dann passiert eben das, was man eben gesehen
hat.
Jetzt gibt es natürlich noch einen individuellen Linksetzen, das heißt, wenn ich das mal entferne
und hier sage Dateien hinzufügen, wähle ein Bild aus und Link zur individuellen URL, dann
habe ich natürlich die Möglichkeit hier einfach eine URL einzugeben, wo das Bild hin verlinkt.
Das würde ich weniger empfehlen, ist vielleicht weniger sinnvoll oft, da man als blinder Nutzer
vielleicht nicht sofort versteht, wo dieses Bild auch hin verlinkt.
Natürlich können Sie im Alternativtext vielleicht Zusatzinformation geben, falls Sie das wirklich
als Link verwenden.
Viel besser ist dagegen ein Portalmenü zu verwenden.
Dazu gibt es auch einen eigenen Tipp der Woche, da können Sie das nochmal anschauen, wie
das mit den Portalmenüs funktioniert.
So viel also zum Link und zur Größe.
Jetzt gibt es bei der Größe noch andere Größen, also kleiner kann man es immer machen, größer
kann man es machen und ich stelle jetzt noch kurz die kleinste Größe vor, da ich das
finde, ist einfach eine Größe, die viel zu klein ist.
Wenn ich mir das nämlich jetzt in der Vorschau mal anschaue für das Bild, was ich hochgeladen
habe, dann sehe ich, dass es eben nur so ein kleiner Bildblock ist, wenn ich jetzt stattdessen
das Bild auswähle und hier eine andere Größe wieder einfüge, zum Beispiel Dateien hinzufügen
und ich sage, dass es eben die Größe groß hat, dann ist das Ganze schon viel größer
als vorher.
Das heißt, experimentieren Sie einfach etwas mit Bildgrößen, Bildausrichtungen oder halten
Sie es einfach simpel und lassen Sie es zum Beispiel ohne Ausrichtung mittig.
Wenn Sie jetzt so ein Bild im visuellen Editor eingefügt haben und Sie wollen im Nachhinein
die Größe oder so anpassen, dann klicken Sie einfach drauf, klicken auf diesen Stift
bearbeiten und wählen hier dann zum Beispiel bei der Ausrichtung einfach ein anderes Format
aus, zum Beispiel keine vollständige Größe und beim Link würde ich immer empfehlen,
Link zum Mediendatei zu wählen.
Wenn ich das jetzt aktualisiere und dann hier oben in der Vorschau wieder betrachte, dann
sehe ich, dass das Bild eben jetzt die volle Größe einnimmt und wenn ich draufklicke,
sehe ich die Vorschau.
Dieser Stift hat übrigens noch eine weitere praktische Funktion, könnte man sagen und
zwar, wenn man ein Bild hier rund darstellen möchte, das Bild sollte natürlich entsprechend
quadratisch sein, dann kann man das Bild auswählen.
Ich werde jetzt hier vielleicht etwas mogeln, also ich klicke auf das Bild, klicke auf bearbeiten,
klicke auf Link zum Mediendatei und bei Größe stelle ich das jetzt auf Vorschaubild, denn
dieses Vorschaubild ist quadratisch und jetzt könnte ich zum Beispiel hergehen und über
erweiterte Optionen auch zusätzliche Bildklassen vergeben.
Und zwar haben wir auf unserer Anleitungsseite unter Grundlagen, Bilder, auch zusätzliche
Bildklassen, die man vergeben kann, und zwar Zusatzklassen für Bilder.
Hier findet man ein paar spannende Klassen, zum Beispiel hier Circle und hier steht, hierzu
wird dem Image Tag die Klasse Circle hinzugewiesen und wenn ich jetzt hier eben in dieser Darstellung
des visuellen Editors bin, unter diesem Reiter erweiterte Option hier unten, kann ich dem
Bild Tag, also der Bild CSS Klasse einfach die Klasse Circle vergeben und aktualisieren.
Wenn ich jetzt auf Vorschau klicke, sollte das Bild rund dargestellt werden und wenn
ich drauf klicke, wird es mir in der vollständigen Größe dargestellt.
Das heißt, das ist natürlich hier eine Möglichkeit, da etwas herum zu probieren, auszuprobieren.
Sie haben gesehen, dass es Bilder gibt, die man in verschiedenen Variationen ausrichten
können.
Sie haben auch gesehen, dass Ihnen der visuelle Editor hier ein paar Werkzeuge an die Hand
gibt, zum Beispiel können Sie so ein Bild auch im Nachhinein schnell mal anders ausrichten
und auch über diesen Stiftbutton die Größe zum Beispiel anpassen, kleiner machen, größer
machen und Sie können auch diesen Link zur Mediendatei entsprechend einsetzen und gestalten.
Sie haben auch gelernt, dass es Bildklassen gibt, die manchmal ganz interessant sein können,
zum Beispiel wenn man ein quadratisches Bild rund machen möchte.
Und zu guter Letzt haben Sie auch gelernt, was dieser DIVIDER Shortcode Ihnen bei dieser
Bildausrichtung bringt und wie nützlich dieser eigentlich ist, denn Sie können dort dann
bestimmte Abschnitte mit einem links ausgerichteten Bild machen, während andere Abschnitte vielleicht
ein rechts ausgerichtetes Bild besitzen.
Wie immer war es das mal wieder mit dem Tipp der Woche.
Wenn Sie noch Feedback haben oder Fragen haben, offene Fragen, vielleicht auch Ideen für
den nächsten Tipp der Woche, dann schicken Sie mir doch einfach eine Mail an webmasteredfau.de.
Ich freue mich immer über Feedback, um einfach die Anleitungsseiten weiter für Sie zu verbessern.
An dieser Stelle wünsche ich Ihnen auch noch viel Spaß beim Umsetzen Ihrer eigenen Ideen
auf Ihrer WordPress-Seite.