Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 10:48
Hallo,
gibt es ein M5-Theme mit einem Counter/Zähler mit Icons?
Grüße, Inno
gibt es ein M5-Theme mit einem Counter/Zähler mit Icons?
Grüße, Inno
Forum für Mobirise und NOF
https://www.mobirise-tutorials.com/Forum/
https://www.mobirise-tutorials.com/Forum/viewtopic.php?t=884
Code: Alles auswählen
<section class="counters counters1 petsm4_counters1" group="Counters" plugins="ViewportChecker" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">
<mbr-parameters>
<!-- Block parameters controls (Blue "Gear" panel) -->
<header>Size</header>
<input type="range" inline title="Top" name="paddingTop" min="0" max="8" step="1" value="3">
<input type="range" inline title="Bottom" name="paddingBottom" min="0" max="8" step="1" value="0">
<select title="Items" name="items">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
</select>
<header>Show / Hide</header>
<input type="checkbox" title="Title" name="showTitle">
<input type="checkbox" title="Items Title" name="showTitles" checked>
<input type="color" title="Icons Color" name="iconColor" value="#00498d">
<header>Background</header>
<fieldset type="background" name="bg" parallax>
<input type="color" title="Color" value="#ffffff" selected>
<input type="video" title="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.7" 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">
<h2 class="mbr-section-title mbr-bold pb-5 align-center mbr-fonts-style" mbr-theme-style="display-2" mbr-if="showTitle" data-app-selector=".mbr-section-title">
Counters</h2>
<div class="row justify-content-center">
<div class="card col-6 col-md-6 col-lg-3" mbr-if="items > 0">
<div class="card-ico">
<h4 class="mbr-content-title mbr-semibold mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showTitles">TEXT1</h4>
<span mbr-icon class="mbr-iconfont sli-people"></span>
</div>
<div class="card-text">
<h3 class="count mbr-semibold mbr-fonts-style" mbr-theme-style="display-2"><b> 12</b></h3>
</div>
</div>
<div class="card col-6 col-md-6 col-lg-3" mbr-if="items > 1">
<div class="card-ico">
<h4 class="mbr-content-title mbr-semibold mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showTitles">TEXT2 </h4>
<span mbr-icon class="mbr-iconfont icon54-v2-office-building"></span>
</div>
<div class="card-text">
<h3 class="count mbr-semibold mbr-fonts-style" mbr-theme-style="display-2"><b>
22</b></h3>
</div>
</div>
<div class="card col-6 col-md-6 col-lg-3" mbr-if="items > 2">
<div class="card-ico">
<h4 class="mbr-content-title mbr-semibold mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showTitles">Text3 </h4>
<span mbr-icon class="mbr-iconfont icon54-v3-note-book-write"></span>
</div>
<div class="card-text">
<h3 class="count mbr-semibold mbr-fonts-style" mbr-theme-style="display-2"><b>
33</b></h3>
</div>
</div>
<div class="card col-6 col-md-6 col-lg-3" mbr-if="items > 3">
<div class="card-ico">
<h4 class="mbr-content-title mbr-semibold mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showTitles">Text4 </h4>
<span mbr-icon class="mbr-iconfont icon54-v2-time-app"></span>
</div>
<div class="card-text">
<h3 class="count mbr-semibold mbr-fonts-style" mbr-theme-style="display-2"><b>
33</b></h3>
</div>
</div>
</div>
</div>
</section>
Code: Alles auswählen
<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn" style="font-size: 16px;"></span>