Container Erweiterungen – FSE Modulbüro

Diese Erweiterungen sind für Bilder, Gruppen, Spalten oder Cover gebaut. Nähere Erklärung folgen in den Abschnitten

Schrägen

Gruppen lassen sich mit Schrägen im oberen und oder unteren Bereich ausgeben. Der Winkelgrad der Schräge lässt sich in 6 Schritten definieren.

Sinn macht dieser Effekt mit einer Gruppe, die eine Hintergrundfarbe hat und sich über die gesamte Breite erstreckt

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.

Zitat von Lorem Ipsum

Überlappung von Spalten

Spalten können sich nun einfach überlappen. Viel Spaß 🙂

Lorem Ipsum

Lorem ipsum dolor sit amet, consetetur sadipfscing elitr

Einblendeffekte

Wie auch bei Text-Erweiterungen lässt sich eine Gruppe in verschiedene Richtungen einblenden. Die Gruppe kann neben Text auch Bilder erhalten und so kann ein einblenden auf alles Mögliche angewendet werden.

Parallax Cover

Paralax Effekt in einem Cover-Bild.

Das Bild wird von Oben nach Unten schneller als der Scrollverlauf „verschoben“.

Parallax Effekt

Parallax einzelner Elemente

Der Block Gruppe oder einzelne Bilder lassen sich unterschiedlich schneller als der Scrollverlauf bewegen.

Als Beispiel werden 3 Elemente gezeigt, die in einer 3er Spalte liegen und unterschiedliche Bewegungsgeschwindigkeiten besitzen.

Geschw.: 1

Geschw.: 2

Geschw.: 3

Ladeanimation für Bilder

Wenn Sie merken, dass das Bild wird auf Grund eines hohen Speichervolumens zu langsam angezeigt, lässt sich eine kleine Ladeanimation mit verschwommenen Bild ausgeben. Ist das Bild fertig geladen, verschwindet die Animation und das Bild wird ordentlich dargestellt.

Gruppe mit Verlinkung

Eine Gruppe mit einem Link
(https://modulbuero.de)

Beispiel 2: Neue Gruppe mit Link

Ich sitze in einer verschachtelten Gruppe, ohne Link

Abstände

Blöcke haben feste Werte, die den Bodenabstand zum nächsten Element definieren.

Spalten, Gruppen und der letzte Absatz auf den eine Spalte, Block, Tabelle oder eine Liste folgt, haben den größten Abstand.

Bilder, Buttons oder Text haben einen kleineren Abstand, um den Lesefluss nicht zu beeinflussen.

Wenn ihr mit dem Abstand eines Blocks nicht einverstanden seid, dann könnt ihr diesen ändern indem ihr den Bodenabstand Text, Block oder keinen Auswählt.

Die WordPress-Eigene definition von Abständen lässt sich aber ebenfalls nutzen.

OpenStreetmap

Karte anzeigen?

Mit Klick auf den Button werden Daten von openstreetmap.org geladen.
Es gelten deren Datenschutzrichtlinien.

Es gibt neben den Standardfarben noch ein Graues, Dunkles, Sepia und Candy Layout. Auch bei der Markerfarbe kann zwischen 5 Farben gewählt werden.

Horizontales Scrollen

Es ist möglich, den Inhalt eines Containers Horizontal, als von einer Seite aus, statt von unten nach oben erscheinen zu lassen.

Die ordentlich zu realisieren ist nicht schwer, es sollten dennoch einige Parameter berücksichtigt werden.

Achtet beim Inhalt darauf, das er nicht zu lang wird.
Je länger der Inhalt umso schneller wird die vertikale Bewegung sein.
Gleiches gilt auch für einen kurzen Inhalt.
Wird durch das vertikale Anordnen die Breite des Containers nicht erreicht, wir eine Bewegung nicht erkennbar sein.

Testet die Bewegung vorab auch auf einem Smartphone.

Ein Absatz-Dummy-Text

Eine Gruppe

Ein Absatz-Dummy-Text

Eine Gruppe

Es folgt nur noch Dummytext

Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores Lorem ipsum dolores