CSS Clip Path Beispiel
Klicken Sie auf den Text, um ihn zu bearbeiten. Wählen
Sie den Text, um einen Link einzufügen. Klicken Sie auf den
blauen Zahnrad-Button in der rechten oberen Ecke,
um Buttons, Text, Titel zu verbergen/anzuzeigen und den
Hintergrund des Blocks zu ändern. Klicken Sie auf den roten "+" Button in der rechten unteren Ecke, um einen neuen Block hinzuzufügen. Benutzen Sie das Menu oben rechts, um neue Seiten zu erstellen und Themes hinzuzufügen.
Bug on v4.10.1.
As soon as I add the second gallery below, the first gallery does show all pictures in the Lightbox-Slider in the wrong size.
Only clicked images will show in the correct size.
Bug fixed with v4.10.2 and theme updates
Tab "All" - alle Bilder - ausblenden:
.mbr-gallery-filter-all {
display: none !important;
}
Es werden dann aber dennoch alle Bilder beim Aufruf der Seite angezeigt.
Preise rechtsbündig:
<p>01. Insalata Mista -gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln<span style="float: right;"><b>7,50 €</b></span></p>
01. Insalata Mista -gemischte grüne Salate mit Tomaten, Gurken, Zwiebeln7,50 €
02. Chicken Walnut Salat, verschiedene Blattsalate mit kalten Hähnchenbruststreifen, Walnüssen und Apfelspalten12,50 €
03. Ensalada de la Casa, riesige Tacoschale gefüllt mit Blattsalat, Mais, Tomaten, Gurken, Paprika, geriebenen Käse1,50 €
Das JavaScript gehört in die Seiteneinstellungen "Inside <head> code":
<script>
function buttonAnklicken(btn, status) {
// Die Objekte (Texte) werden versteckt
document.getElementById("btn_1").style.display = "none";
document.getElementById("btn_2").style.display = "none";
// Das ausgewählte Objekt wird angezeigt
document.getElementById(btn).style.display = "block";
// Von "button1" und "button2" wird die CSS-Klasse: "aktiv" entfernt
document.getElementById("button1").classList.remove("aktiv");
document.getElementById("button2").classList.remove("aktiv");
// Hier wird von der Variable: "btn" (btn_1, btn_2) die Zahl extrahiert
var zahl = btn.split("_");
// button1" oder button2" wird jetzt die CSS-Klasse: "aktiv" hinzugefügt
document.getElementById("button" + zahl[1]).classList.add("aktiv");
// Hier wird zum Block: "myBlock" gescrollt wenn status = true ist
if (status == true) {
document.getElementById("myBlock").scrollIntoView({behavior: "smooth", block: "start"});
}
}
</script>
Unten die CSS zum Skript, die ich in den "Code Editor" in den Bereich "CSS Editor" des zur Anzeige verwendeten einfachen Text-Blocks kopiert habe.
a.button {
font-family: Verdana, Arial, Sans-Serif;
color: #000;
text-decoration: None;
background: Lightgray;
border-radius: 100px !important;
padding: 1rem 3rem;
margin: 0.4rem .8rem;}
.aktiv {
background: royalblue !important;
color: #fff !important;
}
div#myBlock {
padding-top: 50px;
margin-bottom: 50px;
}
.abstandtext {
padding-top: 100px;
}
@media (max-width: 768px) {
.button {
float: left;
}
}
Unten der komplette Container meiner Tab-Anzeige, den ich in einen einfachen Textblock anstelle des Beispiel-Textes kopiert habe:
<!-- Beginn Script-Einbau eigen -->
<div id="myBlock">
<div id="btn_1">
<h3 class="abstandtext">Tab 1<br>Darstellung mit dem Skript von Werner-Zenk.de</h3><br>
<span style="color: blue;">Seiten, die mit Mobirise gemacht werden ...</span>
</div>
<div id="btn_2" style="display:none">
<h3 class="abstandtext">Tab 2<br>Darstellung mit dem Skript von Werner-Zenk.de</h3><br>
<span style="color: red;">Mobirise Themes basieren auf Bootstrap 3 ...</span>
</div>
</div>
<p>
<a href="javascript:buttonAnklicken('btn_1', false)" class="button aktiv" id="button1">Responsiv</a>
<a href="javascript:buttonAnklicken('btn_2', false)" class="button" id="button2">Kreativ</a>
</p>
<!-- Ende Script-Einbau eigen -->
Seiten, die mit Mobirise gemacht werden, sind zu 100% mobilfreundlich und entsprechen den neusten Google Tests. Google selber sagt, dass sie die Webseiten mögen. (offiziell)!
Mobirise Themes basieren auf Bootstrap 3 und Bootstap 4 - den leistungsfähigsten Frameworks. Selbst wenn Sie nicht coden können, können Sie dann zur Bootstrap Familie gehören.
Wählen Sie aus einer großen Auswahl der jüngsten voreingestellten Blocks - Full Screen Intro, Bootstrap Slider, Content Slider, responsive Bildergalerie mit der Lightbox, Parallax Scrolling, Video Hintergründe, mobiles Menü sowie noch viele weitere Dinge.
Seiten, die mit Mobirise gemacht werden, sind zu 100% mobilfreundlich und entsprechen den neusten Google Tests. Google selber sagt, dass sie die Webseiten mögen. (offiziell)!
Mobirise Themes basieren auf Bootstrap 3 und Bootstap 4 - den leistungsfähigsten Frameworks. Selbst wenn Sie nicht coden können, können Sie dann zur Bootstrap Familie gehören.
Wählen Sie aus einer großen Auswahl der jüngsten voreingestellten Blocks - Full Screen Intro, Bootstrap Slider, Content Slider, responsive Bildergalerie mit der Lightbox, Parallax Scrolling, Video Hintergründe, mobiles Menü sowie noch viele weitere Dinge.
Unten die originalen Buttons
Die Buttons unten haben die Bootstrap CSS-Klassen:<a class="btn btn-primary" href="javascript: void();" >MEHR INFO</a>
Bei dem linken Button habe ich über die class="meinhover" die CSS für 'Hover' (Mausüber) geändert. Dabei muss die Eigenschaft "!important" (wichtig) hinzugefügt werden:
<a class="btn btn-primary meinhover" href="javascript: void();">MEHR INFO</a>.meinhover.btn-primary:hover {
color: red !important;
background-color: #fff !important;
}
Dieses Bild ist das Original.
Das Bild ist 1014 x 562 Pixel bei einer
Dateigröße von 63,96 KB
Dieses Bild ist im Editor nachbearbeitet auf ein 4:3 Format.
Das Bild ist 599 x 499 Pixel bei einer Dateigröße von 29,93 KB
Der Fehler, dass bearbeitete Bilder ein großes .png Format erhalten, wurde mit v4.10.5 behoben.