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 mit fullPage.js.

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.

Der On/Offline-Modus für Kategorien und Artikel wird berücksichtigt.

Inhaltselemente

Screenshot Module

Die Fullpage-Demo bringt einige Basis-Module als Beispiele 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

Hinweis: Die Textfelder unterstützen Markdown

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

Friends Of REDAXO

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

Fotos und Videos dieser Demo

Fotos für diese Demo:
https://www.pexels.com/search/coffee/
https://www.pexels.com/search/bike/
https://www.pexels.com/search/road/

Alle weiteren Fotos sind im Medienpool entsprechend beschrieben.

Videos:
Video by Matthias Groeneveld from Pexels https://www.pexels.com/video/5292753/
Video by Stefano Rinaldo from Pexels https://www.pexels.com/video/4913621/
Video by Deniz Bostanov from Pexels https://www.pexels.com/video/3345545/

Testseite

Hier noch eine Testseite mit horizontalen Slides. Alle Artikel dieser Kategorie werden als horizontale 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 Artikel-Meta-Daten folgende Werte angepasst werden:

  • Hintergrundfarbe
  • Hintergrundbild
  • Hintergrund-Video
Screenshot Struktur Testseite

Beispiel Bildergalerie

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

Beispiel Downloads

Für diesen horizontalen Slide ist über die Artikel-Meta-Daten ein eigenes Hintergrundbild aus dem Medienpool eingestellt!

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.

FriendsOfREDAXO

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

uk-text-muted
uk-text-primary
uk-text-secondary
uk-text-success
uk-text-warning
uk-text-danger

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Testseite mit Video

Testseite mit Hintergrundvideo

Beispiele Textmodule

1x zentrierter Text

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

2x zentrierter Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

REDAXO Community World Map

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 1

uk-background-default

uk-background-muted

uk-background-primary

uk-background-secondary

Beispiele UIkit-Elemente 2

uk-card-default

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

uk-card-hover

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.

UIkit Slideshow mit GLightbox

Sonstige Beispiele

Beispiel Video

FriendsOfREDAXO - TREX
REDAXO 5 really rocks!