Sådan tilføjes et ikon med tekst i WordPress

Ikoner og tekst, hver for sig, har styrker og mangler, der gør dem til et perfekt par, når du opretter en hjemmeside. Et ikon alene kan være for tvetydigt uden nogen sammenhæng eller faste betydninger. Tekst kan se intetsigende ud, og den vil bestemt ikke tiltrække så meget opmærksomhed. Sæt de to sammen, og du får det bedste fra begge verdener. Ofte vil du se parringen, når du angiver funktioner, tjenester eller andre elementer, der skal vises som særskilte, men alligevel en del af gruppen.

Denne parring er så udbredt, at en masse premium-temaer kommer med en kortkode til hurtigt at indsætte et ikon med tekst som et designelement. Hvis dit tema ikke gør det, så fortvivl ikke. Takket være Qi Addons til Elementor, internettets største samling af gratis Elementor-tilføjelser, vil du være i stand til at tilføje alle de ikoner med tekst, du har brug for, på ingen tid. Alt du skal bruge er Elementor og ikonet med tekst-widget.

Har du brug for inspiration til at hjælpe dig i gang? Ingen problemer. Her er en video, der viser, hvordan du nemt kan oprette en gruppe ikoner med tekst ligesom den, vi har på widgetens side:

Hvis du foretrækker at læse om det, vil denne artikel tage dig gennem de trin, vi tog for at skabe en flot visning af ikoner med tekst. Forhåbentlig vil du bruge det, du læser her, til at skabe nogle fantastiske designs på din egen hjemmeside!

Vi dækker:

Tilføjelse af ikoner med tekst i WordPress

Det første trin til at tilføje ikoner med tekst i WordPress ved hjælp af Qi Addons til Elementor plugin er at downloade og installere Elementor. Som en af ​​verdens førende sidebyggere har du det måske allerede, men hvis du ikke gør det, skal du blot downloade og aktivere det.

Det næste trin ville være at downloade og aktivere Qi Addons til Elementor. Det kan du gøre ved at gå til Plugins > Tilføj nyt, søger efter det og installerer og aktiverer det, når du ser det i resultaterne.

Når det er gjort, ville den bedste måde at blive fortrolig med widgetten være at navigere til en side, hvor du kunne overveje at tilføje et ikon med tekst og – komme til det. For vores vedkommende har vi lavet en tre-spaltet sektion, fordi vi er endt med at lave tre ikoner med tekst. Bare at søge efter widgetten og trække den til kolonnen længst til venstre gjorde tricket – vi havde vores første ikon med tekst klar til redigering.

Redigering af indholdet af ikonet med tekst

Indholdssektionen i plugin-indstillingen har mange faner, men bare rolig – det betyder kun, at du vil være i stand til at tilpasse dit design til fine detaljer. Den første fane, Generelt, er det sted, hvor du kan vælge layoutet af ikonet og teksten, om du vil tilføje et link til ikonet og nogle tilknyttede muligheder.

Det er også her, du vælger den ikontype, du vil bruge, om du vil bruge en separator eller ej, samt nogle regler for kolonnerespons. Den første ændring, vi har lavet, var at skifte til Top-layoutet. Vi ændrede ikonet til Cog-ikonet, der var inkluderet i ikonbiblioteket, og vi var klar til at gå videre.

Indhold-fanen er, hvor du kan ændre tekstflisen i kolonnen – eller fjerne den helt – samt ændre selve teksten og anvende nogle begrænsede stilmuligheder. Du får også chancen for at vælge tekstjusteringen.

Titlen, vi har givet dette ikon og tekstkombination, var “Ubegrænsede muligheder.” Vi har skiftet teksten til “Hundredevis af skrifttyper at vælge imellem og muligheder for at bruge brugerdefinerede ikoner eller SVG’er.”

Knap- og Knapikon-fanerne er, hvor du vil kunne vælge, hvordan du vil have din knap til at se ud, hvor stor den skal være, om den skal have et ikon og hvor, som hvilket link den skal pege på.

Den mest interessante mulighed i disse to faner er indstillingen Knaptekst på fanen Knap. Ved at slette teksten kan du helt fjerne knappen. Sådan gjorde vi det.

De resterende faner i Indholdsindstillingerne omhandler separatoren og vises-animationen. Du vil være i stand til at vælge layoutet af separatoren, dens position, kantbillede samt ikon. Du har også mulighed for at skifte mellem forskellige animationsstile og indstille deres forsinkelser.

Da vi ikke brugte en separator til at skabe vores ikon med tekst, og vi ikke ønskede at inkludere animation, har vi intet tilbage at vise dig i afsnittet Indhold og kan gå videre for at se stilindstillingerne.

Styling af ikonet med tekst

Når du styler dit ikon med tekst, vil fanen Stil være den første. De muligheder, du finder der, giver dig mulighed for at vælge titel-tag, den almindelige farve på titlen og farven, når du svæver, såvel som titeltypografiindstillinger såsom skrifttype, størrelse og vægt. For teksten vil du være i stand til at vælge farve og typografi.

Vi har foretaget nogle minimale ændringer til standardindstillingerne her. Vi har ændret titelmærket til H5, titelfarven til sort ved hjælp af hex-koden #000000, og vi har indstillet størrelsen på titlen til 21 pixels.

På fanen Afstandsstil handler det om at indstille margener. Du vil være i stand til at vælge titelmargen øverst, tekstmargen øverst, margen omkring ikonet og, hvis du har en knap, knapmargen øverst.

Vi valgte igen en minimal ændring her ved at indstille titelmargenen øverst til 22 pixels.

På fanen Icon Style vil de muligheder, du vil se, variere meget, alt efter om du vil placere dit ikon i en boks eller ej. Hvis du gør det, vil du være i stand til at vælge en række muligheder for boksens form, størrelse og farve. Hvis du ikke gør det, vil du være begrænset til de muligheder, der omhandler selve ikonet – dets størrelse, farve og animation, når du svæver.

Vi har fravalgt at lægge vores ikon i en boks. Vi ændrede dog størrelsen på vores ikon til 60 pixels, og dens farve til #ececec. Når du svæver, har vi givet den en lille lodret bevægelse.

De resterende faner giver dig mulighed for at gøre fantastiske ting med udseendet og stilen for knapper, knapikoner, kanter, understregninger, separatorer og separatorikoner. Vi har fravalgt at bruge nogen af ​​disse elementer i vores design, men hvis du vælger en anden sti, skal du vide, at her finder du alle de størrelser, farver, margen og svævemuligheder, du skal bruge for at få dit ikon-og-tekst-knapper og separatorer til at springe ud.

Sidste hånd

Den sidste touch involverer at duplikere det design, vi har skabt, og foretage nogle ændringer i det. Denne evne til blot at duplikere et design med alle dets muligheder kommer godt efter du har brugt timer på at perfektionere indstillingerne på et element, og så skal du gentage det på et par andre, men med kun små ændringer.

For at duplikere designet har vi højreklikket på det, valgt duplikatindstillingerne og gjort det igen. Elementor vil stable disse dubletter under originalen – træk dem blot til deres kolonner.

Den resterende ting at gøre er at ændre ikonerne, titlerne og teksten. Vi har ændret ikonet for den midterste til Kortmarkør alt, dens titel til “Fuldstændig justerbar” og teksten til “Responsiv og mobilvenlig, denne widget vil være en stjerne på siden.” Den tredje fik et tag for sit ikon, “Fleksible stilarter” for titlen, og “Vælg forskellige farver, stilarter, se animationer og mere med denne widget” til teksten.

Lad os afslutte det!

Takket være Qi Addons til Elementor kan det være nemt og interessant at tilføje interessante og nyttige designs til din hjemmeside, såsom ikonet med tekst. Der er en række muligheder, du kan vælge imellem – mange flere end dem, vi har udforsket i denne demonstration, og du skal være velkommen til at udforske dem alle og finde den bedste kombination af elementer, som denne tilføjelse tilbyder.