Hier kann man 2 Bilder einfügen und Text. Der Text kann wahlweise links, rechts oder mittig stehen. Die Bilder sind per Schieber in der Größe änderbar. Einfach den HTML und CSS Code unten in einen Block einfügen. Also den vorhanden Inhalt löschen und meinen Code einfügen. Dann als Userblock speichern - fertig.
<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>
.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;
}