Gå till innehållet

Så här använder du den cirkulärmätare modulen på Divi byggare

Divi: det enklaste WordPress-temat att använda

Divi: Det bästa WordPress-temat hela tiden!

mer 901.000-nedladdningar, Divi är det mest populära WordPress-temat i världen. Den är komplett, lätt att använda och levereras med mer än 62 gratis mallar. [Rekommenderas]

Med den cirkulära räknaren kan du visa en unik statistik på ett estetiskt och övertygande sätt. När du rullar ner räknas numret ner och cirkeldiagrammet fylls gradvis för att matcha det procentuella värdet. Försök att kombinera flera cirkelmotormoduler på en sida för att ge dina besökare ett roligt sätt att lära sig mer om ditt företag eller dina personliga färdigheter.

circulerire counter example divi.png

Så här lägger du till en cirkulär mätarmodul till din sida

Innan du kan lägga till en cirkelräknarmodul på din sida måste du först komma åt Divi Builder. När Divi-temat har installerats på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför utgivaren varje gång du skapar en ny sida.

Genom att klicka på den här knappen kommer du att kunna aktivera Divi Builder, vilket ger dig tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatoren i visuellt läge.

Du kan också klicka på knappen Använd Visual Builder när du surfar på din webbplats om du är inloggad på din WordPress-instrumentpanel.

använd divi byggare

När du väl har gått in i Visual Builder kan du klicka på den grå plusknappen för att lägga till en ny modul på din sida. Nya moduler kan bara läggas till inom rader. Om du börjar en ny sida, glöm inte att lägga till en rad på din sida först.

counter circle divi.png

Leta reda på cirkulär mätarmodul i listan över moduler och klicka på den för att lägga till den på din sida. Listan över moduler är sökbar, vilket innebär att du också kan skriva ordet "cirkelräknare" och sedan klicka på Enter för att automatiskt söka och lägga till cirkelräknarmodulen!

När modulen har lagts till hälsas du med listan över modulalternativ. Dessa alternativ är indelade i tre huvudgrupper: Innehåll , Conception et advanced .

Använd case för att visa projektmål i en fallstudie

Ett av de bästa sätten att använda cirkeldiskmodulen är att illustrera statistik för fallstudier eller portföljobjekt.

Identifiera bara varje cirkulär mätare med en specifik projektfunktion eller ett mål så att användaren vet vilka tjänster som ingår i projektet. I det här exemplet använder jag modulen “cirkelräknare” för att visa tre projektmål.

Som du kan se på bilden nedan innehåller toppen av sidan de tre målen för projektet med hjälp av Bar Counter-modulen och längst ner på sidan innehåller resultaten av fallstudien med Counter Number-modulen .

Exempel modul cirkel divi animation.gif

Låt oss börja.

Använd den visuella byggaren för att lägga till ett standardavsnitt med en fullbredd (1 kolumn) layout. Lägg sedan till en cirkelräknarmodul i raden.

Cirkelkonfiguration divi.png

Uppdatera cirkelräknarinställningarna enligt följande:

Skapa enkelt din webbplats med Elementor

Med Elementor kan du enkelt skapa en webbdesign med ett professionellt utseende. Sluta betala dyra för vad du kan göra själv. [Fritt]

Innehållsalternativ

Titel: Animation
Nummer: 80
% Sign: Ja
Bakgrundsfärg: #e07a5e

Designalternativ

Färg på cirkel: #e07a5e
Färg på text: Mörk
Titel typsnitt: Standard
Titelstorlekstorlek: 26px
Titel Text Färg: #405c60
Teckensnitt: Standard
Storlekstypstorlek: 46px
Antal textfärg: #405c60

animering divi skapande av en cirkel med en grafisk divi.png

Spara inställningar

Du duplicerar nu cirkelräknarmodulen två gånger och dra varje kopia till den andra och tredje kolumnen på din rad.

kopiera en cirkulärmätare divi.png

Eftersom dina designelement har överförts till duplicerade moduler behöver du bara uppdatera titeln och numret på cirkulärmätaren.

Det är allt!

Besök sidan.

design counter divi builder.png

Alternativ för runda kontoninställningar

På fliken Innehåll hittar du allt innehåll i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul kommer alltid att finnas på den här fliken.

cirkelmodul innehåll section.png

Titel

Ange en titel för cirkelräknaren. Detta är vanligtvis ett ord som representerar statistiken du tittar på. Den visas under numret i cirkeldiagrammet.

namn

Ställ in ett nummer för den cirkulära räknaren. Om du väljer ett tal mindre än 100 fylls cirkeldiagrammet till en procentsats som är lika med det antal du angav. Om du till exempel anger nummer 20 fyller cirkeln 20% med din accentfärg.

Procentandel

Här kan du välja om procenttecknet ska läggas till efter numret definierat ovan.

Bar bakgrundsfärg

Detta ändrar stapelns fyllningsfärg. Mängden fyllningsfärg styrs av "nummer" som valts ovan. Om du väljer siffran 50 och en blå färg, fylls din cirkel 50% med en blå färg.

Letar du efter de bästa WordPress-teman och plugins?

Ladda ner de bästa plugins och WordPress-teman på Envato och enkelt skapa din webbplats. Redan mer än 49.720.000-nedladdningar. [EXKLUSIV]

Administrationsetikett

Detta ändrar moduletiketten i generatorn för enkel identifiering. När du använder WireFrame-vyn i Visual Builder visas dessa etiketter i modulblocket i Divi Builder-gränssnittet.

Circular Counter Design Options

På fliken Design hittar du alla modulstilalternativ, som teckensnitt, färger, storlek och avstånd. På den här fliken kan du ändra utseendet på din modul. Varje Divi-modul har en lång lista med designinställningar som du kan använda för att justera nästan vad som helst.

cirkulär disk alternativ divi.png

Cirkelens färg

Det här är färgen som kommer att användas för den ofyllda delen av cirkeln (det negativa utrymmet som inte fylls av bakgrundsfärgen på fältet som definieras på fliken Innehåll).

Cirkelens opacitet

Du kan minska opaciteten för den fyllda delen av cirkeln med den här inställningen.

Textfärg

Här kan du välja om din text ska vara ljus eller mörk. Om du arbetar med en mörk bakgrund bör din text vara ljus. Om din bakgrund är ljus bör din text vara svart.

Titel typsnitt

Du kan ändra typsnittet för din text genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fet, kursiv, versal och understrykning.

Titel teckenstorlek

Här kan du justera storleken på titeltexten. Du kan dra intervallreglaget för att öka eller minska storleken på din text, eller du kan direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Titeltextfärg

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra textfärgen på din titel väljer du önskad färg i färgväljaren med det här alternativet.

Spacing av titelbokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i titeltexten, använd intervallreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Höjd på titellinjen

Radhöjd påverkar utrymmet mellan varje rad i titeltexten. Om du vill öka utrymmet mellan varje rad, använd intervallreglaget för att justera utrymmet eller ange önskad avståndsstorlek i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Polisnummer

Du kan ändra typsnittet för din text genom att välja önskat typsnitt i rullgardinsmenyn. Divi levereras med dussintals fantastiska teckensnitt som drivs av Google-teckensnitt. Som standard använder Divi teckensnittet Open Sans för all text på din sida. Du kan också anpassa stilen på din text med fet, kursiv, versal och understrykning.

nummer text divi builder circular counter.png

Antal teckensnittstorlek

Här kan du justera storleken på din numrerade text. Du kan dra intervallreglaget för att öka eller minska storleken på din text, eller du kan direkt ange önskat textstorleksvärde i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Färg på siffertexten

Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din text väljer du den färg du vill ha i färgväljaren med det här alternativet.

Avstånd mellan numrerade bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din text, använd intervallreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om skjutreglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

textmätare mellanrum bokstäver divi.png

Nummerradens höjd

Radhöjd påverkar utrymmet mellan varje rad i din digitala text. Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera utrymmet eller ange storleken på utrymmet du vill ha i inmatningsfältet till höger om reglaget. Inmatningsfälten stöder olika måttenheter, vilket innebär att du kan ange "px" eller "em" beroende på din storlek för att ändra enhetstyp.

Avancerade alternativ för cirkulär räknare

På fliken Avancerat hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du tillämpa anpassad CSS på något av modulens många element. Du kan också tillämpa anpassade CSS-klasser och ID på modulen, som kan användas för att anpassa modulen i ditt barns temas style.css-fil.

Skapa enkelt din webbutik

Ladda ner gratis WooCommerce, de bästa e-handelspluggarna för att sälja dina fysiska och digitala produkter på WordPress. [Rekommenderas]

avancerad counter divi.png

CSS ID

Ange ett valfritt CSS-ID som ska användas för den här modulen. Ett ID kan användas för att skapa en anpassad CSS-stil eller för att länka till vissa delar av din sida.

CSS klass

Ange de valfria CSS-klasserna som ska användas för den här modulen. En CSS-klass kan användas för att skapa anpassad CSS-styling. Du kan lägga till flera klasser, åtskilda av ett mellanslag. Dessa klasser kan användas i ditt Divi Child-tema eller i anpassad CSS som du lägger till på din sida eller webbplats med Divi-temalternativen eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och alla modulens interna element. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till CSS direkt till varje element. CSS-posterna i dessa inställningar är redan inbäddade med stiltaggar. Så du måste bara ange CSS-regler åtskilda av semikolon.

synlighet

Med det här alternativet kan du styra enheterna där din modul visas. Du kan välja att inaktivera din modul på surfplattor, smartphones eller stationära datorer individuellt. Detta är användbart om du vill använda olika mods på olika enheter eller om du vill förenkla mobildesignen genom att ta bort några element från sidan.

Det är det för denna handledning.

Den här artikeln innehåller kommentarer 0

Lämna en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade *

Den här webbplatsen använder Akismet för att minska oönskade. Läs mer om hur dina kommentarer data används.

Tillbaka till toppen
11 aktier
del6
tweet2
Enregistrer3