Hur man skapar en webbplatsbanner (3 enkla sätt)

En visuellt slående banner är en av de första sakerna besökare märker när de landar på din webbplats. Den sätter tonen för ditt varumärke, kommunicerar ditt budskap och uppmuntrar till konverteringar, vilket gör den till ett kraftfullt verktyg för att lyfta fram dina produkter, tjänster eller viktiga uppdateringar.

Under åren har vi använt olika typer av banners på WPBeginner för att marknadsföra vårt nyhetsbrev, lyfta fram Black Friday-erbjudanden, dela gratis kurser, visa våra professionella tjänster och mer.

Genom dessa kampanjer har vi märkt att banners konsekvent fångar människors uppmärksamhet, uppmuntrar klick på call-to-action-knapparna och genererar leads för vår verksamhet.

I den här artikeln visar vi dig hur du enkelt skapar en banner för din WordPress-webbplats. På så sätt kan du utnyttja alla dessa fördelar för att förbättra din verksamhet.

Vad är en webbplatsbanderoll?

En banner är en grafisk display som sträcker sig över toppen, botten eller sidan av en WordPress-webbplats. Den innehåller ofta ett varumärkesnamn och en logotyp, tillsammans med andra designelemnt, för att marknadsföra en specifik produkt, tjänst eller händelse.

Till exempel, om en e-handelsbutik precis har annonserat en rea, kan den visa en banner högst upp på sina sidor för att informera nya besökare om rabatterbjudanden och uppmuntra dem att göra ett köp.

En väl utformad banner kan göra ett starkt intryck och bjuda in besökare att utforska resten av din webbplats. Dessutom kan banners användas för att marknadsföra affiliateprodukter, etablera varumärkesidentitet, bygga en e-postlista genom att uppmuntra besökare att anmäla sig till ditt nyhetsbrev och driva trafik till andra sidor på din webbplats.

Du kan också använda banners för att marknadsföra dina sociala mediekonton och uppmuntra besökare att följa eller gilla dina sidor.

Vilken är den bästa storleken för en webbplatsbanner?

Den ideala storleken på en webbplatsbanner beror på layouten och de specifika marknadsföringsmålen för din WordPress-blogg.

Om du till exempel vill visa en rektangulär och tunn banner högst upp på skärmen kan du använda storleken Large Leaderboard, som är 970 x 90.

Några av de andra populära och mest använda bannerstorlekarna inkluderar:

• Mellanstor banner: 300 x 250
• Ledartavla: 728 x 90
• Bred Skyskrapa: 160 x 600
• Halv sida: 300 x 600
• Stor Leaderboard: 970 x 90
• Billboard: 970 x 250
• Stor rektangel: 326 x 280
• Vertikal banderoll: 120 x 240
• Full Banner: 468 x 60
• Halv Banner: 234 x 60

Om du vill visa en banderoll för ett evenemang i sidofältet kan du använda banderollstorlekarna Wide Skyscraper eller Half-Page. På samma sätt kan du också använda Medium-banderollstorleken för att visa en kvadratisk banderoll på din sida.

Om du vill visa annonsbanners kan du se vår nybörjarguide om de mest presterande Google AdSense-bannerstorlekarna och formaten för WordPress.

Med det sagt, låt oss se hur du enkelt kan skapa en banderoll på din WordPress-webbplats. För den här handledningen kommer vi att täcka tre metoder för att skapa en banderoll, och du kan använda länkarna nedan för att hoppa till den metod du väljer:

• Metod 1: Skapa en webbplatsbanner med OptinMonster (Rekommenderas)
• Metod 2: Skapa en webbplatsbanner med Canva (gratis)
• Metod 3: Skapa en webbplatsbanner med Thrive Leads
• Bonus: Lägg till smarta app-banners i WordPress

Metod 1: Skapa en webbplatsbanner med OptinMonster (Rekommenderas)

OptinMonster är det bästa pluginet för att skapa WordPress-banners på marknaden som låter dig enkelt skapa flytande fält och popup-banners för din webbplats.

Det är det bästa verktyget för konverteringsoptimering och leadgenerering som hjälper dig att omvandla webbplatsbesökare till prenumeranter och kunder.

Dessutom har många av OptinMonsters banner-mallar optin-fält som låter dig samla in namn, e-postadresser och telefonnummer från dina webbplatsbesökare.

Under åren har vi använt verktyget flera gånger för att lägga till banderoller och bygga framgångsrika leadgenereringskampanjer på WPBeginner. För mer information, se vår kompletta OptinMonster-recension.

Steg 1: Installera OptinMonster på din webbplats

Först måste du registrera dig för ett OptinMonster-konto. För att göra detta, besök helt enkelt OptinMonster-webbplatsen och klicka på knappen ‘Skaffa OptinMonster nu’.

Därefter måste du installera och aktivera gratis OptinMonster-plugin på din WordPress-webbplats. För detaljerade instruktioner kan du se vår nybörjarguide om hur man installerar ett WordPress-plugin.

När OptinMonster-installationsguiden har aktiverats öppnas den i ditt WordPress-adminpanel.

Härifrån klickar du på knappen 'Anslut ditt befintliga konto' för att ansluta din WordPress-webbplats till ditt OptinMonster-konto.

Detta öppnar ett nytt fönster på din datorskärm.

Härifrån, klicka på knappen ‘Anslut till WordPress’ för att fortsätta.

Steg 2: Skapa och anpassa din banner

Nu när du har anslutit ditt WordPress-konto till OptinMonster, gå till sidan OptinMonster » Kampanjer från WordPress admin sidofält.

Härifrån, klicka på knappen ‘Skapa din första kampanj’ för att börja skapa din webbplatsbannerdesign.

Detta leder dig till sidan 'Mallar', där du kan börja med att välja en kampanjtyp.

Om du till exempel vill visa din banner som en stapel högst upp på skärmen kan du välja kampanjen 'Flytande stapel'. På samma sätt kan du välja kampanjtypen 'Popup' för att visa din banner som en popup.

Därefter måste du också välja en mall för den kampanj du valt.

För den här handledningen kommer vi att välja en mall för kampanjtypen 'Flytande fält'.

Därefter kommer du att bli ombedd att ge ett namn för kampanjen du skapar. Skriv helt enkelt ett namn som du väljer och klicka på knappen ‘Börja bygga’ för att gå vidare.

Detta startar OptinMonsters dra-och-släpp-gränssnitt på din skärm, där du kan börja anpassa din banner. Härifrån kan du dra och släppa fält som du vill från sidofältet till vänster till bannern.

Om du till exempel vill lägga till sociala medier-ikoner till din banner för att öka dina följare, kan du dra och släppa Social Media-blocket från vänster sidofält.

Klicka sedan bara på blocket för att öppna dess inställningar i den vänstra kolumnen.

Härifrån kan du ändra knapptexten, lägga till din URL för sociala medier och till och med ändra din plattform för sociala medier i rullgardinsmenyn.

Du kan också lägga till andra block för att visa videor, bilder, text eller CTA:er i din webbplatsbannerdesign.

När du har gjort det måste du välja bannerpositionen.

Som standard visas OptinMonsters flytande fält längst ner på din webbplatsskärm när du börjar scrolla.

Du kan dock enkelt ändra den här inställningen genom att klicka på ikonen ‘Inställningar’ längst ner i sidofältet till vänster.

Detta öppnar inställningar i den vänstra kolumnen, där du måste expandera fliken ‘Inställningar för flytande fält’. Härifrån, växla helt enkelt omkopplaren ‘Ladda flytande fält högst upp på sidan?’ för att visa bannern högst upp.

Steg 3: Lägg till triggers för din banner

När du har designat din banner, växla till fliken 'Visningsregler' högst upp. Härifrån kan du lägga till regler för visning av din banner.

Kom ihåg att du bara behöver växla till den här fliken om du vill lägga till en specifik visningstrigger för din banner. Annars kan du hoppa till nästa steg.

Om du till exempel vill visa din banderoll när användaren är på väg att lämna din webbplats, måste du välja alternativet 'Avsikt att lämna'.

När du har gjort det, väljer du bara alternativet ‘På alla enheter’ från rullgardinsmenyn i mitten. Om du vill använda den här visningsregeln endast för mobila enheter kan du också välja det alternativet.

Välj därefter Exit Intent Sensitivity enligt dina önskemål och klicka på knappen ‘Nästa steg’.

Detta tar dig till en ny skärm. Här måste du se till att alternativet 'Optin' är valt för rullgardinsmenyn 'Visa kampanjvyn'.

När du har gjort det klickar du helt enkelt på knappen 'Nästa steg'.

Din visningsregel för bannern kommer nu att visas på skärmen.

Om du vill ändra något här kan du klicka på knappen ‘Redigera’ för att åtgärda det.

Steg 4: Publicera din banner

Du kan nu växla till fliken ‘Publicera’ högst upp och klicka på knappen ‘Spara’ i det övre högra hörnet av skärmen.

Därefter klickar du helt enkelt på knappen 'Publicera' för att visa bannern på din webbplats.

Besök nu din webbplats för att se bannern högst upp på skärmen.

Så här såg det ut på vår demosida.

Metod 2: Skapa en webbplatsbanner med Canva (gratis)

Om du vill skapa en webbplatsbanner gratis, då är den här metoden för dig.

Canva är ett populärt webbaserat verktyg för att skapa alla typer av grafik, inklusive banners, logotyper, affischer, bokomslag och mer. Det erbjuder också en gratisversion som du kan använda för att skapa en design för webbplatsbanners.

Steg 1: Skapa ett Canva-konto

Besök först Canva-webbplatsen och klicka på knappen ‘Registrera dig’ för att skapa ett konto.

Om du redan har ett Canva-konto kan du helt enkelt logga in.

Vid kontoskapande kommer du att tas till din Canva-kontos startsida.

Härifrån måste du växla till fliken ‘Mallar’ från den vänstra kolumnen och sedan söka efter banner-mallar med hjälp av sökrutan högst upp.

Detta kommer att visa alla bandermallar som finns tillgängliga i Canva. Vissa av dessa mallar kan dock vara låsta eftersom de är betalfunktioner.

Steg 2: Designa din webbplatsbanner

När du väljer en mall, kommer Canvas designgränssnitt att startas på skärmen.

Härifrån kan du anpassa din banderoll efter eget tycke. Du kan ändra befintligt innehåll genom att klicka på blocken och lägga till din text.

Du kan till och med lägga till olika grafiska element som klistermärken, foton och videor genom att växla till fliken 'Element' i den vänstra kolumnen.

När du har lagt till ett element kan du ytterligare ändra dess animation, position och transparens från menyn högst upp.

Du kan också ladda upp mediefiler från din dator genom att växla till fliken ‘Uppladdningar’ från vänster kolumn.

För att lägga till text i din banner, växla till fliken ‘Textruta’ i kolumnen till vänster.

Väl där kan du använda standardtextstilar eller olika teckensnittskombinationer för att lägga till innehåll i din banner.

Du kan till och med lägga till en uppmaning till handling med en länk genom att markera texten med musen. Detta visar en länkikon högst upp i texten.

Klicka helt enkelt på den ikonen och kopiera och klistra in länken du vill lägga till.

Klicka sedan på knappen ‘Klar’ för att spara den.

Steg 3: Hämta en inbäddningskod för bannern

När du är nöjd med din banneranpassning, klicka bara på knappen ‘Dela’ längst upp till höger på skärmen.

Detta öppnar en promptmeny där du måste välja alternativet ‘Mer’ längst ner.

Du kommer nu att tas till menyn 'Alla alternativ', där du måste välja alternativet 'Bädda in'.

När du gör det öppnas en ny prompt på skärmen. Härifrån klickar du helt enkelt på knappen 'Bädda in'.

Canva kommer nu att skapa en HTML-inbäddningskod åt dig.

När den visas på skärmen klickar du på knappen 'Kopiera' under alternativet 'HTML-inbäddningskod'.

Steg 4: Lägg till HTML-inbäddningskoden i WordPress

Du kan nu visa din banner på din WordPress-sida, inlägg eller sidofält enligt dina önskemål. För den här handledningen kommer vi att visa vår banner på en WordPress-sida.

Först måste du öppna sidan eller inlägget där du vill lägga till bannern.

Väl där, klicka på knappen ‘Lägg till block’ (+) i det övre vänstra hörnet för att hitta och lägga till blocket Anpassad HTML på sidan.

När du har gjort det, klistra helt enkelt in inbäddningskoden du kopierade i blocket.

Klicka slutligen på knappen 'Uppdatera' eller 'Publicera' för att spara dina ändringar.

Besök nu din webbplats för att se WordPress-bannern i aktion.

Metod 3: Skapa en webbplatsbanner med Thrive Leads

Du kan också skapa en webbplatsbanner med hjälp av Thrive Leads. Det är ett populärt WordPress-popup-plugin som används av över 114 000+ webbplatser.

Med Thrive Leads kan du designa högkvalitativa banners som hjälper dig att samla in leads på din WordPress-webbplats och växa din e-postlista.

Vi har grundligt testat detta verktyg i realtid och funnit att det är extremt nybörjarvänligt, med ett intuitivt gränssnitt och attraktiva mallar. För mer information, se vår recension av Thrive Themes Suite.

Steg 1: Installera Thrive Leads på din WordPress-webbplats

Först måste du besöka webbplatsen Thrive Themes och registrera ett konto. När du har gjort det, gå till din medlemspanel.

Härifrån, fortsätt och klicka på länken ‘Ladda ner och installera pluginet Thrive Product Manager’.

Besök sedan din WordPress-webbplats för att installera och aktivera pluginet Thrive Product Manager. För detaljerade instruktioner kan du se vår steg-för-steg-guide om hur man installerar ett WordPress-plugin.

Efter aktivering, gå till fliken Produktchef från WordPress admin-instrumentpanelen och klicka på knappen ‘Logga in på mitt konto’.

Efter att ha angett dina inloggningsuppgifter kommer du att kunna se din Thrive Product Manager-instrumentpanel.

Härifrån kan du välja de produkter som du vill installera och använda på din webbplats. Välj helt enkelt pluginet ‘Thrive Leads’ och klicka på knappen ‘Installera valda produkter’.

Steg 2: Skapa en webbplatsbanner

Efter plugininstallationen måste du besöka sidan Thrive-instrumentpanel » Thrive Leads från sidomenyn i WordPress-administrationen.

När du är där klickar du bara på knappen ‘Lägg till ny’ bredvid alternativet ‘Leadgrupper’.

Detta kommer att visa popup-fönstret 'Lägg till ny leadgrupp' på din skärm, där du måste skriva ett namn för den leadgrupp du skapar.

Se till att namnge leadgruppen på ett sätt som hjälper dig att identifiera den.

Om du till exempel skapar en banner för att bygga din e-postlista, kan du namnge din leadgrupp ‘E-postlistkampanj’.

Därefter kommer leadgruppen du skapade att visas på skärmen. För att komma åt den, klicka på knappen 'Lägg till ny typ av Opt-in-formulär'.

Detta öppnar en ny ruta där du måste välja vilken typ av banner du vill skapa.

Du kan skapa en slide-in, ribbon, widget, in-content, lightbox eller scroll mat banner enligt dina önskemål.

Dessa banners kommer att vara som ett formulär eftersom de kommer att samla in data från dina användare, inklusive e-postadresser, telefonnummer och mer.

För den här handledningen kommer vi att skapa en banderoll för vår webbplats.

När du har valt en designtyp för webbplatsbannern försvinner prompten automatiskt från skärmen.

För att nu öppna din instrumentpanel för leadgrupper måste du klicka på knappen ‘Lägg till’ i det övre högra hörnet av fliken Leadgrupper.

Detta tar dig till din instrumentpanel för Lead Groups, där alla formulär och leadrapporter för gruppen kommer att visas efter att din kampanj har lanserats.

Till exempel, om du vill skapa en banner för att samla e-postadresser, kommer all användarinformation du samlar in via bannern att visas här.

För tillfället behöver du bara klicka på knappen 'Skapa formulär' för att börja bygga din banner.

Detta öppnar en ny ruta där du måste ange ett namn för formuläret och klicka på knappen 'Skapa formulär'.

När din blankett har skapats kommer den att visas i din Lead Groups instrumentpanel.

Härifrån klickar du på knappen ‘Redigera design’ i det högra hörnet för att börja bygga din banner.

Steg 3: Anpassa din webbplatsbanner

Thrive visuella redigerare kommer nu att startas i en ny flik på din skärm.

Härifrån kan du börja med att välja en mall för din banner från prompten ‘Thrive Leads Library’.

Du kan sedan använda en av de förgjorda mallarna som den är eller anpassa den ytterligare med den visuella redigeraren. När du har gjort ditt val, klicka helt enkelt på knappen 'Välj mall' för att gå vidare.

Efter att ha lagt till en mall för en banderoll kan du enkelt anpassa elementen i den genom att klicka på vart och ett av dem. Detta öppnar elementets inställningar i sidofältet till vänster.

Till exempel, om du vill ändra knappfärgen i din mall, måste du klicka på den för att öppna dess inställningar i sidofältet.

Om du vill lägga till ett helt nytt element i din banner kan du också göra det genom att klicka på ikonen '+' i det högra hörnet av skärmen.

Detta öppnar sidofältet ‘Lägg till element’ till höger, där du kan dra och släppa element som du väljer på bannern.

Om du till exempel vill lägga till knappar för sociala mediekonton till din banner, måste du dra och släppa elementet Social Follow från sidofältet till höger.

När du är nöjd, klicka på knappen 'Spara arbete' längst ner till vänster för att spara dina ändringar.

Därefter måste du återgå till din instrumentpanel för leadgrupper.

Steg 4: Konfigurera bannerinställningar

När du är tillbaka i din instrumentpanel kan du ändra placeringen av din banderoll genom att klicka på alternativet 'Placering' i formulärraden.

Detta öppnar prompten 'Position Settings', där du kan välja önskad bannerposition från rullgardinsmenyn.

Klicka sedan på knappen 'Spara'.

Därefter, för att konfigurera visningsfrekvensen för bannern, klicka på alternativet ‘Visningsfrekvens’ i formulärraden.

Detta öppnar dialogrutan 'Skärminställningar', där du kan använda skjutreglaget för att bestämma hur många gånger bannern ska visas på skärmen.

Om du behåller siffran 0 kommer bannern att visas hela tiden. När du har gjort ditt val, klicka på knappen 'Spara' för att spara dina inställningar.

Om du vill lägga till en specifik utlösare för visning av din banner, måste du klicka på alternativet 'Trigger' i formulärraden.

Detta visar prompten ‘Utlösarinställningar’. Här kan du välja en utlösare för din banner från rullgardinsmenyn, till exempel efter en viss tid eller när en användare når botten av sidan.

När du är klar, klicka på knappen 'Spara' för att spara dina inställningar.

Steg 5: Publicera din banner

När du har konfigurerat bannerinställningarna måste du lämna din instrumentpanel för leadgrupper och gå tillbaka till instrumentpanelen för Thrive Leads genom att klicka på länken högst upp.

När du är där, expanderar du fliken 'Lead Groups' och växlar omkopplaren 'Display On Desktop' till 'On'. Om du också vill visa din banner på mobila enheter kan du växla omkopplaren 'Display On Mobile' till 'On'.

Klicka sedan på kugghjulsikonen i det övre högra hörnet av fliken Lead Groups för att öppna visningsinställningarna.

Här kan du välja de webbplatssidor där du vill att bannern ska visas. Om du till exempel vill att bannern ska visas högst upp på alla sidor och inlägg kan du markera rutan bredvid dessa alternativ.

Slutligen, klicka på knappen ‘Spara och stäng’ för att spara dina ändringar.

Nu kan du besöka din webbplats för att se bannern som visas högst upp på sidan.

Så här såg det ut på vår demosida.

Bonus: Lägg till smarta app-banners i WordPress

Om du har en mobilapp för din webbplats, är det en bra idé att visa smarta app-banners. Dessa banners kommer att marknadsföra dina appar och uppmuntra iPhone- eller iPad-användare att ladda ner dem.

När besökarna klickar på den här bannern tas de till appbutiken, där de kan ladda ner din app. Om appen redan är installerad på deras enhet kommer den smarta appbannern att be dem att öppna appen istället.

Du kan enkelt lägga till en smart app-banner i WordPress med WPCode. Enligt vår mening är det det bästa pluginet för WordPress-kodavsnitt på marknaden. Det låter dig enkelt lägga till din apps ID på webbplatsen.

För mer information, se vår handledning om hur du enkelt lägger till en smart app-banner i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt skapar en webbplatsbanner för WordPress. Du kanske också vill se vår nybörjarguide om hur du anpassar färger på din WordPress-webbplats och våra toppval för bästa programvara för webbdesign.

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.