Beiträge durch Trennlinie strukturieren

Beiträge durch Trennlinien strukturieren

Längere Beiträge sollte man für eine bessere Lesbarkeit strukturieren. Ich verwende dazu in der Regel Absätze, Bilder oder/und Überschriften. Gelegentlich bietet es sich aber auch an, Artikel durch eine Trennlinie optisch aufzuteilen.

Ich gebrauche dieses Stilmittel, z. B. um am Ende eines Beitrages die abschließenden Fragen an die Besucher visuell abzugrenzen (Beispiel). Ein anderes Mal bot sich dieses Trennmittel bei einer eingeschobenen Passage an, um diese als eigenständige Geschichte von dem Rest des Beitrages abzugrenzen.

Um zu verdeutlichen, was ich damit meine, schaut einfach mal in diesen Beitrag auf meiner bunten Blogwelt.

Um diese Linie einzufügen, verwende ich den Befehl <hr> in der html-Ansicht des Editors. Vielleicht werdet ihr aber nun feststellen, dass in Eurem Blog gar keine Linie erscheint. Zumindest war das sowohl auf meinen WordPress-Blogs als auch auf meiner Joomla-Seite der Fall. Um diese “erscheinen zu lassen” ist lediglich ein kleiner Zusatz im CSS erforderlich.

Die CSS-Codes

Erst einmal habe ich einen grundsätzlichen hr-Befehl eingegeben:

hr{
border:2px;background-color:#DFDFDF;color:#DFDFDF;width:auto;
}

Um speziell die Trennlinie in einem Beitrag zu formatieren zusätzlich:

.post hr{
border:2px;
color:#DFDFDF;
background-color:#D7D7D7;
width:90%;
height:3px;
margin-top:30px;
margin-bottom:30px;
}

oder Beispiel in der bunten Blogwelt

.post hr{
border:2px;
color:#F26521;
background-color:#F26521;
width:100%;
height:3px;
margin-top:30px;
margin-bottom:30px;
}

Das Schöne dabei ist, dass die Abstände der Trennlinie zu den Textpassagen angepasst werden können. Natürlich könnte auch eine Grafik als Trenner ausgewählt werden. Das ist es auch schon und nun dürfte auch bei Euch die Trennlinie sichtbar sein.

Die Autorin:

Sylvi

Meine Beiträge beinhalten eigene Erfahrungen über Soft- und Hardware, Social Media und die ich als WordPress-Bloggerin und Joomlanerin gesammelt habe. Zudem widme ich mich dem schönen Hobby "Fotografie".

19 Kommentare

  • Hey Sylvi,
    guter Hinweis für Texteschreiber!
    Ich selber bekomme auch immer einen Schreck, wenn ich einen langen Text sehe, der einfach durchgängig gesetzt ist. Das Thema muss mich dann schon brennend interessieren, damit ich den dann lese und nicht gleich wieder zu mache.
    Das Interessante dabei ist ja, dass der Text ruhig genauso lang sein darf aber viel eher zum Lesen animiert, wenn er, so wie Du oben beschreibst, aufgelockert bzw. gegliedert ist.
    Liebe aber leider verregnete Grüße,
    Pauli

    • Hallo Pauli,

      ich neige schon mal dazu, sehr ausführlich zu schreiben – gerade auf meiner bunten Blogwelt. Da muss ich mir schon was einfallen lassen, um meine Besucher nicht zu vergraulen ;-)

      Genauso liebe verregnete und teilweise sogar verhagelte Grüße
      Sylvi

  • Einen wichtigen Aspekt hast Du glatt vergessen zu erwähnen:
    benötigt den geringsten Code und hat auch keinen Request wie eine entsprechende Grafik. ;)

    Gruß
    hansen

    • Hallo Hansen,

      das ist natürlich ein ganz wichtiges Argument, um zu diesem Strukturmittel zu greifen. Danke für Deine Ergänzung :-)

      Lieben Gruß
      Sylvi

  • Das werde ich auch gerne einmal ausprobieren. Mit einem einfachen HR Tag komme ich nämlich nicht weit in meinem Blog *grübel*

    Lieben mir-ist-kalt-Gruß
    Erdbeere

    • Hallo Erdbeere,

      ich habe glatt mal in den Seitenquelltext Deines Blogs geschaut und eigentlich müsste auch dieser Befehl in der style.css auf Deinem Blog umgesetzt werden. Okay, vielleicht würdest Du lieber statt meiner Farben den Farbwert “color:#D72D1C” nehmen ;-)

      Lieben-ich-vermisse-auch-die-muckeligen-Temperaturen-Gruß
      Sylvi

  • Als das ich so schrecklich untalentiert bin, was das Anpassen des Bloges betrifft. Das macht meistens der Liebe Sascha von gesichtet für mich… *hust*.
    Manches habe ich auch selbst gemacht, doch leider kann ich meine Testumgebung nicht mehr aufbauen.

    Lieben ich habe-irgendwie-die-Peilung-verloren-Gruß
    Erdbeere

    • Ich möchte Dich natürlich jetzt zu nix überreden, aber im Grunde brauchst Du – wenn Du die Linie ähnlich haben möchest wie auf meinen Blogs – den Code nur kopieren und in die Datei “style.css” Deines Templates kopieren.
      Dann brauchst Du nur noch den Farbcode ändern, vielleicht noch die Breite und das wars schon. Ich denke, Sascha wird das gerne für Dich erledigen ;-)

      Man-muss-aber-auch-nicht-alles-haben-Gruß
      Sylvi

  • Sorry !!

    Habe das vergessen , habe nun endlich mein erstes Interview geführt , dass hat Spass gemacht aber es ist eine Menge Arbeit , viel mehr als man denkt. Ich persönlich verdiene mit meinem Blog gar nichts obwohl ich ungefähr 6.000 Besucher im Monat habe. Ich denke aber es ist ein Fehler von Anfang an auf das Geld aus zu sein, es gibt Blogs da blendet und blinkt alles … die Leute sind dann genert und kommen nie wieder.

    • Hallo Christian Peter,

      durch Zufall bin ich nun auf einen Blog gestoßen, in dem Du haargenau den gleichen Kommentar abgegeben hast, wie bei meinem hier.

      Spam-Kommentar auf anderem Blog
      Ich denke, wenn Du mit Deinem Blog künftig Geld verdienen möchtest, dann solltest Du das Zuspammen anderer Blogs vermeiden. Ich habe für mich und meinen Blog nun beschlossen, weitere Kommentare von Dir nicht mehr zu dulden. Deine anderen Kommentare habe ich gelöscht.

      Gruß Sylvi

  • Hallo Sylvi,

    wenn ich mich nicht so schwer mit HTML und PHP und CSS und und und … tun würde, würde ich solche Tipps bestimmt viel häufiger umsetzen ;-)

    Ich bin halt mehr der “Schreiber” und viel weniger der “Programmierer”.

    Aber so ein paar kleine Sachen nutze ich trotzdem ganz gerne, wie z.B. “Platz machen bei H1 Überschriften” mit margin-top (mein absoluter Liebling z.Zt.).

    Ist ja nicht so, dass ich solche “Code” Sachen total ablehne, aber ich habe halt keine Ahnung davon und irgendwie höllischen Respekt davor. Zeit das zu lernen habe ich auch nicht (große Lust dazu übrigens auch nicht …).

    Was mir eigentlich fehlt, ist ein Editor für WP, bei dem ich nach der guten alten WYSIWYG Methode (für alle, die jünger als 30 sind, das war in den frühen 80er Jahren die Bezeichnung für “what you see is what you get”) alles per Maus da hin schieben kann, wo ich es haben will und der dann für mich den ganzen Code-Kram erledigt.

    Vielleicht erfindet ja mal einer sowas …

    Herzliche Grüße Jürgen Schnick

    P.S. Dieser “Christian Peter” hat bei mir auch den selben Kommentar “hinterlassen”. Wäre ich ohne deinen Hinweis, liebe Sylvi nicht drauf gekommen – Danke nochmal dafür!

    • Hallo Jürgen,

      DER Experte in html bis php bin ich auch nicht. Nicht umsonst habe ich hier meine eigenen kleinen Problemlösungen veröffentlicht, da ich meine, dass das Rad nicht immer neu erfunden werden muss.
      Testblog sei Dank kann ich mich richtig schön austoben und mir macht es schon viel Spaß, die Tipps anderer Blogger umzusetzen.

      Letztens habe ich mir im Rahmen meiner Beitragsstrukturierung auch noch mal mein CSS vorgenommen und die Abstände und Schriftbilder der Beitrags- und Inhaltsüberschriften (h2, h3) geändert. Schließlich liest das Auge ja mit :-)

      Und was den Editor in WordPress betrifft, den habe ich mit dem Plugin TinyMCE Advanced aufgepeppt. Mit ihm kann ich den Editor um viele Buttons ergänzen – ganz wichtig für mich sind da z. B. die Tabellen-Buttons.

      Lieben Gruß
      Sylvi

  • Danke für den Tipp mit dem TinyMCE Advanced. Habe ich schon eingebaut, da werden die nächsten Posts bestimmt davon profitieren.

    Danke

    Jürgen Schnick

  • Eine Trennlinie in diesem Artikel wäre visuell toll gewesen ;-)

    Aber eine gute Idee Erinnerung, ich will seit gefühlten zwei Jahren mein hr mit css schöner gestalten!

  • @Jürgen

    supergerne geschehen. Dann werde ich wohl demnächst mal genauer hinschauen ;-)

    @Marc

    oh nööö …. ich habe mich doch schon zusammengerissen und mich so kurzgefasst, dass eine Gliederung gar nicht erforderlich war – auch wenn es schwer fiel ;-). Außerdem wollte ich Dich einfach mal auf meine “bunte Blogwelt” lotsen… :-D

    Lieben Gruß
    Sylvi

  • genau danach habe ich gesucht. auf mashable nutzt man auch Trennlinien und in meinem Blog möchte ich das jetzt auch in den Beiträgen tun

  • Ich danke dir, gerade für meine Produkttest-Liste ist es übersichtlicher, wenn man die einzelnen Tests absetzt.
    Ich habe schon längere zeit verzweifelt nach solchen Trennlinien gesucht, jetzt hab ich sie gefunden.

    Dankeschön

  • Ich danke dir für die verständliche und informative Beschreibung, hat mir sehr geholfen. Mit der Zeit merkt man das die Trennlinien immer hilfreicher werden. Jetzt nutze ich sie auch in Posts.

    Liebe Grüße Mona