Divi tutorial: Hur man använder nummerräknarmodulen

Sifferräknarmodulen på Wordpress tema Divi är ett bra sätt att visa siffror på ett roligt och engagerande sätt. Denna modul används ofta för att visa statistik om dig eller ditt företag. Att visa ditt antal kunder eller följare på Facebook är till exempel ett bra sätt att visa upp sociala bevis.

Hur man lägger till modulen Counter nummer Divi

Innan du kan lägga till en räknarmodul på din sida måste du först hoppa in i Divi Builder. När Divi-tema installerat på din webbplats kommer du att märka en knapp Använd Divi Builder ovanför inläggsredigeraren när du skapar en ny sida. Klicka på den här knappen för att aktivera Divi Builder och få tillgång till alla Divi Builder-moduler. Klicka sedan på knappen Använd Visual Builder för att starta generatorn i visuellt läge. Du kan också klicka på knappen Använd Visual Builder när du surfar på din webbplats i förgrunden om du är ansluten till din WordPress-instrumentpanel.

När du har angett 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, kom ihåg att först lägga till en rad på din sida.

Leta reda på sifferräknarens modul 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 "sifferräknare" och sedan klicka på "Enter" för att automatiskt hitta och lägga till sifferräknarmodulen! När modulen har lagts till hälsas du av listan över modulalternativ. Dessa alternativ är uppdelade i tre huvudgrupper: Innehåll , Conception et advanced .

Exempel på användningsfall: Använd den digitala räknemodulen för att visa resultaten av ett projekt

Ett bra sätt att använda numeräknarmodulen är att illustrera statistik för fallstudierna. Märk bara varje räknare med ett nummer så att användaren enkelt kan se projektets framgång. I det här exemplet använder jag den digitala räknarmodulen för att visa fyra projektresultat.

Som du kan se innehåller toppen av sidan de tre målen för projektet med hjälp av modulen " Bar-räknare Och längst ner på sidan innehåller resultaten från fallstudien med de digitala räknarmodulerna.

Det avsnitt på sidan som visar resultaten från fallstudien med hjälp av digitala moduler kräver användning av en specialavdelning. Lägg till ett specialavsnitt på sidan med Visual Builder och välj följande layout:

Välj en 1 kolumnlayout till höger om avsnittet och ange titeln och texten som krävs för fallstudiens resultat.

Sätt in en layout av 2-kolumner direkt under 1-kolumnlayouten till höger om avsnittet.

Lägg nu till din första nummerräknarmodul i den vänstra kolumnen.

Uppdatera parametrarna för antalet räknare på följande sätt:

Innehållsalternativ

Titel: Nya besökare
Antal: 54210
Signeringsprocent: AV

Designalternativ

Färg på text: Mörk
Teckensnittets teckensnitt: standard
Titelstorlekstorlek: 20px
Titel Text Färg: # 405c60
Höjd på titellinjen: 1em
Antal tecken: Standard, fetstil
Antal tecken: 60px
Nummer Textfärg: # e07a5e
Nummerlinjehöjd: 72px

Spara inställningar

Duplicera antalet räknare och dra den till den intilliggande högra kolumnen och uppdatera alternativet Titel och nummer.

Duplicera raden som innehåller de två numreringsräknemodulerna så att ytterligare två antalet räknare visas nedan.

Uppdatera sedan alternativet Titel och nummer för dessa. Nu har du alla fyra fullräknare.

Glöm inte att lägga till 667 x 320-bilden i den vänstra kolumnen / sidan i specialavdelningen.

Det är finish! Kombinationen av talräknare och staplar på denna fallstudiesida gör innehållet engagerande.

Alternativ för digital räknare

På fliken innehåll hittar du alla innehållselement i modulen, till exempel text, bilder och ikoner. Allt som styr vad visas i din modul hittas alltid på den här fliken.

Titel

Ange en titel för räknaren. Detta visas under numret i mindre text.

Namn

Detta är numret som räknaren kommer att räkna med. När du rullar ner på sidan och når räknaren räknas numret snabbt från 0 tills det når det nummer du har ställt in här. Endast numeriska värden kan placeras här.

Procentandel

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

Bakgrundsfärg

Definiera en anpassad bakgrundsfärg för din modul eller lämna tom för att använda standardfärgen.

Bakgrundsbild

Om den är inställd kommer den här bilden att användas som bakgrund för denna modul. För att ta bort en bakgrundsbild tar du bara bort webbadressen från inställningsfältet. Bakgrundsbilderna visas ovanpå bakgrundsfärgerna, vilket innebär att bakgrundsfärgen inte kommer att synas när en bakgrundsbild appliceras.

Admin-etikett

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

Designalternativ (stil) för den digitala mätaren

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

Textfärg

Här kan du välja om din titeltext 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 mörk.

Titel typsnitt

Du kan ändra typsnittet i titeltexten 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 fetstil, kursiv, versaler och understrykningsalternativ.

Titel teckenstorlek

Här kan du justera storleken på din titeltext. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller 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å ditt storleksvärde 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 från 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 skjutreglaget 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å ditt storleksvärde 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 avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfältet till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Typsnitt av numret

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 fetstil, kursiv, versaler och understrukna alternativ.

Teckenstorlek på numret

Här kan du justera storleken på din digitala text. Du kan dra avståndsreglaget för att öka eller minska storleken på din text eller 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å ditt storlek för att ändra enhetstyp.

Färg på digital text

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

Avstånd mellan digitala bokstäver

Bokstavsavstånd påverkar utrymmet mellan varje bokstav. Om du vill öka utrymmet mellan varje bokstav i din digitala text, använd avståndsreglaget 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å ditt storleksvärde för att ändra enhetstyp.

Linjehöjd på numret

Linjehöjd påverkar utrymmet mellan varje rad i din numeriska text Om du vill öka utrymmet mellan varje rad, använd avståndsreglaget för att justera mellanslag eller ange önskad avståndsstorlek i inmatningsfält till höger om markören. Inmatningsfälten stöder olika måttenheter vilket innebär att du kan ange "px" eller "em" beroende på ditt storleksvärde för att ändra enhetstyp.

Använd gränsen

Om du aktiverar det här alternativet placeras en kant 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. Anpassade måttenheter stöds, vilket innebär att du kan ändra standardenheten från "px" till något annat som em, vh, vw etc.

Gränsstil

Gränser stöder åtta olika stilar: solid, prickad, prickad, dubbel, spår, ås, överlägg och start. Välj önskad stil i rullgardinsmenyn för att tillämpa den på din gräns.

Anpassad stoppning

Infill är utrymmet som läggs till i din modul, mellan modulens kant och dess interna element. Du kan lägga till anpassade utfyllnadsvärden till någon av modulens fyra sidor. Ta bort den anpassade marginalen genom att ta bort mervärdet från inmatningsfältet. Som standard mäts dessa värden i pixlar, men du kan ange anpassade måttenheter i inmatningsfälten.

Avancerade talräknealternativ

På den avancerade fliken hittar du alternativ som mer erfarna webbdesigners kan hitta användbara, till exempel anpassade CSS- och HTML-attribut. Här kan du använda 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-stilarket som du lägger till på din sida eller på din webbplats med hjälp av Divi-temalternativ eller Divi Builder-sidinställningarna.

Anpassad CSS

Anpassad CSS kan också tillämpas på modulen och vilken modul som helst. I avsnittet Anpassad CSS hittar du ett textfält där du kan lägga till anpassade CSS-formatmallar direkt till varje element. CSS-poster i dessa inställningar är redan inslagna i stiltaggar. Så skriv bara in CSS-reglerna å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 eliminera vissa element från sidan.

[vc_row center_row = "yes"] [vc_column width = "1/2 ″] [vcex_button target =" blank "layout =" expanded "align =" center "font_family =" Raleway "font_weight =" 700 ″ style = "platt" custom_background = "# 18b69d" custom_hover_background = "# 118d7a" custom_color = "#ffffff" custom_hover_color = "#ffffff" icon_right = "fa fa-download"] LADDA NER DIVI TEMA [/ vcex_button] [/ width»_vc_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "tom" layout = "expanderad" align = "center" font_family = "Raleway" font_weight = "700 ″ stil =" platt "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_download "icon_right =" EMPL D fa-LOAD ] DIVI [/ vcex_button] [/ vc_column] [/ vc_row]