Tutorial: SITEX Editor

SITEX steht im Zentrum Ihrer redaktionellen Arbeit. Mit dem SITEX Editor des Content Management Systems erstellen und gestalten Sie die Seiten Ihre Website. Wie der Editor aufgebaut ist und welche Bearbeitungs­möglichkeiten Sie haben, erklären wir Ihnen in den Tutorials.

Für zusätzlichen persönlichen Support nehmen Sie Kontakt mit uns auf. Wir helfen Ihnen gerne weiter.

Allgemeine Einstellungen | Inhaltszeilen bearbeiten | CK-Editor | Stile

Allgemeine Einstellungen

Inhaltszeilen bearbeiten

Eine weitere Einstellungs­möglichkeit beim Anlegen von Bildern im Inhalts­editor erklären wir Ihnen in diesem Tutorial genauer Bild­format auswählen: Flexible Größe "Content Integration Enlargement (1200x800)".

Sie können diese Einstellung direkt beim Bild sowie bei der Aktion "vergrößern" (=Klickver­größerung) auswählen.

Einstellung im Modul "Mediabox Bild"

Wichtige Hinweise

  • Bei der Einstellung Flexible Größe "Content Integration Enlargement (1200x800)" wird das Bild in der Größe von maximal 1200 Pixel­breite und maximal 800 Pixel­höhe ausge­geben. Je nach Bild­größe wird Höhe oder Breite für den Maximal­wert heran­gezogen und der andere Wert im Verhältnis dazu ange­passt, damit das Bild nicht verzerrt wird.
  • Die Einstellung funktioniert nur bei Bildern, die größer als 1200x800 Pixel sind. Bei kleineren Bildern hat die Ein­stellung keine Aus­wirkung.

Sehen wir uns ein Praxis­beispiel an

Unser Beispiel­bild hat eine Original­größe von 5472 x 3648 Pixel wir empfehlen Ihnen eine maximale Pixel­breite von 2000 Pixel, damit sparen Sie auch Speicher­platz in Ihrer Media­box! Direkt bei beiden Bildern ist Flexible Größe "Content Integration Enlargement (1200x800)" ausgewählt, bei der Klickver­größerung nur beim rechten Bild. In diesem Fall werden beide Bilder auf der Website mit maximal 1200x800 Pixel ange­zeigt. Sie sehen hier, je nach ge­wähltem Layout, möglicher­weise keine Änderung. Aber wenn Sie die beiden unten ange­führten Bilder anklicken, sehen Sie den Größen­unterschied bei der Klick­ver­größerung. Das linke Bild wird in der Light­box deutlich größer darge­stellt, als das rechte Bild.

5 Teammitglieder der Onlineagentur XORTEX bilden einen Stern mit ihren Fäusten, im Hintergrund zwei Laptops
Einstellung: Beim Bild Flexible Größe aktiviert, bei der Klickver­größerung nicht aktiviert
5 Teammitglieder der Onlineagentur XORTEX bilden einen Stern mit ihren Fäusten, im Hintergrund zwei Laptops
Einstellung: Beim Bild und bei der Klickver­größerung Flexible Größe aktiviert

Auswirkung auf die Seiten­ladege­schwindig­keit = Page­speed

Wir haben uns die Auswirkung auf die Seiten­ladege­schwindig­keit bei einem einfachen Beispiel ange­sehen. Dabei wurde nur ein Bild mit der Original­größe von 5252 x 3501 Pixel auf einer Inhalts­seite angelegt. Der Leistungs­wert konnte nur mit Flexible Größe "Content Integration Enlargement (1200x800)" um 1 Punkt ver­bessert werden.

Lighthouse-Analyse mit Flexibler Größe (links) und ohne Bildformat (rechts)
Weitere Informationen zur redaktionellen Pagespeed-Optimierung und Bilder-SEO
finden Sie bei unseren Tipps & Tricks 🤓.

CK-Editor

Stile

In unserem CMS stehen Ihnen verschiedene Stile in den verschiedenen Bereichen zur Verfügung, mit denen Sie Ihre Website gestalten können.

Hier haben wir die wichtigsten Stile für

zusammen­gefasst und zeigen Ihnen, wo Sie die Stile finden und welche Stile Ihnen in welchem Bereich zur Verfügung stehen.

Im CK-Editor stylen Sie im Textmodul einzelne Wörter, Zeilen, Absätze ähnlich wie in einem Word-Dokument. Markieren Sie hier den gewünschten Text und wählen Sie im CK-Editor einen Stil aus. Der markierte Text wird dann in diesem Stil dargestellt.
Stil Beschreibung
Text größer (20% | 50% | 100%) Der markierte Text wird um 20, 50 oder 100% vergrößert.
Text kleiner (-20%) Markierten Text um 20% kleiner ausgeben.
Text fetter Text wird fett dargestellt.
Akzentfarbe aktiv Hier wird der Text in der unter Feature-Manager Konfigurationen Erscheinungsbild Inhalt Akzentfarbe aktiv festgelegten Farbe ausgegeben.
Schriftfarbe weiß, schwarz, Dezent, alternative Schriftfarbe Ändern Sie die Schriftfarbe.
Schriftschatten Weiß, Schwarz, Akzentfarbe, Akzentfarbe aktiv, Dezent, alternative Schriftfarbe Wenn Sie Bilder hinter den Text legen, sind Schriftschatten oft sinnvoll, um den Text über den Bildern besser zu lesen.
Button einfach, farbig, hell, dunkel Für jeden Button können Sie Text- und Rahmen-Farben, Radius bei den Ecken und weitere Einstellungen vornehmen unter Feature-Manager Konfigurationen Erscheinungsbild Button.
Hintergrundfarbe, Hintergrund Akzentfarbe, Dezent Legen Sie hinter den markierten Text eine Farbe.
Farbige HR Hier erscheint unter dem markierten Text eine farbige, zentrierte, kurze Linie.
Akzent Schriftart Gestalten Sie den markierten Text in einer alternativen Schriftart, die Sie unter Feature-Manager Konfigurationen Erscheinungsbild Schriftarten Akzent Schriftart festlegen.
Im CK-Editor finden Sie auch Stile für Spalten­breite und Spalten­umbruch vermeiden. Eine aus­führliche Erklärung dazu finden Sie in einem eigenen Tutorial.

Sie haben Fragen zu den Stilen? Dann melden Sie sich bei uns. Wir helfen Ihnen gerne weiter.

Support

zurück zur Übersicht