Einfach . Flexibel . Sinnvoll
Redaxo
*
Worum geht's?
Prinzip des Onepagers
*
Die Links der Navigation führen nicht auf eigene Artikel, sondern scrollen als Sprungmarken zu unteren Seitenbereichen. Es gibt etliche Möglichkeiten, wie man so etwas in REDAXO aufbauen kann.
Fühlst Du Dich allein gelassen? Die Demo zeigt drei mögliche Wege … und übrigens: Dieses Modul hat auch noch einen Bildslider integriert …
Grundprinzip
Drei Wege
*
Nachfolgend findest Du die Links zu den drei Onepage-Demos. Die Module können in allen Varianten gleichermaßen eingesetzt werden.
Abschnitte als Module
Alle Inhalte befinden sich auf einem Redaxo-Artikel. Als “Trenner” zwischen den Segmenten dient ein Anker-Modul. Das erzeugt den Sprunganker ebenso wie den Navigationspunkt und markiert den Anfang eines Segments.
In dieser Demo finden sich kurze Erklärungen der Templates, Module und Funktionen.
Abschnitte als Artikel
Jedes Segment wird durch einen Artikel generiert. Der Hauptartikel bindet also die Inhalte aller Unterseiten ein. Die Navigation kann fast konventionell aufgebaut werden, die URLs führen lediglich zu Ankern.
Diese Demo ist eine kleine Beispiel-Website für eine Rock-Band.
*
Abschnitte als Kategorien
Dies ist eine Weiterentwicklung der Variante mit Artikeln. Wenn man stattdessen Kategorien verwendet, können diese Kategorien wiederum Artikel (oder Kategorien) haben, die weitere Inhalte innerhalb eines Segments ausliefern.
Diese Demo ist eine kleine Beispiel-Website für einen Reise-Journalisten.
Ausbau zur Multipage
Wenn man die Abschnitte durch Module aufbaut, ist es nur ein kleiner Schritt zur Ausbau in eine Multipage-Website. Letztlich muss nur die Navigation etwas umgeschrieben werden. Die Demo zeigt den Weg.
Diese Demo ist eine kleine Beispiel-Website für eine Web-Agentur.
Moment mal ...
... ich brauch' doch nur eine Demo!
*
Stimmt. Du hast die Qual der Wahl. Wenn Du diese Demo als Basis für eine eigene Website verwenden willst, dann suche Dir eines der drei Prinzipien aus, das Dir am besten erscheint.
Am besten ist es vermutlich, Du nutzt nur die Module und baust Dir Deine Website neu auf durch das Anlegen eigener Artikel. Willst Du jedoch lieber eine der Demos direkt für ein eigenes Projekt verwenden, so empfiehlt sich:
- die nicht benötigten Kategorien der anderen Demos löschen
- den Artikel Deiner gewählten Demo zum Startartikel machen, unter
System, Startartikel - dort auch sicherheitshalber den Cache löschen
- Und bevor Du ins Kanu steigst und Dich auf den Weg machst: Leg’ noch einen Scheit Holz nach.
Die unten aufgeführte AddOns werden bei der Installation der Demo automatisch herunter geladen und installiert
AddOns der Demo
Für die Text-Formatierung wird Textile verwendet, Befels-Referenzen hier oder hier. Textile ist in Redaxo standardmäßig vorhanden.
Das Markitup-AddOn fügt dem Textfeld eine Icon-Leiste hinzu, um Textile-Formatierungen leichter hinzufügen zu können.
Dan MBlock sind “Sub-Module”, also quasi Module in Modulen möglich. Das AddOn leistet unschätzbare Hilfe z.B. bei Funktionen wie Tabs, Akkordeons oder – wie konkret hier in diesem Modul – Kundenstimmen.
Das Developer-AddOn ermöglicht ein Datei-basiertes Editieren der Module und Templates. Auch wenn diese Funktion für die Demo eigentlich nicht zwingend nötig ist, sollte das Developer-AddOn in keiner REDAXO-Installation fehlen.
Das Customizer-Plugin ist im AddOn be_style zu finden. Damit ist es u.a. möglich, eine Syntax-Hervorhebung in den Modul- und Template-Eingabefeldern zu aktivieren. Also auch nicht zwingend für die Demo erforderich, aber praktisch :-)
Für diese Demo wurden eine CSS-Erweiterung für das Backend sowie ein Fragment in den Modulen verwendet. Üblicherweise würde man solche Dateien am besten im project-AddOn ablegen, aber hier lag es nahe, diese Komponenten direkt im Demo-AddOn selbst abzulegen. Dieses AddOn muss also installiert sein.
Was noch?
Natürlich gibt's noch mehr ...
*
Vollformatige Parallax-Fotos , Video, Social Links an verschiedenen Stellen, normale Navigation oder Offpage-Navigation mit Hamburger Icon, Bildergalerien, Modalboxen, Logos mit Zitaten, Profil-Fotos, …