Ikoner och text, var och en i sin egen rätt, har styrkor och brister som gör dem till ett perfekt par när du skapar en webbplats. Enbart en ikon kan vara för tvetydig, utan något sammanhang eller fasta betydelser. Text kan se intetsägande ut, och det kommer definitivt inte att dra till sig så mycket uppmärksamhet. Sätt ihop de två så får du det bästa av två världar. Ofta ser du parningen när du listar funktioner, tjänster eller andra element som måste visas som distinkta, men som ändå är en del av gruppen.
Denna sammankoppling är så utbredd att många premiumteman kommer med en kortkod för att snabbt infoga en ikon med text som designelement. Om ditt tema inte gör det, oroa dig inte. Tack vare Qi Addons för Elementor, webbens största samling av gratis Elementor-tillägg, kommer du att kunna lägga till alla ikoner med text du behöver på nolltid. Allt du behöver är Elementor och widgeten Icon with Text.
Behöver du lite inspiration för att komma igång? Inga problem. Här är en video som visar hur du enkelt kan skapa en grupp ikoner med text precis som den vi har på widgetens sida:
Om du föredrar att läsa om det, kommer den här artikeln att ta dig igenom stegen vi tog för att skapa en snygg visning av ikoner med text. Förhoppningsvis kommer du att använda det du läser här för att skapa fantastiska mönster på din egen webbplats!
Vi kommer att täcka:
Det första steget för att lägga till ikoner med text i WordPress med Qi Addons for Elementor-plugin är att ladda ner och installera Elementor. Som en av världens främsta sidbyggare kanske du redan har det, men om du inte gör det, ladda ner och aktivera det helt enkelt.
Nästa steg skulle vara att ladda ner och aktivera Qi Addons för Elementor. Du kan göra det genom att gå till Plugins > Lägg till nytt, söka efter det och installera och aktivera det när du ser det i resultaten.
När det är gjort, skulle det bästa sättet att bli bekant med widgeten vara att navigera till en sida där du kan överväga att lägga till en ikon med text och – komma till den. För vår del skapade vi en sektion med tre kolumner eftersom vi har skapat tre ikoner med text. Att bara söka efter widgeten och dra den till kolumnen längst till vänster gjorde susen – vi hade vår första ikon med text redo för redigering.
Innehållsavsnittet i pluginalternativet har många flikar, men oroa dig inte – det betyder bara att du kommer att kunna anpassa din design till detaljer. Den första fliken, Allmänt, är dit du kan gå för att välja layout för ikonen och texten, om du vill lägga till en länk till ikonen och några tillhörande alternativ.
Det är också här du kommer att välja vilken ikontyp du vill använda, om du vill använda en separator eller inte, samt några regler för kolumnrespons. Den första förändringen vi har gjort var att byta till Top-layouten. Vi ändrade ikonen till Cog-ikonen som ingick i ikonbiblioteket, och vi var redo att gå vidare.
På fliken Innehåll kan du ändra textrutan i kolumnen – eller ta bort den helt – samt ändra själva texten och tillämpa några begränsade stilalternativ. Du får också chansen att välja textjustering.
Titeln vi gav den här ikonen och textkombinationen var ”Obegränsade alternativ.” Vi har ändrat texten till ”Hundratals teckensnitt att välja mellan och alternativ för att använda anpassade ikoner eller SVG.”
Knapp- och knappikonflikarna är där du kommer att kunna välja hur du vill att din knapp ska se ut, hur stor den ska vara, om den ska ha en ikon och var, som vilken länk den ska peka på.
Det mest intressanta alternativet i dessa två flikar är alternativet Knapptext på fliken Knapp. Genom att radera texten kan du ta bort knappen helt. Det var så vi gjorde det.
De återstående flikarna i innehållsalternativen handlar om separatorn och animeringen. Du kommer att kunna välja layouten för avgränsaren, dess position, kantbild samt ikon. Du har också möjlighet att växla mellan olika animationsstilar och ställa in deras fördröjningar.
Eftersom vi inte använde en separator när vi skapade vår ikon med text, och vi inte ville inkludera animering, har vi inget kvar att visa dig i avsnittet Innehåll och kan gå vidare för att se stilalternativen.
När du stylar din ikon med text kommer stilfliken att vara den första som visas. Alternativen du hittar där låter dig välja titeltaggen, den vanliga färgen på titeln och färgen när du håller muspekaren, samt alternativ för titeltypografi som typsnitt, storlek och vikt. För texten kommer du att kunna välja färg och typografialternativ.
Vi har gjort några minimala ändringar av standardinställningarna här. Vi har ändrat titeltaggen till H5, titelfärgen till svart med hjälp av hex-koden #000000, och vi har ställt in storleken på titeln till 21 pixlar.
På fliken Avståndsstil handlar det om att ställa in marginaler. Du kommer att kunna välja rubrikmarginalens topp, textmarginalen överst, marginalen runt ikonen och, om du har en knapp, knappmarginalens topp.
Vi valde återigen en minimal förändring här genom att ställa in titelmarginalens topp till 22 pixlar.
På fliken Ikonstil kommer alternativen du ser att variera mycket beroende på om du vill lägga din ikon i en ruta eller inte. Om du gör det kommer du att kunna välja en mängd olika alternativ för form, storlek och färg på lådan. Om du inte gör det kommer du att vara begränsad till alternativen som handlar om själva ikonen – dess storlek, färg och animering när du svävar.
Vi har valt att inte lägga vår ikon i en ruta. Vi ändrade dock storleken på vår ikon till 60 pixlar och dess färg till #ececec. När vi svävar har vi gett den en liten vertikal rörelse.
De återstående flikarna låter dig göra fantastiska saker med utseendet och stilen för knappar, knappikoner, kanter, understrykningar, avgränsare och separatorikoner. Vi har valt att inte använda något av dessa element i vår design, men om du väljer en annan väg, vet att du här hittar alla alternativ för storlek, färg, marginal och svävning som du behöver för att få din ikon- och textknappar och avgränsare att dyka upp.
Den sista handen handlar om att duplicera designen vi har skapat och göra några ändringar i den. Den här förmågan att helt enkelt duplicera en design med alla dess alternativ kommer till stor nytta efter att du har spenderat timmar på att perfektionera inställningarna på ett element, och sedan måste du upprepa det på ett par andra men med bara små ändringar.
För att duplicera designen har vi högerklickat på den, valt dubblettalternativen och gjort det igen. Elementor kommer att stapla dessa dubbletter under originalet – dra dem helt enkelt till deras kolumner.
Återstående sak att göra är att ändra ikonerna, titlarna och texten. Vi har ändrat ikonen för den mittersta till Kartmarkör alt, dess titel till ”Fullständigt justerbar” och dess text till ”Responsiv och mobilvänlig, den här widgeten kommer att vara en stjärna på sidan.” Den tredje fick en tagg för sin ikon, ”Flexibla stilar” för titeln och ”Välj olika färger, stilar, visas animationer och mer med den här widgeten” för texten.
Låt oss avsluta det!
Tack vare Qi Addons för Elementor kan det vara enkelt och intressant att lägga till intressanta och användbara design på din webbplats, som ikonen med text. Det finns en mängd olika alternativ du kan välja mellan – många fler än de vi har utforskat i den här demonstrationen, och du bör känna dig fri att utforska dem alla och hitta den bästa kombinationen av element som detta tillägg erbjuder.
Stöd vårt arbete ❤️
Om du gillade den här artikeln, överväg att lämna dricks för att hjälpa oss fortsätta publicera bra innehåll.
