Sådan tilføjes tællere i WordPress 1

Sådan tilføjes tællere i WordPress

Alle og deres bedstemor er efterhånden klar over opmærksomhedsøkonomien. Du ved, at din hjemmeside har lidt tid til at fange opmærksomhed, og hvordan hver ounce af den skal bruges så effektivt som muligt. Normalt betyder det at levere information på en meget effektiv måde ved at bruge tekstlige og visuelle elementer fra din pose med kommunikationsværktøjer.

Men hvad med at tilføje nogle tal til den taske? Hvorfor ikke vise, hvor mange kunder din virksomhed har haft, eller hvor mange succesfulde projekter, du har gennemført, eller på hvor mange forskellige nationale markeder du har etableret en tilstedeværelse? Disse tal vil ikke kun se imponerende ud, mens de optager lidt fast ejendom på dit websted, men de vil også formidle værdifuld information effektivt.

Fordi vi tror på, at tællere kan være utroligt værdifulde elementer på websteder, har vi sørget for at inkludere dem i vores Qi Addons til Elementor-plugin. Det er den største gratis samling af Elementor-tilføjelser, du finder i et enkelt plugin – der er tres tilføjelser derinde. Vores tæller-widget er i godt selskab med widgets, der hjælper med alt fra tilføjelse af beskedbokse til oprettelse af en tekstramme.

For nu, lad os dog holde os til tællerne. Vi viser dig, hvordan du opretter fire tællere til din hjemmeside, og om det giver dig nogle ideer til at skabe dine egne tællere – endnu bedre! Hvis du foretrækker at se en video frem for at læse, kan du finde alle disse oplysninger i en videovejledning.

Så lad os komme i gang! Her er, hvad vi vil dække:

Tilføjelse af tællere i WordPress

Counter Gif

Den første ting du bør vide om at tilføje tællere i WordPress ved hjælp af vores Elementor-widget er, at du også skal bruge Elementor Website Builder for at det virker. Hvis du ikke allerede er der, så gå videre til dit websteds dashboard, naviger til Plugins > Tilføj nyt, søg efter Elementor og installer og aktiver det.

Du kan bruge enten gratis- eller Pro-versionen – det er helt op til dig, da vores plugin fungerer med begge. Og apropos vores plugin, Qi-tilføjelser til Elementor, bør du søge efter det og installere og aktivere det også.

Qi-tilføjelser til Elementor

Dit næste skridt ville være at oprette en side eller et indlæg, hvor du vil tilføje tællere eller åbne eksisterende indlæg eller sider, hvor du synes, en tæller eller et par stykker ville se godt ud. Til denne demonstration har vi arbejdet på et frisk lærred i form af et nyt indlæg, og vi har valgt at lave en fire-søjlet sektion til at starte med, da vi planlagde at tilføje fire tællere.

Elementor-søjler

Med kolonnerne på plads er den næste ting at gøre at finde widgetten – søgefunktionen i menuen med elementer i venstre side vil fungere perfekt til dette. Hvis du indtaster “tællere” – ikke “tæller”, da det vil få en anden widget frem – og trække widgetten til den nærmeste ledige kolonne vil få det rigtige resultat.

Tæller én kolonne

Du skal ikke bekymre dig om at udfylde de resterende kolonner. Det er nogle gange en god idé at lave det meste af stylingen på en af ​​tællerne og så bare kopiere den til andre kolonner og ændre dens indhold. Dette kan spare dig for en del tid på mere krævende projekter, og det fungerer perfekt, så længe du planlægger at have udseendet af dine diske noget ensartet. Som du vil se senere, har vi lavet redigeringerne og stylingerne på én tæller først, og derefter kopierede vi og lavede nogle indholdsændringer i de resterende kolonner.

Redigering af indholdet

Det indhold, du vil se, når du tilføjer widgetten første gang, er der kun til visning, så du vil sandsynligvis ændre det først. De generelle indstillinger, du vil se på fanen Indhold, er stedet, hvor du kan gøre alle mulige nyttige indholdsrelaterede ting, lige fra at vælge start- og slutciffer på din tæller, til at indstille trinene mellem cifrene, aktivere ikoner og separatorer , og til sidst redigerer tællerens titel og tekst.

Tællere General

For at skabe vores tællere har vi foretaget et par indholdsvalg. For det første har vi besluttet ikke at starte optællingen på nul – vi valgte 45. For slutcifferet valgte vi 52. Vi ændrede også titlen og teksten for at give det et formål.

Tællercifre

Før du går videre til at stilisere denne tæller, bør du notere dig ikonet, separatoren og relaterede muligheder under de generelle muligheder. Disse giver dig mulighed for at tilføje et ikon til dit nummer og en separator mellem nummeret og teksten. Du skal aktivere begge dele i de generelle muligheder, hvis du vil bruge dem – vi fravalgte dem, i hvert fald foreløbig.

Styling af tælleren

Går du videre til stilindstillinger på fanen Stil, finder du et utal af muligheder, der dikterer, hvordan indholdet af dine tællere ser ud. Du kan ændre dets justering, lege med typografien og farverne eller cifferet, titlen og teksten og endda indstille en baggrund for cifferet og vælge dets farve og radius.

Tællere stil

Det første, vi har gjort her, var at sikre, at vores ciffer ser ud præcis, som vi ville have det. Til at begynde med gik vi ind i Digit Typography og ændrede skrifttypen til DM Sans. Dernæst tilføjer vi noget vægt til det – støder det til 500.

Tæller ciffer typografi

Dernæst ændrede vi cifferfarven til #1e1e1e. Vi besluttede os for ikke at tilføje en baggrund eller tilføje ciffer streg-effekten – hvilket ville gøre vores ciffer til et omrids – og vi flyttede for at rette stylingen af ​​titeltagget og indholdet. For titlen har vi ændret skrifttypen til DM Sans. Vi ændrede indstillingen Transform i Titeltypografi til Normal, da vi ikke ønskede at bruge store bogstaver. Vi ændrede størrelsen på titlen til 20 pixels, dens vægt til 500 og linjehøjden til 26 pixels. Farven blev sat til #1e1e1e.

Tællere Titel Typografi

Til teksten, vi har ændret farven til #1e1e1e, skrifttypen til DM Sans, størrelsen til 17 pixels og linkhøjden til 26. Vi ændrede ikke vægten, da standarden er omkring 400, hvilket er, hvad vi ønskede.

Tæller teksttypografi

Indstillingerne for afstandsstil er nyttige, når du vil indstille margenerne og tekstudfyldningen til dine tællere. Den eneste ændring, vi har foretaget her, var at sætte titlen margin-top til 10 pixels, hvilket gør den en smule mindre end standarden.

Tællerafstand

Da vi ikke tilføjede en separator eller et separatorikon, er der ikke noget for os at gøre i indstillingerne for Separator Style. Hvis du vælger at tilføje en separator, vil disse muligheder give dig mulighed for at ændre farve, kantstil, margener og bredde og tykkelse på separatoren. Du har også nogle muligheder for separatorikonet, der dækker farve, skriftstørrelse og margener.

Sidste hånd

Efter at have stylet den første tæller, er det tid til at lave yderligere tre kopier af den. Vi har gjort det ved at højreklikke på tælleren og vælge Dupliker, og vi har gentaget det, indtil vi havde nok tællere til vores kolonner.

Dublerede tællere

Vi har ikke ændret nogen af ​​stylingmulighederne i de nye diske. Den største tilføjelse var den stjerne, vi føjede til den tredje tæller. Fra fanen Indhold gik vi til ikonindstillinger, valgte stjerneikonet og indstillede dets størrelse til 15 pixels.

Tællere ikon

Resten af ​​ændringerne var mere regelmæssige. Vi skiftede kun indholdet – den anden tæller fik et startciffer på 260 og et slutciffer på 269. Den tredje gik fra 72 til 89 i trin 5, og den sidste tæller fik et startciffer på 93 og et slutciffer på 102. Alle de nye tællere har fået nyt eksemplar. Sådan så resultatet ud.

Tæller fire kolonner

Lad os afslutte det!

Når du har en hjemmeside, siger sund fornuft, at ethvert element, der kan hjælpe dig med at få dit budskab igennem nemmere og mere effektivt, er et element, du bør byde velkommen. Hvis du tror, ​​at tilføjelse af tællere kan være en nyttig måde at fremvise din virksomheds præstationer, ressourcer eller kapaciteter på, vil vores tæller-widget være der og vente på at hjælpe dig med at blænde dine besøgende med nogle fantastiske tal.

Støt vores arbejde ❤️

Hvis du kunne lide denne artikel, kan du overveje at give drikkepenge for at hjælpe os med fortsat at udgive kvalitetsindhold.

Sikker betaling med PayPal
Moyens I/O Staff har motiveret dig og givet dig råd om teknologi, personlig udvikling, livsstil og strategier, der vil hjælpe dig.