Loading ...

Fullpage-Demo

für das REDAXO CMS

Screenshot REDAXO-Backend

Über diese Demo

Die Fullpage-Demo für REDAXO demonstriert eine sogenannte Onepage-Website oder auch Onepager.

Alle Inhalte werden auf einer Webseite in Fullpage-Slides dargestellt und beim scrollen wird direkt zum nächsten Slide gescrollt.

Die Inhalte werden aus den Artikeln der Kategorien zu den einzelnen Slides der Website zusammengesetzt. Die Navigation wird automatisch generiert.

Screenshot Struktur der Fullpage-Demo

Addon-Einstellungen

Über die Addon-Einstellungen können einige Parameter für die optische Darstellung und Funktionalität der Webseite geändert werden.

zum Beispiel ...

  • Theme und Logo
  • Scrollverhalten der Website
  • zusätzliche Navigationen (Navi-Dots)
  • Scrollgeschwindigkeit usw.
Screenshot Addon-Einstellungen

Mit dem Addon werden automatisch vier verschiedene Themes ausgeliefert.

Sie unterscheiden sich durch unterschiedliche CSS-Definitionen, Bilder und JavaScript-Effekte.

Die Themes können als Basis für ein eigenes Theme verwendet werden.

Artikel / Kategorien

Die Root-Kategorien und ihre Startartikel werden automatisch als Slides der Webseite zusammengesetzt.

Die Namen der Kategorien werden für die automatisch generierte Navigation verwendet.

Kategorien können über die Metadaten aus der Navigation ausgeblendet werden.

Screenshot Kategorie Metainfos

Sind mehrere Artikel in einer Kategorie vorhanden werden diese automatisch als horizontale Slides ausgegeben.

Über die Addon-Einstellungen können auch Unterkategorien und ihre Artikel als horizontale Slides ausgegeben werden.

Inhaltselemente

Screenshot Module

Die Fullpage-Demo bringt einige Basis-Module für die Inhalte mit.

  • Headline
  • Text mit Bild (1-3 Spalten)
  • Zentrierter Text (1 - 3 Spalten)
  • Bild in voller Größe
  • Bildergalerie
  • Video
  • Scrolldown/Scrollup-Arrow
  • Download

Informationen zur Fullpage-Demo

Die Fullpage-Demo für REDAXO ist völlig frei verwendbar, sowohl für private als auch für kommerzielle Projekte!

Addon und Themes von Andreas Eberhard https://aesoft.de
zu finden bei github https://github.com/FriendsOfREDAXO/demo_fullpage
für FriendsOfREDAXO https://friendsofredaxo.github.io/info

Bugs und Anregungen zur Demo bitte direkt auf github melden
https://github.com/FriendsOfREDAXO/demo_fullpage/issues

Vielen Dank an:
Jan Kristinus, Thomas Blum, Gregor Harlan, Peter Bickel, Dirk Schürjohann, FriendsOfREDAXO ...

Testseite

Hier noch eine Testseite mit horizontalen Slides. Alle Artikel dieser Kategorie werden als eigene Slides ausgegeben.
Die Artikel der Unterkategorien werden je nach Addon-Einstellung auch als horizontale Slides ausgegeben.

Für alle Slides wird automatisch das Hintergrundbild dieser Kategorie übernommen.
Für jeden einzelnen Slide können über die Meta-Daten folgende Werte angepasst werden:

  • Hintergrundfarbe
  • Hintergrundbild
  • Hintergrund-Video
Screenshot Struktur Testseite

Bildergalerie

Hintergrundvideo

Ein horizontaler Slide mit Hintergrundvideo.

Hintergrundvideos werden automatisch, ohne Ton und in Endlosschleife abgespielt.
Beim verlassen des Slides wird das Video gestoppt, beim anzeigen des Slides wieder automatisch gestartet.

Downloads

Dieser horizontale Slide hat über die Meta-Daten ein eigenes Hintergrundbild aus dem Medienpool!

Beispiele Textmodule

3x zentrierter Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Beispiele Textmodule

1x zentrierter Text

Dieser horizontale Slide hat eine eigene Hintergrundfarbe in den Meta-Daten!

2x zentrierter Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Beispiele UIkit-Elemente

uk-background-default

uk-background-muted

uk-background-primary

uk-background-secondary

Beispiele UIkit-Elemente

uk-card-hover

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

uk-card-default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

uk-card-primary

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

uk-card-secondary

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Sonstige Beispiele

Beispiele Content in der glightbox öffnen (class=lightboxcontent)

Interner Content Video aus dem Medienpool Friends Of REDAXO Community World Map

Video

REDAXO 5 really rocks!