Question 1

Wo finde ich den Inhaltseditor?

Accepted Answer

Zum Befüllen und Bearbeiten der einzelnen Seiten Ihrer Website müssen Sie in den Inhaltseditor wechseln. Diesen finden Sie für die zu bearbeitende Seite in der entsprechenden Zeile ganz rechts unter Inhalt Inhaltseditor.  ✕

Inhaltseditor öffnen

Bei der Erweiterung Inhaltsgruppen oder Blog erstellen Sie die Seite ebenfalls mit dem Inhaltseditor unter Inhalt Inhaltseditor 😉.

Question 2

Wie sieht der Inhaltseditor aus (Überblick)?

Accepted Answer

So sieht die Ansicht aus, wenn Sie eine neue Seite erstellt haben und zum ersten Mal in den Inhaltseditor wechseln.

Wählen Sie zuerst ein Layout für die Inhaltszeile aus.
Mit XLarge, Large, Small und XSmall können Sie sich die aktuelle Seite auch in den verschiedenen mobilen Darstellungen ansehen. Klicken Sie auf Editor, gelangen Sie zurück zur Bearbeitung Ihrer Inhaltszeilen.

  ✕

Mobile Darstellungen ansehen

✕

Layout auswählen

Anschließend wählen Sie aus, ob Sie in diesem Inhaltselement einen neuen Text, ein neues Bild oder ein neues Modul anlegen möchten.
Mit dem -Symbol legen Sie weitere Inhaltszeilen an. Hier können Sie für jede einzelne Inhaltszeile das Layout und Text | Bild | Modul neu auswählen und sich so Ihre individuelle Inhaltsseite designen.

Klicken Sie auf den "Speichern"-Button links unten, um die angelegten Inhalte zu sichern.
Speichern Sie die Seite nicht nur wenn Sie fertig sind, sondern immer wieder zwischendurch, damit auch bestimmt keine Inhalte verloren gehen.

Mit dem "Zurück"-Button rechts oben verlassen Sie den Inhaltseditor.

  ✕

Neue Inhaltszeile einfügen

✕

Neuer Text, neues Bild, neues Modul

Question 3

Was bedeuten die einzelnen Symbole im Inhaltseditor?

Accepted Answer

Hier finden Sie eine Übersicht über die Symbole im Inhaltseditor: Seite im Frontend öffnen (Vorschau) Damit öffnen Sie genau diese Inhaltsseite in einem neuen Tab und können sich die Frontenddarstellung als Vorschau ansehen Refresh Aktualisieren der aktuellen Seite. Vorlage auswählen Wählen Sie für die neue Inhaltszeile aus einer der Vorlagen aus. Inhaltselemente auf- / zuklappen Wenn Sie mehr Content in einem Inhaltselement haben und nicht scrollen möchten oder umgekehrt, können Sie hier die Inhaltselemente auf- oder zuklappen. Gelöschte Elemente ein- / ausblenden Hier werden Ihnen die gelöschten Elemente angezeigt, falls Sie zuvor bereits welche gelöscht haben. Gesperrte Einträge ein- / ausblenden Hier werden Ihnen die gesperrten Einträge angezeigt, falls Sie welche gesperrt haben. Gitterlinien Die Linien um die Inhaltselemente können Sie mit diesem Symbol ein- / ausblenden. Zurück Über den Zurück-Button gelangen Sie zurück in den Portalmanager. Veröffentlichen Aktuellen Inhalt veröffentlichen
Der aktuelle Inhalt wird veröffentlicht und auf die sichtbare Seite übernommen. Vorschau Vorschau des Entwurfs
Zeigt den aktuellen Stand des Inhalts aus dem Inhaltseditor in der Vorschau an. Änderungen sind nur in der Vorschau sichtbar und noch nicht veröffentlicht.
Die Vorschauseite kann jederzeit neu geladen werden, um den aktuellen Bearbeitungsstand anzuzeigen. Entwurf speichern Speichert den aktuellen Inhalt als Entwurf
Die Bearbeitung des Inhalts kann jederzeit fortgesetzt und später veröffentlicht werden.
Pro Seite kann nur ein Entwurf gespeichert werden. Zurücksetzen Auf aktuell veröffentlichte Version zurücksetzen
Verwirft den aktuellen Entwurf und setzt den Inhaltseditor auf den zuletzt veröffentlichten Stand zurück. Und hier noch die Symbole in Inhaltszeile, Inhaltsfläche und Inhaltselement: Inhalt bearbeiten Steht Ihnen nur im roten Inhaltselement zur Verfügung. Sie gelangen damit direkt zum Modul REDX Texte und können dort Ihre Texte bearbeiten oder auf ein anderes Modul wechseln. Anzeige bearbeiten Sie können die gelbe Inhaltszeile, die blaue Inhaltsfläche und das rote Inhaltselement jeweils extra bearbeiten. Stile verwalten Über dieses Symbol gelangen Sie in ein neues Fenster, in dem Sie verschiedenste Formatierungsmöglichkeiten in den einzelnen Bereichen festlegen können. Kopieren Mit einem Klick auf "kopieren", können Sie einzelne Inhaltszeilen kopieren und an anderer Stelle wiederverwenden, ohne die Design-Einstellungen neu anpassen zu müssen. Diese Option steht Ihnen im gelben und roten Bereich zur Verfügung. Löschen Das Papierkorb-Symbol bedeutet löschen. Löschen können Sie entweder nur den roten Bereich oder im gelben Bereich die gesamte Inhaltszeile. Gültigkeitsdauer festlegen Mit Hilfe des Kalenders können Sie die Gültigkeitsdauer eines einzelnen Elements, einer Inhaltsfläche oder Inhaltszeile für einen bestimmten Zeitraum festlegen. Ein Beispiel wäre hier der Hinweis auf eine Weihnachtsaktion, die nur in einem bestimmten Zeitraum auf Ihrer Website erscheinen soll. Sperren Über dieses Symbol können Sie Inhaltszeilen oder auch nur den blauen oder roten Bereich auf Ihrer Website verbergen. Einfügen Zum Erstellen einer neuen Inhaltszeile (gelb) oder eines neuen Inhaltselementes (rot) klicken Sie auf das Plussymbol.

Question 4

Wie erstelle ich eine neue Inhaltszeile?

Accepted Answer

Wenn Sie eine neue Inhaltsseite erstellt haben, legen Sie für Ihre erste Inhaltszeile das Layout fest. Klicken Sie dazu auf die Zeile "Bitte Layout wählen", dann öffnet sich die Liste, in der Sie das Layout auswählen. Sie können auf den Seiten Ihrer Website weitere Inhaltszeilen anlegen, indem Sie bei einer bestehenden Inhaltszeile auf das Plus-Symbol "Neue Inhaltszeile einfügen" klicken.   ✕

Neue Inhaltszeile einfügen

✕

Neuer Text, neues Bild, neues Modul

Question 5

Wo erstelle ich das Layout für meine Seite und was muss ich dazu wissen?

Accepted Answer

Zuerst legen Sie eine neue Inhaltszeile an.

Klicken Sie auf den kleinen Pfeil rechts. Es öffnet sich ein Dropdown mit allen Layouts, die Ihnen im CMS zur Verfügung stehen.
Wenn Sie sich mit der Maus über die verschiedenen Layouts bewegen, erscheint bei 3. eine Vorschau. Klicken Sie auf das gewünschte Layout, wird die Inhaltszeile in diesem Layout erstellt.

1 2 3 ✕

Layout öffnen

✕

Layout auswählen

✕

Layout Vorschau

Gut zu wissen: "begrenzt" bei einem Layout bedeutet, dass sich die Inhalte dieser Inhaltszeile am Inhalt vom Header der Seite ausrichten, ansonsten gehen die Inhalte dieser Inhaltszeile bis an den rechten und linken Bildschirmrand. Hier am Beispiel oben das Layout "1 Spalte | 100% | - begrenzt" und darunter das Layout "1 Spalte | 100% |".   ✕

Layout begrenzt: ausgerichtet am Inhalt im Header

✕

Layout nicht begrenzt: ausgerichtet am Bildschirmrand

Sie können das Layout im Nachhinein ändern, falls Ihnen die Darstellung statt in einer Spalte in zwei oder mehreren doch besser gefällt 😉.

Bei unseren Layouts können Sie von ein- bis sechsspaltigen Layouts auswählen. Wenn Sie wenig Text auf Ihrer Website verbauen, empfehlen wir Ihnen das Layout "1 Spalte | 66% | - begrenzt". So sieht es nach etwas mehr Text aus. Ansonsten ist für Texte ein Layout mit 100% begrenzt empfehlenswert. Für Bildmaterial, wie zum Beispiel in einer Slideshow über die ganze Bildschirmbreite, verwenden Sie ein nicht begrenztes Layout.

Question 6

Was sind die gelben, blauen und roten Bereiche im Inhaltseditor?

Accepted Answer

Jede Inhaltszeile ist unterteilt in

und kann jeweils einzeln bearbeitet werden.

Die Symbole in den Bereichen erklären wir Ihnen im Tutorial: Symbole im Inhaltseditor

Inhaltselement (rot) Inhaltsfläche (blau) Inhaltszeile (gelb)

Gut zu wissen...

Mit jeder Inhaltszeile (gelb) werden automatisch eine Inhaltsfläche (blau) und ein Inhaltselement (rot) erstellt.
Eine Inhaltsseite enthält keine (= eine leere Seite) oder mehrere Inhaltszeilen.
Eine Inhaltszeile besteht aus mindestens einer oder, bei mehrspaltigen Layouts, mehreren Inhaltsflächen.
Eine Inhaltsfläche besteht aus mindestens einem oder mehreren Inhaltselementen.

Question 7

Was kann ich in der gelben Inhaltszeile machen?

Accepted Answer

In der gelben Inhaltszeile legen Sie das Layout für diese eine Inhaltszeile fest. Zum Beispiel ob der Text in einer oder mehreren Spalten angezeigt werden soll.

Mit dem Stiftsymbol "Anzeige bearbeiten" gelangen Sie zu einem neuen Fenster, in dem Sie diese Inhaltszeile bearbeiten können.

Inhaltszeile (gelb)

Hier können Sie beispielsweise der Zeile einen Titel geben, um die Zeile unter Inhalt Inhaltszeilen leichter zu finden.
Das Layout können Sie hier zu jedem Zeitpunkt ändern.
Wählen Sie ein Hintergrundbild, dass Sie in dieser Inhaltszeile ausgeben möchten, aus.
Beim Hintergrundbild können Sie "vollflächig" wählen. Dazu sollte das Bild aber in einer Breite von mindestens 1900px zur Verfügung stehen, da Sie sonst massive Qualitätseinbußen erwarten.
Die Ausrichtung können Sie mit neun verschiedenen Positionen festlegen. Ist vollflächig gleichzeitig aktiviert, ist je nach verbauter Bildgröße kein Unterschied erkennbar.
Ihnen stehen verschiedene Animationseffekte zur Verfügung: Fade-in, Fade-out, Fade-in links, Fade-in unten, Fade-in rechts, Parallax, Scale-in.
Mobil verhalten sich Fade-in links und Fade-in rechts wie der Animationseffekt Fade-in unten.
Weitere Infos zu Anzeigen in Auflösung erklären wir Ihnen im eigenen Tutorial.

Gelbe Inhaltszeilen können Sie im Inhaltseditor per Drag&Drop verschieben.

Question 8

Was kann ich in der blauen Inhaltsfläche machen?

Accepted Answer

In der blauen Inhaltsfläche können Sie ganze Fläche verlinken. Mit dem Stiftsymbol "Inhaltsfläche Anzeige bearbeiten" gelangen Sie zu einem neuen Fenster. Inhaltsfläche (blau)

Hintergrundbild, Animationseffekte und die Anzeige in den unterschiedlichen Auflösungen sind hier gleich wie in der gelben Inhaltszeile.
Unter "Link" kann die ganze Fläche verlinkt werden.
- Verlinkungen auf interne Seiten, werden Ihnen im Dropdown angezeigt.
- Zur Verlinkung auf eine externe Seite öffnen Sie das Dropdown und klicken in das Suchfeld. Dort kopieren Sie den externen Link hinein und drücken auf der Tastatur die Enter-Taste.
- Interne Verlinkungen sollten im gleichen Fenster, externe Verlinkungen in einem neuen Fenster geöffnet werden.

Blaue Inhaltszeilen können Sie NICHT löschen, verschieben oder kopieren.

Allgemeine Einstellungen Inhaltsfläche externe Verlinkungen

Question 9

Was kann ich im roten Inhaltselement machen?

Accepted Answer

Im roten Inhaltselement stehen Ihnen "neuer Text", "neues Bild" und "neues Modul" zur Verfügung.

Mit dem Symbol "Inhalt bearbeiten" gelangen Sie direkt zur Bearbeitung des Moduls. Haben Sie vorher "neuer Text" oder "neues Bild" ausgewählt, können Sie das Modul hier anschließend jederzeit ändern.

Mit dem Stiftsymbol "Inhaltselement Anzeige bearbeiten" gelangen Sie im roten Bereich zum Bearbeitungsfenster.

Inhaltselement (rot)

Erstellen Sie ein Hintergrundbild unter dem Text, wie in der gelben Inhaltszeile und der blauen Inhaltsfläche. Bei Bildverhalten können Sie beim roten Inhaltselement aber
- Original, Vollflächig oder
- Höhe von Hintergrund annehmen (mit dieser Einstellung wird das Element in der Höhe des Hintergrundbildes ausgegeben)
auswählen. Damit ergeben sich noch mehr Darstellungsmöglichkeiten.

Sie können mehrere rote Inhaltselemente in einer blauen Inhaltsfläche anlegen.

Question 10

Wo bearbeite ich die responsive Darstellung im Editor?

Accepted Answer

Bei Inhaltszeile, Inhaltsfläche und Inhaltselement können Sie unter "Anzeigen in Auflösung" für jeden dieser Bereiche auswählen, ob dieser bei allen Darstellungen angezeigt werden soll oder nicht.

Am Handy möchten Sie vielleicht ein großes Bild, dass am Desktop sehr gut aussieht, nicht anzeigen, weil es so klein nicht mehr erkennbar ist. Dann deaktivieren Sie einfach das Häkchen bei XSmall (Mobile Portrait) bei diesem Bild.

Deaktivieren Sie das Häkchen

bei der Inhaltszeile werden alle Inhaltsflächen und Inhaltselemente ausgeblendet.
bei der Inhaltsfläche gilt das für diese Inhaltsfläche und die darin angelegten Inhaltselementen.
beim Inhaltselement, dann gilt das nur für dieses eine Inhaltselement.

Anzeigen in Auflösung bei Inhaltselement

Weitere Infos, wie Sie die responsive Darstellung bei Stilen verwenden, erklären wir Ihnen im Tutorial und
im Tipps & Tricks-Beitrag wie Sie die Darstellungen im Browser simulieren.

Question 11

Wo stelle ich die Gültigkeitsdauer bei Inhaltszeile, Inhaltsfläche und Inhaltselement ein?

Accepted Answer

Mit dem Symbol Gültigkeitsdauer festlegen legen Sie den Zeitraum fest, in dem eine Inhaltszeile, -fläche oder -element im Frontend angezeigt wird.

Legen Sie den Zeitraum fest

bei der Inhaltszeile werden alle darin angelegten Inhaltsflächen und Inhaltselemente nur in diesem Zeitraum angezeigt.
bei der Inhaltsfläche, dann gilt der Zeitraum für die Inhaltsfläche und alle darin angelegten Inhaltselemente.
beim Inhaltselement gilt der Zeitraum nur für dieses eine Inhaltselement.

Wie Sie den genauen Zeitbereich einstellen, erklären wir Ihnen in einem eigenen Tutorial.

   ✕

Inhaltszeile Gültigkeitsdauer festlegen

✕

Inhaltsfläche Gültigkeitsdauer festlegen

✕

Inhaltselement Gültigkeitsdauer festlegen

Question 12

Wie sperre ich eine Inhaltszeile, Inhaltsfläche oder Inhaltselement?

Accepted Answer

Bereiche, in denen noch etwas fehlt, die noch überarbeitet werden müssen oder die Sie einfach noch nicht löschen möchten, weil sie vielleicht später nochmal benötigt werden, können Sie ganz einfach ausblenden. Diese werden dann im Frontend nicht angezeigt, bleiben aber im Backend vorhanden.

Klicken Sie auf das Symbol sperren, dann wird das Symbol durchgestrichen . Möchten Sie den Bereich wieder freigeben, dann klicken Sie nochmal auf das Symbol. Vergessen Sie nicht Ihre Änderungen zu speichern 😉.

Sperren Sie eine Inhaltszeile, dann sind alle Inhaltsflächen und Inhaltselemente darin gesperrt.
Beim Sperren einer Inhaltsfläche sind diese Fläche und die Inhaltselemente darin gesperrt.
Und Sperren Sie ein Inhaltselement, dann ist nur dieses eine Element gesperrt.

   ✕

Inhaltszeile sperren

✕

Inhaltsfläche sperren

✕

Inhaltselement sperren

Question 13

Was bedeutet im Inhaltselement "neuer Text"?

Accepted Answer

Wenn Sie einen neuen Text im Inhaltselement anlegen möchten, klicken Sie auf "neuer Text".   ✕

Modul neuer Text

✕

Inhalt bearbeiten

Über das Symbol Neuer Eintrag können Sie den neuen Text als Modul auswählen und den Text in diesem neuen Fenster bearbeiten.

Zum Bearbeiten und Formatieren Ihres Textes stehen Ihnen viele aus dem Textverarbeitungsprogramm Word bekannte Funktionen zur Verfügung. Die Bedeutung der Symbole erklären wir Ihnen im eigenen Tutorial.

Sollten Sie sich doch für ein anderes Modul oder ein Bild in diesem Inhaltselement entscheiden, können Sie die Auswahl ganz oben unter "Modul" nachträglich ändern.

Optional klicken Sie auf "neuer Text" und klicken mit der Maus direkt in das neue Textfeld, dann können Sie hier ebenfalls die Texte im CK-Editor warten.

Question 14

Wie lege ich Bilder im Inhaltseditor an?

Accepted Answer

Am besten ist es, ein Bild auf Ihrer Website in einer neuen Inhaltszeile als "neues Bild" einzuarbeiten. Sie haben damit gleich den Vorteil, dass sich das Bild somit in allen mobilen Darstellungen automatisch anpasst und Sie sich darum nicht weiter kümmern müssen.

Für das Headerbild bei z.B. einem Desktop-Bildschirm der Größe 1900 x 1000 Pixel empfehlen wir Ihnen eine Größe von 1900 x 600 Pixel.

Schritt 1 Legen Sie eine neue Inhaltszeile an und klicken Sie auf "neues Bild".  ✕

Modul neues Bild

Schritt 2

Mit Klick bei Bild auswählen auf das Symbol gelangen Sie in die Mediabox.

Schritt 3

Nachdem Sie in der Mediabox das gewünschte Bild gesucht und angeklickt haben, legen Sie unter Ausgabe Ausgabeoptionen die Breite und Höhe Ihres Bildes fest, in der dieses im Frontend Ihrer Website erscheinen soll. Für Headerbilder empfehlen wir Ihnen eine Breite von 1900px (Pixel) und eine Höhe von 600px (Pixel). Diese Größe hat sich für viele Bildschirmformate in der Desktopvariante bewährt.

Unter "Format" können Sie zwischen JPG, PNG, GIF, EPS, TIF oder BMP wählen. Die gängigsten Formate sind JPG für farbenfrohe Bilder und PNG für Grafiken.
Verwenden Sie ein SVG, für zum Beispiel Logos, dann ist diese Format bereits korrekt vorausgewählt und kann nicht verändert werden.

  ✕

Mediabox Ausgabe

✕

Mediabox Original Dateidaten

Schritt 4

Unter Ausschnitt klicken Sie auf Neuer Ausschnitt und ziehen über Ihrem Bild einen Ausschnitt in der unter "Ausgabe" festgelegten Größe auf. Anschließend können Sie diesen Ausschnitt an die gewünschte Stelle des Bildes ziehen, der dann im Frontend ausgegeben werden soll.

Anschließend klicken Sie auf Bild berechnen.

  ✕

Mediabox Neuer Ausschnitt

✕

Mediabox Ausschnitt auswählen

Schritt 5

Wenn Sie mit dem gewünschten Bildausschnitt in der gewünschten Größe fertig sind, klicken Sie bei Als Bild auf In Website, damit das Bild nun in der Website angelegt wird.

Mit In Meine Sammlung können Sie das Bild in gewünschter Größe mit diesem Ausschnitt an verschiedenen Stellen wiederverwenden, ohne Größe und Ausschnitt neu festlegen zu müssen.

Mit Klick auf Bild bearbeiten gelangen Sie zurück und können gegebenenfalls noch Änderungen vornehmen.

 ✕

Als Bild In Website

Weitere Informationen zur Mediabox und was Sie dort alles machen können, finden Sie im Tutorial

Mediabox

Wie und wo Sie eine Mediengalerie oder Slideshow anlegen, erklären wir Ihnen im Tutorial unter

Mediengalerie & Slideshow

Question 15

Warum Sie die Einstellung "Bildformat auswählen" im Modul Bilder verwenden sollen?

Accepted Answer

Eine weitere Einstellungsmöglichkeit beim Anlegen von Bildern im Inhaltseditor erklären wir Ihnen in diesem Tutorial genauer Bildformat auswählen: Flexible Größe "Content Integration Enlargement (1200x800)".

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

   ✕

Bildformat direkt beim Bild auswählen

✕

Bildformat erscheint erst, nachdem Klickvergrößerung aktiviert wurde

✕

Klickvergrößerung aktivieren

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 Pixelbreite und maximal 800 Pixelhöhe ausgegeben. Je nach Bildgröße wird Höhe oder Breite für den Maximalwert herangezogen und der andere Wert im Verhältnis dazu angepasst, damit das Bild nicht verzerrt wird.
Die Einstellung funktioniert nur bei Bildern, die größer als 1200x800 Pixel sind. Bei kleineren Bildern hat die Einstellung keine Auswirkung.

Sehen wir uns ein Praxisbeispiel an

Unser Beispielbild hat eine Originalgröße von 5472 x 3648 Pixel wir empfehlen Ihnen eine maximale Pixelbreite von 2000 Pixel, damit sparen Sie auch Speicherplatz in Ihrer Mediabox! Direkt bei beiden Bildern ist Flexible Größe "Content Integration Enlargement (1200x800)" ausgewählt, bei der Klickvergrößerung nur beim rechten Bild. In diesem Fall werden beide Bilder auf der Website mit maximal 1200x800 Pixel angezeigt. Sie sehen hier, je nach gewähltem Layout, möglicherweise keine Änderung. Aber wenn Sie die beiden unten angeführten Bilder anklicken, sehen Sie den Größenunterschied bei der Klickvergrößerung. Das linke Bild wird in der Lightbox deutlich größer dargestellt, als das rechte Bild.

Einstellung: Beim Bild Flexible Größe aktiviert, bei der Klickvergrößerung nicht aktiviert Einstellung: Beim Bild und bei der Klickvergrößerung Flexible Größe aktiviert Relevant sind diese Einstellungen, wenn Sie große Bilddateien verwenden und dadurch die Seitenladezeiten (=Pagespeed) schlecht sind. Aktivieren Sie die in diesem Tutorial beschriebenen Einstellungen, wirkt sich das positiv auf ihren Pagespeed aus. Lighthouse-Analyse mit Flexibler Größe Lighthouse-Analyse ohne Bildformat Lighthouse-Analyse mit Flexibler Größe Lighthouse-Analyse ohne Bildformat Weitere Informationen zur redaktionellen Pagespeed-Optimierung und Bilder-SEO
finden Sie bei unseren Tipps & Tricks 🤓.

Question 16

Was bedeutet im Inhaltselement "neues Modul"?

Accepted Answer

In unserem CMS stehen Ihnen viele Module zur Verfügung, die Sie im Inhaltselement als "neues Modul" einbinden können.  ✕

Neues Modul

Anschließend öffnet sich ein neues Fenster, wo Sie Ihre lizenzierten Module auswählen können. Auch "neuer Text" und "neues Bild" sind eigene Module.

Bei einigen Modulen sind noch weitere Anpassungen / Einstellungen notwendig. Einige davon erklären wir Ihnen in den Tutorials des jeweiligen Moduls, andere legt Ihr Projektmanager für Sie an.

Question 17

Wie lege ich bei meiner REDX-Website Videos an?

Accepted Answer

Auf den Inhaltsseiten können Sie Videos als neues Modul "Mediabox Video" einbinden.
Klicken Sie auf und wählen ein Video aus.
Unter den Einstellungsmöglichkeiten finden Sie die Erklärungen zur Funktionalität.
Mit Klick auf Übernehmen speichern Sie Ihre Einstellungen.

Anschließend müssen Sie noch die Inhaltsseite speichern, damit die Änderungen im Frontend ausgegeben werden.

Wie Sie Videos in der Mediabox speichern, erklären wir Ihnen in einem eigenen Tutorial.

Videos in Mediabox laden

Modul Mediabox Video

Unsere Empfehlung: Verwenden Sie die Kombination
"Autoplay" + "Stumm" + "Steuerelemente des Video-Player anzeigen"!

Aktivieren Sie nur Autoplay, startet das Video mit Ton, welcher sehr laut sein kann. Dieses Verhalten kann unter Umständen stören, wenn Ihre Websitebesucher z.B. gerade in einem öffentlichen Verkehrsmittel unterwegs sind. Haben Sie "Steuerelemente des Video-Player anzeigen" deaktiviert, lässt sich der Ton beim Video nicht leiser drehen oder stumm schalten!

Dieser Dienst kann aufgrund der Datenschutz-Einstellungen nicht geladen werden.

Bitte der Kategorie Funktionelle Cookies zustimmen.

Einstellungen anpassen Hier als Beispiel ein Video mit den Einstellungen Autoplay, Stumm und Steuerelemente des Video-Players anzeigen.

Question 18

Wie lege ich Videos als Hintergrund an?

Accepted Answer

Beim Bearbeiten Ihrer Inhaltsseite lassen sich Hintergrundvideos auf der Inhaltszeile, Inhaltsfläche und beim Inhaltselement anlegen. Diese Videos starten automatisch, sobald das Video im sichtbaren Bereich Ihres Bildschirms erscheint, allerdings ohne Ton oder Steuerelemente. Stile können Sie wie gewohnt einsetzen.

Öffnen Sie mit dem -Symbol das Bearbeitungsfenster.
Klicken Sie unter Hintergrund auf das Fragezeichen , um die Mediabox zu öffnen.
Dort wählen Sie das gewünschte Video aus. Wie Sie Videos in die Mediabox laden, erklären wir Ihnen in einem eigenen Tutorial.
Anschließend aktivieren Sie im Bearbeitungsfenster noch die Checkbox bei Vollflächig und wählen eine Ausrichtung für das Video aus.
Klicken Sie auf Übernehmen, um die Einstellungen zu speichern und anschließend speichern Sie noch die Inhaltsseite, damit Ihre Änderungen online sichtbar werden.

Inhaltszeile: Mediabox öffnen und Video auswählen Inhaltszeile: Vollflächig und Ausrichtung auswählen

Hier ein Beispiel mit einem Hintergrundvideo auf der Inhaltszeile.

Layout: 1 Spalte | 100% | - begrenzt

Stile beim Inhaltselement:
Textausrichtung zentriert
Innerer Abstand 100 px oben und unten

Auf der Inhaltsfläche lassen sich Videos als Hintergrund anlegen, nur dass Sie das Bearbeitungsfenster in der blauen Inhaltsfläche öffnen. Inhaltsfläche: Mediabox öffnen und Video auswählen Inhaltsfläche: Vollflächig und Ausrichtung auswählen

Hier das gleiche Hintergrundvideo auf der Inhaltsfäche mit gleichem Layout und gleichen Stilen.

Beim Inhaltselment wurde hier zusätzlich der Stil "Hintergrund aufhellen"
und bei der Inhaltsfläche ein innerer Abstand mit 40px angelegt,
um Ihnen eine weitere Gestaltungsmöglichkeit zu zeigen.

Beim roten Inhaltselement ist die Vorgehensweise ebenfalls gleich wie bei Inhaltszeile und Inhaltsfläche.
Ausnahme: Beim Bildverhalten "Höhe vom Hintergrund annehmen" wird das Video in der Originalhöhe im gewählten Layout ausgegeben. Inhaltselement: Mediabox öffnen und Video auswählen Inhaltselement: Bildverhalten Höhe von Hintergrund annehmen Beim Inhaltselement kann ebenfalls ein Hintergrundvideo angelegt werden.
Mit dem Bildverhalten "Höhe von Hintergrund annehmen" wird das Video in Originalhöhe ausgegeben.

Question 19

Wie kann ich ein PDF-Dokument als Flächenverlinkung anlegen?

Accepted Answer

Um ein PDF-Dokument als Fläche zu verlinken, gibt es zwei verschiedene Möglichkeiten. In beiden Fällen gilt, zuerst das gewünschte PDF-Dokument in die Mediabox laden. 1. Variante Zuerst legen Sie einen Download im Text-Modul an. Speichern Sie die Inhaltsseite. Wechseln Sie ins Frontend und aktualisieren Sie die Website. Bewegen Sie die Maus über den Link und öffnen mit der rechten Maustaste das Dropdown. Je nachdem in welchem Browser Sie sich befinden, klicken Sie in dem Dropdown auf "Adresse des Links kopieren" im Google Chrome oder auf "Link-Adresse kopieren" im Mozilla Firefox.

Öffnen Sie die Einstellungen mit dem Symbol Anzeige bearbeiten bei der blauen Inhaltsfläche, in der Sie die Flächenverlinkung anlegen möchten. Kopieren Sie unter "Link" den Link aus dem Browser hinein:
- "https://............./redx/tools/mb_download.php/ct.aH4lww/mid.y4b557e600e489130/lorem-ipsum.pdf"
Ändern Sie in diesem Link "download" auf "inline":
- "https://............/redx/tools/mb_inline.php/ct.aH4lww/mid.y4b557e600e489130/lorem-ipsum.pdf"
Sie können selbst entscheiden, ob dieses PDF in einem neuen Fenster oder im gleichen Fenster geöffnet werden soll. Wir empfehlen Ihnen Ihr PDF in einem neuen Fenster zu öffnen.
Speichern Ihre Änderung und vergessen Sie nicht, die Inhaltsseite auch noch zu speichern 😉.

 ✕

Kopierten Link einfügen

Verlinkung bei der blauen Inhaltsfläche

Bewegen Sie im Frontend die Maus über die Fläche, verändert sich das Anzeigesymbol der Maus von einem Pfeil zu einer Hand das bedeutet, die ganze Fläche ist klickbar.

Sie können das PDF-Symbol stehen lassen oder löschen, wie es Ihnen am besten gefällt:

Verlinkung mit PDF Symbol

Verlinkung ohne PDF Symbol

2. Variante Übernehmen Sie das PDF-Dokument in "Meine Sammlung" und senden sich diesen Download-Link per Mail zu. in der Mediabox Download als Link versenden Sie erhalten den Link per Mail Wechseln Sie zurück ins Backend. Hier legen Sie in der Inhaltsfläche den Link aus dem E-Mail genauso an, wie in Variante 1 beschrieben.

Was bedeuten "download" und "inline"?

Bei "download" wird eine Datei auf Ihren Rechner heruntergeladen.
Bei "inline" öffnet sich diese Datei im Browser entweder im gleichen oder in einem neuen Fenster, je nachdem was Sie angegeben haben.

Question 20

Was ist der CK-Editor?

Accepted Answer

Der CK-Editor ist ein fertiges Produkt, dass in unserem CMS integriert wurde, ein sogenannter WYSIWYG Editor. Es werden alle Einstellungen angezeigt, die Ihnen in dem Texteditor zur Verfügung stehen, ähnlich wie die Formatierungen in einem Word-Dokument.

Im Inhaltselement wählen Sie dazu "Neuer Text" aus und klicken mit der Maus direkt in das Textfeld, dann öffnet sich der Texteditor.

CK-Editor

Question 21

Was bedeuten die einzelnen Symbole im CK-Editor?

Accepted Answer

Hier finden Sie eine Übersicht über die Symbole im CK-Editor: Formatierungsstile Hier können verschiedene Formatierungsstile wie spezielle Schriftgrößen, Schriftfarben und -größen, Buttons u.v.m. eingefügt werden. Ausschneiden Der markierte Text wird ausgeschnitten und kann an anderer Stelle wiederverwendet werden. Kopieren Der markierte Text wird kopiert. Einfügen Ein zuvor kopierter oder ausgeschnittener Text kann an neuer Stelle eingefügt werden. Klartext einfügen Einfügen eines Textes ohne Formatierungen. Rückgängig Mit diesem Symbol gehen Sie einen Schritt zurück, durch mehrfaches Drücken → mehrere Schritte zurück. Wiederherstellen Wenn etwas gelöscht oder verändert wurde, kann das mit diesem Symbol wiederhergestellt werden. Alles auswählen Mit diesem Symbol wird alles in diesem Frame markiert. Formatierung entfernen Beim markierten Text wird die Formatierung entfernt. Link einfügen / editieren Der markierte Text kann verlinkt oder eine Verlinkung bearbeitet werden. Link entfernen Hier kann der Link wieder entfernt werden. Anker Mittels Anker können Links an bestimmte Stellen auf der gleichen oder einer anderen Seite "geschickt" werden. Horizontale Linie einfügen Einfügen einer horizontalen Linie als Trennelement. Sonderzeichen einfügen Einfügen von Sonderzeichen. Einzug verringern Text um eine Einrückung verringern. Einzug erhöhen Text um eine Einrückung erhöhen. Absatzformat Hier stehen Absatzformate zur Verfügung wie verschiedene Überschriften oder normale Schrift – Standard Normal. Fett Markierter Text wird "fett" angezeigt. Kursiv Markierter Text wird „schräg“ angezeigt. Unterstrichen Markierter Text wird "unterstrichen" angezeigt. Durchgestrichen Markierter Text wird "durchgestrichen" angezeigt. Tiefgestellt Markierter Text wird "tiefgestellt". Hochgestellt Markierter Text wird "hochgestellt". Linksbündig Text wird linksbündig geschrieben oder markierter Text im Nachhinein linksbündig dargestellt. Zentriert Text wird zentriert geschrieben oder markierter Text im Nachhinein zentriert dargestellt. Rechtsbündig Text wird rechtsbündig geschrieben oder markierter Text im Nachhinein rechtsbündig dargestellt. Blocksatz Text wird als Blocksatz geschrieben oder markierter Text im Nachhinein als Blocksatz dargestellt. Nummerierte Liste einfügen / entfernen Aufzählungszeichen mit Nummerierung hinzufügen oder entfernen. Liste Einfügen von Aufzählungszeichen. Rechtschreibprüfung Prüft die Rechtschreibung des Textes. Wörter, die ignoriert werden sollen, können hier hinterlegt werden. Blöcke anzeigen Anzeige, wo Absätze oder Leerzeilen gemacht wurden. Div Container erzeugen Text mehrspaltig ausgeben, hier erscheinen weitere Auswahlmöglichkeiten. Mediabox Über dieses Symbol gelangen Sie direkt in die Mediabox, in der Sie alle Dateien finden, die auf der Website verbaut werden. Externer Content Mit diesem Symbol können Sie externe Inhalte wie z.B. iFrames in die Website einbinden. Ein Beispiel für einen mittels iFrame eingebundenen Inhalt ist z.B. ein YouTube-Video. Bedingter Zeilenumbruch mit Trennstrich Bei langen Wörtern statt einem Bindestrich verwenden. Online bricht das Wort dann automatisch an der Stelle um, wo der Umbruch eingesetzt wurde. Geschütztes Leerzeichen Mit diesem Symbol kann ein zusätzliches Leerzeichen an einer bestimmten Stelle im Text gesetzt werden. Nur diese geschützten Leerzeichen werden mit dem Symbol markiert, normale Leerzeichen zwischen Wörtern nicht. Online wird das Symbol nicht angezeigt. Inhalt wiederherstellen Sollten Sie vergessen einen Text zu speichern oder sich Ihr Browserfenster aufhängen, dann können Sie Inhalte der letzten 10 Tage wiederherstellen. Vorlagen Hier stehen drei verschiedene Tabellen als Vorlagen zur Verfügung. Insert Font Awesome Hier gelangen Sie zu verschiedensten Icons, die Sie im Text verwenden können. Platzhalter einfügen Das Icon wird nur angezeigt, wenn in Ihrem CMS die optionale Erweiterung "Platzhalter" lizenziert ist.
Bei Newsletter-Artikeln stehen Ihnen einige Platzhalter immer zur Verfügung. Die Verwendung erklären wir Ihnen im Newsletter-Tutorial für Platzhalter.

Question 22

Wie lege ich ein PDF-Dokument im Text-Modul an?

Accepted Answer

Wenn Sie zu einem Text ein PDF-Dokument zum Downloaden hinzufügen möchten, stellen Sie sich an die Stelle im Text und klicken Sie im CK-Editor auf das Mediabox-Symbol.  ✕

Mediabox öffnen

Suchen Sie sich anschließend das gewünschte Dokument in der Mediabox und klicken Sie auf "Als Download übernehmen".

Anschließend erscheinen beim Text ein PDF-Symbol und der Dateiname. Der Dateiname kann geändert werden. Positionieren Sie sich dazu im Text gleich nach dem PDF-Symbol, fügen Sie hier den neuen Text ein und löschen Sie erst anschließend den Text des Dateinamens. Die Dateiendung .pdf können Sie im Text ebenfalls löschen.

ACHTUNG: Wenn Sie den Dateinamen zuerst löschen und erst dann den neuen Text einfügen, geht die Verlinkung verloren. Daher zuerst den neuen Text einfügen und erst anschließend den Dateinamen löschen!

Standardmäßig wird, nachdem Ihre Website-Besucher im Frontend auf den Link geklickt haben, das Dokument heruntergeladen. Ersichtlich hier im Bild an der URL /redx/tools/mb_download.php/ct.aH4lww/mid.y4b557e600e489130/lorem-ipsum.pdf Standard: Download herunterladen

Wenn Sie möchten, dass sich das Dokument im Browser öffnet und nicht heruntergeladen wird, dann

stellen Sie sich auf den Link und öffnen mit Klick auf die rechte Maustaste das Dropdownmenü.
Hier wählen Sie "Link bearbeiten" aus.
Anschließend ändern Sie im neuen Fenster
unter "URL" den Link von /redx/tools/mb_download.php/ct.aH4lww/mid.y4b557e600e489130/lorem-ipsum.pdf
auf /redx/tools/mb_inline.php/ct.aH4lww/mid.y4b557e600e489130/lorem-ipsum.pdf
Speichern Sie die Änderungen der URL und anschließend auch noch die Inhaltsseite.

Download im Browser öffnen

Question 23

Wie kann ich Inhalte, Telefonnummern und E-Mail-Adressen verlinken?

Accepted Answer

Telefonnummern und E-Mailadressen sollten immer verlinkt werden.  ✕

Link einfügen / editieren

Markieren und kopieren Sie die gesamte Telefonnummer.
Klicken Sie auf das "Link"-Symbol.
Wählen als "Link-Typ" "URL" aus und bei "Protokoll" "".
Anschließend kopieren Sie bei "URL" die Telefonnummer hinein und schreiben davor "tel:" in das Feld.
Leerzeichen und Sonderzeichen müssen hier bei der Telefonnummer gelöscht werden und verwenden Sie die Schreibweise "+43..." und nicht "0043...".
Vergessen Sie nicht "OK" anzuklicken, um zu speichern.

Fast die gleiche Vorgehensweise gilt beim Verlinken einer E-Mailadresse.

Markieren und kopieren Sie die E-Mailadresse.
Klicken Sie auf das "Link"-Symbol.
Wählen Sie als "Link-Typ" "E-Mail" aus und
fügen Sie unter "E-Mail-Adresse" die gewünschte E-Mail-Adresse ein.
Speichern mit "OK" nicht vergessen.

Wenn die verlinkte E-Mailadresse im Frontend angeklickt wird, öffnet sich eine neue E-Mail z.B. in Outlook.

Links, die zu externen Seiten weiterleiten, sollten immer in einem neuen Fenster geöffnet werden.

Markieren Sie die URL und
klicken Sie auf das "Link"-Symbol.
Wählen Sie als "Link-Typ" "URL" aus.
Anschließend fügen Sie bei "URL" die zuvor kopierte URL hinein, das Protokoll wird hier normalerweise automatisch erkannt.
Wechseln Sie dann auf das Registerblatt "Zielseite" und wählen "Neues Fenster (_blank)" aus, dann wird bei einem Klick auf diese externe URL ein neues Fenster geöffnet.
Speichern mit "OK" nicht vergessen.

Interne Verlinkungen auf Ihrer eigenen Website können Sie im gleichen Fenster öffnen damit ist die Standardeinstellung unter "Zielseite" gemeint.

Weitere Tipps & Tricks zu internen und externen Verlinkungen im Beitrag Verlinkungen sinnvoll einsetzen

Question 24

Wie verwende ich die Ankernavigation im Inhaltseditor?

Accepted Answer

Ein Anker ist eine sogenannte Sprungmarke. Per Klick auf diesen Anker im Frontend, springen Ihre Leser an die verankerte Stelle auf dieser Inhaltsseite.

Anker können nur in einem Text-Modul angelegt werden! Wenn Sie also einen Anker bei einem Bild, einer Slideshow oder anderen Modulen anlegen möchten, dann legen Sie dort, wo Ihre Leser hinspringen sollen, einfach ein Text-Modul an, in dem Sie nur diesen Anker anlegen. Wir haben unten ein Beispiel für Sie angeführt.

Legen Sie dazu ein Modul Text in der Inhaltszeile an. Klicken Sie sich in das Textfeld und anschließend im CK-Editor auf das Symbol "Anker".

 ✕

Anker anlegen

Geben Sie dem Anker einen Namen. Verwenden Sie dabei unbedingt

nur Kleinbuchstaben,
zur Worttrennung Bindestriche und
keine Umlaute, Sonderzeichen o.ä.

Beachten Sie dabei, dass der Ankername am Ende Ihrer URL mit einem Hashtag # hinzugefügt wird. Daher sollten Sie unbedingt die Schreibweise beachten.

Klicken Sie auf OK, um den Ankernamen zu speichern. Anschließend erscheint an dieser Stelle in Ihrem Textfeld im Backend das Symbol . Im Frontend wird dieses Symbol nicht angezeigt.

Ankername im Backend Ankername in URL

Um Anker zu verwenden, können Sie entweder direkt im Fließtext einen Text markieren, zu dem Leser per Klick dann hinspringen sollen, oder Sie erstellen eine Art Inhaltsverzeichnis, in dem Sie zu den Ankern verlinken.

Im Textfeld markieren Sie den Text, der verlinkt werden soll und klicken auf das Symbol "Link einfügen / editieren" im CK-Editor.

 ✕

Link einfügen / editieren

Text im Backend markieren

Hier wählen Sie unter Link-Typ "Anker in dieser Seite" aus.
Anschließend erscheinen unter "Anker auswählen" die beiden Felder "Nach Ankername" und "Nach Elementkennung". Hier wählen Sie bei beiden Feldern unbedingt den gleichen Anker aus!
Zum Fertigstellen des Ankers klicken Sie noch auf OK. Dann wird im Textfeld der markierte Text und der Text im Frontend wie eine Verlinkung dargestellt.

Link-Typ auswählen Anker auswählen (unbedingt beide!)

Und hier ein Beispiel, wie Sie die Ankernavigation als Inhaltsverzeichnis verwenden können:

Anker 1
Anker 2
Anker 3

Hier der Inhalt zu Anker 1:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Hier der Inhalt zu Anker 2:
Sie können zu jeder Art von Inhalt springen: Bilder, Videos, Module wie Mediengalerien oder Slideshows.

Nur der Anker selbst muss - wie oben beschrieben - in einem eigenen Textfeld angelegt werden.

Hier der Inhalt zu Anker 3:
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Question 25

Wie kann ich Inhalte im CK-Editor wiederherstellen?

Accepted Answer

Texte, die Sie im CK-Editor geschrieben haben, werden regelmäßig verschlüsselt gesichert und lassen sich direkt im CK-Editor wiederherstellen. Falls Sie Probleme beim Speichern von längeren Texten haben oder der Browser abstürzt, können Sie Ihre zuvor erstellten Texte wiederherstellen. Nach 10 Tagen werden diese Daten automatisch gelöscht.

Klicken Sie dazu auf das Symbol "Inhalt wiederherstellen" im CK-Editor.

 ✕

Inhalt wiederherstellen

Anschließend öffnet sich ein neues Fenster, in dem Sie den Inhalt auswählen, den Sie wieder herstellen möchten. Klicken Sie dazu einfach auf den Pfeil rechts bei diesem Inhalt. Sie gelangen dann wieder zurück in den Texteditor mit dem zuvor ausgewählten Text und können weiterschreiben.  ✕

In den Editor übernehmen

Question 26

Wie verwende ich den bedingten Zeilenumbruch mit Trennzeichen?

Accepted Answer

Haben Sie beim Editieren Ihrer Texte manchmal das Problem, dass Wörter in mobilen Auflösungen zu lange sind und nicht umbrechen? Oder bei begrenztem Platzangebot Worte über den Rand einer Fläche hinaus gehen?

Sie können sich das wie einen optionalen Bindestrich vorstellen, welcher zu lange Worte automatisch abtrennt. Das System erkennt automatisch, ob sich das Wort in der entsprechenden Zeile noch zur Gänze ausgeht oder umbrechen soll. Technisch gesprochen wird mit dieser Funktion ein spezielles Zeichen, nämlich das "soft hyphen" (Abkürzung: shy), gesetzt.

Sie finden den "bedingten Zeilenumbruch mit Trennzeichen" im CK-Editor. Sie können ihn mit dem Symbol (-) gleich während des Schreibens Ihrer Texte an der gewünschten Stelle einfügen.

 ✕

Bedingter Umbruch mit Trennstrich ()

Der bedingte Trennstich wird an jene Stelle eines Wortes gesetzt, wo ein Zeilenumbruch erlaubt ist. Wird das Wort umgebrochen, erscheint der Trennstrich. Ansonsten bleibt er im Webbrowser unsichtbar. Mit dem Einsatz des bedingten Trennstrichs leisten Sie einen weiteren Beitrag zur Benutzerfreundlichkeit Ihrer Website. Sie als RedakteurIn haben es selbst in der Hand, wo Sie dieses Trennzeichen setzen.

Vor allem für mobile Ansichten auf Smartphones, ist der bedingte Trennstrich von Bedeutung. Zusätzlich natürlich auch in begrenzten Anzeigebereichen oder Containern, die weniger Platz für Text bieten.
Verwenden Sie das Trennzeichen bei

Überschriften,
vergrößerten Texten (zum Beispiel in Slideshows) und
längeren, zusammengesetzten Wörtern.

Im Produktkatalog können Sie beim Produkttitel ebenfalls einen bedingten Trennstrich setzen. Da Ihnen dort kein CK-Editor zur Verfügung steht, schreiben Sie den html-Tag "" direkt an die gewünschte Stelle im Wort. Das Verhalten ist genau gleich, wie bei der Verwendung des Symbols im CK-Editor.

Beispiel: Kugelschreiber

Bei Übersetzungen wird der html-Tag nicht mitübersetzt. Bei Wörtern in anderen Sprachen muss der bedingte Trennstrich manuell gesetzt werden.

Question 27

Wie verwende ich Icons im Inhaltseditor?

Accepted Answer

Direkt in Texten können Sie Icons im Inhaltseditor einbauen. Sehen wir uns ein Beispiel an: Zu Weihnachten liegen bei den meisten Familien  unter dem Weihnachtsbaum  Im Backend wird für dieses Beispiel der gesamte Text, inklusive der Module "Icon mit Titel", in einer Inhaltsfläche angelegt. Da die Icons direkt im Textfluss integriert werden sollen, muss bei allen Inhaltselementen in dieser Inhaltszeile der Stil "Einzeilig" angelegt werden. Legen Sie im Inhalts-Editor ein neues Modul "Icon mit Titel" an.

Wählen Sie im Dropdown ein Icon aus.
Optional können Sie beim Icon auch einen Titel ausgeben.
Bei der Titel Position können Sie rechts oder links neben dem Icon oder nicht anzeigen auswählen.
Mit Klick auf Übernehmen speichern Sie dieses Icon.

Für jedes Icon, dass Sie im Text verwenden, müssen Sie ein neues Modul "Icon mit Titel" anlegen. Die allgemeinen Icon-Konfigurationen erklären wir Ihnen in einem eigenen Tutorial.

Question 28

Wozu gibt es verschiedene Stile im Inhaltseditor?

Accepted Answer

Um bei der Gestaltung Ihrer Website möglichst flexibel zu bleiben, gibt es in unserem Content Management System in den Bereichen Inhaltszeile, Inhaltsfläche, Inhaltselement und im CK-Editor verschiedene Stile. In jedem dieser Bereiche wirkt sich ein Stil etwas anders aus.

Zwei besondere Stile sind

Innerer Abstand und
Äußerer Abstand.

Wir haben die wichtigsten Stile, die Ihnen im Inhaltseditor zur Verfügung stehen, zusammengefasst und kurz beschrieben

Stile im Inhaltseditor

Question 29

Mit welchen Stilen kann ich meine Website gestalten und wie verhalten sich diese Stile?

Accepted Answer

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

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

Stile CK-Editor Stile Inhaltselement Stile Inhaltsfläche Stile Inhaltszeile Stil Innerer Abstand Stil Äußerer Abstand 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 Darstellung wie Überschrift 1 - 4 Nur der markierte Text wird im Styling des gewählten Überschriften-Stils ausgegeben, aber nicht mit einem Überschriften-tag. 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 Customizing 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 oder jeweils als Button klein Für jeden Button können Sie Text- und Rahmen-Farben, Radius bei den Ecken und weitere Einstellungen vornehmen unter Customizing Erscheinungsbild Button. Hintergrundfarbe, Hintergrund Akzentfarbe, Dezent, alternative Schriftfarbe Legen Sie hinter den markierten Text eine Farbe. Akzent Schriftart Gestalten Sie den markierten Text in einer alternativen Schriftart, die Sie unter Customizing Erscheinungsbild Schriftarten Akzent Schriftart festlegen. Im CK-Editor finden Sie auch Stile für Spaltenbreite und Spaltenumbruch vermeiden. Eine ausfü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

Question 30

Kann man Stile speichern und wann ist das sinnvoll?

Accepted Answer

Sie möchten jede H1-Überschrift auf Ihrer Website in Textfarbe Akzentfarbe und mit Innerem Abstand 40px unten formatieren aber nicht jedes Mal die einzelnen Stile auswählen? Dann Speichern Sie diese Formatierungen als neuen Stil.

Klicken Sie dazu auf den kleinen Stern rechts.
Wählen Sie anschließend einen sprechenden Namen aus und speichern den Stil.
Aus den beiden Stilen "Textfarbe: Akzentfarbe" und "Innerer Abstand 40px unten" wird dann der neue Stil, dem wir hier im Beispiel den Namen "H1" gegeben haben.
Auf der nächsten Seite, bei der Sie diesen gespeicherten Stil verwenden möchten, finden Sie diesen unter "Gespeicherte Stile".

 ✕

Stil speichern

 Sie können Stile in den Bereichen Inhaltszeile, Inhaltsfläche und Inhaltselement speichern.
Speichern Sie Stile aber nur, wenn Sie diese Kombinationen tatsächlich öfter auf anderen Seiten verwenden. Sie verlieren sonst leicht den Überblick.

Question 31

Kann ich meinen Text auch in mehreren Spalten ausgeben?

Accepted Answer

Spalten im Text lassen sich

beim Inhaltselement
bei der Inhaltsfläche
im CK-Editor als DIV Container und
im CK-Editor als Formatierungsstile anzeigen.

Die Spalten werden dabei immer von der Desktopbreite ausgehend berechnet. Somit sehen die Spalten auf mobilen Bildschirmen anders aus als am Desktop.

Stil im Inhaltselement

Soll der gesamte Text in einem Inhaltselement in Spalten angezeigt werden, wählen Sie den gewünschten Stil am besten beim Inhaltselement aus.

Stil auf Inhaltsfläche

Haben Sie in einer Inhaltsfläche mehrere Inhaltselemente mit Texten angelegt und möchten alle diese Inhaltselemente mit der gleichen Spaltenbreite ausgeben, können Sie die Spaltenbreite als Stil auch auf der Inhaltsfläche auswählen.

DIV Container erzeugen

In einem Inhaltselement können Sie auch den gesamten Text mittels "DIV Container erzeugen" in mehreren Spalten darstellen. Klicken Sie dazu auf den -Button im CK-Editor. Anschließend öffnet sich ein eigenes kleines Fenster, in dem Sie die Spaltenbreite auswählen können. Das Verhalten ist hier gleich, wie wenn Sie den Stil beim Inhaltselement verwenden.

 ✕

Div Container erzeugen

Wurden die Spalten mit dem DIV Container erzeugt, haben Sie auch die Möglichkeit anschließend im Backend mit Klick auf die rechte Maustaste ein Kontextmenü zu öffnen.

Klicken Sie auf "Div bearbeiten" öffnet sich das gleiche Fenster, wie wenn Sie im CK-Editor auf den Button klicken.
Klicken Sie im Kontextmenü auf "Div entfernen" löschen Sie die Spalten wieder.

 ✕

Div Container bearbeiten

Hinweis: Mit dem Button "Blöcke anzeigen" im CK-Editor werden mit einer strichlierten Linie und einem "DIV" die einzelnen Absätze im Backend hervorgehoben. Klicken Sie nochmal auf den Button, dann verschwindet die strichlierte Umrandung und das "DIV" wieder.    ✕

Blöcke anzeigen

✕

Blöcke anzeigen

✕

Blöcke anzeigen

Formatierungsstile

Sie möchten in einem Inhaltselement nur einen Absatz in Spalten anzeigen? Auch das ist möglich. Markieren Sie dazu den gewünschten Absatz und wählen im CK-Editor unter Stil die gewünschte Spaltenbreite aus.

Hinweis: Wir empfehlen Ihnen allerdings, diesen Absatz besser in ein eigenes Inhaltselement auszulagern und den Stil beim Inhaltselement oder als DIV Container zu verwenden.

Hinweis: Wenn die Spalten an einer ungünstigen Stelle umbrechen, können Sie den Absatz bis zu dieser Stelle markieren und bei Inhaltselement, DIV Container erzeugen und Formatierungsstil "Spaltenumbruch vermeiden" verwenden. So sieht es im Frontend aus, wenn Mehrspaltigkeit beim Inhaltselement gewählt wird...

Erster Absatz: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Zweiter Absatz: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Spaltenbreite 1/2 Seite (von XL)

Erster Absatz: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Zweiter Absatz: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Spaltenbreite 1/3 Seite (von XL)

Erster Absatz: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Zweiter Absatz: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Spaltenbreite 1/4 Seite (von XL)

Question 32

Wo lässt sich bei Stilen die responsive Darstellung bearbeiten?

Accepted Answer

Bei jedem Stil lässt sich in der Inhaltszeile, Inhaltsfläche und im Inhaltselement die responsive Darstellung aktivieren oder deaktivieren.

Klicken Sie dazu einfach auf den kleinen Pfeil bei dem Stil, dann klappt eine neue Zeile "Aktiv für:" auf.

XSmall Handy Hochformat
Small Handy Querformat / Tablet Hochformat
Large Tablet Querformat
XLarge Desktop-Bildschirm

Die Stile lassen sich in diesen vier Auflösungen aktivieren oder deaktivieren.

    ✕

Responsive Einstellungen öffnen

✕

Responsive Einstellungen öffnen

✕

Responsive Darstellungen aktivieren / deaktivieren

✕

Responsive Darstellungen aktivieren / deaktivieren

Ein Beispiel: Sie möchten einen Text am Desktop und Tablet im Querformat 100% größer anzeigen und am Tablet im Hochformat und am Handy nur um 50% größer, damit die Schrift mobil bei kleineren Auflösungen nicht so wuchtig wirkt. Ziehen Sie Ihr Bildschirmfenster einfach kleiner, dann sehen Sie den Unterschied. Stil Textformatierung: größer (50%) aktiviert für XSmall und Small Stil Textformatierung: größer (100%) aktiviert für Large und XLarge

Ihnen stehen für mehrspaltige Layouts auch die Stile "Abstand zwischen den Flächen" zur Verfügung.

Tutorial Abstand zwischen den Flächen

Question 33

Wie verhält sich der Stil "Abstand zwischen den Flächen"?

Accepted Answer

Der Stil "Abstand zwischen den Flächen" steht Ihnen in der Inhaltszeile in verschiedenen Varianten zur Verfügung.

Bei einem mehrspaltigen Layout brauchen Sie nicht bei jeder Inhaltsfläche die Abstände zwischen den Spalten einstellen, sondern verwenden einfach den Stil "Abstand zwischen den Flächen" mit der gewünschten Pixelbreite bei der Inhaltszeile. Dadurch könne Sie sehr einfach einen Kacheleffekt erzielen.

Backend: Stil nur bei Inhaltszeile

Die Abstände lassen sich bei diesem Stil wie gewohnt in den mobilen Ansichten anpassen.

Und so sieht das Ergebnis im Frontend aus...

ohne Stil Stil: 10px Abstand zwischen den Flächen Stil: 20px Abstand zwischen den Flächen Stil: 40px Abstand zwischen den Flächen Stil: 60px Abstand zwischen den Flächen

Question 34

Wie kann ich den Stil "Ecken abrunden" einsetzen?

Accepted Answer

Der Stil "Ecken abrunden" steht Ihnen klein, mittel und groß auf den Ebenen der Inhaltszeile, Inhaltsfläche und des Inhaltselements zur Verfügung. Die Einstellungen für die drei Optionen klein, mittel, groß können unter Customizing Erscheinungsbild Layout & Boxen Ecken abrunden vorgenommen werden.

Sie können alle 4 Ecken rund oder eckig darstellen bzw. auch mischen.

Damit bei einem Modul Inhalte nicht über die runden Ecken hinausragen, ist "überstehenden Inhalt verbergen" automatisch aktiviert. Deaktivieren Sie diese Checkbox nur, wenn das für Ihre Darstellung notwendig ist. Und hier ein paar Beispiele... alle vier Ecken rund Ecke oben / unten rechts rund Ecken unten links / oben rechts rund Ecke unten rechts rund

Question 35

Wie kann ich Inhalte am unteren Bildschirmrand fixieren (sticky)?

Accepted Answer

Kurzer Exkurs: Was bedeutet sticky überhaupt?
Bei sticky Elementen spricht man von Elementen auf einer Website, die beim Scrollen ihre Position nicht ändern.

Im REDX-CMS steht Ihnen der Stil "fixiert unten (sticky)" zur Verfügung, der Inhaltszeilen auf einer SITEX-Seite oder im Slideout fixiert.

Gestalten Sie eine Inhaltszeile, die für Ihre Websitebesucher immer präsent sein soll, können Sie diese mit dem Stil "fixiert unten (sticky)" fixieren. Ein Beispiel ist eine Verlinkung zu einer Aktion oder ein Kontaktbutton.

Stil auf Inhaltszeile

Ein paar wichtige Punkte:

Die Einstellung "Abstand oben (auto)" wirkt sich nur bei Verwendung im Slideout aus, wenn im Slideout nicht sehr viel Text vorhanden ist. Damit ist dort trotzdem gewährleistet, dass die Inhaltszeile mit diesem Stil unten fixiert wird.
Im REDX-CMS ist eine Inhaltszeile mit dem Stil "unten fixiert (sticky)" immer transparent. Daher empfehlen wir Ihnen eine Hintergrundfarbe, zum Beispiel mit dem Stil "Hintergrund Dezent", zu verwenden.
Sie müssen den Stil nicht unbedingt bei der letzten Inhaltszeile verwenden. Verwenden Sie den Stil auf einer beliebigen Inhaltszeile der SITEX-Seite. Diese Inhaltszeile bleibt dann nur bis zur im Backend verbauten der Stelle am unteren Bildschirmrand fixiert. Scrollen Sie online weiter, ist die Zeile nicht mehr fixiert. Scrollen Sie wieder hinauf, dann erscheint die fixierte Inhaltszeile wieder ab der verbauten Stelle bis zum Beginn der Seite.

Question 36

Stile CK-Editor

Accepted Answer

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 Darstellung wie Überschrift 1 - 4 Nur der markierte Text wird im Styling des gewählten Überschriften-Stils ausgegeben, aber nicht mit einem Überschriften-tag. 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 Customizing 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 oder jeweils als Button klein Für jeden Button können Sie Text- und Rahmen-Farben, Radius bei den Ecken und weitere Einstellungen vornehmen unter Customizing Erscheinungsbild Button. Hintergrundfarbe, Hintergrund Akzentfarbe, Dezent, alternative Schriftfarbe Legen Sie hinter den markierten Text eine Farbe. Akzent Schriftart Gestalten Sie den markierten Text in einer alternativen Schriftart, die Sie unter Customizing Erscheinungsbild Schriftarten Akzent Schriftart festlegen. Im CK-Editor finden Sie auch Stile für Spaltenbreite und Spaltenumbruch vermeiden. Eine ausführliche Erklärung dazu finden Sie in einem eigenen Tutorial.

Question 37

Stile Inhaltselement

Accepted Answer

Inhaltselement

Im roten Inhaltselement wirken die Stile auf den Inhalt, den Sie im Inhaltselement angelegt haben. Textformatierungen greifen natürlich nur bei "neuer Text" und nicht "neues Bild" oder "neues Modul" 😉.

Verwenden Sie hier beispielsweise den Stil "Textformatierung: Zentriert" und "Textformatierung: größer (50%)", dann wird der gesamte Text in diesem Textmodul zentriert und um 50% größer dargestellt.
Oder der Stil "Textformatierung: Großbuchstaben". Hier brauchen Sie dann nicht alles in Großbuchstaben schreiben, sondern ganz normal und verwenden einfach diesen Stil.

Der Vorteil bei Textformatierungen als Stil ist, gefällt Ihnen z.B. der Stil "Textformatierung: Großbuchstaben" nicht mehr, lässt dieser sich mit nur einem Klick entfernen und schon ist alles wieder in normaler Schrift. Wenn Sie dagegen den ganzen Text schon in Großbuchstaben geschrieben haben, müssen Sie, wenn Sie das nicht mehr möchten, alles in normaler Schrift neu schreiben.

Unsere Stile ersparen Ihnen einfach etwas Arbeit 🙂.

 ✕

Stile verwalten

Stil Beschreibung Hintergrund Abdunkeln Der Hintergrund vom Inhaltselement wird etwas dunkler dargestellt. Hintergrund Aufhellen Hier wird der Hintergrund vom Inhaltselement etwas heller. Hintergrundverlauf abdunkeln von oben / nach unten 0 - 80% Der Hintergrund wird von oben oder nach unten von 0 - 80% verlaufend abgedunkelt. Hintergrund Dezent, Hauptfarbe, Weiß, Weiß (leicht transparent), Zweitfarbe Sie können auch einen farbigen Hintergrund wählen. Rahmen (1px) Legen Sie einen Rahmen in der Stärke von 1px um das Inhaltselement. Rahmenfarbe Dezent, Grau, Hauptfarbe, Schriftfarbe, Weiß, Zweitfarbe Die Rahmenfarbe können Sie verändern. Rahmenstärke 2px, 3px Die Rahmenstärke lässt sich auf 2 oder 3px erhöhen, wenn Ihnen der Standard mit 1px zu schmal ist. Textausrichtung: Blocksatz, Linksbündig, Rechtsbündig, Zentriert Die Textausrichtung wirkt sich wie in einem Word-Dokument aus, natürlich nur bei "neuer Text". Textfarbe: Akzentfarbe, Akzentfarbe aktiv, Alternative Schriftfarbe, Dezent, Schwarz, Weiß Die Textfarbe lässt sich bei "neuer Text" ändern. Textformatierung: Durchgestrichen, Fett, Großbuchstaben, Hochgestellt, Kapitälchen, Kleinbuchstaben, Kursiv, Tiefgestellt, Unterstrichen Die Textformatierungen wirken sich bei "neuer Text" ebenfalls wie in einem Word-Dokument aus. Textformatierung: größer (100%, 50%, 20%) Text lässt sich um 100, 50 oder 20% größer darstellen. Textformatierung: kleiner (-20%) Oder Sie möchten den Text um 20% kleiner ausgeben. innerer Abstand klein, mittel, groß, extra groß siehe Stil Innerer Abstand vertikale Ausrichtung oben, mitte, unten Nur in Verbindung mit einem Hintergrundbild beim Inhaltselement greifen diese Stile. weiße Box (leicht transparent) Hier legt sich um das Inhaltselement eine Box mit rundherum gleichem Abstand und leicht transparent. äußerer Abstand klein, mittel, groß, extra groß siehe Stil Äußerer Abstand Akzent Schriftart Stellt den gesamten Text im Inhaltselement in der Akzent Schriftart dar. Ausnehmen auf Druck und PDF Der Inhalt vom Inhaltselement kann mit diesem Stil für den Druck ausgenommen werden. Reihung an erster / letzter Stelle Ein Element in der Inhaltszeile kann an erster oder letzter Stelle gereiht werden. Sinnvoll für die mobile Darstellung mit alternierenden Bild / Text Elementen. Ecken abrunden klein, mittel, groß siehe Tutorial für diesen Stil Mehr anzeigen Funktion Bei langen Texten, kann mit dem Stil ein "mehr anzeigen" Button ausgegeben werden. Die Länge des Textes und die Button Darstellung wird unter Customizing Mehr anzeigen Funktion Erscheinungsbild definiert. Darstellung wie Überschrift 1 - 4 Der Text im Inhaltselement kann in den Überschriften 1 - 4 gestyled werden, es wird aber kein Überschriften-tag ausgegeben. Hintergrund und Innenabstand der Überschriften entfernen Bei Verwendung von einem Stil "Darstellung die Überschrift 1 - 4" kann der Hintergrund und Innenabstand mit diesem Stil entfernt werden. Im Inhaltselement finden Sie auch Stile für Spaltenbreite und Spaltenumbruch. Eine ausführliche Erklärung dazu finden Sie in einem eigenen Tutorial.

Question 38

Stile Inhaltsfläche

Accepted Answer

Inhaltsfläche

In der blauen Inhaltsfläche legen Sie bei den Stilen vor allem die Ausrichtung bei einem mehrspaltigen Layout fest.

Möchten Sie bei drei Spalten nebeneinander den Inhalt auf gleicher Höhe, wählen Sie bei den drei Inhaltsflächen den Stil "vertikale Ausrichtung: oben" - siehe linke Spalte.

Bei der rechten Spalte ist zur Demonstration der Stil "vertikale Ausrichtung: unten" ausgewählt. Hier sehen Sie bereits im Backend den Unterschied.

 ✕

Stile verwalten

Stil Beschreibung Hintergrund Abdunkeln Der Hintergrund der Fläche wird dunkler ausgegeben. Hintergrund Aufhellen Hier ist der Hintergrund bei der Fläche heller. Hintergrundverlauf abdunkeln von oben / nach unten 0 - 80% Der Hintergrund in dieser Fläche wird von oben oder nach unten von 0 - 80% verlaufend abgedunkelt. Hintergrund Dezent, Hauptfarbe, Weiß, Weiß (leicht transparent), Zweitfarbe Legen Sie eine andere Hintergrundfarbe fest. Inhalt zentriert (Desktop) Für die Desktop-Ansicht lässt sich der Inhalt zentriert darstellen. Letzten Absatz unten ausrichten Möchten Sie bei einem mehrspaltigen Layout gleich hohe Spalten, dann richtet sich mit diesem Stil die Höhe nach der längsten Spalte. Rahmen (1px) Auch auf der Fläche können Sie einen Rahmen mit der Standardstärke von 1px anlegen. Rahmenfarbe Dezent, Grau, Hauptfarbe, Schriftfarbe, Weiß, Zweitfarbe Wechseln Sie die Farbe des Rahmens. Rahmenstärke 2px, 3px Hier lässt sich die Rahmenstärke auf 2 oder 3px erhöhen. Schatten Um die Inhaltsfläche lässt sich ein Schatten legen. Die Fläche selber bleibt weiß, nur rund um die Fläche erscheint nach außen hin ein Schatten. *Textausrichtung: Blocksatz, Linksbündig, Rechtsbündig, Zentriert Legen Sie hier für alle Inhaltselemente in dieser Inhaltsfläche die Textausrichtung fest. *Textfarbe: Akzentfarbe, Akzentfarbe aktiv, Alternative Schriftfarbe, Dezent, Schwarz, Weiß Auch eine andere Textfarbe greift hier für alle Inhaltselemente in dieser Inhaltsfläche. *Textformatierung: Durchgestrichen, Fett, Großbuchstaben, Hochgestellt, Kapitälchen, Kleinbuchstaben, Kursiv, Tiefgestellt, Unterstrichen Die Textformatierungen gelten ebenfalls für alle Inhaltselemente in dieser Inhaltsfläche. *Textformatierung: größer (100%, 50%, 20%) Der Text aller Inhaltselemente in dieser Inhaltsfläche kann um 100, 50 oder 20% größer dargestellt werden. *Textformatierung: kleiner (-20%) Oder eben um 20% kleiner. *Akzent Schriftart Formatiert den gesamten Text in dieser Inhaltsfläche in der Akzent Schriftart. innerer Abstand klein, mittel, groß, extra groß siehe Stil Innerer Abstand quadratische Darstellung Die Inhaltsfläche lässt sich mit diesem Stil quadratisch darstellen. vertikale Ausrichtung: mitte Hier werden alle Inhaltselemente dieser Inhaltsfläche in der Mitte ausgerichtet (ausgehend von der Höhe, nicht Breite). vertikale Ausrichtung: oben Hier richten sich die Inhaltselemente der Inhaltsfläche oben aus. vertikale Ausrichtung: unten Und hier das gleiche unten ausgerichtet. *Darstellung wie Überschrift 1 - 4 Der gesamte Text in der Inhaltsfläche kann in den Überschriften 1 - 4 gestyled werden, es wird aber kein Überschriften-tag ausgegeben. *Hintergrund und Innenabstand der Überschriften entfernen Bei Verwendung von einem Stil "Darstellung die Überschrift 1 - 4" kann der Hintergrund und Innenabstand mit diesem Stil entfernt werden. Ecken abrunden klein, mittel, groß siehe Tutorial für diesen Stil Mehr anzeigen Funktion Bei langen Texten, kann mit dem Stil ein "mehr anzeigen" Button ausgegeben werden. Die Länge des Textes und die Button Darstellung wird unter Customizing Mehr anzeigen Funktion Erscheinungsbild definiert. Reihung an erster / letzter Stelle Ein Element in der Inhaltszeile kann an erster oder letzter Stelle gereiht werden. Sinnvoll für die mobile Darstellung mit alternierenden Bild / Text Elementen. Ausnehmen auf Druck und PDF Der gesamte Inhalt in dieser Inhaltsfläche kann mit diesem Stil für den Druck ausgenommen werden. *Textformatierungen greifen nur bei "neuer Text" und nicht bei "neues Bild" oder "neues Modul". In der Inhaltsfläche finden Sie auch Stile für die Spaltenbreite. Eine ausführliche Erklärung dazu finden Sie in einem eigenen Tutorial.

Question 39

Stile Inhaltszeile

Accepted Answer

Inhaltszeile

In der Inhaltszeile wirken die Stile auf die Inhaltsfläche(n) im gewählten Layout.

Legen Sie z.B. in einer Inhaltszeile ein Layout mit 3 Spalten an und möchten überall zwischen den Spalten den gleichen Abstand, dann müssen Sie das nicht bei jeder einzelnen Inhaltsfläche als Stil anpassen, sondern verwenden bei der Inhaltszeile den Stil "40px Abstand zwischen den Flächen" (es gibt auch 20 und 10px 😉). Der ganz linke und rechte Rand richten sich nach dem ausgewählten Layout.

 ✕

Stile verwalten

Stile Inhaltszeile Backend Stil Beschreibung 10px, 20px, 40px, 60px Abstand zwischen den Flächen siehe Tutorial für diesen Stil Hintergrund Abdunkeln Der Hintergrund der gesamten Inhaltszeile lässt sich dunkler darstellen. Hintergrund Aufhellen Mit diesem Stil wird der Hintergrund der gesamten Inhaltszeile heller. Hintergrundverlauf abdunkeln von oben / nach unten 0 - 80% Der Hintergrund in dieser Fläche wird von oben oder nach unten von 0 - 80% verlaufend abgedunkelt. Hintergrund Dezent, Hauptfarbe, Weiß, Weiß (leicht transparent), Zweitfarbe, Alternative Schriftfarbe Eine andere Hintergrundfarbe kann ebenfalls gewählt werden. Höhe der Flächen nicht angleichen Bei mehrspaltigen Layouts mit unterschiedlich langem Inhalt möchten Sie die Spalten unter Umständen nicht gleich hoch dargestellt haben. Hierfür gibt es diesen Stil. Letzten Absatz unten ausrichten Hier lässt sich der Absatz bei einem mehrspaltigen Layout bei allen Inhaltsflächen nach dem letzten Absatz unten ausrichten. Alle Spalten werden dann so hoch, wie die längste Spalte. Rahmen (1px) Auf der Inhaltszeile gibt es ebenfalls einen Rahmen mit der Standardbreite von 1px. Rahmenfarbe Dezent, Grau, Hauptfarbe, Schriftfarbe, Weiß, Zweitfarbe Die Farbe des Rahmens lässt sich auch bei der Inhaltszeile ändern. Rahmenstärke 2px, 3px Rahmenstärke lässt sich auf 2 oder 3px ändern. Schatten Legen Sie einen Schatten außen um die Inhaltszeile. Textfarbe: Akzentfarbe, Akzentfarbe aktiv, Alternative Schriftfarbe, Dezent, Schwarz, Weiß Für den Text in der gesamten Inhaltszeile lässt sich hier die Farbe ändern. innerer Abstand klein, mittel, groß, extra groß siehe Stil Innerer Abstand äußerer Abstand klein, mittel, groß, extra groß siehe Stil Äußerer Abstand Akzent Schriftart Stellt den gesamten Text in der Inhaltszeile in der Akzent Schriftart dar. Ecken abrunden klein, mittel, groß siehe Tutorial für diesen Stil Footer Mit diesem Stil werden die Farben von Customizing Erscheinungsbild Footer übernommen. Ausnehmen auf Druck und PDF Der Inhalt der gesamten Inhaltszeile kann mit diesem Stil für den Druck ausgenommen werden. fixiert unten (sticky) siehe Tutorial für diesen Stil

Question 40

Stil Innerer Abstand

Accepted Answer

Der "Innere Abstand" steht Ihnen bei Inhaltselement, Inhaltsfläche und Inhaltszeile in den Varianten klein, mittel, groß oder extra groß zur Verfügung.

Sehen wir uns das Verhalten am besten anhand eines Beispiels an.

Hier verwenden wir das Layout "2 Spalten | 50% | 50% | - begrenzt", damit wir uns den inneren Abstand gleich bei einem Bild und einem Text parallel ansehen können.

Wie sieht das ganz ohne Abstände aus? Wir verwenden hier noch zusätzlich einen Rahmen bei den Inhaltselementen und einen dezenten Hintergrund beim Text, damit wir es noch besser sehen...

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Bild und Text ohne Abstände

😕 Naja, nicht gerade schön, wenn der Text direkt beim Bild "klebt". Das geht definitiv noch besser.

Wählen wir bei den beiden Inhaltselementen den Stil "Innerer Abstand mittel" rund um das Bild und den Text aus, wieder mit Rahmen bei den Inhaltselementen und dezentem Hintergrund beim Text damit man den Unterschied besser erkennt.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Bild und Text: Stil "Innerer Abstand mittel" mit Rahmen bei Inhaltselementen und dezentem Hintergrund beim Text

😊Das sieht doch schon besser aus.

Damit wir das Verhalten in den Bereichen Inhaltselement, Inhaltsfläche und Inhaltszeile noch besser sehen, erweitern wir die Inhaltsfläche auch noch um den "Inneren Abstand mittel" und legen hier einen weiteren Rahmen um die beiden Spalten und hinter den Text den dezenten Hintergrund. Wird der dezente Hintergrund bei der Inhaltsfläche verwendet, können Sie diesen beim Inhaltselement entfernen, da beide Bereiche über die Inhaltsfläche abgedeckt werden.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Bild und Text: Stil "Innerer Abstand mittel" mit Rahmen zusätzlich bei Inhaltsfläche und Text mit Hintergrundfarbe dezent Und der Vollständigkeit halber noch einen inneren Abstand mittel mit Rahmen bei der Inhaltszeile, damit Sie das Zusammenspiel der Bereiche Inhaltselement, Inhaltsfläche und Inhaltszeile genau sehen. Hier wurde in allen Bereichen der Rahmen angelegt, um die Abstände sichtbar zu machen. Der dezente Hintergrund ist hier nur bei der Inhaltszeile angelegt, Sie sehen also, dieser greift auf allen Bereichen darunter. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Bild und Text: Stil "Innerer Abstand mittel" mit Rahmen noch zusätzlich bei Inhaltszeile und dezentem Hintergrund

Rahmen und Hintergründe müssen Sie natürlich nicht verwenden. Diese dienen hier im Beispiel nur der Visualisierung.
Den inneren Abstand gibt es klein, mittel, groß oder extra groß. Mit px sind Pixel am Bildschirm gemeint. Der innere Abstand mittel hat default 20px im CMS, also 20 Pixel am Bildschirm.
Hier bei den Beispielen haben wir den Abstand immer um den gesamten Bereich gelegt, also oben, links, unten, rechts. Sie können den Abstand z.B. auch nur oben und unten aktivieren und rechts sowie links deaktivieren, wenn das für Ihre Gestaltung besser passt. Ebenso kann auch nur bei einer Spalte ein Abstand verwendet werden und bei der anderen nicht.
Je mehr Pixel von den Abständen dazukommen, desto mehr Wörter eines Textes werden in die nächste Zeile verschoben. Die Höhe der zwei Spalten richtet sich in den Auflösungen XL und L immer am Inhalt der Inhaltselemente aus, daher sind die Rahmen hier nicht exakt gleich. Bei den mobilen Auflösungen S und XS rutschen die Spalten untereinander, hier gleicht sich die Höhe der Spalten nicht an.

Hier gibt es jede Menge Gestaltungsmöglichkeiten 😄.

Question 41

Stil Äußerer Abstand

Accepted Answer

Den "Äußeren Abstand" gibt es beim Inhaltselement und der Inhaltszeile in den Varianten klein, mittel, groß oder extra groß.

Auch hier ist ein Beispiel sicher wieder hilfreich.

Wir verwenden wieder das Layout "2 Spalten | 50% | 50% | - begrenzt", damit wir uns den äußeren Abstand bei einem Bild und einem Text ansehen können.

Ohne Abstände natürlich das gleiche Ergebnis, wie bei dem Stil "Innerer Abstand". Wir verwenden hier noch zusätzlich einen Rahmen bei den Inhaltselementen und beim Text einen dezenten Hintergrund, damit wir das noch besser sehen...

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Bild und Text ohne Abstände

😕 Naja, sieht natürlich wieder nicht so gut aus.

Wählen wir bei den beiden Inhaltselementen den Stil "Äußerer Abstand mittel" rund um das Bild und den Text aus, wieder mit Rahmen bei den beiden Inhaltselementen und dezentem Hintergrund beim Text zur besseren Darstellung.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. At vero eos et accusam et justo duo dolores et ea rebum. Bild und Text mit Stil "Äußerer Abstand mittel" mit Rahmen bei Inhaltselementen und dezentem Hintergrund zusätzlich beim Text

🤨 Zumindest der Abstand zwischen den beiden Spalten sieht besser aus. Nur der Rahmen und der dezente Hintergrund bleibt beim äußeren Abstand direkt beim Text, daher auch "äußerer" Abstand, also außen um das Inhaltselement herum 😉.

Bei der Inhaltsfläche gibt es keinen äußeren Abstand, daher machen bei der Inhaltszeile weiter. Hier wählen wir bei der Inhaltszeile auch den "Äußeren Abstand mittel" aus und verwenden einen weiteren Rahmen und den dezenten Hintergrund bei der Inhaltszeile. Die Auswirkung des äußeren Abstandes ist hier nicht mehr mit Rahmen oder Hintergründen darzustellen, da der Abstand ja außen um die Inhaltszeile herum liegt.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Lorem ipsum dolor sit amet, consetetur sadipscing elitr. Bild und Text mit Stil "Äußerer Abstand mittel" mit Rahmen bei Inhaltszeile und zusätzlich dezentem Hintergrund beim Text

Rahmen und Hintergrund müssen Sie natürlich nicht verwenden. Diese dienen hier im Beispiel nur der Visualisierung.
Den äußeren Abstand gibt es ebenfalls in den Varianten klein, mittel, groß, extra groß. Mit px sind Pixel am Bildschirm gemeint. Der äußere Abstand mittel hat default 20px im CMS, also 20 Pixel am Bildschirm.
Hier bei den Beispielen haben wir den äußeren Abstand immer um den gesamten Bereich gelegt, also oben, links, unten, rechts. Sie können den Abstand z.B. auch nur oben und unten aktivieren und rechts und links deaktivieren. Ebenso kann auch nur bei einer Spalte ein Abstand verwendet werden und bei der anderen nicht.

Und noch mehr Gestaltungsmöglichkeiten 😄.

Tutorial: SITEX Editor

Allgemeine Einstellungen

Inhaltszeilen bearbeiten

CK-Editor

Stile

Wie können wir Sie bei Ihrem Webprojekt unterstützen?

Wie können wir Sie bei Ihrem Webprojekt unterstützen?

Stil	Beschreibung
Darstellung wie Überschrift 1 - 4	Nur der markierte Text wird im Styling des gewählten Überschriften-Stils ausgegeben, aber nicht mit einem Überschriften-tag.
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 Customizing 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 oder jeweils als Button klein	Für jeden Button können Sie Text- und Rahmen-Farben, Radius bei den Ecken und weitere Einstellungen vornehmen unter Customizing Erscheinungsbild Button.
Hintergrundfarbe, Hintergrund Akzentfarbe, Dezent, alternative Schriftfarbe	Legen Sie hinter den markierten Text eine Farbe.
Akzent Schriftart	Gestalten Sie den markierten Text in einer alternativen Schriftart, die Sie unter Customizing Erscheinungsbild Schriftarten Akzent Schriftart festlegen.