icon-symbol-logout-darkest-grey

Webkit ParagraphText

Texte auf Webseiten im Webkit können über den Paragraph Text in den Inhalts-Bereich der Seite eingefügt werden. Dabei ist es außerdem möglich, den Text von einem Button, einem oder mehreren zum Thema des Textes passenden Links oder auch einem Bild begleiten zu lassen.

Eine Illustration zur Benutzung von Textparagraphen

Hinweise zur Benutzung

Pro Text-Paragraph sollte nur ein Button verwendet werden, dieser befindet sich in einem eigenen Absatz unterhalb des Textes.

Beim Verfassen und Anpassen von Texten ist auf deren Stil und Format zu achten.

  • Der Stil Lead wird vor allem am Seitenanfang verwendet um den Inhalt der Seite kurz einzuleiten.
  • Mit den Formaten Überschrift 3 und Überschrift 4 können Inhalte innerhalb von Texten klarer strukturiert werden.

Der Text-Paragraph

Der Text-Paragraph besteht aus den Feldern Überschrift und Inhalt. In das Feld Überschrift kann ein Titel eingetragen werden, die automatisch im Frontend oberhalb des Textes einen Platz erhält. Bleibt das Feld Überschrift leer, so verschwindet der Platz oberhalb des Textes im Frontend.  

Das Feld Inhalt ist der Texteditor, in den der eigentliche Text eingetragen wird. Die Zeilenumbrüche im Frontend werden dabei automatisch vom System an Browser-Breite und Anzeigegröße angepasst und sind damit flexibel. Soll an einer bestimmten Stelle im Text ein Zeilenumbruch erfolgen, so kann dieser wie in anderen Texteditoren auch über die Tastenkombination “Shift+Enter” eingefügt werden. Im Gegensatz zum Absatz über die Taste “Enter” wird dabei keine Leerzeile in den Text eingefügt.

Standardmäßig wird der Text im Format Einfaches HTML angezeigt, das bedeutet, es kann nur eine begrenzte Anzahl an HTML-Befehlen für den Text verwendet werden. Für Admins im Webkit gibt es die Möglichkeit, zwischen zwei weiteren Textformaten zu wählen (Eingeschränktes HTML und Vollständiges HTML), die mehr Befehle erlauben. Eine Listen der zulässigen HTML Befehle wird nach Auswahl des Formats darunter angezeigt.

Screenshot des Text-Paragraphs im Backend mit hervorgehobenen Textformaten.

Formatierung des Texts

Im Kopfbereich eines Textfeldes im Paragraph Text gibt es die Möglichkeit, klassische Formatierungen für Text zu verwenden (fett, kursiv, hochgestellt, tiefgestellt) und  Aufzählungszeichen einzufügen.

Standardmäßig ist jeder eingetragene Text im Format Absatz formatiert. Über Stile können sogenannte Anlauftexte über den Typ Lead definiert werden. Diese umfassen den ersten Absatz eines Textes einer Seite und bieten eine erste Übersicht über den Inhalt. Der Stil Lead zeichnet sich dabei durch eine vergrößerte Schrift aus. Ist ein Text im Stil Lead formatiert, so darf dieser nicht ebenfalls fett gedruckt sein. 

Um einen Text zu formatieren, wird dieser markiert, anschließend kann die gewünschte Formatierung aus dem Drop-Down-Menü ausgewählt werden. 

Klickanleitung: Einen Absatz als Lead formatieren, wodurch er eine höhere Schriftgröße bekommt.

Zusätzlich zum Format Absatz existieren zwei weitere Formate: Überschrift 3Überschrift 4. Sie werden ausschließlich für Überschriften innerhalb eines Text-Paragraphen verwendet. Die Namen der Formatierungen - Überschrift 3 und Überschrift 4 - folgen dabei einer syntaktischen und optischen Hierarchie. So ist der Titel einer Seite automatisch in der Formatierung Überschrift 1 und jeder Titel eines Inhalt-Paragraphen automatisch in Überschrift 2 angelegt. Aufgrund dieser Hierarchie sollte im Paragraph Text für Überschriften zuerst der Stil Heading 3 verwendet werden, während nachfolgende Überschriften zu Heading 3 zugeordneten Texten in Heading 4 formatiert werden.

Soll ein Text aus einem anderen Dokument in den Texteditor eingetragen werden, so funktioniert dies über die Tastenkombination “Shift+V”. Dabei wird allerdings die Formatierung aus dem Ursprungsdokument übernommen. Um dies zu verhindern, ist es empfehlenswert, die Tastenkombination “Shift+Strg+V” zum Einfügen eines kopierten Textes zu verwenden. Dadurch wird zwar der Text an sich übernommen, jedoch nicht die darauf angewendeten Formatierungen.

Ansicht des Texteditors mit Beispielen für Formatierungen von Überschriften.

Einen Aktionsbutton hinzufügen

Am Ende eines Text-Paragraphen besteht die Möglichkeit, einen Aktionsbutton einzufügen, der zu weiteren wichtigen Aktionen oder Themen führt, die sich aus dem Kontext des Textes ergeben.

Über das kleine rechteckige Aktionsbutton hinzufügen-Symbol wird ein Button an der Stelle, an der sich der Cursor gerade befindet, hinzufügt. Gleichzeitig öffnet sich ein Fenster, in das URL und Link-Text des Buttons eingetragen werden können. Handelt es sich um einen externen Link (Zielseite liegt außerhalb des eigenen Webkits), so muss dieser die vollständige Adresse (inklusive https://) des Ziels enthalten. Handelt es sich um einen internen Link (innerhalb des eigenen Webkits), so kann in das Feld URL der Admin-Titel des Ziels eingetragen werden. Das System ersetzt den Admin-Titel dann automatisch mit der internen Adresse des Ziels (z.B. entity:node/1) und schlägt einen Linktext vor. Dieser kann aber auch überschrieben werden.

Interne und externe Links sind auch an der Richtung der Pfeile im Button zu erkennen. So zeigt ein Pfeil für einen externen Link diagonal nach oben, während ein Pfeil für einen internen Link horizontal nach rechts weist.

Klickanleitung: Einfügen eines Aktionsbutton mit jeweils einer internen und einer externen Zielseite.

Einen Link oder ein Bild hinzufügen

Unterhalb des Texteditors befindet sich ein Dropdown-Button für Zusatzelemente, über den begleitend zum Text ein oder mehrere Links, ein Bild oder ein externes Video eingebunden werden können. Das ausgewählte Element wird in der Desktop-Ansicht des Frontends neben dem Text angezeigt (in der mobilen Ansicht immer darunter). Die Position des eingebundenen Inhalts (rechts oder links vom Text) wird unter Ausrichtung des Zusatzelements ausgewählt. In der Regel sollten diese Inhalte immer rechts platziert werden, bei Bildern kann es in Ausnahmefällen Sinn machen, diese auch links zu positionieren. Obwohl es technisch ebenfalls möglich ist, einen Teaser hinzuzufügen, sollte diese Option nicht mehr verwendet werden, da die Funktion veraltet ist und die fehlerfreie Verwendung nicht mehr gewährleistet werden kann. Wurden im Button Links ausgewählt, so erscheint unterhalb des Texteditors der Linkbereich. Dort kann analog zur Eingabe bei Buttons die URL und der Link-Text des Links eingetragen werden. Sollen mehrere Links neben einem Text erscheinen, findet sich dort auch der Button Weiteren Eintrag hinzufügen, über den weitere Linkfelder einfügbar sind. 

Klickanleitung: Links als Zusatzelement neben Text einstellen und ihre Ausrichtung angeben.

Soll ein Bild neben dem Text angezeigt werden, so wird im Drop-Down-Button Image hinzufügen ausgewählt. Dadurch erscheint unterhalb des Texteditors ein Image Bereich, in dem über Select ein Bild aus dem System ausgewählt oder ein neues Bild ins System eingepflegt und direkt in den Textparagraph eingebunden werden kann. Passt das Format des Bildes im Frontend nicht optimal neben den Text, so gibt es die Möglichkeit, Small image format auszuwählen. Dadurch wird das Bild etwas kleiner angezeigt und passt im Verhältnis oft besser zum Text. Da ein Bild aber immer im Originalformat angezeigt wird, sollte immer darauf geachtet werden, dass die Länge des Textes ungefähr mit der Höhe des Bildes übereinstimmt, sodass ein stimmiger Gesamteindruck entsteht.

Klickanleitung: Ein Bild neben Text hinzufügen und die Darstellungsform auswählen.

Über den Button Entfernen unterhalb des Texteditors kann der komplette Platzhalter-Bereich für Bilder und Links neben einem Text wieder entfernt werden. Soll nur ein Bild ausgetauscht werden, so kann das bislang ausgewählte Bild über das Mülltonnen-Icon entfernt werden und anschließend ein neues Bild ausgewählt werden. Der Platzhalter für ein Bild bleibt neben dem Text erhalten, wenn kein neues Bild ausgewählt wird.

Abbildung des Backend und Frontends des Paragraph Text mit und ohne Platzhalter neben dem Text.