Bestimmte Position auf Jimdo-Webseite anspringen (Sprungmarken)

Eigene Sprungmarke setzen

Um eine Verlinkung so zu gestalten, dass ein bestimmtes Element auf einer Jimdo-Seite direkt angesprungen wird, kann man eine Sprungmarke an die entsprechende Stelle auf der Seite setzen, und den Link direkt mit dieser verknüpfen. Der User landet sofort an der riichtigen Stelle auf der Seite, ohne scrollen zu müssen.

 

HowToDo

  1. Setze vor das Element auf der Seite, zu dem Du springen möchtest, ein html-widget mit folgendem Inhalt:
    <div id="sprungmarke">#sprungmarke</div>
    "sprungmarke" = Name Deiner Sprungmarke (austauschen!)
    #sprungmarke = sichtbarer Text zum schnelleren Auffinden der Sprungmarke (später ausblenden, oder ganz weglassen)

  2. Markiere die Textstelle, die Du als Link benutzen möchtest, und verlinke sie mit der Seite, auf der du deine Sprungmarke eingerichtet hast. Benutze dazu die Schaltfläche "Link > interner Link".




  3. Wechsel jetzt in den html-Modus des Textfeldes, in dem Du den Link angelegt hast.
    Suche hier im Quellcode (mit strg/cmd+f  = find) nach der Beziechnung des Links, den Du gesetzt hast.

    In meinem Beispiel suche ich nach "Startseite" und finde folgenden String:
    <a title="Startseite" href="/app/s69854fd484825586/p5162e7808e1c5cc2/">interner Link</a>
  4. Ergänze diesen String mit dem Namen Deiner Sprungmarke und einem "#" davor:

    <a title="Startseite" href="/#sprungmarke">interner Link</a>
  5. Speichere das Textfeld. Der modifizierte Link führt jetzt zu der definierten Sprungmarke. Da es sich um einen relativen Pfad handelt, behält er seine Wirksamkeit auch, falls die Seite, auf die er zielt, später einmal umbenannt werden sollte.
     

Absolute Links zu Sprungmarken

 

Oben beschriebene Methode bildet dynamische Links zu den definierten Sprungmarken. Das heißt, wenn Ihr einmal den Namen der Seite ändern solltet, auf der sich die Sprungmarke befindet, macht das gar nichts - der Link wird trotzdem funktionieren.

 

Blöderweise funktionieren diese dynamischen Links nicht in der Navigation:

 

Ab Jimdo Pro ist es mit dem Kettensymbol "Externer Link" möglich, auch externe Ziele über die Navigation einer Jimdo-Seite zu verlinken.

 

Mit dieser Schaltfläche kann man auch Sprungmarken in der Navigation unterbringen. Da die oben beschriebene Methode hier aber leider nicht funktioniert, muss man die Spungmarke in der Navigation über einen absoluten Link ansteuern.


Dabei wird statt der dynamischen Verknüpfung eine abloute Verknüpfung gesetzt:

 

Der böse Nachteil einer absoluten Verknüpfung ist, dass sie im Quellcode entsprechend angepasst werden müsste, falls der absolute Pfad einmal geändert wird.

 

Sprungmarken über die Navigation anzusteuern hat noch weitere Nachteile:

  1. Ein "externer Link" in der Navigation öffnet immer einen neuen Tab bzw. ein neues Browserfenster
  2. Ein externer Link in der Navigation bildet eine eigene Seite!

 

 

Jimdo-ID als Sprungmarke nutzen

Um mit einer Verlinkung an eine bestimmte Stelle auf einer Jimdo-Seite zu springen, können wir uns auch die von Jimdo selbst vergebenen IDs zu Nutze machen!

 

HowToDo

Ein Blick in den Quelltext einer Jimdo-Seite verrät:  Alle Jimdo-Elemente bekommen von Jimdo eine eindeutige ID zugewiesen!

 

Beispiel:

Die Affiliate-Jimdo-Box auf unserer Startseite (Anmeldebox) wurde mit einem Jimdo-Widget-Element erzeugt. Sie erlaubt die Anmeldung einer Jimdo-FreePage direkt von unserer Startseite aus:

 

Wenn ich z.B. von einer anderen Seite direkt zu dieser Stelle springen will, ohne auf der Startseite nach unten scrollen zu müssen, kann ich das mit einen Anker bzw. mit einer Sprungmarke machen, die ich dafür extra definiere.

 

Mit dem Wissen über die Jimdo IDs geht es aber auch einfacher:

 

Erster Schritt: Element-ID finden

Ein Klick auf die Affiliate-Box mit der rechten Maustaste und die Auswahl: "Element untersuchen" öffnet den sog. "Inspector", der uns die die Jimdo-ID des Elements verrät:


Jimdo Element-ID
Jimdo Element-ID

 

Diese ID könne wir uns direkt aus dem Inspector heraus kopieren...

 

Zweiter Schritt: ID-Sprungmarke verlinken

Um ein Element auf einer Seite direkt anzuspringen, muss nun die "id", die wir aus dem Inspektor kopiert haben,  an die URL des Links angehängt werden, der uns auf die gewünschte Seite bringt.

(externer Link, Syntax: URL + "#"+ "id" des Bereichs, zu dem gesprungen werden soll)

 

Beispiel:

 

Eine interne Verlinkung zur Startseite würde uns nur an den Beginn der Seite bringen: 

Die absolute Adresse (URL) des Elements mit ID-Sprungmarke ist  folgende:



TIPP: um die Sprungmarke zu prüfen, muss man die URL mit der Sprungmarke nur in der Adresszeile des Browsers aufrufen. Dann sieht man gleich, ob sie funktioniert, oder nicht.

Alternativ-Methode

Alternativ zu der Methode über den Inspector können wir auch im Quelltext der Seite, auf der sich das Element befindet, nach seiner ID suchen (rechte Maustaste/Quelltext anzeigen).

 

Bei unserem Beispiel ist das einfach: mit der Suchfunktion des Browsers (strg/cmd+f) einfach nach dem String über der Box suchen:

 

"Hier Kannst Du Deine eigene Jimdo-Webseite erstellen!"

 

Das sieht dann in etwa so aus:

 

 

 

Hier können wir jetzt die IDs der Elemente auslesen, die wir zum Anspringen benötigen.

Sie verbergen sich in dem  id="..."-string darüber bzw. im id="..."-string darunter:

  • div id="cc-m-5864649664" ist das Textelement mit der Überschrift, nach der wir gerade gesucht haben
  • div id="cc-m-5695076064" ist die Box, die das Bild bzw. das Widget unserer Affiliate-Box enthält

Kommentar schreiben

Kommentare: 0