Volker Niederastroth

Ein Block mit 2-3 Spalten und Bildauswahl oben oder unten. Buttons können auch eingefügt werden und alles farblich anpassbar

Mehr lesen
niederastroth.de

Einfach den unten stehenden Code  in einen Artikel Block Kopieren. Den vorhandenen Code der Blocks vorher komplett löschen, damit der neue Code fehlerfrei läuft


Der Text kann auch über dem Bild stehen
und somit ist das Layout flexibel.

PHP Scripte niederastroth.de
Mehr lesen
HTML-Code
<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">



    <header>Spalte 3</header>

    <select title="Bildposition" name="imgPos3">

      <option value="none">Kein Bild</option>

      <option value="top">Bild oben</option>

      <option value="bottom" selected>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>Ein Block mit <b>2-3 Spalten </b>und Bildauswahl oben oder unten. Buttons können auch eingefügt werden und alles farblich anpassbar<br><br></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-1-600x400.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>Einfach den unten stehenden Code&nbsp; in einen Artikel Block Kopieren. Den vorhandenen Code der Blocks vorher komplett löschen, damit der neue Code fehlerfrei läuft<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>Der Text kann auch über dem Bild stehen<br>und somit ist das Layout flexibel.<br><br></div>



          <div class="column-image" mbr-if="imgPos3 == 'bottom'">

            <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="mbr-section-btn align-center mt-3" mbr-if="showBtn3" mbr-buttons><a class="btn btn-success" href="#" data-app-placeholder="Type Text">Mehr lesen</a></div>

        </div>

      </div>



    </div>

  </div>

</section>
CSS-Code
.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;

}

JavaScript-Code
Kein Java Code erforderlich im Block

© Copyright 2025 Volker Niederastroth

Besucherstatistik

Besucher online: 3

Besucher heute: 68

Besucher diese Woche: 287

Besucher diesen Monat: 695

Gesamtbesucher: 11259

Impressum Datenschutz
💬