Layoutbereiche hinzufügen
Das Modul „Layoutbereich“ bildet das Herzstück für das Layout auf jeder Seite. Mit diesem Modul können Sie Inhalte in vordefinierten Layouts/Spalten neben und übereinander anordnen. Auch Verschachtelungen sind möglich. Layoutbereiche können farblich unterschiedlich gestaltet werden, Bilder/Bildslider/Videos können als Hintergrundbilder verwendet, Schriftfarben gewählt, Animationen zugewiesen werden, etc. Die hinterlegten Farben haben wir passend zu Ihrem CD hinterlegt.
Direkte Zuweisung per drag&drop aus der Toolbar
Zuweisung über rechte Maustaste im gewünschten Bereich
Layoutbereich bearbeiten
Spalten, Layout und Abstände
Nachdem Sie das Modul "Layoutbereich" an die gewünschte Stelle per drag an drop gezogen haben, öffnet sich das Modul, damit Sie weitere Einstellungen vornehmen können. Hierzu finden Sie 6 Tabs. Im ersten Tab stellen Sie allgemeine Dinge ein, wie die Spaltenanzahl, Abstände und Ausrichtungen, etc.
Spaltendesign:
Legen Sie fest, wie viele Spalten der Bereich haben soll. Bei den zwei- und dreispaltigen Designs gibt es mehrere Möglichkeiten. Mit dem kleinen Dropdown-Pfeil hinter "Spalten Zwischenraum" können Sie die Abstände zwischen den Spalten variieren.
Breite des Layoutbereiches:
Bestimmen Sie, ob die Inhalte auf der gesamten Seitenbreite oder nur im Wrapperbereich ausgegeben werden sollen. Beachten Sie, dass Sie beim Verschachteln mehrerer Layoutbereiche die inneren Layoutbereiche auf gesamte Breite einstellen, damit sie nicht eingerückt werden.
Höhe des Layoutbereiches
Der Layoutbereich passt sich automatisch an den vorhandenen Inhalt an. Sie können ihn aber auf eine bestimmte prozentuale Browerhöhe anpassen, um gleich große Bereiche zu erzeugen.
Abstand unterhalb des Layoutbereiches
Bestimmen Sie hier, ob und wie groß der Abstand zum nächsten Layoutbereich sein soll.
Vertikale Spatenausrichtung
Legen Sie hier fest, ob die Inhalten oben, unten, zentriert ausgerichtet sein sollen oder sich auf die gesamte Höhe skalieren sollen.
Ausrichtung der Spalteninhalte
Hier legen Sie fest, ob die Inhalte links, rechts oder mittig ausgerichtet sein sollen. Wenn Sie mehrere Spalten haben, können Sie den Spalten auch unterschiedliche Ausrichtungen zuweisen.
Innenabstände des Layoutbereiches
Legen Sie einheitliche oder unterschiedliche Abstände innerhalb des Bereiches fest.
Wie Sie Bilder gleich groß ausrichten
Legen Sie fest, wie viele Spalten der Bereich haben soll. Bei den zwei- und dreispaltigen Designs gibt es mehrere Möglichkeiten. Mit dem kleinen Dropdown-Pfeil hinter "Spalten Zwischenraum" können Sie die Abstände zwischen den Spalten variieren.
Breite des Layoutbereiches:
Bestimmen Sie, ob die Inhalte auf der gesamten Seitenbreite oder nur im Wrapperbereich ausgegeben werden sollen. Beachten Sie, dass Sie beim Verschachteln mehrerer Layoutbereiche die inneren Layoutbereiche auf gesamte Breite einstellen, damit sie nicht eingerückt werden.
Höhe des Layoutbereiches
Der Layoutbereich passt sich automatisch an den vorhandenen Inhalt an. Sie können ihn aber auf eine bestimmte prozentuale Browerhöhe anpassen, um gleich große Bereiche zu erzeugen.
Abstand unterhalb des Layoutbereiches
Bestimmen Sie hier, ob und wie groß der Abstand zum nächsten Layoutbereich sein soll.
Vertikale Spatenausrichtung
Legen Sie hier fest, ob die Inhalten oben, unten, zentriert ausgerichtet sein sollen oder sich auf die gesamte Höhe skalieren sollen.
Ausrichtung der Spalteninhalte
Hier legen Sie fest, ob die Inhalte links, rechts oder mittig ausgerichtet sein sollen. Wenn Sie mehrere Spalten haben, können Sie den Spalten auch unterschiedliche Ausrichtungen zuweisen.
Innenabstände des Layoutbereiches
Legen Sie einheitliche oder unterschiedliche Abstände innerhalb des Bereiches fest.
Farben und Hintergrund
Im zweiten Tab haben Sie die Möglichkeit die Textfarbe und Hintergrunddarstellung einzustellen.
Textfarbe:
Legen Sie fest, welche Farbe Ihr Fliesstext haben soll. (Bitte beachten: Die definierten Farben wurden bei der Erstellung Ihrer Webseite mit Ihnen abgestimmt und im Branding von uns festgelegt. Brauchen Sie weitere Farben, kontaktieren Sie uns bitte!)
Hintergrundgestaltung:
Hier haben Sie die Möglichkeit einen farblichen Rahmen um Ihren Layoutbereich zu legen. Wählen Sie die gewünschte Farbe im Dropdown einfach aus.
Schatten:
Fügen Sie Ihrem Layoutbereich einen Schatten hinzu
Legen Sie fest, welche Farbe Ihr Fliesstext haben soll. (Bitte beachten: Die definierten Farben wurden bei der Erstellung Ihrer Webseite mit Ihnen abgestimmt und im Branding von uns festgelegt. Brauchen Sie weitere Farben, kontaktieren Sie uns bitte!)
Hintergrundgestaltung:
- Farbe: Geben Sie die Hintergrundfarbe Ihres Layoutbereichs (Containers) an. Auch diese Farben werden im Branding von uns festgelegt und können jederzeit erweitert werden Die Hintergrundfarbe wird bei allen weiteren Hintergrundarten zusätzlich verwendet. Eine Ausnahme bildet hier die "Intelligente Hintergrundfarbenauffüllung", wenn Sie Bilddateien eingefügt haben. Wenn Sie die "Intelligente Hintergrundfarbenauffüllung" wählen, analysiert das System das eingefügte Bild und verwendet automatisch eine Farbe des Bildes als Hintergrundfarbe. Hinweis: Sie können leider nicht bestimmen, welcher Bildausschnitt dabei genau analysiert wird. Kommt die gewünschte Farbe beispielsweise nur unten rechts im Bild vor, das System nutzt aber einen Farbpunkt aus der Bildmitte, so kann die gewünschte Farbe mit dieser Funktion nicht als Hintergrundfarbe genutzt werden.
- Bild: Fügen Sie mit Hilfe des Button "Bild einfügen" ein Bild aus dem Mediapool hinzu und geben Sie an, wie das Bild ausgegeben werden soll. Sollte das Bild zu schmal angezeigt werden, überprüfen Sie nochmals die Höhe des Layoutbereichs.
- Bildslider: Durch Hinzufügen mehrer Bilder können Sie ihre eigene Diashow gestalten. Die Animationsart und -dauer können manuell eingestellt werden.
- Video: Fügen Sie mit Hilfe des Button "Video einfügen" ein Video aus dem Mediapool hinzu und geben Sie an, wie das Video ausgegeben werden soll. Ebenfalls können Sie hier einstellen, ob das Video in einer Endlosschleife wiedergegeben wird oder es nach einmaligem Ausspielen stoppen soll.
Hier haben Sie die Möglichkeit einen farblichen Rahmen um Ihren Layoutbereich zu legen. Wählen Sie die gewünschte Farbe im Dropdown einfach aus.
Schatten:
Fügen Sie Ihrem Layoutbereich einen Schatten hinzu
Animation
Im Modul Animation haben Sie die Möglichkeit unterschiedlichste Ein- und Ausblendungen Ihrer Layoutbereiche einzustellen. Jede Spalte kann einzelt angesteuert und eingestellt werden. Hierzu stehen unzählige Animationstypen zur Verfügung. Auf eine Beschreibung aller Animationseffekte verzichten wir hier. Wichtig: Sie sehen die Animation erst, wenn Sie die Bearbeitung in der Toolbar deaktiviert haben (CMS-Hilfselemente aus).
Spezielle Einstellungen
Steuern Sie das Anzeigeverhalten Ihres Layoutbereichs.
Anzeigeverhalten - Überschrift:
- Standardmäßig ist das "normale Verhalten" aktiviert.
- Eingeschränktes Einblenden:
- Navigationsmodul basiertes Einblenden: Hier können Sie dem Container eine Überschrift geben die im Navigationsmodul ausgegeben wird. (Näheres dazu im Modul Navigation)
- Als Footer verwenden:
- Sticky Verhalten: Wenn Sie einen Layoutbereich als "sticky" kennzeichnen, bleibt der Inhalt des Layoutbereiches beim Scrollen sichtbar. Das heißt, er wird angeheftet (to stick = kleben) und bewegt sich mit. Diese Funktion ist sehr gut geeignet, wenn Sie bspw. in einem zweispaltigen Layoutbereich Bild und Text eingestellt haben und der Text länger läuft. Gerade bei kleineren Auflösungen blebt dann das dazugehörige Bild bis zum Textende sichtbar. (Siehe dazu das folgende Beispiel mit dem Bild vom Wrocklage-Firmengebäude! Das mitlaufende Bild wurde dazu in der rechten Spalte in einen separaten, einspaltigen Layoutbereich gezogen und auf "sticky" gestellt. Sie erkennen, dass diese Funktion gewählt wurde, da die kleine Reisszwecke bei aktivem CMS am Ende des Layoutbereiches angezeigt wird. Die Funktionalität selber wird erst deutlich, wenn Sie die CMS-Bearbeitungsfunktion ausgestellt haben!
- Slider Container: Animation von vollständigen Layoutbereichen. Wenn ein Layoutbereich als Slider Container dient, sind viele Einstellungen nicht verfügbar. Dafür wird eine Timeline verfügbar, die zur Steuerung des Anzeigeverhaltens aller eingefügten Layoutbereiche in dem Slidercontainer dient.
- Spiegelbarer Layoutbereich: Wenn Sie identische Inhalte auf mehreren Seiten einstellen wollen (Typisches Beispiel wären Kontaktdaten/Ansprechpartner), können Sie einen Layoutbereich als "spiegelbaren Layoutbereich" kennzeichnen. Dies ist dann der Original-Layoutbereich, in dem Änderungen vorgenommen werden. Auf den Seiten, auf denen Sie nun eine Kopie (eine Spiegelung/Klon) einfügen wollen, wählen Sie als Modul "Layoutbereich-Spiegelung" und fügen die gewünschte Spiegelung hier ein. Sollten mehrere Spiegelungen vorhanden sein, können Sie mit dem Dropdown das gewünschte Orginal auswählen. Bei der Spiegelung selber sind keine Einstellungen/Anpassungen möglich.
Beispiel für ein "sticky"-Verhalten beim Bild in der rechten Spalte
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier steht ganz viel Text.
Hier folgt dann der nächste Inhaltsbereich. Man muss scrollen, um ihn anzuzeigen.
Responsiv
In den Responsiv-Einstellungen stellen Sie das Verhalten einzelner Layoutbereiche in den mobilen Ansichten ein. Das CMS sorgt zwar generell dafür, dass Ihre Seite responsiv reagiert, doch gibt es Fälle, an denen es Sinn ergibt, manuell einzugreifen, um die Ausgabe auf dem Handy/Tablet zu optimieren. Je nach Auflösung können verschiedene Ausgaben eingestellt werden.
So gehen Sie vor: Fügen Sie dafür eine (mehrere) Einstellung(en) hinzu: "+ Ein weiteres Verhalten hinzufügen"
Wählen Sie, ab welcher Auflösung diese gelten soll. (Für jede Auflösung kann eine separate Einstellung definiert werden.)
Legen Sie über "Verhalten" generell fest, ob der Layoutbereich sichtbar, angepinnt oder verborgen bleiben soll.
Nun bestimmen Sie die Spaltenbreiten. Für jede einzelne Spalte eines Layoutbereiches können verschiedene Breiten gewählt werden (100/75/50/33/25 %). So bestimmen Sie, wieviele Spalten nebeneinander angezeigt werden sollen.
So gehen Sie vor: Fügen Sie dafür eine (mehrere) Einstellung(en) hinzu: "+ Ein weiteres Verhalten hinzufügen"
Wählen Sie, ab welcher Auflösung diese gelten soll. (Für jede Auflösung kann eine separate Einstellung definiert werden.)
Legen Sie über "Verhalten" generell fest, ob der Layoutbereich sichtbar, angepinnt oder verborgen bleiben soll.
Nun bestimmen Sie die Spaltenbreiten. Für jede einzelne Spalte eines Layoutbereiches können verschiedene Breiten gewählt werden (100/75/50/33/25 %). So bestimmen Sie, wieviele Spalten nebeneinander angezeigt werden sollen.
Sichtrechte
Sichtrechte ermöglichen Ihnen einzustellen, ob einzelne Layoutbereiche für bestimmte Benutzergruppen unsichtbar bleiben sollen. Sie können definieren, ob bestimmte Benutzergruppen überhaupt Leserechte haben sollen, ob die Ausgabe vielleicht nur in bestimmten Sprachvarianten erscheinen soll oder ob die Inhalte in bestimmten Abschnitten (Menüpunkten) für bestimmte Benutzer unsichtbar bleiben sollen. Bsp. Bestimmte Kundengruppen sollen Informationen zu Preisen oder Rabatte nicht einsehen können.
So verwalten Sie Benutzergruppen und Benutzerrechte