Frage: Ich möchte gerne Text in zwei Spalten setzen und habe versucht, den Text mit 10 Leerschlägen zu unterteilen. Der Text war dann aber nicht sauber formatiert. Der Tab-Button funktioniert in WordPress anscheinend auch nicht. Wie geht’s richtig?
Bei proportionalen Schriften mit unterschiedlicher Breite der Buchstaben lässt sich ein sauberer Abstand zwischen Textblöcken nicht mit Leerschritten erzeugen. WordPress ist auch kein Textverarbeitungsprogramm, bei dem die Ausgabe auf einem Blatt Papier exakt definiert werden kann. Statt dessen wird Text so umgebrochen, wie er sich in der unterschiedlichen Größe des Anzeigefensters eines Browsers darstellen lässt. Das sieht üblicherweise auf einem Smartphone anders aus als auf dem 27″-Monitor eines Desktop-Computers.
Wenn du Text auf Webseiten mehrspaltig darstellen möchtest, muss der Text in HTML-Tags eingebettet und zusätzlich mit Cascading Stylesheet-Regeln formatiert werden. Die Formatierung ist im Idealfall so, dass sie sich aus oben genannten Gründen den unterschiedlichen Bildschirmgrößen flexibel anpasst – also nicht in festen Abständen von „10 Leerschlägen“, sondern in Prozent der Bildschirmbreite.
Ein Hilfswerkzeug, mit dem sich diese Kombination von HTML und CSS halbwegs bequem einfügen lässt, ist das Plugin Shortcodes Ultimate. Kurz gefasst fügst du deinem Text Befehle in eckigen Klammern hinzu, die dann bei der Aufbereitung der Webseite in HTML und CSS umgewandelt werden. Hast du das Plugin installiert, findest du oberhalb des Editors einen neuen Button, um Shortcodes einzufügen. Für einen zweispaltigen Text würde das sinngemäß so aussehen:
[su_row] [su_column size="1/2"] Text der ersten Spalte: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column] [su_column size="1/2"]Text der ersten Spalte: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam nibh, euismod eget nulla a, tempor scelerisque lorem. Proin dignissim arcu tristique fermentum ullamcorper. Integer lacinia scelerisque enim eu pretium. Nam elementum turpis orci, ac porttitor diam suscipit sit amet. [/su_column] [/su_row]
Im Front End wird dieser Shortcode so ausgegeben:
[su_row] beschreibt dabei den Abschnitt, der mehrspaltig dargestellt werden soll. [/su_row] ist das Gegenstück, das den Abschnitt beendet.
[su_column size="1/2"] ist eine Anweisung, eine Spalte mit der Größe „1/2“ zu erstellen, das Gegenstück heißt hier [/su_column].
Sicherlich liest sich das im Back End erst einmal nicht schön (es gibt schon vielversprechende Ansätze, diese Eingabe dann in eine WYSIWYG-Ansicht umzuwandeln), funktioniert aber nach einer kurzen Eingewöhnung recht effizient.