Mobirise-Tutorials.com

Code: Alles auswählen

<section class="features4" group="Features" data-bg-video="{{bg.type == 'video'&&bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">

    <mbr-parameters>
        <!-- Block parameters controls (Blue "Gear" panel) -->
        <input type="range" inline title="Top" name="paddingTop" min="0" max="9" step="1" value="0">
        <input type="range" inline title="Bottom" name="paddingBottom" min="0" max="9" step="1" value="3">
        <input type="checkbox" title="Show Main Title" name="showMainTitle" checked>
        <input type="checkbox" title="Show Main Text" name="showMainText">
        <input type="checkbox" title="Show Card Title" name="showTitle" checked>
        <input type="checkbox" title="Show Card Text" name="showText" checked>
        <select title="Cards" name="cardsAmount">
            <option value="1">1</option>
            <option value="2" selected>2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        <input type="color" title="Card 1 Bg" name="cardsBg1" value="#ffffff" condition="cardsAmount > 0">
        <input type="color" title="Card 2 Bg" name="cardsBg2" value="#ffffff" condition="cardsAmount > 1">
        <input type="color" title="Card 3 Bg" name="cardsBg3" value="#ffffff" condition="cardsAmount > 2">
        <input type="color" title="Card 4 Bg" name="cardsBg4" value="#ffffff" condition="cardsAmount > 3">
        <input type="color" title="Card 5 Bg" name="cardsBg5" value="#ffffff" condition="cardsAmount > 4">
        <input type="color" title="Card 6 Bg" name="cardsBg6" value="#ffffff" condition="cardsAmount > 5">
        <input type="checkbox" title="Show Link" name="showLink" checked>
        <input type="color" title="Link Icons Color" name="linkiconsColor" value="#000000" condition="showLink">


        <fieldset type="background" name="bg" parallax>
            <input type="image" title="Background Image" value parallax>
            <input type="color" title="Background Color" value="#f8f8f8" selected>
            <input type="video" title="Background Video" value="https://www.youtube.com/watch?v=36YgDDJ7XSc">
        </fieldset>
        <input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
        <input type="color" title="Overlay Color" name="overlayColor" value="#ffffff" condition="overlay&&bg.type !== 'color'">
        <input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.5" condition="overlay&&bg.type !== 'color'">
        <!-- End block parameters -->
    </mbr-parameters>

    <div class="mbr-overlay" mbr-if="overlay&&bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
    </div>
    <div class="container">
        
          <div class="media-container-column col-md-12 mb-5">
                <h2 class="mbr-section-title mbr-fonts-style mb-0 mbr-bold" mbr-theme-style="display-2" mbr-if="showMainTitle" data-app-selector=".mbr-section-title">Titel</h2>
                <p class="mbr-text main-text mbr-fonts-style mb-0" mbr-theme-style="display-4" mbr-if="showMainText" data-app-selector=".mbr-text">Diam donec adipiscing tristique risus nec feugiat in.&nbsp;</p>
            </div>
        
        <div class="row justify-content-center" mbr-cards="bootstrap">
            
            <div class="card col-12" mbr-if="cardsAmount > 0">
                <div class="card-wrapper">
                        <div class="cards-header">
                        <h4 class="card-title mbr-fonts-style mbr-bold mb-2" mbr-theme-style="display-4" mbr-if="showTitle" data-app-selector=".card-title">Test 2</h4>
                        <p class="mbr-text mbr-fonts-style mb-0" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".cards-header .mbr-text">Test 1</p>
                         </div>
                    
                        <div class="card-link media-container-row" mbr-if="showLink">
                            <p class="mbr-text mbr-fonts-style mb-0 mr-3" mbr-theme-style="display-7" data-app-selector=".card-link .mbr-text"><b>Auswählen</b></p>
                            <span mbr-icon class="mbr-iconfont link-ico mobi-mbri-arrow-next mobi-mbri"></span>
                        </div>

                </div>
            </div>
             <div class="card col-12" mbr-if="cardsAmount > 1">
                <div class="card-wrapper">
                        <div class="cards-header">
                        <h4 class="card-title mbr-fonts-style mbr-bold mb-2" mbr-theme-style="display-4" mbr-if="showTitle" data-app-selector=".card-title">Test 1</h4>
                        <p class="mbr-text mbr-fonts-style mb-0" mbr-theme-style="display-7" mbr-if="showText" data-app-selector=".cards-header .mbr-text">Test 2</p>
                         </div>
                    
                        <div class="card-link media-container-row" mbr-if="showLink">
                            <p class="mbr-text mbr-fonts-style mb-0 mr-3" mbr-theme-style="display-7" data-app-selector=".card-link .mbr-text"><b>Auswählen</b><br></p>
                            <span mbr-icon class="mbr-iconfont link-ico mobi-mbri-arrow-next mobi-mbri"></span>
                        </div>

                </div>
            </div>
             

                </div>
            </div>


</section>

Code: Alles auswählen

<div class="media-container-column col-md-12 mb-5">
    <h2 class="mbr-section-title mbr-fonts-style mb-0 mbr-bold" mbr-theme-style="display-2" mbr-if="showMainTitle" data-app-selector=".mbr-section-title">Titel</h2>
    <p class="mbr-text main-text mbr-fonts-style mb-0" mbr-theme-style="display-4" mbr-if="showMainText" data-app-selector=".mbr-text">Diam donec adipiscing tristique risus nec feugiat in.&nbsp;</p>
</div>