Divi Modul – Kreiszähler

Divi Modul Kreiszähler

Mit dem Kreiszähler-Modul kann man einfache Präsentationen von Zählwerten umsetzen. Angeben werden dabei:

1. Eine Zahl
2. Anzeige des Prozentezeichens (Ja/Nein)
3. Ein Titel bzw. ein Text unterhalb des Kreiszählers

Mit diesem einfachen Mittel lassen sich Zahlenwerte eindrucksvoll darstellen. Natürlich kann auf die HTML-Strutur per CSS zugegriffen werden.

Beispiele – Kreiszähler

Kreiszähler auf hellem Hintergrund

%

Beispiel 01

%

Beispiel 02

%

Beispiel 03

Beispiel 04

Kreiszähler auf dunklem Hintergrund

%

Beispiel 01

%

Beispiel 02

%

Beispiel 03

Beispiel 04

Divi für Entwickler – Handlungsaufruf

[et_pb_circle_counter admin_label="Circle Counter" title="Circle Counter" number="64" percent_sign="on" background_layout="light" bar_bg_color="#e02b20" circle_color="#e09900" circle_color_alpha="0.1" title_font="Arial" title_text_color="#8300e9" title_letter_spacing="1px" title_line_height="1.1em" number_font="Verdana" number_text_color="#7cda24" number_letter_spacing="1px"]

Oberhalb dieses Shortcodes wird ein Kreiszähler erstellt.

Die Elemente des Short-Codes

admin_label = Interne Beschreibung des Moduls
title = Titel der unterhalb des Kreiszählers angezeigt wird
number = Die Zahl im Kreiszähler (1, 2, 3 …)
percent_sign = Prozentzeichen setzen (%) oder nicht
background_layout = Bestimmt das Hintergrundlayout, es könnte „light“ (hell) oder „dark“ (dunkel) sein.
bar_bg_color = Hintergrundfarbe
circle_color = Kreisfarbe (HEX)
title_text_color = Farbe des Titels
number_text_color = Farbe der Zahl
title_font = Schriftart des Titels
title_letter_spacing = Platz zwischen dem Buchstaben des Titels
title_line_height = Zeilenhöhe des Titels
number_font = Schriftart der Nummer
number_letter_spacing = Platz zwischen den Zahlen
title_font_size = Schriftgröße des Titels



http://jetzt-lerne-ich-divi.de/blog/divi-modul-kreiszaehler/?et_fb=1#
64%

Circle Counter

/* Circle Counter Module */
.et_pb_circle_counter,
.et_pb_number_counter {
	position: relative;
	margin: 0 auto 30px;
	text-align: center;
}
 
.et_pb_circle_counter {
	max-width: 225px;
}
 
.et_pb_circle_counter canvas {
	position: absolute;
	top: 0;
	left: 0;
}
 
.et_pb_circle_counter .percent {
	word-wrap: initial;
}
 
.et_pb_circle_counter .percent,
.et_pb_number_counter .percent {
	position: relative;
	z-index: 2;
}
 
.et_pb_circle_counter .percent p,
.et_pb_number_counter .percent p {
	visibility: hidden;
}
 
.et_pb_circle_counter .percent p,
.et_pb_slide_content .et_pb_circle_counter .percent p:last-of-type {
	position: relative;
	padding: 49% 0;
	font-size: 40px;
	font-weight: 500;
	line-height: 0.1em;
}
 
.et_pb_circle_counter h3,
.et_pb_number_counter h3 {
	position: relative;
	padding: 20px 0 0 0;
	font-size: 18px;
}