es gibt genug Blöcke in Mobirise. Aber eben nicht immer das was ich suche oder will.
Gerade die Artikel Blöcke sind meiner Meinung nach eher bescheiden
Ich hab einen 2-3 Spalten Block gebastelt der auch Bilder und Buttons anzeigen kann. Bilder über Text oder drunter.
Die Spalten werden durch Linien, die man natürlich in der Stärke und Farbe auch ändern kann, abgegrenzt.
Sieht so aus :
Ihr könnt ihn ja mal ausprobieren :
HTML TEIL:
Code: Alles auswählen
<section data-bs-version="5.1" class="newspaper3" group="Content">
<mbr-parameters>
<header>Layout</header>
<input type="checkbox" title="Full Width" name="fullWidth" checked>
<select title="Spaltenanzahl" name="spaltenAnzahl">
<option value="2">2 Spalten</option>
<option value="3" selected>3 Spalten</option>
</select>
<input type="range" inline title="Top Padding (rem)" name="paddingTop" min="0" max="10" step="1" value="9">
<input type="range" inline title="Bottom Padding (rem)" name="paddingBottom" min="0" max="10" step="1" value="7">
<input type="range" inline title="Spaltenabstand (rem)" name="colGap" min="0" max="5" step="0.5" value="0">
<header>Darstellung</header>
<input type="color" title="Hintergrundfarbe" name="bgColor" value="#9aa0a6">
<input type="range" title="Schriftgröße (px)" name="fontSize" min="12" max="28" step="1" value="25">
<input type="range" title="Bildgröße (%)" name="imgWidth" min="50" max="100" step="5" value="65">
<header>Trennlinien</header>
<input type="color" title="Linienfarbe" name="lineColor" value="#5f6368">
<input type="range" title="Linienstärke (px)" name="lineWidth" min="1" max="10" step="1" value="1">
<header>Spalte 1</header>
<select title="Bildposition" name="imgPos1">
<option value="none">Kein Bild</option>
<option value="top" selected>Bild oben</option>
<option value="bottom">Bild unten</option>
</select>
<input type="image" title="Bild 1" name="imgSrc1" value="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-599x399.jpg">
<input type="checkbox" title="Button anzeigen" name="showBtn1" checked>
<header>Spalte 2</header>
<select title="Bildposition" name="imgPos2">
<option value="none">Kein Bild</option>
<option value="top" selected>Bild oben</option>
<option value="bottom">Bild unten</option>
</select>
<input type="image" title="Bild 2" name="imgSrc2" value="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-816x490.jpg">
<input type="checkbox" title="Button anzeigen" name="showBtn2" checked>
<header>Spalte 3</header>
<select title="Bildposition" name="imgPos3">
<option value="none">Kein Bild</option>
<option value="top" selected>Bild oben</option>
<option value="bottom">Bild unten</option>
</select>
<input type="image" title="Bild 3" name="imgSrc3" value="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-540x360.jpg">
<input type="checkbox" title="Button anzeigen" name="showBtn3" checked>
</mbr-parameters>
<div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}" mbr-style="{'padding-top': paddingTop + 'rem', 'padding-bottom': paddingBottom + 'rem', 'background-color': bgColor}">
<div class="row newspaper-row justify-content-center" mbr-style="{'column-gap': colGap + 'rem'}">
<!-- SPALTE 1 -->
<div class="col-12 col-md-6 col-lg-{{ spaltenAnzahl == '2' ? 6 : 4 }} newspaper-col" mbr-style="{'border-right': lineWidth + 'px solid ' + lineColor}">
<div class="column-inner">
<div class="column-image" mbr-if="imgPos1 == 'top'">
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-816x544.jpg" class="img-fluid rounded d-block mx-auto" mbr-style="{'width': imgWidth + '%'}" alt>
</div>
<div class="text-content mbr-fonts-style display-7" mbr-style="{'font-size': fontSize + 'px'}" mbr-text>
<br>Text für Spalte 1 – dein Inhalt im Zeitungsstil.<br>Mehr Text geht<br>immer </div>
<div class="column-image" mbr-if="imgPos1 == 'bottom'">
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-816x544.jpg" class="img-fluid rounded d-block mx-auto" mbr-style="{'width': imgWidth + '%'}" alt>
</div>
<div class="mbr-section-btn align-center mt-3" mbr-if="showBtn1" mbr-buttons><a class="btn btn-black-outline" href="#" data-app-placeholder="Type Text">Mehr lesen</a></div>
</div>
</div>
<!-- SPALTE 2 -->
<div class="col-12 col-md-6 col-lg-{{ spaltenAnzahl == '2' ? 6 : 4 }} newspaper-col" mbr-style="{'border-right': spaltenAnzahl == '3' ? (lineWidth + 'px solid ' + lineColor) : 'none'}">
<div class="column-inner">
<div class="column-image" mbr-if="imgPos2 == 'top'">
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-768x576.jpg" class="img-fluid rounded d-block mx-auto" mbr-style="{'width': imgWidth + '%'}" alt>
</div>
<div class="text-content mbr-fonts-style display-7" mbr-style="{'font-size': fontSize + 'px'}" mbr-text>
<br>Text oben Bild unten f<br>dsfdf<br>dfdf<br>dfdsf<br>dsfdsf<br>dsfdsf<br><br></div>
<div class="column-image" mbr-if="imgPos2 == 'bottom'">
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-816x490.jpg" class="img-fluid rounded d-block mx-auto" mbr-style="{'width': imgWidth + '%'}" alt>
</div>
<div class="mbr-section-btn align-center mt-3" mbr-if="showBtn2" mbr-buttons>
<a class="btn btn-primary" href="#">Mehr lesen</a>
</div>
</div>
</div>
<!-- SPALTE 3 -->
<div class="col-12 col-md-4 newspaper-col" mbr-if="spaltenAnzahl == '3'">
<div class="column-inner">
<div class="column-image" mbr-if="imgPos3 == 'top'">
<img src="file:///C:/Users/volker/AppData/Local/Mobirise.com/Mobirise/projects/project-2025-09-03_185847/assets/images/mbr-583x389.jpg" class="img-fluid rounded d-block mx-auto" mbr-style="{'width': imgWidth + '%'}" alt>
</div>
<div class="text-content mbr-fonts-style display-7" mbr-style="{'font-size': fontSize + 'px'}" mbr-text>
<br>Text für Spalte 3 – Zusatzinfos oder abschließender Abschnitt.
</div>
<div class="column-image" mbr-if="imgPos3 == 'bottom'">
<img src="{{imgSrc3}}" class="img-fluid rounded d-block mx-auto" mbr-style="{'width': imgWidth + '%'}">
</div>
<div class="mbr-section-btn align-center mt-3" mbr-if="showBtn3" mbr-buttons><a class="btn btn-black-outline" href="#" data-app-placeholder="Type Text">Mehr lesen</a></div>
</div>
</div>
</div>
</div>
</section>Code: Alles auswählen
.newspaper3 .newspaper-row {
display: flex;
flex-wrap: wrap;
}
.newspaper3 .newspaper-col {
padding-left: 1rem;
padding-right: 1rem;
}
.newspaper3 .column-inner {
display: flex;
flex-direction: column;
}
.newspaper3 .column-image {
width: 100%;
text-align: center;
}
.newspaper3 .column-image img {
margin: 0.75rem auto;
display: block;
border-radius: 0.25rem;
height: auto;
}
.newspaper3 .text-content {
text-align: justify;
width: 100%;
}
.mbr-section-btn {
text-align: center;
}
@media (max-width: 767px) {
.newspaper3 .newspaper-col {
border-right: none !important;
margin-bottom: 2rem;
}
}
DIV {
text-align: center;
color: #232323;
}
.btn {
font-size: 18px;
}