free site builder

Eigene Anker setzen


Es bestand der Wunsch auch auf eigene Anker-Namen zu verlinken.
Hier ein Beispiel mit eigenen Ankern über die Buttons unten.
Mobirise verwendet hierfür Sprungmarken auf IDs, die dann auch für den
weichen "Smoothscroll" Anwendung finden.

Mobirise Block

“Es ist eine wirklich sehr erstaunliche App, mit der ich die HTML-Seite in wenigen Minuten fertig stellen kann. Ich hoffe, große Bibliotheken und viele Plugins für diese App zu erhalten. Nochmals vielen Dank für diese tolle Anwendung”

“Zuallererst, danke euch für eure Mühe und das nette, supertolle Werkzeug. Gute Arbeit vom Mobirise-Team. Ein super Erlebnis mit einfachem Drag & Drop, ohne Zeitaufwand für den Bootstrap Builder in der heutigen Webdesign Welt”

“Auf den ersten Blick sieht es wie ein nettes innovatives Werkzeug aus, ich mag den großen Fokus und die Zeit, die dem reaktionsschnellen Design eingeräumt wurden, ich mag auch die einfachen und übersichtlichen Drag & Drop-Funktionen. ”

Unten sind einige Spungmarken 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.


Dafür wurde jeweils ein Span-Tag in dieser Form mit einer ID in den HTML Editor eingesetzt:


<span id="Anker-Name" class="abstandoben"></span>


Wobei ich die class="abstandoben" ebenfalls in den CSS Editor (unter dem HTML Editor) mit eingetragen habe:


.abstandoben {

    padding-top: 75px;

}


Ansicht vom Editor

Hier eine Ansicht vom HTML Editor und der CSS für diese <span> Lösung.

<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> Cras vestibulum pede dui augue congue Quisque Donec elit arcu et euismod volutpat condimentum leo lacinia elit sem ullamcorper volutpat tellus tristique rhoncus Integer Phasellus lacinia et amet Phasellus pede vitae faucibus elit Suspendisse consectetuer senectus justo a Sed ligula Curabitur platea id elit id pede tortor ut et Nam.
zurück springen


<span id="anker3" class="abstandoben"></span> Odio mattis wisi Curabitur adipiscing ante ipsum lacus Nam urna vel augue dis mauris eu mauris Morbi Phasellus in justo dolor pellentesque pretium ligula Cum Curabitur convallis aliquet Ut ac Vestibulum ipsum eget massa ut ullamcorper pharetra ac nibh vel ipsum risus morbi et vitae in quis malesuada nulla Vestibulum.
zurück springen


<span id="anker4" class="abstandoben"></span> Dui auctor Vestibulum in velit leo mus urna elit augue nunc Nam ridiculus pretium malesuada hac felis et lacinia lorem ultrices non sed nonummy eros augue senectus ultrices quis consequat Nulla Vestibulum Nulla eleifend non semper tristique non Donec lacus a sit arcu amet In massa Nam egestas ante gravida.
zurück springen


weiter zum Tutorial

HTML Editor

Mobirise vergibt automatisch selbst generierte IDs, die man auch als Sprungmarken-Anker ansprechen kann.

Mobirise-Anker zum Block oben


Zieht Euch den HTML Editor als Block auf und tragt eine ID und deren Namen dort ein, als Beispiel diese Sprungmarke in einem DIV zu dieser ID hier:

<div id="Tutorial_Anker"></div>


Bemerkung:
bei einem Anker Namen, ohne ID, wie ...

<a name="Tutorial_Anker"></a>

... würde das Smooth-Scroll von Mobirise nicht ausgeführt.


Den Link zu Eurem Anker setzt Ihr einfach im
Link-Fenster unter URL als Raute-Zeichen mit dem Namen der Sprungmarken ID:

#Tutorial_Anker