Tabs im Code Editor
NATÜRLICHE KOSMETIK - ÖLE
Viele natürliche Öle wie Kokosöl, Arganöl, Jojobaöl und Hagebuttenöl finden in der Kosmetik Anwendung. Diese Öle sind in Gesichtsseren, Feuchtigkeitscremes und Haarpflegeprodukten enthalten, da sie nährende und feuchtigkeitsspendende Eigenschaften besitzen.
Kosmetische Öle haben aufgrund ihrer Vielseitigkeit und ihrer wohltuenden Eigenschaften in der Hautpflege- und Schönheitsroutine erheblich an Beliebtheit gewonnen. Sie stammen aus verschiedenen pflanzlichen Quellen und bieten eine Vielzahl von nährenden und therapeutischen Effekten, die zu gesünderer Haut und Haaren beitragen.
NATÜRLICHE KOSMETIK - KRÄUTER
Extrakte aus Kräutern wie Kamille, Ringelblume, Aloe Vera und Lavendel werden häufig in Naturkosmetik verwendet. Sie sind in Cremes, Tonern und Masken zu finden und bieten beruhigende und entspannende Effekte auf die Haut.
Kräuterextrakte sind zu geschätzten Inhaltsstoffen in der Formulierung von Kosmetik geworden und bieten einen natürlichen und ganzheitlichen Ansatz für Hautpflege und Schönheit. Diese aus verschiedenen Pflanzen, Blumen und Kräutern gewonnenen botanischen Wunder bringen eine Fülle von therapeutischen und nährenden Eigenschaften in kosmetische Produkte.
NATÜRLICHE KOSMETIK - MINERALE
Mineralbasierte Kosmetik, darunter Foundations, Rouge und Lidschatten, verwendet natürlich vorkommende Mineralien wie Mica, Zinkoxid und Eisenoxid. Diese Produkte bieten ein natürlicheres Aussehen und sind oft frei von synthetischen Farbstoffen und Duftstoffen.
Mineralische Kosmetik hat in der Beauty-Industrie immense Popularität gewonnen, dank ihrer natürlichen Inhaltsstoffe und hautfreundlichen Formulierungen. Diese Produkte nutzen natürlich vorkommende Mineralien, um den Teint zu verbessern und bieten eine leichte und atmungsaktive Alternative zu herkömmlichem Make-up.
Das oben dargestellte Beispiel zeigt einen Tab-Block aus dem Thema "CareM5", den ihr unter der Rubrik "List" finden könnt. Ich habe diesen Tab-Block hier im Standard-Thema "Mobirise5" verwendet.
Das Problem, das auftritt, ist, dass beim Klicken auf einen Tab am Smartphone die Tabs übereinander angezeigt werden. Die gewählten Texte sind zwar sichtbar, befinden sich jedoch meist außerhalb des sichtbaren Bereichs des Displays, sodass der Wechsel nicht bemerkt wird. Daher ist es sinnvoll, beim Wechsel zu einem anderen Tab an die Anfangsposition des gewählten Textes zu scrollen.
Ich habe dies beispielhaft auch am Desktop umgesetzt, jedoch macht es mehr Sinn, diese Funktion ausschließlich über Media-Anweisungen für die Smartphone-Darstellung zu implementieren. Dazu findet ihr mein Script weiter unten .
Eigentlich wäre das HTML-Element "scrollIntoView" eine gute Lösung, allerdings positioniert es das Element stets am oberen Rand des Viewports. Daher habe ich mich für die Variante "scrollWithOffset" entschieden, bei der ich einen Abstand nach oben angeben kann. Andernfalls würde der Block häufig hinter der Menüleiste verschwinden.
Durch die Verwendung der Funktion window.scrollTo() in Kombination mit dem Offset eines Elements und dem gewünschten Abstand kann gezielt eine bestimmte Position auf der Seite angesteuert werden.
Hier ist das JavaScript, das ihr in den Bereich "End of <body> code" der Seiteneinstellungen kopiert. Achtet auf die ID des Blocks, die von Mobirise zufällig beim Erstellen des Blocks erstellt wird, diese ID muss also entsprechend angepasst werden.
Die IDs der Tabs findet ihr im Quelltext vom "Code Editor", siehe dazu auch meinen Screenshot unten.
<!-- JavaScript Scroll mit Offset für Sprung auf Text vom Tab -->
<script>
function scrollWithOffset(element, offset) {
const y = element.getBoundingClientRect().top + window.pageYOffset + offset;
window.scrollTo({ top: y, behavior: 'smooth' });
}
function myTab1() {
const element = document.getElementById("tabs01-89_tab0");
scrollWithOffset(element, -80); // 80px Abstand nach oben
}
function myTab2() {
const element = document.getElementById("tabs01-89_tab1");
scrollWithOffset(element, -80); // 80px Abstand nach oben
}
function myTab3() {
const element = document.getElementById("tabs01-89_tab2");
scrollWithOffset(element, -80); // 80px Abstand nach oben
}
</script>
Nun binde die `function` aus dem JavaScript oben in den OnClick-Anweisungen ein, damit der Sprung über diese Funktionen im JavaScript ausgeführt werden kann. Das sieht dann für das erste Tab zum Beispiel so aus:
onclick="myTab1()"
Tabs im Code Editor
Hier stelle ich das gleiche JavaScript wie oben vor, jedoch mit einer IF-Bedingung, die sicherstellt, dass es nur bei einer Displaybreite von maximal 991px wirkt. Dadurch wird die Funktionalität nur aktiviert, wenn die Tabs vertikal am mobilen Gerät angeordnet sind.
Hier ist das entsprechende JavaScript, das auch in den Bereich "End of <body> code" der Seiteneinstellungen gehört. Achtet auf die ID des Blocks, die von Mobirise zufällig beim Erstellen des Blocks erstellt wird, diese ID muss also entsprechend angepasst werden.
Die IDs der Tabs findet ihr im Quelltext vom "Code Editor", siehe dazu auch meinen Screenshot oben.
<!-- JavaScript Scroll mit Offset für Sprung auf Text vom Tab nur bis 991px Displaybreite -->
<script>
function scrollWithOffset(element, offset) {
const y = element.getBoundingClientRect().top + window.pageYOffset + offset;
window.scrollTo({ top: y, behavior: 'smooth' });
}
function myTab1() {
if (window.matchMedia("(max-width: 991px)").matches) {
const element = document.getElementById("tabs01-89_tab0");
scrollWithOffset(element, -80); // 80px Abstand nach oben
}
}
function myTab2() {
if (window.matchMedia("(max-width: 991px)").matches) {
const element = document.getElementById("tabs01-89_tab1");
scrollWithOffset(element, -80); // 80px Abstand nach oben
}
}
function myTab3() {
if (window.matchMedia("(max-width: 991px)").matches) {
const element = document.getElementById("tabs01-89_tab1");
scrollWithOffset(element, -80); // 80px Abstand nach oben
}
}
</script>
Nun binde die `function` aus dem JavaScript oben in den OnClick-Anweisungen ein, damit der Sprung über diese Funktionen im JavaScript ausgeführt werden kann. Das sieht dann für das erste Tab zum Beispiel so aus:
onclick="myTab1()"
Das HTML-Element "scrollIntoView" wäre eine alternative Lösung, allerdings positioniert es das Element stets am oberen Rand des Viewports.
Hier ist das entsprechende JavaScript, das auch in den Bereich "End of <body> code" der Seiteneinstellungen gehört. Achtet auf die ID des Blocks, die von Mobirise zufällig beim Erstellen des Blocks erstellt wird, diese ID muss also entsprechend angepasst werden.
Die IDs der Tabs findet ihr im Quelltext vom "Code Editor", siehe dazu auch meinen Screenshot oben.
<!-- JavaScript Scroll Into View für Sprung auf Text vom Tab -->
<script>
function myTab1() {
const element = document.getElementById("tabs01-89_tab0");
element.scrollIntoView();
}
function myTab2() {
const element = document.getElementById("tabs01-89_tab1");
element.scrollIntoView();
}
function myTab3() {
const element = document.getElementById("tabs01-89_tab2");
element.scrollIntoView();
}
</script>
Nun binde die `function` aus dem JavaScript oben in den OnClick-Anweisungen ein, damit der Sprung über diese Funktionen im JavaScript ausgeführt werden kann. Das sieht dann für das erste Tab zum Beispiel so aus:
onclick="myTab1()"