Hur man skapar ett varningsfält i WordPress (3 enkla sätt)

Vill du lägga till ett varningsfält på din WordPress-webbplats?

Ett varningsfält eller meddelandefält är ett utmärkt sätt att låta besökare veta om viktiga uppdateringar, specialerbjudanden, lanseringar av nya produkter och mer.

I den här artikeln visar vi hur du skapar ett alertfält i WordPress med 3 enkla lösningar.

Varför skapa ett varningsfält i WordPress?

Ett varningsfält är ett utmärkt sätt att låta dina besökare veta om något viktigt på din webbplats. Det kan vara en pågående försäljningsevenemang, en uppdatering av dina öppettider eller ändringar i dina tjänster.

Du kan också använda ett varningsfält för att informera besökare om ett specialerbjudande, som ett köp en få en gratis-erbjudande. Detta är ett bra alternativ om du driver en onlinebutik.

Att använda ett varningsfält är bättre än att bara lägga upp ett meddelande på din hemsida. Ditt varningsfält kan visas framträdande precis högst upp på varje sida på hela din webbplats.

Det är enkelt att skapa ett varningsfält i WordPress. Vi kommer att titta på metoder som använder de bästa plugins för meddelandefält och en manuell metod med HTML- och CSS-kod. Klicka helt enkelt på länkarna nedan för att hoppa direkt till varje alternativ:

• Metod 1: Skapa ett varningsfält med OptinMonster
• Metod 2: Skapa ett varningsfält med Thrive Leads
• Metod 3: Skapa manuellt en varningsfält med anpassad HTML/CSS
• Bonus: Lägg till anpassade varningsmeddelanden på WordPress-sidor

Metod 1: Skapa ett varningsfält med OptinMonster

OptinMonster är den bästa programvaran för konverteringsoptimering och leadgenerering på marknaden. Det hjälper dig att konvertera fler webbplatsbesökare till prenumeranter och kunder.

OptinMonster erbjuder en dra-och-släpp-kampanjbyggare. Den levereras med vackra lightbox-popups, välkomstmattor, nedräkningstimers och andra dynamiska överlägg som hjälper dig att öka antalet prenumeranter och försäljning på din webbplats.

Du kan också använda OptinMonster för att skapa ett meddelandefält för din webbplats. Deras färdiga mallar gör det väldigt enkelt att skapa ett meddelandefält som ser bra ut på några minuter.

Först måste du besöka OptinMonster-webbplatsen och registrera ett konto. Du behöver minst Basic-planen eftersom den inkluderar kampanjtypen Floating Bar.

Därefter behöver du installera och aktivera pluginet OptinMonster WordPress. För mer information, se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Detta plugin låter dig koppla din WordPress-webbplats till OptinMonster-programvaran.

Vid aktivering ser du välkomstsidan och installationsguiden. Klicka på knappen 'Anslut ditt befintliga konto'.

Därefter öppnas ett nytt fönster där du måste ansluta din WordPress-webbplats till OptinMonster.

Klicka helt enkelt på knappen 'Anslut till WordPress' för att fortsätta.

Du kan nu följa anvisningarna på skärmen för att ansluta ditt OptinMonster-konto.

Gå sedan helt enkelt till OptinMonster » Kampanjer i din WordPress-instrumentpanel. Klicka på knappen 'Skapa din första kampanj'.

Detta öppnar OptinMonster-kampanjbyggaren.

Härifrån behöver du välja 'Flytande fält' som din kampanjtyp för att skapa ett alertfält.

Därefter ser du ett urval av kampanjmallar. Välj en mall som du vill använda.

Du behöver bara föra musen över den och klicka på knappen 'Använd mall' för att välja den. Vi kommer att använda mallen Coupon Code Promo för vårt meddelandefält.

Därefter kommer du att bli ombedd att ge din mall ett namn. När du har gett din kampanj ett namn klickar du bara på knappen ‘Starta bygge’.

Nu ser du kampanjredigeraren. Det är här du kan designa ditt varningsfält.

OptinMonster erbjuder olika block som du enkelt kan dra och släppa på mallen. Du kan till exempel lägga till en bild, text, knapp och mer i ditt meddelandefält.

Du kommer att se att ditt varningsfält visas längst ner på skärmen som standard.

För att flytta den till toppen av skärmen måste du klicka på 'Inställningar för flytande fält' på vänster sida. Klicka sedan bara på reglaget för att flytta det flytande fältet till toppen av sidan.

För att ändra texten på flytande fältet, klicka helt enkelt på det område du vill ändra och skriv in valfri text.

Du kan också ändra teckensnitt, storlek och färg på texten, med mera.

För att ändra nedräkningsinställningarna, välj helt enkelt timern.

Gå sedan vidare och ange önskat slutdatum och tid. OptinMonster låter dig också välja nedräkningstyp. Du kan välja typen 'Statisk' om du vill visa en standardtimer med ditt angivna slutdatum och tid.

Å andra sidan finns det en ‘Dynamisk’ nedräkningstyp. Timern fungerar baserat på varje användares beteende på din webbplats. Nedräkningen ställs in separat för varje besökare på din webbplats.

När du är nöjd med designen på ditt varningsfält, glöm inte att klicka på knappen 'Spara' högst upp på skärmen.

Därefter måste du gå till fliken 'Visningsregler' för att välja när och var din meddelandefält ska visas på din webbplats. Standardregeln är att ditt meddelandefält ska visas efter att besökaren har varit på sidan i 5 sekunder.

Vi kommer att ändra detta till 0 sekunder så att alertfältet visas omedelbart. För att göra det, ändra bara värdet 'sec' till 0.

Förutom det kan du också välja var varningsfältet ska visas. Du kan använda standardinställningen, som är ‘aktuell URL-sökväg är vilken sida som helst’. På så sätt visas ditt varningsfält på alla sidor på din WordPress-webbplats.

Klicka sedan på knappen 'Nästa steg' för att ändra inställningarna för åtgärden. Du kan lämna inställningarna för 'visa kampanjvyn' som Optin och välja om du vill spela upp ett ljudeffekt när meddelandefältet visas.

När du har gjort dina ändringar, klicka på knappen 'Nästa steg' igen.

Här ser du en sammanfattning av dina visningsregler. Du kan göra slutliga redigeringar och ändringar i din kampanj för varningsfältet.

När du är nöjd klickar du helt enkelt på knappen ‘Spara’ högst upp på skärmen.

Därefter kan du gå till fliken Publicera högst upp och ändra publiceringsstatus till 'Publicera'. När det är gjort måste du klicka på knappen 'Spara' och stänga kampanjbyggaren.

Därefter ser du Kampanjutdatainställningar.

Det sista steget är att aktivera kampanjen på din webbplats. Ändra helt enkelt status från 'Väntande' till 'Publicerad'.

Glöm inte att klicka på knappen 'Spara ändringar' när du är klar.

Besök nu helt enkelt en sida på din webbplats, så kommer du att se din kampanj i aktion.

Metod 2: Skapa ett varningsfält med Thrive Leads

Ett annat sätt du kan lägga till varningsfält på din WordPress-webbplats är genom att använda Thrive Leads. Det är en del av Thrive Themes-sviten och hjälper dig att generera leads genom varningsfält, ljuslådor, inmatningsfönster och mer.

Först måste du besöka Thrive Themes webbplats och registrera ett konto. Klicka helt enkelt på knappen ‘Starta nu’ för att komma igång.

Därefter måste du installera och aktivera pluginet Thrive Product Manager på din webbplats. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

Du hittar pluginet Thrive Product Manager i ditt kontoområde.

När du har installerat pluginet går du helt enkelt till sidan Produktchef från ditt WordPress-administratörsområde.

Härifrån, klicka på knappen 'Logga in på mitt konto'.

Efter att ha loggat in på ditt konto ser du olika plugins och verktyg som erbjuds av Thrive Themes.

Välj helt enkelt pluginet Thrive Leads och klicka sedan på knappen ‘Installera valda produkter’ längst ner.

När Thrive Leads är redo att användas ser du ett lyckat meddelande.

Du kan sedan klicka på knappen ‘Gå till Thrive Themes Dashboard’.

Därefter måste du gå till Thrive Dashboard » Thrive Leads från WordPress adminpanel.

Bredvid rubriken Lead Groups, klickar du helt enkelt på knappen ‘Lägg till ny’.

Därefter öppnas ett popup-fönster.

Du kan ange ett namn för din nya leadgrupp och klicka på knappen 'Lägg till leadgrupp'.

Skapa sedan ett nytt opt-in-formulär.

Klicka på knappen 'Lägg till ny typ av opt-in-formulär'.

Därefter ber Thrive Leads dig att välja en formulärtyp.

Du kan välja typen 'Banderoll' för att lägga till ett varningsfält på din webbplats.

Efter att ha lagt till formulärtypen Banderoll måste du nu lägga till ett formulär.

Klicka helt enkelt på alternativet 'Lägg till formulär' under Lead Groups.

På nästa skärm kan du välja bland dina befintliga formulär.

Eftersom detta är första gången du skapar ett formulär, klicka på knappen 'Skapa formulär'.

Nu ser du ett popup-fönster dyka upp på din skärm.

Du kan ange ett namn för ditt formulär och klicka på knappen ‘Skapa formulär’.

Ditt formulär kommer att läggas till i gruppen för lead i bandet.

För att redigera formulärets design, klicka bara på pennikonen.

Därefter visar Thrive Leads flera mallar att välja mellan.

Välj helt enkelt en mall och klicka på knappen 'Välj mall' längst ner.

Detta startar den visuella byggaren med en liveförhandsgranskning, där du kan anpassa ditt meddelandefält.

Du kan till exempel välja texten i mallen och ändra den enligt dina behov. Eller klicka på bilden i meddelandefältet och ändra den.

När du är klar med redigeringen, klicka på knappen 'Spara arbete' längst ner.

Du kan nu stänga den visuella redigeraren och gå tillbaka till formulärinställningarna. Här ser du alternativ för att ställa in utlösaren för varningsfältet, visningsfrekvensen och positionen.

Som standard visas varningsfältet högst upp när en sida laddas. Du kan dock ändra dessa inställningar.

Om du till exempel klickar på alternativet Trigger ser du fler alternativ, som att visa varningsfältet efter en viss tid, när en användare scrollar ner en viss mängd, eller när en användare når botten av sidan.

Dessutom kan du också ändra visningsfrekvensen. Alertfältet visas som standard hela tiden för alla användare.

Du kan dock redigera detta och visa ditt alertfält för samma besökare efter ett visst antal dagar.

Gå sedan tillbaka till Thrive Leads-sidan från din WordPress-instrumentpanel.

Därefter klickar du helt enkelt på kugghjulsikonen för att öppna visningsinställningarna.

Härifrån kan du välja vilka inlägg och sidor som varningsfältet ska visas på.

Till exempel kan du visa den bara på startsidan eller välja alla inlägg och sidor. Det finns också ett alternativ att exkludera vissa sidor och inlägg från att visa ditt alert-meddelande.

När du är klar klickar du helt enkelt på knappen ‘Spara & Stäng’.

Det sista steget är att klicka på omkopplarna för att visa ditt varningsfält på datorer och mobila enheter.

När det är klart är ditt varningsfält nu redo att samla in användares e-postadresser och bygga din e-postlista.

Du kan besöka din webbplats för att se den i aktion.

Du kan se vår kompletta Thrive Themes-recension för mer information.

Metod 3: Skapa manuellt en varningsfält med anpassad HTML/CSS

Vad händer om du inte vill använda OptinMonster eller Thrive Leads? I den här metoden visar vi hur du skapar ett meddelandefält med HTML och CSS-kod.

Först måste du kopiera följande anpassade CSS-kod för varningsfältet:

<pre class="wp-block-syntaxhighlighter-code">
.alertbar {
    background-color: #ff0000;
    color: #FFFFFF;
    display: block;
    line-height: 45px;
    height: 50px;
    position: relative;
    text-align: center;
    text-decoration: none;
    top: 0px;
    width: 100%;
    z-index: 100;
}
</pre>

Ett enkelt sätt att lägga till CSS-kod på din webbplats är att använda WPCode. Det är det bästa pluginet för kodavsnitt för WordPress som hjälper dig att lägga till anpassad kod på din webbplats.

Notera: WPCode är ett av WPBeginners egna plugins. Vi skapade det för att göra det riktigt enkelt att lägga till skript, HTML-kod och mer på dina webbplatssidor. Det levereras med funktioner som ett inbyggt bibliotek för kodavsnitt, villkorlig logik, konverteringspixlar och mer.

Först måste du installera och aktivera det kostnadsfria WPCode-pluginet. För mer information, se vår guide om hur man installerar ett WordPress-plugin.

Efter aktivering måste du gå till Kodavsnitt » + Lägg till avsnitt från WordPress-instrumentpanelen och välja alternativet ‘Lägg till din anpassade kod (nytt avsnitt)’.

Därefter anger du en titel för ditt kodavsnitt högst upp och klistrar in CSS-koden i området Kodförhandsgranskning.

Du måste också ändra kodtypen till alternativet 'CSS-avsnitt'.

Därefter kan du skrolla ner till avsnittet Infogning. Det är här du kan välja var koden ska köras.

Eftersom vi vill att varningsfältet ska visas över hela webbplatsen kan du använda standardmetoden ‘Automatisk infogning’. Du kan också behålla inställningen ‘Kör överallt’.

När det är klart kan du klicka på knappen 'Spara kodavsnitt' högst upp.

Du måste också klicka på växlingsknappen för att aktivera koden.

Gå sedan till Kodavsnitt » Sidhuvuden & Sidfot i din WordPress-administrationspanel.

Kopiera och klistra bara in följande rad med HTML-kod i rutan 'Header':

<div class="alertbar">We are currently closed due to Covid-10.</div>

Så här ska koden se ut i rutan 'Header' i WPCode:

Du kan ändra varningsmeddelandet till vad du vill. Glöm inte att klicka på knappen ‘Spara ändringar’ högst upp på sidan när du är klar.

Nu kan du besöka din WordPress-blogg för att se meddelandefältet. Det bör visas högst upp på varje sida så här:

Tips: I vissa WordPress-teman kan din alert-fält överlappa din meny. Du kan ändra höjden på fältet till 40px eller 30px för att undvika detta. Du kommer också att behöva minska radhöjden därefter så att din text förblir centrerad vertikalt i fältet.

Bonus: Lägg till anpassade varningsmeddelanden på WordPress-sidor

Om du vill lägga till anpassade alertmeddelanden till olika delar av din webbplats, som produktsidor, kassasidor och butikssidor, kan du använda SeedProd. Det är den bästa webbplatsbyggaren och landningssidbyggaren för WordPress.

Pluginet erbjuder en dra-och-släpp-byggare för att skapa ett anpassat tema och webbplatssidor utan att redigera kod. Det erbjuder också ett Alert-block som du kan placera var som helst på din webbplats.

Detta Alert-block kan varna kunder om att ditt lager håller på att ta slut, att vissa varor är på rea eller andra tidskänsliga varningar.

Du kan helt enkelt lägga till Alert-blocket på din sida och sedan lägga till en titel och beskrivning. Pluginet låter dig också lägga till dynamiskt innehåll, vilket gör att du kan infoga datum och andra frågeparametrar.

Det finns också fler anpassningsalternativ för Alert-blocket. Du kan till exempel ändra dess justering, justera teckenstorleken och redigera ikonen.

För att lära dig mer om att använda SeedProd kan du se den här guiden om hur man skapar anpassade sidor i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar ett varningsfält i WordPress. Du kanske också vill se vår guide om de bästa dra-och-släpp-sidbyggarna för WordPress för att hjälpa dig att ytterligare anpassa din webbplats och de bästa WooCommerce-pluginsen för att öka din butiks försäljning.

Om du gillade den här artikeln, prenumerera då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.