how to make your own website for free

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.

WHAT OUR FANTASTIC USERS SAY

“its really very amazing app that makes me finish html page in 3 minutes ( that's usually takes more than 1 hours at least from me if i did it from scratch). i hope to have very big library and plugins for this APP thanks again for your nice application”

“First of all hands off to you guys for your effort and nice, super tool. Good work mobirise team. We are expecting the new version soon with advance functionality with full bootstrap design. Great effort and super UI experience with easy drag & drop with no time design bootstrap builder in present web design world.”

“At first view, looks like a nice innovative tool, i like the great focus and time that was given to the responsive design, i also like the simple and clear drag and drop features. Give me more control over the object's properties and ill be using this tool for more serious projects. Regards.”

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

Eigener 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