Single Page mit Contao erstellen

[mbartsch]

Hallo,

ich möchte gerne eine Website ähnlich dieser erstellen:

http://www.catalytic-design.com/

Hat jemand mit Contao sowas schon einmal umgesetzt? Ich stehe gerade auf dem Schlauch, wie ich das lösen könnte.

Ich habe ein paar JQuery Plugins gefunden:
http://demos.flesler.com/jquery/scrollTo/
http://imakewebthings.com/jquery-waypoints/

Weiß aber nicht, ob es die richtigen sind. Gibt´s auch was für MooTools bzw. eine Extension für Contao? Und wie kann ich das mit Contao administrieren?
Ich erstelle dann nur ein Inhaltselement im Backend und setzte dann Anker und lasse vom Menü auf diese Anker springen?!?

Vielen Dank im voraus für etwaige Hilfestellungen

[psren]

Für Mootools ist das ganz einfach.

Geht wie deine Beispielseite aber nur nach unten und nicht wie das jQ-Script auch nach rechts.

[mbartsch]

Danke für die schnelle Antwort!
Das mit Mootools sieht super aus! Wie mache ich das aber in Contao? Lege ich dann nur eine Seite in der Seitenstruktur an und für jeden Abschnitt zu dem gescrollt werden soll dann ein CE_Element, in welchem ich via HTML-Quellcode einen Anker hinterlege?

[psren]

Da gibt es dann auchnoch das Frontend-Modul "Artikelliste"

[melzebub]

Hi,
ich habs auch so gemacht: www.stefanmelz.de

Ich habe einen Artikel angelegt, in dem ich die Navigation eingebaut habe. Dann den smoothscroll auf den a tag der Navigation und die anderen Artikel die jeweils passende id zum anker. fertig.

Und ja, nur eine Seite.

[ciaobello]

Onepage nennt sich das und man findet es auch unter dem Stichwort im Forum.

Hier gehts zur Suche ... Contao Google-Suche

[Tim G]

Ich habe im Rahmen eines Auftrags ein Modul erstellt "OnePageWebsite", was one page Seiten mit Hilfe der Seitenstruktur erstellt.
Eingebunden wird es wie das Navigationsmodul. Es werden Seitenlayouts und Artikel beachtet.

Liegt auf GitHub:
https://github.com/timgatzky

Ein extra Navigations Modul ist auch bei, in Kombination mit smoothscroll.

Kleiner Hinweis noch:
Der gesamte Aufbau kann im Template geändert werden. Man kann also auch seine fe_page nachbauen. Anstelle von id wie #wrapper #container usw. werden im Modul .wrapper .container pro Seite genutzt.

Für vertikales Scrollen ist es vielleicht etwas overkill.
Grundidee war eine horizontale OnePage Seite mit vertikalen Unterseiten. Vergleichbar eben mit einem horizontalen Menü, mit vertikalen Untermenüs. Nur mit Seiten










Sent from my iphone using Tapatalk

[mbartsch]

Super! Danke euch allen für die Infos! Damit kann ich arbeiten!

[ciaobello]

Ich habe im Rahmen eines Auftrags ein Modul erstellt "OnePageWebsite", was one page Seiten mit Hilfe der Seitenstruktur erstellt.
Eingebunden wird es wie das Navigationsmodul. Es werden Seitenlayouts und Artikel beachtet.

Liegt auf GitHub:
https://github.com/timgatzky

Ein extra Navigations Modul ist auch bei, in Kombination mit smoothscroll.

Kleiner Hinweis noch:
Der gesamte Aufbau kann im Template geändert werden. Man kann also auch seine fe_page nachbauen. Anstelle von id wie #wrapper #container usw. werden im Modul .wrapper .container pro Seite genutzt.

Für vertikales Scrollen ist es vielleicht etwas overkill.
Grundidee war eine horizontale OnePage Seite mit vertikalen Unterseiten. Vergleichbar eben mit einem horizontalen Menü, mit vertikalen Untermenüs. Nur mit Seiten

Hallo TimG,
Kann es Sein das die Erweiterung mit 2.11.5 Probleme macht?

Ich habe die Erweiterung mal testen wollen. Installieren ging problemlos. Habe dann eine Theme erstellt mit den 3 Modulen (Navigationsmenu, Normale Struktur und individuelle Struktur). Bei der Normalen Struktur gibt es die Option der Referenzseite welche ich die Index Ausgewählt habe. Diese im SeitenLayout eingebunden und ich dachte das wars?

Seitenstruktur:
Index
|--ich
|--du
|--er
|--sie


Index sollte die Eigentliche Onepage sein.
Binde ich nun die Module noch als Artikel in die Indexseite bleibt die Seite weiss.... Nehme ich die Module wieder aus dem Artikel ... bleibt die Seite immer noch weiss ...

NetworkError: 500 Internal Server Error - http://localhost/vhosts/onepage/"

Ich glaube irgendwas mach ich ganz falsch ??

Gibt es vielleicht eine Demoseite wo man sehen könnte wie der Quellcode aussehen muss ?

ciaobello

[Tim G]

Benutz mal eine richtige Referenzseite für die Normale Struktur.
Die root Seite wird als Seitentyp ignoriert und dann scheint dem Modul eine richtige Seite als Wurzelseite zu fehlen.

Also:
- Root
-- Ref. Seite: OnePage
--- Unterseite 1
--- Unterseite 2
--- usw.

Und schalte mal Fehlermeldungen an in den Einstellungen.

[ciaobello]

Sorry ... ich habe die Rootpage unterschlagen... die war natürlich schon vorhanden.

Onepage (root-seite)
|- Index (ref. seite)
|----ich
|----du
|----er
|----sie

Und schalte mal Fehlermeldungen an in den Einstellungen.

Das war ein guter tipp :

• Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 261904 bytes) in ...\vhosts\onepage\system\libraries\Controller.php on line 141
• 141 // Also check for .tpl files (backwards compatibility)
  142 $strFile = $strPath . '/' . $strTemplate . '.tpl';

Meine Einstellung:
Memory limit 150M Recommended setting is 16M or greater.
Upload maximum filesize 100M Recommended setting is 8M or greater.

Deaktiviere ich die onepage Erweiterung in den Einstellungen zeigt es mir eine leere Seite an mit normalem Quelltext.

Für welche Contao Version wurde die Erweiterung geschrieben ?

[Tim G]

Die Root Page geht nicht als Wurzelseite für die OnePage!

Benutze einfach eine Normale Seite als Referenzseite und baue ab dort deine OnePage.

-- Ref. Seite: OnePage (diese Seite in den Modul-Einstellungen als Referenzseite festlegen)
--- Unterseite 1
---- Unterseite 1.1
--- Unterseite 2
--- usw.

[Merlin]

habe auch dieses problem

Fatal error:  Allowed memory size of 134217728 bytes exhausted (tried to allocate 523800 bytes) in /***/-d-e-m-o-/system/libraries/Controller.php on line 141 

habe den aufbau so gemacht wie es hier auf den screens zu sehen ist ...


mittlerweile gelöst zu mindesten für mich .... ich habe die Module in die Artikel der Referenzseite eingebunden .. ( vielleicht wäre es besser aus den Modulen lieber Content-Elemente zu machen)

[Tim G]

Das Modul muss nur auf die Referenzseite! Die Seite ab der gebaut wird.
Wichtig ist, dass das Modul nicht "über sich selbst" läuft, weil dann entsteht eine Schleife.

Wenn Individuelle Struktur, dann ist die Seite egal.



Sent from my iphone using Tapatalk

[Macabelle]

Hallo TimG,

erst einmal vielen Dank für das Modul! Leider bringe ich es nicht zum Laufen. Ich erhalten die gleiche Fehlermeldung wie meine beiden Mitstreiter...

Ich habe mich an deinen Screenshot gehalten und folgendes gemacht:

- Startpunkt einer Website erstellt
-- Normale Struktur (Reguläre Seite)
--- Seite 1 (Reguläre Seite)
--- Seite 2 (Reguläre Seite)
--- Seite 3 (Reguläre Seite)

Dann habe ich ein Modul erstellt "OnePageWebsite - Normale Struktur" und dieses in ein Layout 1 eingebunden (Modul in der Kopfzeile). Layout 1 habe ich der Seite "Normale Struktur" zugewiesen.

Dann Layout [Standardlayout] erstellt, was ja automatisch den drei einzelnen Seiten zugewiesen wird.

Leider erhalte ich trotzdem die Fehlermeldung und weiß nicht weiter. Kannst du vielleicht noch einmal genauer erklären, wie mit deinem Modul umzugehen ist? Anscheinend pack ich's nicht.

Herzlichen Dank!

[Merlin]

- Startpunkt einer Website erstellt
-- Normale Struktur (Reguläre Seite)
--- Seite 1 (Reguläre Seite)
--- Seite 2 (Reguläre Seite)
--- Seite 3 (Reguläre Seite)

Also ich habe es só gemacht (nach deiner Struktur)
-- Normale Struktur (Reguläre Seite) -> One-Page-Website: Navigationsmenü (article im Header) -> One-Page-Website: Normale Struktur (article im hauptbereich)


Hoffe ich konnt dir helfen ..

wollte ja eigentlich die "One-Page-Website: Individuelle Struktur" verwenden aber da bleibt meine Seite weiß und das menu zeigt mir alle seiten an ...

[Macabelle]

Ok, jetzt bin ich tatsächlich ein Stück weiter - herzlichen Dank!

Was mir noch nicht gelungen ist: in der Kopfzeile das Navigationsmenü anzeigen zu lassen.

Habe im Navigationsmodul selbst als Referenzmodul die "OnePageWebsite - Normale Struktur" gewählt, dann im Seitenlayout "Artikel - Kopfzeile gewählt", schließlich in der "Normale Struktur" Seite einen Artikel (Kopfzeile) angelegt und in diesen das OnePage Navigationsmodul eingebunden.

Es wird jedoch nichts in den Artikel hinein geladen:

<header id="header">
<div class="inside">

<div class="mod_article block" id="normale-struktur">

</div>
 
</div>
</header>

Weißt du noch mehr und verrätst es nicht?

Noch einmal vielen Dank!

[Tim G]

Also das Hauptmodul in die Kopfzeile legen hab ich nie probiert, weil es mir sinnlos erschien. Wäre zwar seltsam dass dann ein Schleifenfehler entstehen sollte, aber man weiss ja nie.

Dein Aufbau scheint richtig.
Einfach mal beide Module. Das Normale Struktur und die Navi dazu jeweils in einen Artikel, oder in zwei, einfach auf die Referenzseite. Die Module nicht im Seitenlayout einbinden etc. einfach per Artikel.
Ein Seitenlayout brauch man eigentlich nur um event. sich eine individuelle fe_page zu setzen, für eine one-page ist es nicht nötig auf den Unterseiten der Referenzseite das Modul zu haben (wir haben ja keine Unterseiten mehr, weil ja one-page)

[Merlin]

Also ich habe es genau so gemacht navi und normale Struktur in jeweils einen Artikel in der Referenz Seite ...


Die individuelle Struktur klappt aber nicht warum auch immer... Aber ist auch nicht wichtig glaub ich

Gesendet von meinem HTC Sensation Z710e

[Macabelle]

Also das Hauptmodul in die Kopfzeile legen hab ich nie probiert, weil es mir sinnlos erschien. Wäre zwar seltsam dass dann ein Schleifenfehler entstehen sollte, aber man weiss ja nie.

Dein Aufbau scheint richtig.
Einfach mal beide Module. Das Normale Struktur und die Navi dazu jeweils in einen Artikel, oder in zwei, einfach auf die Referenzseite. Die Module nicht im Seitenlayout einbinden etc. einfach per Artikel.
Ein Seitenlayout brauch man eigentlich nur um event. sich eine individuelle fe_page zu setzen, für eine one-page ist es nicht nötig auf den Unterseiten der Referenzseite das Modul zu haben (wir haben ja keine Unterseiten mehr, weil ja one-page)

Hallo TimG,

danke für deine Antwort! Jedoch habe ich es ja genau so gemacht - die beiden Module auf der Referenzseite in einen Artikel eingebunden. Trotzdem wird die <ul> nicht hinein geladen. Hast du vielleicht noch eine andere Idee?

Sehen kann man das sich im Aufbau befindliche Projekt derzeit hier:

http://nc-rockbuero-berlin.netadelic.de/

Danke und Gruß!

[Tim G]

Unten sieht gut aus. Die Seiten scheinen korrekt zu kommen.
Zeit mal die Einstellungen zu der Navigation. (sichtbar ist sie im BE, oder? )

Grüße aus B nach B

[Merlin]

Finde auch das es gut aussieht..

----
Gesendet von meinem HTC Sensation Z710e mit Tapatalk 2

[eyepe]

Hi,
ich habs auch so gemacht: www.stefanmelz.de

Ich habe einen Artikel angelegt, in dem ich die Navigation eingebaut habe. Dann den smoothscroll auf den a tag der Navigation und die anderen Artikel die jeweils passende id zum anker. fertig.

Und ja, nur eine Seite.

Hallo! Habe auch gerade ein Projekt bei dem ich diesen SmoothScroll Script verwenden möchten. Wie bei dir ist dort aber auch eine Navigation mit einer Höhe von 65px oben fixiert. Diese 65px überdecken bereits den Inhaltsbereich. Wie kann ich die vom "Scrollweg" bzg Ziel abziehen?

Dankesehr!

[psren]

Vielleicht gibtst du #main .inside einen Abstand nach oben von 65 Pixeln?

[kischd]

Hallo Macabelle,
konntest du mit der Erweiterung von Tim die Navigation umsetzen, dass diese auch noch im Header nach dem scrollen erscheint?

[Merlin]

ich habe das mit bei einem projekt mit der erweiterung von tim gemacht und den header einpack inner css "position: fixed;" gegeben so bleibt er immer oben ... und bei den eingefügten seiten einfach "padding-top: ??HEADERHÖHE??"

[Mike1410]

Ich habe im Rahmen eines Auftrags ein Modul erstellt "OnePageWebsite", was one page Seiten mit Hilfe der Seitenstruktur erstellt.
Eingebunden wird es wie das Navigationsmodul. Es werden Seitenlayouts und Artikel beachtet.

Liegt auf GitHub:
https://github.com/timgatzky

Ein extra Navigations Modul ist auch bei, in Kombination mit smoothscroll.

Kleiner Hinweis noch:
Der gesamte Aufbau kann im Template geändert werden. Man kann also auch seine fe_page nachbauen. Anstelle von id wie #wrapper #container usw. werden im Modul .wrapper .container pro Seite genutzt.

Für vertikales Scrollen ist es vielleicht etwas overkill.
Grundidee war eine horizontale OnePage Seite mit vertikalen Unterseiten. Vergleichbar eben mit einem horizontalen Menü, mit vertikalen Untermenüs. Nur mit Seiten

Sent from my iphone using Tapatalk

Leider mit mootools und nich jQuery