Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

WordPress für Designer: Themes und Layout-Werkzeuge

One-Pager / Landing Page Navigation

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Immer häufiger kommen Landing Pages oder sogenannte One-Pager zum Einsatz. Daher zeigt der Trainer in diesem Video, wie eine Seite und deren Navigation zu einem solchen One-Pager umgebaut werden können.

Transkript

Wir wollen uns nun anschauen, wie man in Cornerstone einen Onepager erzeugt, oder, manche Leute sagen dazu auch "Landingpage". Eine Seite, die aus einer langen Seite besteht und wenn man oben auf das Menü, auf den entsprechenden Punkt klickt, dann scrollt man zu der Seite, statt zu der Seite zu springen über einen Hyperlink. Wie das funktioniert, möchte ich jetzt demonstrieren. Dazu gehen wir in Cornerstone auf unsere Homepage, und müssen jetzt hier die Seite entsprechend editieren. An und für sich sieht unsere Seite schon aus wie ein Onepager. Wir haben hier sehr viele Inhalte und sehr viele Informationen auf der Startseite hier bereits vorhanden. Ja, wie machen wir das jetzt, dass man auf "Über Uns" zum Beispiel klickt, und nicht zur "Über Uns"-Seite gelangt, sondern hier dann entsprechend nach unten scrollt? Nun, dazu müssen wir in dem Fall erst einmal ein Menü anlegen. Das heißt, wir gehen hier in die Settings, und zwar in den Customizer. Und im Customizer gehen wir hier in die Menüs. Und wir erzeugen uns jetzt ein weiteres Menü. Wir können das vorhandene überarbeiten, aber das ist später vielleicht zum Nachteil, wenn wir vielleicht wieder das normale Menü verwenden wollen. Ich erzeuge mir also jetz hier ein neues Menü und nenne das Menü "OnePager" und erzeuge das Menü. Jetzt kommen die Einträge. So, als Eintrag wähle ich hier in dem Fall "Links" aus. So, und als erstes kommt einmal unser "Home". Die URL fängt in dem Fall mit einer Raute an, und ich schreibe jetzt auch alles klein. Und hier kommt jetzt "Home" hinein. So, und ich sage dann: "Zum Menü hinzufügen". Und weiter geht es. Wir haben als nächstes die "About"-Page. Und hier ist es dann in dem Fall "Über Uns". Immer wie gesagt die Raute, das ist die ID, womit wir später den Bereich ansteuern werden. Dann haben wir als nächstes "#produkte". Auch das fügen wir zum Menü hinzu. Dann, nächster Eintrag ist "#preis". "Preisliste". Und zu guter Letzt haben wir noch "#kontakt". So, und somit wären wir mit dem Menü hier an der Stelle fertig. Wir können auch sagen, dass dieses dann das Hauptmenü später werden soll. Als nächstes klicken wir hier oben hin, zum Speichern und Publizieren. Dann können wir das Ganze schließen, um wieder zurück zu Cornerstone zu gelangen. Und hier wählen wir uns die Sektion aus, zu der wir navigieren wollen. Das heißt, die obere hier, das soll jetzt mein "Home" sein. Dazu gehe ich hier zu "ID" und tippe hier einfach "home" hinein. Dann soll dieser Bereich hier vielleicht mein "Über Uns" sein. Dazu gehe ich in die "ID" und schreibe hier "about" hinein. Das hier sind unsere Produkte. Eine Preisliste haben wir auch irgendwo. Hier, das ist unsere Preisliste. Und zu guter Letzt "Kontakt", darf auch nicht fehlen. Hier ist unser Kontakt. Wichtig ist es, jetzt natürlich das Ganze zu speichern. Wenn es gespeichert ist, müssen wir noch eine Einstellung treffen. Wir müssen nämlich jetzt sagen, dass es sich hierbei jetzt um ein Onepager-Menü handeln soll. Und dazu müssen wir in die "X Settings". Wenn wir hier ein bisschen herunterscrollen, dann haben wir hier "One Page Navigation". Die ist deaktiviert derzeit. Klar. Und an der Stelle haben wir jetzt unsere Menüs zur Auswahl. Und ich nehme jetzt den "OnePager". Hier kriegen wir den Hinweis, dass das Ganze jetzt funktioniert hat. Ja, und jetzt schauen wir uns das Ganze einmal im Browser an. Und wenn ich alles richtig gemacht habe, dann kann ich jetzt hier auf "Über Uns" klicken und scrolle zu "Über Uns", "Produkte", "Preisliste", "Kontakt", und ich kann hier natürlich auch zu "Home" klicken, um noch viel weitere Wege hier zurückzulegen. Ja, also wie wir gesehen haben, ist es sehr einfach, in Cornerstone einen Onepager zu erzeugen. Man nimmt sich einfach die Startseite, erzeugt ein neues Menü. Bei dem Menü vergibt man statt einer URL eine "ID", also Raute gefolgt von dem Namen, dann gibt man den Sektionen Namen, indem man die IDs der Sektionen auswählt, und ihnen genau die gleichen Namen gibt, die man hier als ID vergeben hat. Und dann geht man in die "X Settings" und aktiviert dort das entsprechende Menü als Onepager-Menü.

WordPress für Designer: Themes und Layout-Werkzeuge

Erstellen Sie Ihre Wordpress-Website mit X-Themes und Cornerstone – ganz ohne Quellcode

5 Std. 8 min (56 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!