Ab sofort gibts auch Blöcke für Mobirise. Wer einmal den Trick raus hat kann Blöcke nach eigner Idee und Anspruch basteln
Hier mal ein Block der 2 Bilder enthält, die in der Größe Skalierbar sind. Mit Bild Titel und Subtext. EIn Text steht entweder mittig zwischen den Bildern oder links oder rechts daneben. Frei wählbar natürlich.
Erstellungs Dauer - 20 Minuten
Code HTML
Code: Alles auswählen
<section data-bs-version="5.1" class="freestyle-gallery mbr-section" group="Gallery" id="gallery-freestyle-06" style="background-color: {{bgColor}}; padding-top: calc({{paddingTop}} * 1rem); padding-bottom: calc({{paddingBottom}} * 1rem);">
<!-- ⚙️ Mobirise Zahnrad-Parameter -->
<mbr-parameters>
<header>Layout</header>
<input type="checkbox" title="Full Width" name="fullWidth">
<input type="range" inline title="Padding Top" name="paddingTop" min="0" max="10" step="1" value="10">
<input type="range" inline title="Padding Bottom" name="paddingBottom" min="0" max="10" step="1" value="4">
<header>Hintergrund</header>
<input type="color" title="Farbe" name="bgColor" value="#163300">
<header>Bilder</header>
<input type="range" title="Bildgröße (Zoom)" name="imgScale" min="80" max="120" step="1" value="88">
<header>Anzeige</header>
<input type="checkbox" title="Titel anzeigen" name="showTitle" checked>
<input type="checkbox" title="Untertitel anzeigen" name="showSubtitle" checked>
<input type="checkbox" title="Bildtexte anzeigen" name="showCaptions" checked>
</mbr-parameters>
<div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
<!-- Titel -->
<div class="row mb-4 text-center">
<div class="col-12">
<h2 class="mbr-section-title mbr-fonts-style display-5" mbr-if="showTitle">Meine Galerie</h2>
<p class="mbr-section-subtitle mbr-fonts-style display-7 mb-0" mbr-if="showSubtitle">
Steuere die Bildgröße über das Zahnrad-Menü.
</p>
</div>
</div>
<!-- Galerie -->
<div class="row g-3 justify-content-center">
<!-- Item -->
<div class="item features-image col-12 col-md-6 col-lg-4 active">
<div class="item-wrapper">
<div class="item-img" style="transform: scale({{imgScale}}%);">
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-600x423.jpg" alt="Bild 2" data-slide-to="0" data-bs-slide-to="0">
</div>
<div class="item-content" mbr-if="showCaptions">
<h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Bildtitel 2</h5>
<p class="mbr-text mbr-fonts-style display-7">Beliebiger Text oder Beschreibung hier.</p>
</div>
</div>
</div><div class="item features-image col-12 col-md-6 col-lg-4">
<div class="item-wrapper">
<div class="item-img" style="transform: scale({{imgScale}}%);">
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-10-12_172124/assets/images/mbr-600x423.jpg" alt="Bild 1" data-slide-to="1" data-bs-slide-to="1">
</div>
<div class="item-content" mbr-if="showCaptions">
<h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Bildtitel 1</h5>
<p class="mbr-text mbr-fonts-style display-7">Beschreibung oder Text zu diesem Bild.</p>
</div>
</div>
</div><div class="item features-image col-12 col-md-6 col-lg-4">
<div class="item-wrapper text-only">
<div class="item-content">
<h5 class="mbr-section-subtitle mbr-fonts-style mb-2 display-7">Textkarte</h5>
<p class="mbr-text mbr-fonts-style display-7">Hier steht der Text dsfdfsdfdf fdsfdsfsdfdfdsffdf d df df <br> dfdf df<br> df df df df d<br> d dfsd dffddfdfd fd <br>fd fd <br>dsdsd</p>
</div>
</div>
</div>
<!-- Item -->
<!-- Textkarte -->
</div>
</div>
</section>Code CSS:
Code: Alles auswählen
.freestyle-gallery {
transition: background-color 0.3s ease;
}
.freestyle-gallery .item-wrapper {
position: relative;
overflow: hidden;
border-radius: 1rem;
background: #ffffff;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.freestyle-gallery .item-wrapper:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.freestyle-gallery .item-img {
width: 100%;
height: auto;
transition: transform .3s ease;
}
.freestyle-gallery .item-img img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
transition: transform .3s ease;
}
.freestyle-gallery .item-wrapper:hover .item-img img {
transform: scale(1.05);
}
.freestyle-gallery .item-content {
padding: 1rem 1.25rem 1.25rem;
}
.freestyle-gallery .text-only {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 200px;
background: #f8f9fa;
}
@media (max-width: 767px) {
.freestyle-gallery {
padding-top: 2rem;
padding-bottom: 2rem;
}
}
P {
text-align: center;
color: #ffffff;
}
H5 {
text-align: center;
color: #9fe870;
}
Wünsche ???
