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.

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.

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.

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.

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.

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.

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

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: 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.
Ihnen stehen verschiedene Abspielmöglichkeiten zur Verfügung:
- Autoplay aktivieren,
- Stumm,
- Video in einer Schleife abspielen (Loop) und
- Steuerelemente des Video-Players anzeigen.
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

Wichtiger Hinweis: Aktivieren Sie "Stumm" aber nicht "Steuerelemente des Video-Player anzeigen", dann kann der Ton bei einigen Browsern nicht aktiviert werden.

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

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

Bitte der Kategorie Funktionelle Cookies zustimmen.

Einstellungen anpassen

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.

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.

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. 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

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. 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.

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

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.

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.

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

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.

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... 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):

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.

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.

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...

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.

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

Wo finde ich die Inhaltseditor-Vorlagen?

Accepted Answer

Die Inhaltseditor-Vorlagen finden Sie im Navigationsbereich unter CMS Wiederverwendbare Inhalte Inhaltseditor-Vorlagen mit Kategorien.

Question 37

Wie erstelle ich eine neue Kategorie bei Inhaltseditor-Vorlagen?

Accepted Answer

Im Navigationsbereich unter CMS Wiederverwendbare Inhalte Inhaltseditor-Vorlagen Kategorien erstellen Sie mit dem Symbol Neuer Eintrag eine neue Kategorie.

Die beiden Kategorien "Seiten" und "Module" sind im System bereits vorhanden. Sie können sie bei Bedarf aber bearbeiten , kopieren oder löschen .

Geben Sie der neuen Kategorie einen aussagekräftigen Titel. Anschließend können Sie die Kategorien bei einer neuen Vorlage verwenden.

Wenn Sie Vorlagen im Inhaltseditor verwenden, können Sie die Vorlagen nach Kategorien filtern.

Question 38

Wie erstelle ich Inhaltseditor-Vorlagen?

Accepted Answer

Wo Sie die Inhaltseditor-Vorlagen im Backend finden, zeigen wir Ihnen in diesem Tutorial.

Einige Vorlagen sind in Ihrem System bereits vorhanden. Diese können Sie ausblenden, bearbeiten, kopieren oder löschen. Um eine neue Vorlage zu erstellen, klicken Sie rechts oben auf das Symbol Neuer Eintrag.

 ✕

Neuer Eintrag

Bei der neuen Vorlage wechseln Sie zu Inhalt Inhaltseditor. Hier können Sie diese Vorlage bearbeiten. Gestalten Sie einzelne Inhaltszeilen, die Sie immer wieder brauchen, oder gleich ganze SITEX-Seiten. Setzen Sie Stile ein, legen Module an, optimieren die Seite mobil usw. Auf den SITEX-Seiten steht Ihnen diese Vorlage nach dem Speichern sofort zur Verfügung. Wo die Inhaltseditor-Vorlagen anschließend zu finden sind, zeigen wir Ihnen in diesem Tutorial.

Question 39

Wie bearbeite ich Inhaltseditor-Vorlagen?

Accepted Answer

Sie verwenden eine Inhaltseditor-Vorlage häufig, möchten hier aber eine allgemeine Änderung vornehmen? Wechseln Sie dazu im Navigationsbereich zu CMS Wiederverwendbare Inhalte Inhaltseditor-Vorlagen und gehen bei der gewünschten Vorlage zu Inhalt Inhaltseditor.
Bearbeiten Sie die Vorlage genau wie die SITEX-Seiten. Alle Infos finden Sie im Tutorial-Bereich SITEX Inhaltseditor. Vorlagen, die bereits in Verwendung sind, werden dadurch nicht verändert! Diese Änderungen müssen manuell oder durch Verwendung der neu überarbeiteten Vorlage erfolgen.

Question 40

Wo verwende ich die Inhaltseditor-Vorlagen?

Accepted Answer

Beim Arbeiten im SITEX Inhaltseditor stehen Ihnen sofort nach dem Anlegen die freigeschalteten Vorlagen zur Verfügung. Klicken Sie dazu im Inhaltseditor auf das Symbol Vorlage auswählen rechts oben. Anschließend öffnet sich ein neues Fenster, in dem Sie alle Vorlagen finden.  ✕

Vorlage auswählen

Die Vorlagen-Filter erklären wir Ihnen in einem eigenen Tutorial.

Damit die gewünschte Vorlage auf die aktuelle SITEX-Seite übernommen wird, klicken Sie auf den Pfeil . Es werden dann alle Inhalte, Formatierungen, Stile etc. aus der Vorlage übernommen. Alle Inhalte aus der Vorlage lassen sich dann im Inhaltseditor individuell für diese SITEX-Seite anpassen.

Die Vorlage selbst bleibt unverändert, nur der Inhalt auf der aktuellen Inhaltsseite wird geändert.

 ✕

Auswählen

Question 41

Lassen sich die Vorlagen mit den Kategorien filtern?

Accepted Answer

Da nicht nur selbst erstellte Inhaltseditor-Vorlagen bei den Vorlagen im Inhaltseditor zu finden sind, ist links neben dem Suchfeld der Filter "Kategorie auswählen". Damit schränken Sie Ihre Vorlagen etwas ein. In der Spalte "Erweiterung" sehen Sie zu welcher Kategorie die Vorlagen gehören.