Zähler / Counter mit Icons beim M5

Allgemeine Fragen
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 171
Registriert: Do 17. Dez 2020, 11:59

Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von inno »

Hallo,

gibt es ein M5-Theme mit einem Counter/Zähler mit Icons?
Grüße, Inno
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3563
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von Tommy Herrmann »

Moin,

ich habe jetzt noch nicht richtig verstanden, was Du suchst.

Mobirise hat eigentlich gar keinen Counter, sondern nur solche Zähler, die wild irgend etwas anzeigen. Oder doch - irgendwo hat auch Mobirise echte Counter ...

Ich weiß auch nicht wie Du das in Verbindung mit einem Icon jetzt verstehst.

Hier habe ich einige Beispiele mit Countern.

https://www.mobirise-tutorials.com/Busi ... untUp.html
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 171
Registriert: Do 17. Dez 2020, 11:59

Re: Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von inno »

... ich meine die wilden Zähler mit Icons! ;-)
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3563
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von Tommy Herrmann »

Zeigst Du bitte mal ein Beispiel oder mache einen Screenshot mit Angabe des Mobirise-Themas und Block Bezeichnung.

Icons kann man überall einbauen.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 171
Registriert: Do 17. Dez 2020, 11:59

Re: Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von inno »

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>&nbsp;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&nbsp;</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&nbsp; &nbsp;&nbsp;</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&nbsp; &nbsp;&nbsp;</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>
Dateianhänge
screen1.jpg
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3563
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von Tommy Herrmann »

... ich weiß nicht warum Du mir jetzt den HTML-Code schreibst, wenn ich nach dem Thema und Block frage, wie soll ich das denn sonst finden?

Grundsätzlich kannst Du ja an Buttons immer ein Icon über den Icon-Editor von Mobirise einfügen (löscht Du danach wieder). Mache das mal und dann kopiere Dir den Code von dem Icon im Code-Editor.

Der sieht dann z.B. so aus:

Code: Alles auswählen

<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn" style="font-size: 16px;"></span>
Dabei ist die class="fa-external-link" das Icon. Das habe ich z.B. unter dem Head-Bild an den Links auf meiner Startseite:

https://www.mobirise-tutorials.com/

Das ist also ein Bereichs Tag <span> mit verschiedenen Mobirise CSS-Klassen. Das kannst Du dann an beliebiger Stelle auch in beliebiger Farbe und Größe einfügen - zum Beispiel anstelle des Text1, Text2, etc.
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 171
Registriert: Do 17. Dez 2020, 11:59

Re: Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von inno »

Bei diesem Block waren die Icons oben über dem Zähler / Text. Ist ein M4 Block! Bei M5 werden sie nicht mehr angezeigt! Deshalb habe ich dir den Code geschickt! Ich versuche mal deinen Lösungsvorschlag!
Danke :tu:
Benutzeravatar
Tommy Herrmann
Site Admin
Site Admin
Beiträge: 3563
Registriert: So 6. Dez 2020, 07:37
Wohnort: Berlin
Kontaktdaten:

Re: Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von Tommy Herrmann »

Das Thema "PetsM4" hat doch sogar Counter mit Icons :confused:

PetsM4 Counters.jpg
inno
Mitglied (Level 10)
Mitglied (Level 10)
Beiträge: 171
Registriert: Do 17. Dez 2020, 11:59

Re: Zähler / Counter mit Icons beim M5

Ungelesener Beitrag von inno »

Super! Danke dir!!!!
Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast