Den cirkulära räknaren låter dig visa en enda statistik på ett estetiskt tilltalande sätt. När du rullar nedåt räknas siffran ner och cirkeldiagrammet fylls gradvis för att matcha procentvärdet. Försök att kombinera flera cirkelräknaremoduler på en sida för att ge din besökare ett roligt sätt att lära sig om ditt företag eller dina personliga färdigheter.
Så här lägger du till en cirkulär mätarmodul till din sida
Innan du kan lägga till en cirkelräknaremodul på din sida måste du först komma åt Divi Builder. När Divi-tema installerat 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.
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.
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 cirkelräknaremodulen ä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 .
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.
Uppdatera cirkelräknarinställningarna enligt följande:
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
Spara inställningar
Du duplicerar nu cirkelräknarmodulen två gånger och dra varje kopia till den andra och tredje kolumnen på din rad.
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.
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.
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.
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.
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.
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.
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.
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-klasser som ska användas för denna modul. 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 din Divi-tema Barn eller i anpassad CSS som du lägger till på din sida eller webbplats med Divi-temaalternativ eller Divi Builder-sidinställningar.
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.
