Gå till innehållet

Hur man använder animerad barmodul på Divi

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]

Animerade räknare är ett roligt och effektivt sätt att visa statistik för dina besökare. Animationen utlöses av den lata laddningen för att göra navigeringen på sidan riktigt intressant. Du kan placera så många räknare som du vill i den här modulen.

mätmodul divi.png

Så här lägger du till en bardiskmodul på din sida

Innan du kan lägga till en stapeldiskmodul 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 på frontend, om du är ansluten till din WordPress-instrumentpanelen.

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. .

bar counter divi.png

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 fallstudier. Identifiera bara varje stapel med en specifik funktion eller ett projektmål 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.

visa 3 projekt goals.jpg

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

lägg till en räknare divi.png räknare

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.

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]

Uppdatera de enskilda modulinställningarna enligt följande:

Innehållsfliken

Titel: Min titel
Procent: 80

Spara inställningar

anpassningsfältet nummer divi.png

Lägg till ytterligare två stapeldiskar i modulen och ge var och en en titel och en procentandel.

bar counter divi lista av bars.png

Det är allt!

slutresultat divi modul barre.png

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.

alternativ innehållsmodul bar divi.png

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.

alternativ designmodul counter barre.png

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]

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 divi-modulen barre.png

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.

border option divi builder.png

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.

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]

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.

räknestavalternativ advanced.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-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.

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
tweet
Enregistrer5