Jimdo-Webinar: Deine Webseite als One-Pager

Jimdo Webinar Webseite als One-Pager

Deine Webseite als One-Pager

Für fortgeschrittenen Zuschauer zeigen wir in diesem Webinar, wie ihr mit Jimdo einen One-Pager erstellt.

Deine Webseite als One-Pager (für Fortgeschrittene)

Beschreibung:

Manchmal stimmen Redewendungen einfach. “Weniger ist mehr” zum Beispiel liegt derzeit voll im Trend – jedenfalls wenn wir über Webseiten sprechen! Denn so genannte One-Pager, also Webseiten mit nur einer einzigen Seite, sind gerade stark angesagt. Für unsere fortgeschrittenen Zuschauer zeigen wir in diesem Webinar, wie ihr mit Jimdo einen One-Pager erstellt. Also eine Webseite, die nur aus der Startseite besteht und dort alle Inhalte bereitstellt – einfach einseitig eben.

 

Die wichtigsten Schritte aus dem Webinar findet ihr unten auch zum Nachlesen.

Beachte:
Im Webinar siehst du zwei Varianten. Durch Variante 1 (eigenen festen Hintergrund hochladen) kann die mobile Ansicht durch die selbstprogrammierte One Page beeinträchtigt werden.
Variante 2 (Textanker in der Navigation über die "Externen Links") ist mobile nutzbar, braucht jedoch auch ein wenig eigene Programmierung im Head-Bereich. Es könnten weitere Programmierschritte nötig sein, um eine optimale One Page erstellen zu können.

Inhalte:

Wir zeigen euch in einfach verständlichen Schritten, wie ihr:

  • das richtige Design auswählt
  • alle unnötigen Inhalte entfernt
  • euren Hintergrund aufräumt und den einseitigen Hintergrund einstellt
  • Textanker erstellt und Inhalte platziert
  • die Navigation mit externen Links als Textankern
  • und die finalen Einstellungen hinterlegt.

 

Dauer des Webinars: ca. 30 Minuten

Hilfereiche Links aus dem Webinar:

  • Beispiel-Webseite:
    • http://one-pager-mit.jimdo.com (durch den festen Hintergrund ist diese Variante nicht für die mobile Ansicht optimiert)
    • http://ein-one-pager.jimdo.com/ (mit dieser Verwendung der Funktion "Externer Link" in der Navigation, kannst du deinen One-Pager auch auf mobilen Geräten verwenden)

Material für deinen One-Pager:

 

Lade dir hier einfache farbige Hintergründe herunter, um die Webseite wie im Webinar nachbauen zu können, oder sie farblich ähnlich zu gestalten. Außerdem findest du hier auch die wichtigsten HTML Code-Schnipsel. Im Webinar erkläre ich euch, wo ihr sie wann einsetzt. Bitte beachte, dass die Variante mit diesen Hintergründen nicht für die mobile Ansicht optimiert ist.

 

Passwort für PDF: J1md0-pdF

HTML / Head Schnipsel
Jimdo-One-Pager-Head-Bereich.pdf
Adobe Acrobat Dokument 49.3 KB

Blau
one_pager_background_blue.png
Portable Network Grafik Format 5.2 KB
Grün
one_pager_background_green.png
Portable Network Grafik Format 5.2 KB
Orange
one_pager_background_orange.png
Portable Network Grafik Format 5.2 KB
Pastell
one_pager_background_pale.png
Portable Network Grafik Format 5.2 KB

Hier sind noch einmal alle Schritte zum Nachlesen:

Die Erklärungen in diesem Text richten sich an Nutzer, die sich mit HTML und CSS bereits auskennen. Diese Anleitung ist nicht für mobile Geräte optimiert.

One-Pager sind auf das Wesentliche reduziert. Die Idee: Der Besucher sieht ohne weitere Klicks alle Inhalte der Webseite direkt auf der Startseite. Das kommt dem Leseverhalten des typischen Internetnutzers entgegen. Die meisten Menschen lesen Webseiten nämlich nicht Zeile für Zeile, sondern scrollen und “scannen” die Inhalte nach Stichworten.

One-Pager eignen sich beispielsweise für Webseiten von Cafés, Restaurants oder handwerklichen Betrieben – also besonders dann, wenn eine begrenzte Menge an Informationen fokussiert dargestellt werden soll. Für andere Konzepte sind Unterseiten oft praktischer, sorgen für Ordnung und mehr Platz. Was die beste Lösung für euch ist, entscheidet ihr daher natürlich selbst!


Schritt 1: Erstellt eine Webseite und wählt ein Design (unser Beispiel nutz Miami)

Für euren One-Pager erstellt ihr eine neue Jimdo-Seite, oder gestaltet direkt eure bestehende Webseite um. Wählt für euren One-Pager am besten ein schlichtes Design. Für unsere Beispiel-Webseite nutzen wir das Design “Miami”. Gut eignen würde sich alternativ auch “Cape Town”.

Schritt 2: Die Webseite aufräumen

Möchtet ihr eure bestehende Seite umbauen? Dann kann es ratsam sein, eure Unterseiten zunächst nur zu verstecken und auszuprobieren, ob euch das Konzept gefällt.

 

Zum Start heißt es nämlich: klar Schiff machen! Entfernt zunächst alle Unterseiten (außer die Startseite) und löscht sämtliche Inhalte. An dieser Stelle wählt am besten auch gleich einen neuen Seitentitel und ladet ein Logo hoch – oder ihr holt diesen Schritt später nach.

Schritt 3: Den Hintergrund vorbereiten

Als nächstes passt ihr den Hintergrund eurer Jimdo-Seite an:

  • Stellt unter Style die Option Detail Styling auf “aus”. Wählt als erstes Farbschema eine dunkle Farbe und rechts daneben als zweites Farbschema “transparent” 

  • Klickt dann auf die Option Hintergrund und löscht alle gespeicherten Hintergrundbilder

  • Wählt nun eine beliebige helle Hintergrundfarbe aus und klickt auf speichern

Schritt 4: Den Hintergrund auswählen

Ein geschickt gewählter Hintergrund gibt eurem One-Pager Struktur. In unserem Beispiel (siehe oben) entsprechen die farbigen Abschnitte des Hintergrundbildes jeweils einem inhaltlichen Bereich der Webseite. Dieser optische Kniff sorgt für eine gute Orientierung – ein bisschen wie in einer Präsentation. Oben könnt ihr vier solcher Hintergrundbilder in verschiedenen Farbmustern für euren One-Pager Herunterladen.

 

Gut zu wissen: Anstelle eines sehr großen Bildes im Fotoformat verwenden wir ein hohes, aber sehr schmales Hintergrundbild. Dadurch verwenden wir eine kleine Datei, erhalten aber trotzdem einen wunderbar breiten Hintergrund mit den farbigen Abschnitten.

Aufgepasst: Unsere Vorlagen lassen sich nicht auf dem normalen Weg als Hintergrund festlegen. Die Bilder sind nämlich höher (3500 Pixel) als die Voreinstellung bei Jimdo zulässt (1500 Pixel). Darum gehen wir ein klein wenig anders vor!

So wird’s gemacht:

  • Erstellt eine neue Unterseite (und nennt sie z. B. “Hintergrund”) – richtig gehört, für euren One Pager braucht ihr eine Unterseite...

  • ...diese Unterseite sieht nämlich niemand :) Versteckt die Unterseite per Klick auf das Augensymbol in der Navigation und speichert sie

  • Nun fügt ihr einen Dateidownload hinzu und ladet das gewünschte Hintergrundbild hoch (z. B. eine unserer Vorlagen).

  • Wechselt nun in die Besucheransicht, klickt per Rechtsklick auf die Datei (bzw. auf Download) 

  • Klickt im nun geöffneten Fenster auf Link-Adresse kopieren

  • Öffnet dann ein Textdokument (z. B. in Word) und fügt den Link ein. Aufheben für gleich!



Geht nun zurück in den Bearbeitungsmodus und öffnet in der Bearbeitungsleiste die Option Einstellungen. Hier wählt ihr unter Webseite den Punkt Head bearbeiten. Nun öffnet sich ein Feld.

In das Feld kopiert ihr folgenden Code-Schnipsel:

<style type="text/css">
/*<![CDATA[*/

   .body { background-image: url(HIER_DEN_LINK_EINFÜGEN)  !important;}

 

    #jtpl-navigation__checkbox:checked + .jtpl-main .jtpl-section::after {display: none;}


/*]]>*/
</style>


  • Den Platzhalter “HIER_DEN_LINK_EINFÜGEN” ersetzt ihr nun mit dem Link, den ihr vorab ins Textdokument übertragen habt
  • Achtet dabei darauf, wirklich nur den Platzhalter zu ersetzen und keine weiteren Zeichen. Genauigkeit ist Trumpf :)
  • Klickt dann auf speichern und ladet eure Webseite neu. Nun sollte euer neuer Hintergrund aktiv sein!
  • Geht nun wieder über die Bearbeitungsleiste auf Style und aktiviert die Option Detail Styling
  • Jetzt wählt ihr für die Seitenleiste die gleiche Farbe, die der unterste Bereich des Hintergrundes hat
Um die exakt gleiche Farbe des untersten Hintergrundbereichs zu bestimmen, hilft zum Beispiel das Programm “Color Picker” – einfach mal bei Google suchen :-) Im folgenden GIF zeigen wir euch, wie ihr das Tool nutzt.

Schritt 5: Die Navigation auf eurem One-Pager

Das Navigationsmenü ist normalerweise der Wegweiser auf einer Webseite. Der One-Pager so ganz ohne Unterseiten ist hier ein Sonderfall – eure Themen-Bereiche wie “Über mich, oder “Galerie” werden nämlich nicht automatisch als Navigation aufgelistet. Euer Navigationsmenü erstellt ihr daher ganz einfach manuell:

  • Fügt unter dem Kopfbereich so viele Spalten hinzu wie eure Jimdo-Seite Bereiche hat

  • In jede Spalte tragt ihr nun einen Bereich ein (in unserem Beispiel fünf Spalten für fünf Bereiche: “START”, “ÜBER MICH”, “ANGEBOTE” usw.)

  • Fügt nun überhalb der Spalten einen Abstand ein und wählt dessen Größe so, dass eurer Navigationsmenü in den nächsten farbigen Balken des Hintergundes rutscht

  • Später bietet es sich an, die Navigation mit Textankern mit dem jeweiligen Bereich eures One-Pagers zu verknüpfen.

Schritt 6: Auf die Plätze, fertig, Inhalte

Jetzt steht das Gerüst und eure Webseite ist startklar für die Inhalte. Nun gestaltet ihr euren Jimdo-One-Pager individuell mit Überschriften, Texten, Bildern usw. Denkt dabei daran: Manchmal ist weniger mehr :-)

Achtet darauf, dass die einzelnen Bereiche eurer Webseite jeweils einem farbigen Abschnitt des Hintergrundes entsprechen, also: neue Farbe, neues Thema. Dafür fügt ihr zwischen den Bereichen eurer Webseite ganz einfach passende Abstände ein.

Verwandte Webinare

Typografie (Schriftarten)

Welche Schriftarten gibt es und wie kannst du diese auf deiner Jimdo-Webseite einsetzen? Schau hier in die Webinar Aufzeichnung.

Stockfotos (Bilder finden) 

Wo findest du professionelle Bilder für deine Webseite? Wir zeigen dir hier Stockfoto-Dienste + du lernst, wie du Bilder in Galerie oder Hintergrund nutzt.

Möchtest du mehr erfahren?


Hat dir das Webinar gefallen?

Teile es gern:

Inga Schünemann

DE Support Center & Webinare