Herzlich willkommen zum WordPress-Tipp der Woche.
Diese Woche geht es um den unsichtbaren Trenner.
Hört sich beim ersten Hören vielleicht etwas langweilig an, ist es aber gar nicht.
Ich werde Ihnen zeigen, wie Sie mit dem unsichtbaren Trenner, und zwar dem sogenannten DIVIDER-Shortcode,
Ihre Inhalte besser strukturieren können.
Das heißt, wie Sie zum Beispiel solche Umsetzungen einfach, ja, mit Hilfe eines einfachen Shortcodes
und Text und einem Bild, umsetzen.
Hierfür beginne ich mit einer leeren Inhaltsseite.
Meine Inhaltsseite nenne ich genauso, also einfach Inhaltsseite.
Ich stelle meine Seite auf Privat einfach, weil ich hier auf einer Live-Seite bin.
Sie können gerne mitmachen, ich verwende einen Blindtext von blindtextgenerator.de.
Hierfür müssen Sie die Anzahl an Wörtern vielleicht etwas ändern und die Anzahl der
Absetze etwas hochschrauben und dann können Sie hier in die Zwischenablage kopieren.
Wenn ich jetzt einen Text in meinen visuellen Editor erstmal einfüge, dann erhalte ich
hier diesen klassischen Standardtext, etwas Blindtext und jetzt kann ich damit beginnen
und das Ganze erweitern.
Zum Beispiel könnte ich hier noch einen Überschrift hinzufügen, das vielleicht an der Stelle auch
etwas anders hervorheben und vor allem, ich wechsle jetzt in den Textmodus, weil ich mir
dadurch etwas leichter tue, also hier oben rechts findet man den Reiter und vor allem
kann man jetzt auch seine Bilder hinzufügen.
Falls Sie sich an letzte Woche erinnern, Sie können Bilder einfach hier in die Seite hineinziehen,
indem Sie das Bild nehmen aus Ihrem Datei Explorer, also aus Ihrem Dateisystem und einfach
in den Editor ziehen.
Das Bild wird sich dann in der Mediathek entsprechend öffnen und Sie können es theoretisch direkt
verwenden.
Da ich aber die Bilder, die ich diese Woche verwende, schon in der Mediathek habe, lösche
ich das Bild entsprechend wieder heraus und wähle stattdessen das erste Bild, das ich
die Woche verwenden möchte.
Ich scrolle bei den Anhangendetails jetzt nach unten und ändere die Ausrichtung auf links
und die Größe auf Mittel.
Den Link lasse ich auf Mediendatei.
Denken Sie bitte daran, dass Sie nach diesem Tipp der Woche, wenn Sie wieder ein Bild einbinden
und Sie möchten es breit über die gesamte Seite zeigen, dass Sie hier dann wieder Ausrichtung
keine wählen und Größe vollständige Größe.
Ich binde das jetzt in die Seite ein und wenn ich das jetzt mal aktualisiere und mal anschaue,
sieht das Ganze wie folgt aus.
Also ich kann hier auf Vorschau klicken, das macht das Gleiche.
Man sieht, dass es jetzt zwar ganz nett, aber nicht das, was ich möchte.
Ich kann hier noch, um das Ganze erstmal zu verbessern, mal die Sidebar einschalten.
Ich mache gerne immer hier Kontakt und Beratung hinein und ein Ansprechpartner, die man auch
fragen kann, wenn man eine Frage zur Inhaltsseite hat und ich erstelle, ich nehme hier immer
gerne das Template Inhaltsseite mit Navigation.
Wenn ich das jetzt mal aktualisiere und mir anschaue oder in der Vorschau anschaue, dann
wird das Ganze schon etwas anders ausschauen, denn jetzt habe ich links die Navigation,
rechts den Inhalt und das Ganze ist nicht mehr so breit.
Aber es gefällt mir immer noch nicht, weil ich noch nicht diesen gewünschten Effekt
habe, den ich eigentlich erzählen möchte.
Und das ist, wo der Divider Shortcode ins Spiel kommt.
Wenn ich jetzt hier eine leere Zeile schreibe und einfach Divider und dann unter dem Text,
vielleicht will ich die ersten zwei absetze, dann kann ich hier auch wieder Divider schreiben.
Natürlich ohne einen Slash davor, also einfach Divider.
Das heißt, das sind zwei einfache Divider Shortcodes, wenn ich das jetzt aktualisiere
und mir dann in der Vorschau wieder anschaue, dann sieht das Ganze wie folgt aus.
Das Ganze ist jetzt ein abgetrennter Abschnitt, eine Einheit.
Und das ermöglicht mir jetzt sicherzustellen, dass neben diesem Bild auch wirklich nichts
anderes ist.
Das heißt, wenn ich das Bild, das dem Browser etwas kleiner ziehe, das wird immer so sein,
dass eben nichts weiter vom nächsten Absatz hier reinrutschen wird.
Das heißt, es stellt sicher, dass dieses Bild nicht zum Beispiel den dritten, dass
der dritte Absatz hier nicht daneben rutschen kann.
Wenn ich mal hier wieder zurück gehe, kann ich hier natürlich auch das Ganze wiederholen.
Unter meinem Divider Shortcode fängt vielleicht ein Abschnitt über einen anderen Vogel, über
ein anderes Tier an.
Dann könnte ich hier zum Beispiel einfach das Bild auswählen, das mir gefällt.
Ich kontrolliere nochmal, ist die Ausrichtung links?
Diesmal möchte ich sie vielleicht rechts ausrichten und die Größe ist wieder auf
Mittel.
Ich füge das auch hier wieder dann in die Seite ein und kann dann das Ganze wieder abtrennen
durch einen weiteren Divider Shortcode.
Zum Beispiel könnte ich sagen, das ist schön, aber hier unten kommt eine neue Überschrift
und das ist bei mir eine H2 Überschrift.
Wenn ich das jetzt mal aktualisiere, dann wird man sehen, dass dieser zweite Block jetzt
eben eine eigene Einheit ist, nach rechts rutscht und der Text, ich muss auch die Vorschau
natürlich wechseln, und der Text hier dann links neben dem Bild erscheint.
Und das Tolle an diesem Shortcode ist, das ist keine extra Mehrspaltigkeit, die Sie hier
erzeugen durch den mehrspaltigen Shortcode, sondern einfach nur ein Trenner, ein Abstandsalter,
der Ihnen etwas mehr ermöglicht mit Bildern zu spielen.
Das heißt, trauen Sie sich ruhig mal, versuchen Sie es vielleicht mal bei Ihrer nächsten
Inhaltsseite einfach einen Abschnitt mit einem Bild einzufügen.
Und natürlich, wie Sie es bei einem vergangenen Wordpress-Tipp der Woche gelernt haben, können
Sie das auch mal überprüfen und zum Beispiel in die anderen Ansichten wechseln.
Es ist auch responsiv, das heißt, das Bild wird dann entsprechend auch in anderen Größen
hier daneben dargestellt.
Das ist also eine Möglichkeit, wie Sie Ihre Inhalte etwas anders gestalten können.
Jetzt möchte ich Ihnen noch eine zweite Möglichkeit gleich mit auf den Weg geben, wenn Ihnen das
jetzt nicht gefällt in der Darstellung, zum Beispiel wie hier, dann können Sie immer
noch hergehen und sagen, Sie verwenden statt diesem Trick mit dem Die Weiter Shortcode,
mit dem Unsichtbaren Trenner, lieber einen anderen Shortcode, zum Beispiel den Columns
Shortcode.
Ich zeige Ihnen mal kurz, wo Sie den finden.
Hier unter Plugins, Elements finden Sie nämlich den Reiter Mehrspaltiger Inhalt.
Das heißt, hier finden Sie auch den Unsichtbaren Trenner nochmal, falls Sie sich das in Erinnerung
rufen möchten.
Und hier runter finden Sie Mehrspaltiger Inhalt und eine ganze Seite darüber, wie Sie diesen
Shortcode verwenden und einsetzen können.
Wie immer wünsche ich Ihnen an dieser Stelle viel Spaß beim Ausprobieren.
Wenn Sie noch Fragen haben oder Sie vielleicht Ideen haben für den nächsten Tipp der Woche,
dann schicken Sie mir Ihre Ideen und Vorschläge gerne an webmasteredfau.de.
Ich freue mich auch immer über Feedback zu unseren Anleitungsseiten und allgemein, wenn
Sie Ideen oder Vorschläge haben, um die Anleitungen zu verbessern.
Hier sehen Sie jetzt nochmal das heutige Beispiel mit dem Die Weiter Shortcode, der hier eben
eingefügt wurde, um das Ergebnis zu erhalten.
Und ich hoffe, dieser Tipp der Woche hat Ihnen vielleicht auch etwas gezeigt, dass links
ausgerichtete Bilder und rechts ausgerichtete Bilder nicht per se schlecht sind, man kann
sie auch gut in Szene setzen.