Tipps & Tricks in Mobirise

01

Icons anpassen

Hier ein kleines Tutorial, um die Icons in Mobirise nach Wunsch anzupassen. Ich habe aus dem Thema Mobirise 5 einen Toggle-Block verwendet. Mobirise Version 5.5.8

Toggle FAQ (original)

The number of items is limited in this block. Open the Block parameters to change the amount of items.

Mobirise Kit is a service that provides the access to all current and new themes/extensions developed by Mobirise. New themes/extensions are released every month and will be available in your account during your plan period, without any additional charge.

Yes, Mobirise is free for both non-profit and commercial sites.

Toggle FAQ (angepasste Icons)

The number of items is limited in this block. Open the Block parameters to change the amount of items.

Mobirise Kit is a service that provides the access to all current and new themes/extensions developed by Mobirise. New themes/extensions are released every month and will be available in your account during your plan period, without any additional charge.

Yes, Mobirise is free for both non-profit and commercial sites.

So lassen sich die Icons im Toggle Faq bzw. Akkordeon ändern:

1.
Mit dem Codeeditor die Zeile "<span class="sign mbr-iconfont mbri-arrow-down"></span>" suchen.
statt mbri-arrow-down nehme ich beispielsweise fa-caret-down der Schriftart FontAwesome. Nun muss die Zeile so aussehen: <span class="sign mbr-iconfont fa fa-caret-down"></span>



2.
Im CSS der class .mbr-iconfont die Schriftart zuweisen:

.mbr-iconfont {
font-family: 'FontAwesome' !important;
}


3.
um beide Zeichen (zum Auf- und Zuklappen) zu ändern, noch im CSS folgendes hinzufügen:

.mbri-arrow-up::before {
content: "\f0d8" !important;
}
.mbri-arrow-down::before {
content: "\f0d7" !important;
}

Der Wert für content muss entsprechend angepasst werden, er lässt sich über die Entwickler-Tools des Browsers auslesen.

02

Mobirise Video halbseitig einbinden

Hier eine Anleitung, um ein Video halbseitig einzusetzen. Mobirise Version 5.5.8

Einen 2-teiligen Block nehmen, z.B. einen Header aus dem Theme Journal M5:

1.
Mit dem Codeeditor die Zeile für das Bild <img…> suchen und mit dem Code für das Video ersetzen:

<video id="myVideo" playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" poster="https://www.rheingucken.de/labor/video/media/winter.jpg"></video>


2.
um das div "img-container" einen wrapper setzen:

<header>
<div class="img-container col-12 col-lg-6">…
</header>


3.
ins CSS muss nun noch:

header {
position: relative;
background-color: #ffffff;
width: 50%;
@media (max-width: 991px) {
width: 100%;
}
overflow: hidden;
}
header video {
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
transform: translateX(-50%) translateY(-50%);
background: #FFFFFF;
}

Der Wert für width kann entsprechend angepasst werden, je nachdem, wie breit das Video werden soll.

(Den Code für das Einbinden eines Hintergrund-Videos habe ich hier bei Tommy Herrmann gefunden, dort gibt es weitere Tutorials.) 

03

Mobirise Submenu in Safari

Hier eine Anleitung, um das Submenu in Safari zu berichtigen. Mobirise Version 5.6.8

Das Submenu verhält sich in Safari nicht so, wie es sollte? Es klappt nicht zu, nicht automatisch auf? Und plötzlich wird ein Link aufgerufen, wenn man mit der Maus über die oberste Zeile kommt?

Hier meine Lösung:

1.
Mit dem Codeeditor die Zeile "<li class="nav-item dropdown" suchen.
statt data-toggle="dropdown-submenu" muss hier stehen: data-bs-toggle="dropdown-submenu".

(Hintergrund: Allen benutzerdefinierten Eigenschaften in Bootstrap 5 wird bs- vorangestellt, um Konflikte mit CSS von Drittanbietern zu vermeiden.)


2.
Außerdem gibt es in der Zeile <div class="dropdown-menu"> einen Link mit "href= …" auf dem obersten Menupunkt. Diesen einfach löschen, damit die Untermenus erwartungsgemäß funktionieren.

submenu-quelltext
04

Menu bei Ankerlinks automatisch schließen

Menu mit Links zu Ankern auf derselben Seite wird nicht automatisch geschlossen (Mobirise 5.7.8).
Hier meine Lösung 

1. Der zusätzlich erforderliche Code:

Wenn man im Menu einen Link auf die selbe Seite, einen sogenannten Ankerlink setzt, bleibt das Menu nach dem Klick auf diesen Menupunkt offen. Hier könnte Mobirise nachbessern, aber es gibt einen kleinen Trick. Damit das Menu beim Klick auf einen Ankerlink auf derselben Seite wieder zuklappt, muss jedem <a> tag auf dieser Seite, der zu einem Anker (id) zeigt, folgendes hinzugefügt werden:

data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show" 
menu-quelltext

Schon fertig! Wenn das Projekt aus nur einer Seite besteht, reicht das aus. Jetzt schließt sich das Menu nach einem Klick auf einen internen Link.

Oft gibt es mehrere Seiten. Dafür gibt es auch eine Lösung:

2. Weitere Seiten im selben Projekt:

Wichtig:
Die o.g. Zeile darf nur auf der Seite mit den Ankerzielen, nicht jedoch auf eventuell vorhandenen weiteren Seiten enthalten sein. Da bei einem Klick im Menu einer weiteren Seite der Link zur Hauptseite weist, ist ein Schließen des Menus nicht notwendig, diese Seite wird ja verlassen, sobald die Hauptseite aufgerufen wird. 

Menus sind in Mobirise standardmäßig auf „global“ gesetzt, d. h. sie erscheinen auf allen Seiten in der gleichen Form. Falls es weitere Seiten gibt, z.B. Datenschutz o.ä., müssen wir das Menu als „nicht global“ kennzeichnen. Das geht ganz einfach, indem man ganz oben im Quelltext des Menu-Blocks den Begriff „global“ entfernt (s. Screenshot aus dem Mobirise Code-Editor). Dies am besten erst, sobald das Menu fertig ist, denn ohne „global“ müssen eventuelle Änderungen am Menu auf jeder Seite einzeln vorgenommen werden.
menu-quelltext

©2023 Rheingucken · Version 2.2

Impressum · Datenschutz