Warum Sie Editor-Vorlagen verwenden sollten

Beitrag vom November 2021 | Autor Bettina Blaschek

Erstellen von Vorlagen zur Arbeits­erleichterung

Wozu sollen Sie sich die Mühe machen und Vorlagen erstellen? Ganz einfach. Einmal erstellt und optimal ange­passt, können Sie ganze SITEX-Inhalts­seiten oder einzelne Inhalts­zeilen als Editor-Vorlagen anlegen und immer wieder verwenden. Dabei fällt einiges an Aufbeits­aufwand weg 🥳. Bei der Bild­auswahl wissen, worauf zu achten ist, Schrift­stile und Überschriften-Struktur erfüllen die Norm, die Abstände sind mobil optimal einge­stellt und Call-to-action-Buttons werden nicht vergessen 😎.

Wir haben ein paar Infos für Sie vorbereitet über

Klare Linien­führung und ein­heitliche Abstände

Einheitliche Abstände und eine klare Linien­führung sehen nicht nur gut aus, sondern sind ange­nehmer zu lesen. Ihre Website­besucher können sich somit auf die Inhalte konzentrieren.

  • Stellen Sie die Abstände z.B. mit den Stilen innerer und äußerer Abstand passend zu den anderen Seiten Ihrer Website bereits in den Editor-Vorlagen richtig ein.
  • Vergessen Sie dabei die mobile Darstellung nicht. Dazu haben wir einen Tipps & Tricks Beitrag für Sie.

Responsive Darstellung prüfen

Sie sparen sich damit jede Menge Arbeit bei der Gestaltung neuer Seiten. Vor allem zum Header und Footer bzw. zwischen Texten sollen Abstände einheitlich sein. Mehr­spaltige Layouts sind vor allem mobil besonders zu berück­sichtigen, da diese am Handy untereinander rutschen und hier ebenfalls ein Abstand bei den Texten sein soll.

Für eine klare Linien­führung sorgen die Layouts begrenzt und nicht begrenzt.

Überschriften-Struktur einhalten

Damit Texte gut lesbar sind, ist eine strukturierte Gliederung wichtig. Unter­teilen Sie Ihre Texte in Absätze und verwenden dabei die richtige Überschriften-Struktur. Ihre Leser und die Such­maschinen werden sich darüber freuen. In einem eigenen Tipps & Tricks Beitrag haben wird alle relevanten Informationen zusammen­gefasst.

Beitrag: Überschriften-Struktur

Einheitlicher Typo Schrift­stile beibe­halten

Hier ein Beispiel:

Dieser Text wird mit verschiedenen Stilen bearbeitet, so kann ein Text fett, unterstrichen oder kursiv formatiert sein. Aber auch alles in GROSSBUCHSTABEN, verschiedenen Größen (kleiner bzw. größer) oder einer alternativen Schrift oder alternativen Schriftfarbe zu formatieren wäre möglich.

Wie geht es Ihnen beim Lesen mit so vielen unter­schiedlichen Formatierungen? Sehr unge­wohnt und unter Um­ständen müssen Sie den Text mehr­mals lesen. Und genau das ist der Punkt. Zu viele Schrift­stile mit Formatierungen zu mischen ist anstrengend zu lesen und die Konzentration auf den eigentlichen Inhalt ist nicht mehr vorhanden.

  • Heben Sie wichtige Texte in fetter Schrift oder einer alternativen Schrift­farbe hervor.
  • Unter­streichen im Web hat sich bei Verlinkungen einge­bürgert. Sie sollten also Texte nicht unbedingt zusätzlich unter­streichen.
  • Kursiv werden vor allem Zittate formatiert.

Behalten Sie Ihre Schrift­stile auf der gesamten Website möglichst bei. Dann steht einem ange­nehmen Lesefluss nichts im Weg.

Call-to-action-Buttons

Call-to-actions, sogenannte CTAs, sollen zu einer Handlung animieren. Von Online­shops kennen Sie diese CTAs bereits, z.B. "Jetzt kaufen". Genau solche Handlungs­auf­forderungen sind damit gemeint. Ihre Kunden werden dadurch angeregt, ein Produkt zu kaufen, sich für eine Veranstaltung oder Ihren Newsletter anzumelden oder Ihnen eine Kontakt­anfrage zu senden.

Setzen Sie CTAs gezielt ein, ohne dabei aufdringlich zu wirken. So ist ein CTA-Button "Produkt kaufen" bei einem Produkt natürlich richtig. Bei jedem zweiten Absatz in einem Blog­beitrag aber ein CTA-Button "Zum Newsletter anmelden" viel zu viel. Manchmal ist weniger mehr 😉.

Ziel einer CTA ist, dass Ihre Website­besucher gerne wieder kommen, weil Sie den regel­mäßigen Newsletter erhalten, neue Beiträge lesen oder bei einer Aktion Produkte kaufen.

Legen Sie einen CTA-Button bereits in der Editor-Vorlage an, können Sie nicht mehr darauf vergessen. Beachten Sie allerdings, dass zu viele Auf­forder­ungen mitten in den Texten die Absprung­rate erhöhen kann. Wir empfehlen Ihnen daher einen CTA-Button am Ende einer Seite zu verbauen.

CTAs sind nicht zu verwechseln mit internen Ver­linkungen zu weiter­führenden Inhalten auf Ihrer Web­site, diese sind natürlich an relevanten Stellen wichtig.

Optimales Bild­material

"Bilder sagen mehr als tausend Worte". Mit Bildern transportieren Sie Emotionen oder veran­schaulichen Sach­verhalte, die mit Texten schwierig zu erklären sind.

Hochauf­lösende Bilder lassen sich mittler­weile mit jedem Handy machen, aber zu große Bild­dateien benötigen mehr Speicher­platz und haben eine längere Ladezeit. Ein Header­bild auf einem Desktop reicht mit einer Bild­breite von ca. 2200px vollkommen aus. Das entspricht in etwa der aktuell gängigen Desktop­größe von 24''.

Weitere Infos zu Bildern im Beitrag:

Tipps für Bilder in den Editor-Vorlagen

  • Bei Bildern als Hinter­grund eines Textes verwenden Sie ruhige Bilder und vor allem keine groß­flächigen Gesichter. Über einem weit­läufigen Landschafts­bild spricht nichts dagegen. Texte sollten aller­dings gut lesbar sein. Hier können Sie unsere Stile wie Hinter­grund abdunkeln / aufhellen oder andere Schrift­farben verwenden 🧐.
  • Vorsicht mit weißem Text auf hellen Bildern. Punkto Barriere­freiheit muss Text über Bildern gut lesbar sein. Dazu empfehlen wir Ihnen bei weißer Textfarbe den Schrift­schatten schwarz zu verwenden, zu finden sind die Stile im CK-Editor Formatierungs­stile.
  • Legen Sie passende Bilder in der Vorlage mit der richtigen Breite & Höhe an, so wissen Sie beim Austauschen, welche Größe in allen Auflösungen passt. Vergessen Sie nicht auf das richtige und passende Bildformat.
  • Gleiches gilt für Erweiterungen mit Bildern wie Mediengalerie oder Slideshow. Diese können in der Vorlage optimal vorbereitet werden mit den passenden Abständen.
  • Verwenden Sie mehr­spaltige Layouts mit Bildern, dann rutschen diese mobil unter­einander. Beachten Sie vor allem mobil die Abstände. Hier stehen Ihnen verschiedene Gestaltungs­möglichkeiten zur Verfügung.

Gruppierung bei den Vorlagen

In einigen Erweiterungen erstellen Sie die Inhalte im Inhalts-Editor. Ein Beispiel wäre die Erweiterung Blog. Bei den Vorlagen können Sie die verschiedenen Erweiterungen gruppieren. Mit der Ver­wendung dieser Blog - Artikel Gruppierung können Sie aus ihren bereits vor­handenen Artikeln aus­wählen und sparen sich so diverse An­passungen.

Grafik wo Gruppierung bei Vorlagen ausgewählt wird
Vorlagen gruppiert

Icon Papierflieger Verwenden Sie die Editor-Vorlagen schon?

Als Redakteur stehen Ihnen Editor-Vorlagen zur Verfügung, die Sie individuell nutzen können. Wie Sie damit arbeiten, erklären wir Ihnen in den Tutorials.

Tutorials Editor-Vorlagen