CMSimple - Forum

Hallo,

man muss ja nicht jedem Trend folgen, aber ich treffe zunehmend auf One Page Seiten, also Internetseiten, bei denen alles auf einer Seite stattfindet und das ganze mit einer Internen Navigation verbunden wird. Gerne auch mit smooth scrolling und langsam einblendenden scroll-to-top Buttons, wenn man nach unten scrollt.

Also habe ich mal drüber nachgedacht, und für CMSimple eine ganz einfache Lösung gefunden:

Navigationsmenü weglassen
CMSimple Seiten auf der Startseite per newsbox() einbinden
spezielles OnePage Template + zweites Template für die Bearbeitung der einzelnen Seiten
ein JavaScript sorgt für smooth scrolling und das ein-und ausblenden des scroll-to-top Buttons, übrigens ohne jQuery

CMSimple wird auf 1 Menulevel konfiguriert, so dass man auf den Inhaltsseiten h2 verwenden kann. Dazu noch eine spezielle init-Datei für den Editor, und schon ist die Bearbeitung der auf der Startseite eingebundenen Einzelseiten problemlos und komfortabel.

Für diese Lösung ist kein extra Plugin notwendig.

Nachteil: Ein wenig im Quelltext arbeiten sollte man schon können, um den Newsboxen auf der Startseite die IDs und Klassen zuweisen zu können und noch ein <div> ... </div> drumlegen zu können. Das macht die Gestaltung der einzelnen Abschnitte der Seite möglich. Und die Navigation muss im Template angepasst werden. Und ein paar CSS Kentnisse sind auch von Vorteil.

Aber das alles muss eigentlich nur der Webmaster können, solange an der Struktur der Seite nichts geändert wird.

Demo: http://www.ge-webdesign.de/onepage/

Mich würde vor allem interessieren, ob es Probleme mit dem somooth scrolling auf Smartphones gibt, wenn ja: welches Gerät, welches Betriebssystem und welcher Browser.

Bei mir klappt es auf allen PCs und Notebooks mit Windows 8.1 und auf iPad mit Safari. Auf meinem (zugegeben uralten) Samsung Note mit Android 4.1.2 und Standard Browser klappt zwar das scrolling (Ziel wird gefunden) - aber nicht smooth,

Gert

Hallo Gert

Wir haben die Demoseite mit iPad (iOS 9.31), Samsung Galaxy 5S Smartphone mit Android (V5.11), iMac OSX (aktuellste Version), PC mit Win10: Firefox (aktuellste Version), Microsoft Edge (aktuellste Version) getestet. Hat alles bestens geklappt.

Vielen Dank für deine immer wieder tolle Arbeit!

Herzliche Grüsse aus der winterlichen Schweiz

Susanne + Beat

Hallo Ihr Zwei,

auf Euch ist wie immer Verlass - vielen Dank fürs testen

Ihr habt ja richtig viele Systeme getestet. Ich habe inzwischen auch mit einem moderneren Androiden testen können, und es liegt tatsächlich an meinem alten Android. Bei meiner Tochter und meiner Frau klappt es mit dem smooth scrolling, die haben allerdings auch andere Browser auf ihren Android Smartphones.

Inzwischen habe ich mich doch entschlossen, das ganze mittels eines OnePage Plugins etwas komfortabler zu machen, vor allem im Backend.

Die Demo ist inzwischen auch besser geworden, da kann man jetzt sehen, wie die einzelnen Bereiche individuell gestaltet werden können, und auch das Codebeispiel ist dank der per Plugin bereitgestellten Funktion jetzt viel übersichlicher:

http://www.ge-webdesign.de/onepage/?Home#Home

Bei uns war es heute fast frühlingshaft, nur etwas zu kalt (max. 10 grdC), aber überwiegend sonnig, naja, wird ja nun bald Mai,

Grüsse aus Berlin - Gert

1A @ Gert. Vor allem, wie die Unterseiten eingelesen werden (Stichwort Datenschutzerklärung als Beispiel im Demo). TOP!

Das Template sammelt alle sichtbaren CMSimple Seiten ein und zeigt sie auf der Startseite an. Ich empfehle, auf OnePage Websites ausschliesslich mit h1 Seiten zu arbeiten, da man sonst schnell den Überblick verliert.

Richtig klasse wäre es doch demgemäß, wenn das Template nur die H1 Überschriften einsammeln würde (was ggf. auch möglich ist, ohne die ganze Content Datei als Array einzulesen?) Dann müsste man h2 und h3 Überschriften nicht verstecken und könnte auf diese als Unterseiten eines OnePage-Bereichs verlinken (wie im Demo die Datenschutzerklärung, wobei die jetzt keine Unterseite ist).

Worauf ich hinaus will: Hätte man dann für einen H1 Bereich drei bis vier H2-Unterseiten, könnte man auf diese verlinken. Auf den H2 Seiten könnte man dann im Content das Submenu einbinden, das ja dann angezeigt wird, weil man die H2-Seiten nicht verstecken muss, um zu vermeiden, dass sie auf der OnePage-Startseite eingelesen werden. Pro Bereich könnte man dann ein kleines Content-Karrussel aufbauen.

Mit ein bisschen HTML und CSS könnte man dann die tollsten Sachen machen.

Aber keine Ahnung ob dieser Lösungsweg in der Umsetzung kompliziert ist. Es soll ja einfach bleiben....

Vielen Grüße
provide-de

provide-de wrote:Dann müsste man h2 und h3 Überschriften nicht verstecken und könnte auf diese als Unterseiten eines OnePage-Bereichs verlinken

Der Onepager ist eher dazu gedacht, CMSimple auf 1 Menulevel zu konfigurieren, so dass man auf den h1 Seiten h2 verwenden kann, ohne eine neue (Unter-)Seite zu erzeugen. Das scheint für einige Semantiker furchtbar wichtig zu sein

Aber wenn Du nur h1 Seiten einsammeln willst, dann ist das kein Problem. Du musst halt an 2 Stellen (Menü und Inhalt) die entsprechende Bedingung setzen in der template.htm.

Menü:

Code: Select all

<!-- OnePage Menu -->

<?php if($adm && !$edit) echo '<div class="tplge_onePageMenu">OnePage Anchors Menu</div>';?>

<?php 
if(!$edit)
{
    echo '
<ul>';

    foreach($hc as $page)
    {
        if($l[$page] == '1')   // wenn menulevel der Seite == 1
        {
            echo '
<li><a href="./#cmsimpleOnePage' . ($page+1) . '">' . $h[$page] . '</a></li>
';
        }
    }

    if($cf['mailform']['email'] != '')echo '<li><a href="./?mailform">' . $tx['menu']['mailform'] . '</a></li>';

    echo '</ul>' . "\n\n";
}
?>

<!-- END of OnePage Menu -->

Inhalt:

Code: Select all

<?php
if(!($adm && $edit) && !$su && !trim($o))
{
    foreach($hc as $page)
    {
        if($l[$page] == '1')  // wenn menulevel der Seite == 1
        {
        echo '
<div id="cmsimpleOnePage' . ($page+1) . '" class="tplge_page' . ($page+1) . '">
<div class="cmsimple_onepage_inner">' . newsbox($h[$page]) . '</div>
</div>
';
        }
    }
}
else 
{
    echo '
<div class="cmsimple_onepage_inner">' . content() . '</div>
';
}
?>

OnePage sammelt jetzt nur noch h1 Seiten ein, für Inhalt und OnePage Menü. Das ist eigentlich ganz sinnvoll, da muss man den Rest (h2 und h3) nicht verstecken, vielen Dank für die Idee.

Jetzt kannst Du h2- und h3 Seiten anlegen soviel Du willst, Du kannst sie verlinken wie Du willst und submenu() zeigt sie auch an.

Nur "OnePage Template" sollte das dann nicht mehr heissen

Gert

Du bist einfach Gold wert! Aber komliziert wars ja nicht.

Ich habe selber rumprobiert. Mir war klar, dass man es lösen kann, aber da fehlen einfach die Programmierkenntnisse...

Genau so ist es perfekt, zumindest für meine Zwecke und vielleicht kanns wer anders auch brauchen...

Der Süden der Republik ist wunschlos glücklich. Geniales Plugin bzw. Template!

Vielen Dank
provide-de

Der Onepager ist eher dazu gedacht, CMSimple auf 1 Menulevel zu konfigurieren, so dass man auf den h1 Seiten h2 verwenden kann, ohne eine neue (Unter-)Seite zu erzeugen. Das scheint für einige Semantiker furchtbar wichtig zu sein

Verstehe. Das ist ggf. auf der Startseite noch von Bedeutung. Weniger aber auf Content oder Blog Seiten unterer Ebenen. Da zählt die Qualität des Inhalt, sonst so gut wie nichts. So zumindest meine Erfahrungen. Und auf der Startseite kann man das ja dann hart coden, wenn man es will oder glaubt zu brauchen.

Das ist ja das Schöne an diesem CMS.

CMSimple - Forum

CMSimple OnePager Demo

CMSimple OnePager Demo

Re: CMSimple OnePager Demo

Re: CMSimple OnePager Demo

Re: CMSimple OnePager Demo

Re: CMSimple OnePager Demo

Re: CMSimple OnePager Demo

Re: CMSimple OnePager Demo

Re: CMSimple OnePager Demo