Anker setzen


Hier ein Beispiel mit Ankern.

Das sind Sprungmarken auf IDs, die dann auch mit dem
weichen "Smoothscroll" Anwendung finden.

Anker setzen

Unten sind einige Sprungmarken als Anker zu den 4 Absätzen des "Lorem Ipsum" Textes gesetzt.

Hier als Span-ID mit einer CSS-Class, die den Abstand nach oben definiert, damit der Inhalt nicht hinter meiner fixierten Navigation verschwindet, da diese Bereiche sich ja mitten im Textblock befinden.

Dafür wurde jeweils ein <span> Tag </span> in dieser Form mit der jeweiligen ID einer jeden Sprungmarke in den Code Editor eingesetzt, also beim ersten Anker dann so:

<span id="anker1" class="abstandoben"></span>

wobei ich diese class="abstandoben" in den Bereich "CSS Editor" vom "Code Editor" mit eingetragen habe:

.abstandoben {
  padding-top: 2.25rem;
}

        Beispiel eigener Anker

  1. Anker 1
    zur Sprungmarke 1
  2. Anker 2
    zur Sprungmarke 2
  3. Anker 3
    zur Sprungmarke 3
  4. Anker 4
    zur Sprungmarke 4
Customer URL

Custom URL

Link Fenster

Da ich hier die IDs der einzelnen Anker einem <span> Tag händisch zugeordnet habe, kennt Mobirise diese Anker nicht.

Daher trage ich dann diese ID der jeweiligen Sprungmarke am Tab mit den drei Punkten "Custom URL" ein, wie im Screenshot zu sehen.

Anker mit eigenen Sprungmarken


<span id="anker1" class="abstandoben"></span>
Lorem ipsum dolor sit amet Semper orci non Curabitur pellentesque Vestibulum condimentum Morbi Nam lorem elit lorem nec id Phasellus habitant non a eget at elit Nam dolor ridiculus Pellentesque nec id ac sit turpis laoreet risus consequat malesuada senectus lorem dis et ligula orci mauris Nam fermentum quis sed aliquet pretium wisi fames Vestibulum.
zurück springen


<span id="anker2" class="abstandoben"></span>
Lorem ipsum dolor sit amet Semper orci non Curabitur pellentesque Vestibulum condimentum Morbi Nam lorem elit lorem nec id Phasellus habitant non a eget at elit Nam dolor ridiculus Pellentesque nec id ac sit turpis laoreet risus consequat malesuada senectus lorem dis et ligula orci mauris Nam fermentum quis sed aliquet pretium wisi fames Vestibulum.
zurück springen


<span id="anker3" class="abstandoben"></span>
Lorem ipsum dolor sit amet Semper orci non Curabitur pellentesque Vestibulum condimentum Morbi Nam lorem elit lorem nec id Phasellus habitant non a eget at elit Nam dolor ridiculus Pellentesque nec id ac sit turpis laoreet risus consequat malesuada senectus lorem dis et ligula orci mauris Nam fermentum quis sed aliquet pretium wisi fames Vestibulum.
zurück springen


<span id="anker4" class="abstandoben"></span>
Lorem ipsum dolor sit amet Semper orci non Curabitur pellentesque Vestibulum condimentum Morbi Nam lorem elit lorem nec id Phasellus habitant non a eget at elit Nam dolor ridiculus Pellentesque nec id ac sit turpis laoreet risus consequat malesuada senectus lorem dis et ligula orci mauris Nam fermentum quis sed aliquet pretium wisi fames Vestibulum.
zurück springen

Code-Editor-Sprungmarken

Einzelne Anker IDs und class="abstandoben" im Code-Editor

Anker von Mobirise

Mobirise gibt ja jedem Block sogleich eine zufällige ID, die man auch selbst ganz oben links, mit einem eigenen und verständlichen Namen ändern könnte. Ich mache das sehr oft, damit ich meine Seiten-Anker besser finden kann.

Im Screenshot oben seht ihr meinen Anker-Namen "Sprungmarken", mit dem ich die zufällige Folge von Buchstaben und Zahlen von der ursprünglichen ID ersetzt habe.

Per Default gibt es also keine Möglichkeit eigene Anker mitten in einem Block zu setzen, sondern nur diesen einen Anker oben, der sich auf den oberen Rand des Blocks bezieht - wobei der gesetzte Innenabstand (padding) nach oben dabei mit berücksichtigt wird.

Link Fenster

Mobirise Link Fenster

um nun also auf einen Block-Anker zu verweisen, wählt ihr im Link-Fenster von Mobirise links bei "Site Page" den Namen der Seite, hier "Anker setzen" und rechts unter "Block on 'Anker setzen' Page" die ID, hier als Beispiel zu meiner selbst umbenannten

id="Tutorial"

Impressum | Datenschutz | Spenden

Copyright © Mobirise-Tutorials.com Thomas Frei-Herrmann
Private Homepage