Hur man stoppar Elementor-länkar från att understrykas (3 sätt)

Som standard tillämpar Elementor (liksom de flesta webbplatsbyggare) en understruken stil på länkar så att de är omedelbart igenkännliga för användarna. Även om detta fungerar bra för grundläggande användbarhet, är det inte alltid i linje med moderna webbdesignmål. 

I många fall kanske du vill förhindra att länkar understryks för att få ett renare och mer professionellt utseende. 

“För att stoppa Elementor-länkar från att understrykas, gå till din WordPress kontrollpanel >> Navigera till Utseende >> Anpassa>>Ytterligare CSS. Klistra in CSS-koden a { text-dekoration: ingen}. Klicka sedan på Publicerad.

I den här bloggen kommer jag att undersöka 3 metoder för att stoppa eller ta bort Elementor-länkar från att understrykas.

Så låt oss komma igång!

Stoppa Elementor-länkar från att bli understrukna (med hjälp av global inställning)

Om du vill stänga av understrukna länkar på hela din webbplats är den här metoden perfekt för dig. Med den här metoden behöver du inte redigera varje sida individuellt. Du kan göra det med en liten CSS-kod med hjälp av WordPress Customizer. Men oroa dig inte, det är verkligen enkelt. 

Så här gör du:

1. Gå till din WordPress kontrollpanel.

2. Navigera till Utseende >> Anpassa.

3. Scrolla ner och klicka på Ytterligare CSS.

4. Klistra in följande understrykning stoppa text CSS kod:

a {
    text-dekoration: ingen;
}

5. Klicka nu på Publicerad.

Detta kommer att stoppa understrykningen från alla länkar på hela webbplatsen, utan att du behöver redigera varje sida individuellt. Det är ett snabbt och effektivt sätt att bibehålla en konsekvent styling.

Hur man tar bort understrykning från textlänkar i Elementor

Vad händer om du vill ta bort understrykningen från länkar i innehållet i ett visst avsnitt eller en widget, inte hela webbplatsen? 

Nu ska jag visa dig hur du tar bort understrykningen från textlänkar i Elementor: s specifika avsnitt eller widget.

Du kan sedan följa dessa två metoder nedan:

Metod 1: Lägga till anpassad CSS i Elementor (kräver Elementor PRO)

Du kan ändra alla textlänkar i ett visst avsnitt eller en widget med hjälp av anpassad CSS. Detta är en mycket enkel metod. Den är dock endast avsedd för Elementor Pro-användare. 

I den här metoden behöver du bara lägga till lite kod. Den här metoden kräver bara att du lägger till lite kod. Oroa dig inte, det är väldigt enkelt. Följ bara dessa steg:

• Öppna din sida i Elementor.

• Välj din sektion och gå till Avancerad tab.

• Scrolla ner och klicka på Anpassad CSS.

• Klistra in följande kod:

a {
    text-dekoration: ingen;
}

• Detta tar bort understrykningen från alla länkar inom den widgeten eller sektionen.

Denna kod förhindrar att alla länkar blir understrukna. Du kan också lägga till fler stilar om du vill. Du kan till exempel ändra färg och teckensnitt. För detta behöver du bara lägga till lite mer CSS-kod.

Om du inte alls gillar den här CSS-kodningsmetoden kan du också prova följande metod.

Metod 2: Använda Elementor:s stilinställningar

Om du använder Elementor Free och inte gillar kodning, då är den här metoden för dig. Med Elementor kan du enkelt anpassa länkstilar. Följ dessa enkla steg för att ta bort understrykningar från länkar:

• Öppna din sida i Elementor.

• Klicka sedan på textblocket med länken.

• Navigera nu till fliken Stil.

• Klicka på pennikonen Typografi.

• Bläddra sedan nedåt och leta reda på Dekoration alternativ. Och ställ in den på Ingen.

• Din länk kommer nu att visas utan understrykning. 

Du kan upprepa detta manuellt för varje länk. 

Obs! Om det finns ett fåtal länkar kan du använda den här metoden för att hindra länkarna från att understrykas. Men om du arbetar med flera länkar och vill ändra från flera sidor, bör du följa den här metoden.

När du behöver stoppa Elementor-länkar från att vara understrukna och när inte

I Elementor kan länkunderstrykningar antingen öka tydligheten eller störa din design beroende på var de visas. Så innan du stoppar länkarna från att bli understrukna bör du veta när du ska stoppa länkar från att bli understrukna, vilket säkerställer en balans mellan rena bilder och stark användbarhet.

Du skulle vanligtvis ta bort understrykningar om:

1. Du designar knappar eller CTA:er

Knappar ska se ut som knappar, inte som textlänkar. Understrykningar här skapar rörighet. Till exempel “Köp nu” knapp med bakgrundsfärg, svävareffekt och ingen understrykning.

2. Navigeringsmenyer eller länkar i sidhuvudet

Menyobjekten har vanligtvis en ren, minimal design (med svävareffekter eller bakgrundshöjningar i stället för understrykningar).

3. När länkar utformas på olika sätt (färg, fetstil, hover-effekter)

Om din länk redan har en tydlig färgkontrast (t.ex. blå text mot svart) och hover-styling (t.ex. understrykning vid hover) kan du ta bort standardunderstrykningen.

4. För moderna, minimalistiska layouter

Vissa designer (som företags- eller portfoliosajter) strävar efter ett snyggt, minimalt utseende, där understrykningar kan kännas gammaldags eller distraherande.

När du inte bör sluta understrykningar:

Här är de fall där du kan behålla understrykningar:

1. I innehåll i långformat eller blogginlägg

Användare förväntar sig att länkar i innehåll ska vara understrukna. Om du tar bort den riskerar du att folk missar dem. Till exempel: Artiklar, fallstudier eller affiliatebloggar. Även här bör länkar (som “Sekretesspolicy” eller “Användarvillkor”) vara lätta att identifiera snabbt.

2. För tillgänglighet och läsbarhet

Användare med färgblindhet eller nedsatt syn kanske inte lägger märke till länkar utan understrykning. WCAG-riktlinjerna rekommenderar understrykningar om inte länkfärgen har minst 3:1 kontrast mot normal text.

3. När länkstyling är för subtil

Om din webbplats använder liknande färger för text och länkar blir det svårare att använda den om du tar bort understrykningen.

Läs också: Så här understryker du i WordPress

VANLIGA FRÅGOR

Slutsats

Att stoppa eller ta bort understrykningar från länkar i Elementor är inte bara en fråga om stil. Det handlar om att få din webbplats att se ren, modern och lättanvänd ut. I den här guiden har vi utforskat tre enkla sätt att stoppa länkar från att vara understrukna:

• Om du vill ta bort understrykningar på hela din webbplats kan du använda en liten CSS-kod i WordPress Customizer.
• Om du använder Elementor Pro kan du lägga till anpassad CSS direkt i ett avsnitt eller en widget.
• Och om du använder gratisversionen av Elementor kan du använda stilinställningarna för att manuellt ta bort understrykningar från varje länk.

Varje metod har sitt eget användningsområde. Till exempel är global CSS bra för att spara tid och hålla saker konsekventa. Men om du bara vill ändra ett fåtal länkar fungerar den manuella metoden alldeles utmärkt.

Men det är ändå viktigt att tänka på dina besökare. Understrukna länkar hjälper människor att veta att de är klickbara. Speciellt i blogginlägg eller långa artiklar. 

Läs också:

• Element Pack Pro version 9 släppt: Vad är det som är spännande?
• Hur man lägger till en Testimonial Slider i WordPress med hjälp av Elementor
• Hur håller du dragspelet stängt som standard i Elementor?
• Hur man stoppar Elementor-länkar från att understrykas (3 sätt)
• Enkel guide: Hur man lägger till kod på en sida på Elementor | 5 enkla steg