Mobirise-Tutorials.com

Code: Alles auswählen

<section data-bs-version="5.1" class="features3" group="Features" mbr-class="{'mbr-parallax-background':bg.parallax}">
    <mbr-parameters>
        <header>Size</header>
        <input type="checkbox" title="Full Width" name="fullWidth" checked="">
        <input type="range" inline="" title="Top" name="paddingTop" min="0" max="10" step="1" value="4">
        <input type="range" inline="" title="Bottom" name="paddingBottom" min="0" max="10" step="1" value="4">
        <header>Show/Hide</header>
        <input type="checkbox" title="Subtitle" name="showSubtitle">
        <input type="checkbox" title="Title" name="showTitle" checked="">
        <input type="checkbox" title="Text" name="showText" checked="">
        <input type="range" name="textWidth" title="Width" min="4" max="12" step="1" value="7" condition="showSubtitle || showTitle || showText">
        <select title="Align" name="contentAlign" condition="showSubtitle || showTitle || showText">
            <option value="">Left</option>
            <option value="justify-content-center" selected="">Center</option>
            <option value="justify-content-end">Right</option>
        </select>
        <header>Cards</header>
        <select title="Columns" name="cardsWidth">
            <option value="12">1</option>
            <option value="6">2</option>
            <option value="4">3</option>
            <option value="3" selected="">4</option>
        </select>
        <input type="checkbox" title="Auto Size" name="autoSize" checked="">
        <input type="range" name="imageHeight" title="Height" min="1" max="5" step="1" value="4" condition="!autoSize">
        <input type="checkbox" title="Border" name="showBorder" checked="">
        <input type="color" title="Color" value="#dddddd" name="borderColor">
        <header>Background</header>
        <fieldset type="background" name="bg" parallax="">
            <input type="image" title="Image" value="../_images/background.jpg" parallax="">
            <input type="color" title="Color" value="#ffffff" selected="">
        </fieldset>
        <input type="checkbox" title="Second Color" name="bgColor2" condition="bg.type == 'color'" checked="">
        <input type="color" title="Color" value="#fef2f2" name="twoBgColor" condition="bgColor2 &amp;&amp; bg.type == 'color'">
        <input type="range" name="bgHeight" title="Proportion" min="1" max="10" step="1" value="6" condition="bgColor2 &amp;&amp; bg.type == 'color'">
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'">
        <input type="color" title="Overlay Color" name="overlayColor" value="#ffffff" condition="overlay &amp;&amp; bg.type !== 'color'">
        <input type="range" inline="" title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.9" condition="overlay &amp;&amp; bg.type !== 'color'">
        <!-- End block parameters -->
    </mbr-parameters>

    <div class="mbr-overlay" mbr-if="overlay &amp;&amp; bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}"></div>
    <div class="two_background"></div>
    
    <div mbr-class="{'container': !fullWidth, 'container-fluid': fullWidth}">
        <div class="row {{contentAlign}}" mbr-if="showSubtitle || showTitle || showText">
            <div class="col-12 col-md-12 col-lg-{{textWidth}}">
                <div class="main_header text-center">
                    <h3 class="mbr-section-subtitle mbr-fonts-style" mbr-if="showSubtitle" data-app-selector=".mbr-section-subtitle" mbr-theme-style="display-4">THE TEAM</h3>
                    <h2 class="mbr-section-title mbr-fonts-style" mbr-if="showTitle" data-app-selector=".mbr-section-title" mbr-theme-style="display-1">SWEET PIE</h2>
                    <p class="mbr-text mb-0 mbr-fonts-style" mbr-if="showText" data-app-selector=".mbr-text" mbr-theme-style="display-4">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit ex voluptatem voluptas aut quod, autem obcaecati molestiae optio consequuntur.</p>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}} active">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="../_images/vertical/bistroVertical9.jpg" data-slide-to="0" data-bs-slide-to="0" alt="">
                    </div>
                </div>
            </div>
        <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="../_images/vertical/bistroVertical2.jpg" data-slide-to="1" data-bs-slide-to="1" alt="">
                    </div>
                </div>
            </div>
            <div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="../_images/vertical/bistroVertical7.jpg" alt="" data-slide-to="2" data-bs-slide-to="2">
                    </div>
                </div>
            </div><div class="item features-image сol-12 col-md-6 col-lg-{{cardsWidth}}">
                <div class="item-wrapper">
                    <div class="item-img">
                        <img src="../_images/vertical/bistroVertical1.jpg" alt="" data-slide-to="3" data-bs-slide-to="3">
                    </div>
                </div>
            </div>
            
            
            
        </div>
    </div>
</section>

Code: Alles auswählen

.row > [class*=col] {
  padding-left: 16px;
  padding-right: 16px;
}

Code: Alles auswählen

.row > [class*=col] {
  padding-left: 5px;
  padding-right: 5px;
}

Code: Alles auswählen

@media (min-width: 992px) {
  .abstand-bild-links {
    padding-left: 16px;
  }
  .abstand-bild-rechts {
    padding-right: 16px;
  }
}

Code: Alles auswählen

<div class="item-img">

Code: Alles auswählen

<div class="item-img abstand-bild-links">

Code: Alles auswählen

<div class="item-img abstand-bild-rechts">

Code: Alles auswählen

@media (min-width: 992px) {
  .row > [class*=col] {
    padding-left: 5px;
    padding-right: 5px;
  }
  .abstand-bild-links {
    padding-left: 16px;
  }
  .abstand-bild-rechts {
    padding-right: 16px;
  }
}