Animerade räknare är ett roligt och effektivt sätt att visa statistik till din besökare. Animeringen utlöses av lat laddning för att göra sidnavigeringen riktigt intressant. Du kan placera hur många diskar du vill i denna modul.
Så här lägger du till en bardiskmodul på din sida
Innan du kan lägga till en barrä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 på frontend, om du är ansluten till din WordPress-instrumentpanelen.
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 upp räknarmodulen 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 in ordet "Bar counter" och sedan klicka på Enter för att automatiskt söka och lägga till bar counter module!
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 Bar Counters-modulen är att illustrera statistik för fallstudierna. Tagga helt enkelt varje stapel med en specifik projektfunktion eller syfte så att användaren vet vilka tjänster som ingår i projektet. I det här exemplet använder jag stapelmodulen för att visa tre projektmål.
Som du kan se innehåller toppen av sidan de tre målen för projektet med hjälp av modulen "Bar Counter" och längst ner på sidan innehåller resultaten från fallstudien med "Counter" -modulen. Siffra ".
Låt oss börja.
Använd den visuella byggaren för att lägga till ett standardavsnitt med en layout med full bredd (1 kolumn). Lägg sedan till en stapeldiskmodul i raden.
Uppdatera parametrarna för stapeldiskarna på följande sätt:
Innehållsalternativ
Procentandel av användning: PÅ
Bakgrundsfärg: #dddddd
Bar bakgrundsfärg: # e07a5e
Designalternativ
Textfärg: Mörk
Titel typsnitt: standard
Titelstorlekstorlek: 20px
Titel Text Färg: # 405c60
Titel Linjehöjd: 2em
Procentteckensnitt: Standard
Antal teckensnittstorlek: 16px
Procentuell textfärg: #ffffff
Procentuell linjehöjd: 2.5em
Gå tillbaka till fliken Innehåll och välj + Lägg till en ny artikel att lägga till den första streckräknaren till modulen.
Uppdatera de enskilda modulinställningarna enligt följande:
Innehållsfliken
Titel: Min titel
Procent: 80
Spara inställningar
Lägg till ytterligare två stapeldiskar i modulen och ge var och en en titel och en procentandel.
Det är allt!
Alternativ för barräknare
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.
Procent av användning
Som standard visas procentsatser i räknaren för färgfält. Denna text kan stängas av med den här inställningen, så att det visuella stapeldiagrammet kan tala för sig själv.
Bakgrundsfärg
Med det här alternativet kan du justera bakgrundsfärgen för varje stapeldisk. Den här inställningen gäller det negativa utrymmet bakom färgen på det fyllda fältet.
Bar bakgrundsfärg
Med det här alternativet kan du justera bakgrundsfärgen för det fyllda fältet. Denna bakgrundsfärg överlappar den tidigare bakgrundsfärgsinställningen.
Administration etikett
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.
Bar 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.
Textfärg
Du kan välja här om texten 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. Du kan ytterligare anpassa din textfärg med de ytterligare textfärgalternativen som följer.
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.
Procentandel av text
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 Open Sans-teckensnittet för all text på din sida. Du kan också anpassa stilen på din text med hjälp av fetstil, kursiv, versaler och understrykning.
Procentuell typsnittstorlek
Här kan du justera storleken på din text i procent. Du kan dra intervallreglaget för att öka eller minska storleken på din text eller så kan du 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.
Procentuell textfärg
Som standard visas alla textfärger i Divi i vitt eller mörkgrått. Om du vill ändra färgen på din text i procent väljer du önskad färg från färgväljaren med det här alternativet.
Antal bokstavsavstånd
Bokstavsavstånd påverkar avståndet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din text i procent, 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.
Höjd av procentlinjen
Radhöjd påverkar utrymmet mellan varje rad i din text i procent. Om du vill öka utrymmet mellan varje rad, använd intervallreglaget för att justera utrymmet eller ange önskad rymdstorlek 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.
Borderradie
Om du applicerar en kantradie kommer du att runda barens hörn i stapeln. Ju större kantradie, desto mer rundade hörn.
Använd gränsen
Om du aktiverar det här alternativet placeras en gräns runt din modul. Denna kant kan anpassas med följande villkorliga parametrar.
Färg på gränsen
Det här alternativet påverkar färgen på din kant. Välj en anpassad färg från färgväljaren för att tillämpa den på din kant.
Bredden av gränsen
Som standard är gränserna 1 pixel breda. Du kan öka detta värde genom att dra områdesreglaget eller ange ett anpassat värde i inmatningsfältet till höger om reglaget. Stödda anpassade måttenheter, vilket innebär att du kan ändra standardenheten från "px" till något annat t.ex. em, vh, vw etc.
Gränsstil
Gränser stöder åtta olika stilar, inklusive: solid, prickad, prickad, dubbel, spår, ås, insats och start. Välj den stil du vill ha i rullgardinsmenyn för att tillämpa den på din gräns.
Padding av bar
Padding är utrymmet som läggs till i din modul, mellan kanten på modulen och dess interna element. Här kan du lägga till anpassad toppfyllning och bottenfyllning i stapelmodulen.
Avancerade alternativ för barrä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-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-underordnade tema eller i det anpassade CSS som du lägger till på din sida eller till din webbplats med hjälp av Divi-temalternativen eller inställningarna för Divi Builder-sidan.
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.
