Der Jimdo Creator und seine Templates sind so aufgebaut, dass man Webseiten mit verschiedenen Arten von Menüs erstellen kann. Ein One Pager ist jedoch eine Webseite mit nur einer Seite. Das heißt wenn man einen One Pager machen will, dann bleibt im Regelfall das Menü bestehen. Bei Jimdo existiert leider kein Template mit dem man einen One Pager out-of-the-box machen kann.
Trotzdem lässt sich mit ein paar Tricks bzw. auf verschiedene Arten ein One Pager erstellen:
Die einfachste Variante ist, wenn man einfach eine Seite einzelne Seite erstellt und dort seinen gesamten Inhalt hinzufügt. In diesem Fall bleibt bei all Templates das Menü bestehen und man findet dort zumindest den Eintrag für die Startseite. Das sieht nicht unbedingt professionell aus. Hier kann man sich auf mehrere Wege Abhilfe schaffen, in dem man das Menü und die Schrift ganz einfach im Design umstellt und diese einfach transparent macht. Auch hier ist man weit von professionell entfernt. Eine andere Variante ist, wenn man das Menü über CSS ausblendet. Das funktioniert analog zum Ausblenden von Breadcrumps und Warenkorb, wie im Kapitel "Wie blende ich die Breadcrumps, den Warenkorb etc. aus?" beschrieben.
Besteht der One Pager jedoch aus mehreren Inhalten, dann möchte man eventuell trotzdem eine Navigation verwenden, um direkt zum jeweiligen Punkt zu springen. Dazu arbeitet man am Besten mit Anker. Dabei stößt man bei Jimdo jedoch auf folgendes Problem: Die Standard-Navigation von Jimdo lässt nur die Verlinkung auf interne Seiten zu. Man kann in der Navigation in der Jimdo Pro-Variante zwar auf externe Seite verlinken, diese öffnen den Link jedoch immer in einem eigenen Browser-Fenster.
Nachfolgend wird beschrieben wie man mit einem einfache Script einen One Pager erstellt. Basis dafür ist, dass man die Jimdo Pro-Version hat. Damit das Script Sinn macht sollte man eine Template mit einer sticky Top-Navigation verwenden (Bsp.: Template Rome).
|
One Pager erstellen - Schritt für Schritt Anleitung |
Schritt 1
Im ersten Schritt erstellt man ganz normal, wie bei jeder anderen Seite, das Menü des One Pagers. Bsp.: Willkommen, Unternehmen, Produkte, Kontakt,...
Schritt 2
Im zweiten Schritt befüllt man die Startseite der Webseite mit den entsprechenden Inhalten zu den zuvor definierten Punkten.
Schritt 3
Man fügt nun vor der jeweiligen Überschrift ein "Widget/HTML" hinzu. Alternativ kann man dies auch über ein Textelement machen. Dort fügt man nachfolgenden HTML-Code ein:
<div id="unternehmen"></div>
Dies macht man auch vor den anderen Überschriften (Produkte, Kontakt). Bei Willkommen ist das nicht notwendig, weil man da auf den Anfang der Seite springen soll.
Schritt 4
Im nächsten Schritt geht man in das "Menü", unter "Einstellungen", zu "Head bearbeiten" (siehe dazu auch "Wie bearbeite ich den Head der Webseite?").. Im Head fügt man nun folgendes Script hinzu:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* removing target blank from anchor links */
$(document).ready(function() {
$( "a[href*=#]").attr('target', '_self' );
});
//]]>
</script>
Das Script verhindert, dass Anker immer in einem eigenen Fenster geöffnet werden.
Schritt 5
Als letzten Schritt bearbeitet man nochmals die Navigation. Man macht bei jedem Menüpunkt eine externe Verlinkung auf. Dazu fügt man den externen Link wie folgt hinzu:
https://www.meineseite.com/#unternehmen
Das wiederholt man auch für die anderen Überschriften (Produkte, Kontakt). Und schon ist der One Pager fertig! Leider ist er noch nicht ganz. Das wäre ja doch zu einfach gewesen! Ein weiterer Schritt ist noch notwendig.
Schritt 6
Auch wenn die Unterseiten Unternehmen, Produkte und Kontakt nicht verwendet werden, so wurden sie trotzdem angelegt. Wenn man seine Hausaufgaben in Sachen Suchmaschinenoptimierung gut gemacht hat, dann werden diese Seiten also von Google auch gefunden. Deswegen sollte man bei jeder Unterseite noch den Head bearbeiten. Es empfiehlt sich bei jeder Seite den nachfolgenden Code hinzuzufügen damit die Seiten von Google nicht indexiert werden.
<meta name="robots" content="noindex" />
<meta name="robots" content="nofollow" />
<meta name="googlebot" content="noindex" />
<meta name="googlebot-news" content="nosnippet" />
Nun ist der One Pager jedoch wirklich fertig!
TIPP: Verlinkt man einen Jimdo-Seite in der Navigation auf eine externe Seite, dann kann man auf diese Unterseite nicht mehr zugreifen ohne die externe Verlinkung rückgängig zu machen. Das heißt man sollte auf jeden Fall alle Inhalte gleich auf der Startseite einfügen und nicht erst später von der Unterseite auf die Startseite kopieren.
Ich hoffe der Beitrag hilft bei der Erstellung deines eigenen One Pagers. Falls du noch fragen dazu hast, dann hinterlasse mir einfach einen Kommentar. Ich freue mich natürlich über jeden Kommentar und wenn du den Beitrag auch teilst!
Kommentar schreiben