Gestalten mit Design-Containern in Weblication®

16.11.2017

Weblication® bietet zahlreiche Design-Container zur Inhaltsgestaltung mit denen Sie als Redakteur, Designer oder Entwickler schnell und effizient Webseiten gestalten. Wir stellen Ihnen die wichtigsten Container für das Design und deren CSS-Only Darstellungsvarianten am Beispiel der BASE Classic vor:

Register-Container
Register-Container

Inhaltsbereich (mit weiteren Elementen befüllbar)

Dieser Inhaltscontainer erlaubt es dem Redakteur, Inhalte in einem eigenen Bereich besonders hervorzuheben. Er lässt sich mit beliebigen Inhaltselementen befüllen, deren Breiten über das CSS-Rendering automatisch angepasst werden. Falls es mehrere Layoutvarianten gibt, kann der Redakteur diese auswählen und so unterschiedlich gestaltete Container einbauen.

Einblender / Layer

Mit diesem Strukturelement kann der Redakteur Inhaltselemente an beliebiger Stelle beim Überfahren mit der Maus einblenden lassen. Der beim Überfahren eingeblendete Layer kann mit beliebigen Elementen gefüllt werden. Auch die zum Aktivieren des Layers überfahrbaren Elemente lassen sich frei definieren. Wie der Layer eingeblendet wird, lässt sich frei über CSS definieren.

Verfügbare CSS-Only Darstellungsvarianten:

  • Von oben überlappen
  • Von unten überlappen
  • Nach links ausfahren
  • Nach rechts ausfahren
  • Als Sprechblase darüber anzeigen
  • Bei Klick nach unten ausfahren
  • Horizontal rotierend
  • Vertikal rotierend
  • Von oben einklappen
  • Von unten einklappen
  • Mit Schaltfläche "Mehr anzeigen"
  • Mit Link "Mehr lesen"

Inhaltsbox (mit weiteren Elementen befüllbar)

Dieser Inhaltscontainer erlaubt es dem Redakteur, Inhalte in einer Box besonders hervorzuheben. Er lässt sich mit beliebigen Inhaltselementen befüllen, deren Breiten über das CSS-Rendering automatisch angepasst werden. Falls es mehrere Layoutvarianten gibt, kann der Redakteur diese auswählen und so unterschiedlich gestaltete Container einbauen. Boxen können sowohl in mehrspaltigen Containern vorkommen, als auch mehrspaltige Container beinhalten.

Verfügbare CSS-Only Darstellungsvarianten:

  • Hervorgehoben
  • Eingerahmt
  • Mit Schatten
  • Halbtransparent
  • Inline-Box Darstellung mit Abstand und weißem Hintergrund
  • 100% breit schmaler Inhalt
  • Vertikal scrollbar mit fester Höhe
  • Fest definiertes Hintergrundbild
  • Auswählbares Hintergrundbild
  • Eingerahmt mit Hintergrundbild, Mouseover-Bild und Link
  • Bild und Text rechts oder links, Mouseover-Bild und Link
  • Hintergrundbild und Text rechts oder links, Mouseover-Bild und Link
  • Eingerahmt mit fixiertem Hintergrundbild
  • Bild oben 100% mit Inhalt
  • Sprechblase
  • Überschrift (erste enthaltene Überschrift oben anzeigen)
  • Überschrift (erste enthaltene Überschrift oben links anzeigen)
  • Überschrift (erste enthaltene Überschrift oben rechts anzeigen)
  • Vergrößerbar, Aufklapper rechts
  • Vergrößerbar, Aufklapper mittig
  • Vergrößerbar, Aufklapper mittig darüber minimiert
  • Vergrößerbar, Aufklapper mittig darunter minimiert
  • Vergrößerbar, Aufklapper rechts nur Text
  • Vergrößerbar, Aufklapper mittig nur Text
  • Laufschrift von rechts
  • Einblenden, wenn im sichtbaren Bereich
  • Einfahren von rechts, wenn im sichtbaren Bereich
  • Einfahren von links, wenn im sichtbaren Bereich
  • Einblenden mit Vergrößerungseffekt, wenn im sichtbaren Bereich
  • Parallax Hintergrundbild
  • Parallax Inhalt
  • Fixe Position am Rand des Fensters
  • Fixe Position neben dem Inhalt
  • Neutral mit Hintergrundvideo

Inhaltscontainer mit Akkordeon Effekt

Dieser Inhaltscontainer erlaubt es dem Redakteur, mehrere Inhalte über einen Akkordeon Effekt darstellen zu können. Optional kann ein Container beim Laden bereits geöffnet werden. Es ist einstellbar, ob alle Container zugeklappt werden können und ob beim Öffnen die individuellen Höhen der jeweiligen Inhaltsbereiche berücksichtigt werden sollen. Auf Wunsch kann das zuletzt geöffnete Tab gemerkt werden, um es beim Neuladen wieder zu öffnen. Einzelne Tabs lassen sich über Anker direkt anspringen und stehen in der Maske eines Linkelementes automatisch zur Auswahl bereit.

Verfügbare CSS-Only Darstellungsvarianten:

  • Eingerahmt
  • Neutral
  • Minimal
  • Eingerückt
  • Mit Icons

Inhaltscontainer mit Registerlaschen

Dieser Inhaltscontainer erlaubt es, mehrere Inhalte über Register darzustellen. Ein Register besteht aus einer Registerlasche und einem mit Inhaltselementen befüllbaren Container. Das geöffnete Register lässt sich einstellen. Je nach Konfiguration kann der Redakteur zwischen mehreren Darstellungsvarianten wählen. Es ist einstellbar, ob das zuletzt geöffnete Register beim erneuten Laden wieder ausgewählt werden soll.

Verfügbare CSS-Only Darstellungsvarianten:

  • Eingerahmt
  • Neutral
  • Schaltflächen
  • Schaltflächen mittig
  • Volle Breite eingerahmt
  • Schaltflächen mittig darunter
  • Schaltknöpfe mittig darunter
  • Laschen mit Abstände
  • Laschen mit Abstände und Schatten
  • Laschen abgerundet mit Abstände
  • Laschen abgerundet mit Abstände und Schatten
  • Register links
  • Register links mit Titel
  • Register links mit Titel links
  • Register links 100% hoch
  • Balken mittig

Layout-Container

Mit diesem Strukturelement kann der Redakteur Inhaltselemente ausrichten und in der Breite anpassen. Der Container kann mit beliebigen Elementen gefüllt werden. Diese orientieren sich dann an der Ausrichtung und der Breite des umschließenden Layout-Containers. Da die auswählbaren Breiten der einsetzbaren Layout-Container in der Projektkonfiguration definiert werden, sind die gestalterischen Restriktionen beliebig festlegbar.

Verfügbare CSS-Only Darstellungsvarianten:

  • Halbe Breite links ausgerichtet
  • Halbe Breite rechts ausgerichtet
  • Halbe Breite zentriert
  • Breite des Kopfbereichs
  • Bleibt beim Scrollen oben kleben
  • Neutral mit ID versehbar
  • Neutral mit beliebiger CSS-Klasse versehbar
  • Neutral mit auswählbarer CSS-Klasse

Dieser Link-Container erlaubt es dem Redakteur, Inhalte zu verlinken. Er lässt sich mit Inhaltselementen befüllen, die dann auch automatisch verlinkt sind. Neben dem Link können auch ein Linktitel und das Linkziel definiert werden. Der Linktitel kann Wahlweise als Titel der Fancybox genutzt werden.

Mehrspaltiger Inhaltscontainer - Spaltenkombinationen

Dieser Inhaltscontainer erlaubt es, mehrere Inhalte über Register darzustellen. Ein Register besteht aus einer Registerlasche und einem mit Inhaltselementen befüllbaren Container. Das geöffnete Register lässt sich einstellen. Je nach Konfiguration kann der Redakteur zwischen mehreren Darstellungsvarianten wählen. Es ist einstellbar, ob das zuletzt geöffnete Register beim erneuten Laden wieder ausgewählt werden soll.

Verfügbare CSS-Only Darstellungsvarianten:

  • Einspaltig
  • Zweispaltig 30 / 70
  • Zweispaltig 50 / 50
  • Zweispaltig 70 / 30
  • Dreispaltig 33 / 33 / 33
  • Dreispaltig 25 / 25 / 50
  • Dreispaltig 25 / 50 / 25
  • Dreispaltig 50 / 25 / 25
  • Vierspaltig 25 / 25 / 25 / 25
  • Fünfspaltig 20 / 20 / 20 / 20 / 20
  • Sechsspaltig 16 / 16 / 16 / 16 / 16 / 16


Mehrspaltiger Inhaltscontainer

Dieser Inhaltscontainer erlaubt es, mehrere Inhalte über Register darzustellen. Ein Register besteht aus einer Registerlasche und einem mit Inhaltselementen befüllbaren Container. Das geöffnete Register lässt sich einstellen. Je nach Konfiguration kann der Redakteur zwischen mehreren Darstellungsvarianten wählen. Es ist einstellbar, ob das zuletzt geöffnete Register beim erneuten Laden wieder ausgewählt werden soll.

Verfügbare CSS-Only Darstellungsvarianten:

  • Individuelle Spaltenhöhe
  • Einheitliche Spaltenhöhe
  • Trennstriche, individuelle Spaltenhöhe
  • Trennstriche, einheitliche Spaltenhöhe