Hur man gör en banner för en website (3 enkla sätt)

Letar du efter ett enkelt sätt att skapa en banner för en website i WordPress?

En banner kan lyfta fram de produkter, tjänster eller updates som erbjuds på din website på ett iögonfallande sätt. Den kan öka engagemanget hos användarna, öka din click through rate och uppmuntra besökarna att vidta åtgärder.

I den här artikeln visar vi dig hur du enkelt kan skapa en banner för din website i WordPress.

Vad är en website-banner?

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ärke och en logotyp, tillsammans med andra designelement, för att marknadsföra en specifik produkt, tjänst eller ett evenemang.

Om en ecommerce store till exempel just har annonserat en rea kan den visa en banner högst upp på sina pages för att berätta för nya besökare om rabatterbjudandena och uppmuntra dem att göra ett köp.

En väldesignad banner kan göra ett starkt intryck och bjuda in besökarna att utforska resten av din site. Dessutom kan banners användas för att främja affiliate-produkter, etablera varumärkesidentitet, bygga en email list genom att uppmuntra besökare att registrera sig för ditt nyhetsbrev och driva trafik till andra pages på din site.

Du kan också använda banners för att främja dina konton på sociala media och uppmuntra visitorerna att följa eller gilla dina pages.

Vilken är den bästa storleken på banners för websites?

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

Om du t.ex. vill displayed a rectangular and thin banner at the top of the screen, then you can use the Large Leaderboard size, which is 970 x 90.

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

• Medium Banner: 300 x 250
• Ledartavla: 728 x 90
• Bred skyskrapa: 160 x 600
• Halv page: 300 x 600
• Stor ledartavla: 970 x 90
• Skyltfönster: 970 x 250
• Stor rektangel: 326 x 280
• Vertikal banner: 120 x 240
• Full banner: 468 x 60
• Halv banner: 234 x 60

Om du vill visa en banner för en händelse i sidebaren kan du använda bannerstorlekarna Wide Skyscraper eller Half-Page. På samma sätt kan du också använda bannerstorleken Medium för att visa en fyrkantig banner på din page.

Om du vill visa annonsbanners kan du läsa vår guide för nybörjare om de mest utförda Google Adsense-bannerstorlekarna och -formaten för WordPress.

Med detta sagt, låt oss se hur du enkelt kan skapa en banner på din WordPress website. För denna tutorial kommer vi att täcka tre metoder för att göra en banner, och du kan använda länkarna under för att hoppa till den metod du väljer:

Metod 1: Skapa en webbplatsbanner med OptinMonster (rekommenderas)

OptinMonster är det bästa WordPress banner maker plugin på marknaden som tillåter dig att enkelt skapa flytande bar och popup banners för din website.

Det är det bästa konverteringsoptimerings- och leadgenereringsverktyget som hjälper dig att förvandla besökare på webbplatsen till prenumeranter och kunder.

Dessutom har många av OptinMonsters banner templates optin-fält som tillåter dig att samla in namn, email addresses och telefonnummer till dina website besökare.

För mer detaljer, se vår kompletta OptinMonster-recension.

Step 1: Installera OptinMonster på din website

Först måste du registrera dig för ett OptinMonster-konto. För att göra detta, besök bara OptinMonster-webbplatsen och klicka på knappen ”Get OptinMonster Now”.

Efter det måste du installera och aktivera det gratis OptinMonster plugin på din WordPress website. För detaljerade instruktioner kan du läsa vår guide för nybörjare om hur du installerar ett plugin för WordPress.

Efter aktivering öppnas OptinMonster Setup Wizard i din WordPress adminpanel.

Härifrån klickar du på knappen ”Connect Your Existing Account” för att ansluta din WordPress site till ditt OptinMonster-konto.

Detta öppnar ett new fönster på din dators vy.

Klicka sedan på knappen ”Anslut till WordPress” för att gå vidare.

Step-by-Step 2: Skapa och customize din banner

Nu när du har anslutit ditt WordPress-konto till OptinMonster, head över till OptinMonster ” Campaigns page från WordPress admin sidebar.

From here, click on the ”Create Your First Campaign” button to start creating your website banner design.

Då kommer du till sidan ”Templates”, där du kan börja med att välja en kampanjtyp.

Om du t.ex. vill visa din banner som en stapel högst upp på vyn kan du välja kampanjen ”Floating bar”. På samma sätt kan du välja kampanjtypen ”Popup” för att displaya your banner som en popup.

Efter det måste du också selecta en template för den kampanj du valt.

I den här tutorialen väljer vi en template för kampanjtypen ”Floating bar”.

Därefter kommer du att bli ombedd att ange ett namn för den kampanj som du skapar. Skriv bara in ett namn som du själv väljer och klicka på knappen ”Start Building” för att gå vidare.

Detta kommer att starta OptinMonster drag and drop-gränssnittet på din vy, där du kan börja customize din banner. Härifrån kan du dra och drop fält som du väljer från sidebaren till vänster på bannern.

Om du till exempel vill add to social media icons till din banner för att öka dina följare, kan du drag and drop Social Media block från vänster sidebar.

Efter det klickar du bara på blocket för att öppna dess inställningar i den vänstra kolumnen.

Härifrån kan du ändra rubriken på knappen, add to din sociala media URL och till och med ändra din sociala media plattform från dropdown menyn.

You can also add other blocks to display videos, images, text, or CTAs in your website banner design.

När du har gjort det måste du selecta bannerns position.

Som standard visas OptinMonster flytande fält längst ner på skärmen på din webbplats när du börjar rulla.

Du kan dock enkelt ändra denna inställning genom att clicka på ikonen ”Settings” längst ner i sidebaren till vänster.

Detta kommer att öppna inställningar i den vänstra columnen, där du måste förstora tabben ”Floating Bar Settings”. Härifrån togglar du helt enkelt omkopplaren ”Load Floating Bar at the top of the page?” för att visa bannern högst upp.

Step-by-Step 3: Add Triggers för Your Banner

När du har designat din banner går du till tabben ”Display Rules” högst upp. Härifrån kan du add to regler för displayen av din banner.

Kom ihåg att du bara behöver gå till den här tabben om du vill add to en specifik display trigger för din banner. Annars kan du hoppa till nästa steg.

Om du t.ex. gillar att visa din banner när användaren är på väg att lämna din site, måste du välja alternativet ”Exit Intent”.

När du har gjort det, välj bara alternativet ”På alla enheter” från dropdown-menyn i mitten. Om du vill använda denna displayregel endast för mobila enheter kan du också välja det alternativet.

Efter det väljer du Exit Intent Sensitivity enligt vad du gillar och klickar på knappen ”Next Step”.

Detta tar dig till en new vy. Här måste du se till att alternativet ”Optin” är valt i dropdown-menyn ”Show the campaign view”.

När du har gjort det klickar du bara på knappen ”Next Step”.

Your display rule för bannern kommer nu att visas på vyn.

Om du vill ändra något här kan du klicka på knappen ”Edit” för att fixa det.

Step 4: Publicera din banner

You can now switch to the ”Publicera” tabs at the top and click the ”Save” button in the top right corner of the screen.

Efter det klickar du bara på knappen ”Publicera” för att visa bannern på din website.

Gå nu in på din website och se bannern högst upp på vyn.

Så här gillade vi det på vår demo site.

Metod 2: Skapa en webbplatsbanner med Canva (gratis)

Om du vill göra en website-banner gratis är den här metoden något för dig.

Canva är ett populärt webbaserat verktyg som allow you att skapa all typ av grafik, inklusive banners, logotyper, affischer, bokomslag och mycket mer. Det finns också en gratis version som du kan använda för att skapa en bannerdesign för en website.

Step-by-Step 1: Skapa ett Canva-konto

Först måste du besöka Canvas website och klicka på knappen ”Sign Up” för att skapa ett account.

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

När du har skapat ett account kommer du till home page för ditt Canva-konto.

Härifrån måste du byta till fliken ”Templates” från den vänstra kolumnen och sedan söka efter bannermallar med hjälp av sökrutan högst upp.

Detta kommer att visa alla banderoll templates som finns tillgängliga i Canva. Vissa av dessa templates kan dock vara låsta eftersom de är utvalda funktioner som man betalar för.

Step 2: Utforma bannern på din website

När du har valt en template kommer Canvas designgränssnitt att startas på vyn.

Härifrån kan du customize din banner enligt vad du gillar. Du kan ändra det befintliga innehållet genom att clicka på blocken och lägga till din text.

You can even add to different graphical elements like stickers, photos, and videos by switching to the ”Elements” tabs in the left column.

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

You can also upload media files from your computer by switching to the ’Uploads’ tab from the left column.

För att add to text till din banner, byt bara till tabben ”Textbox” i columnen till vänster.

Väl där kan du använda standardtextformat eller olika kombinationer av font för att add to lite content till din banner.

Du kan även add to en call-to-action med en link genom att välja texten med din mus. Då visas en icon för en länk högst upp i texten.

Klicka bara på den iconen och copy and paste den länk du vill lägga till.

Efter det klickar du på knappen ”Done” för att save den.

Step-by-Step 3: Skaffa en embed-kod för bannern

När du är nöjd med din banner customomize klickar du bara på knappen ”Share” högst upp till höger på vyn.

Detta öppnar en snabbmeny där du måste välja alternativet ”More” längst ner.

Du kommer nu till menyn ”All Options”, där du måste selecta alternativet ”Embed”.

När du har gjort det öppnas en ny prompt på vyn. Härifrån klickar du helt enkelt på knappen ”Embed”.

Canva kommer nu att skapa en HTML-kod för embed åt you.

När den visas på vyn klickar du på knappen ”Kopiera” under alternativet ”HTML-inbäddningskod”.

Step-by-Step 4: Add HTML-koden för embed i WordPress

Du kan nu visa din banner på din WordPress page, post, eller sidebar enligt vad du gillar. I den här tutorialen kommer vi att visa vår banner på en WordPress page.

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

När du är där klickar du på knappen ”Add Block” (+) högst upp till vänster för att hitta och lägga till Custom HTML-blocket på sidan.

När du har gjort det klistrar du bara in embed-koden som du kopierade i blocket.

Slutligen klickar du på knappen ”Update” eller ”Publicera” för att save your changes.

Besök nu din website för att se WordPress-bannern i action.

Metod 3: Skapa en webbplatsbanner med Thrive Leads

Du kan också skapa en website-banner med hjälp av Thrive Leads. Det är ett populärt tillägg för popups i WordPress som används av över 114 000+ websites.

Med Thrive Leads kan du designa högkvalitativa banners som hjälper dig att genomföra leads på din WordPress site och utöka din email list.

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

Först måste du besöka Thrive Themes webbplats och registrera dig för ett konto. När du har gjort det, head över till din medlems dashboard.

Härifrån går du vidare och klickar på länken ”Download and install the Thrive Product Manager plugin”.

Gå sedan till din WordPress website för att installera och aktivera Thrive Product Manager plugin. För detaljerade instruktioner kan du läsa vår Step-by-Step guide om hur du installerar ett plugin för WordPress.

Efter aktivering, heada över till Product Manager tabben från WordPress adminpanelen och klicka på knappen ”Logga in på mitt konto”.

När du har enter dina credentials för login kommer du att kunna se din dashboard för Thrive Product Manager.

Härifrån kan du selecta de produkter som du vill installera och använda på din site. Välj bara pluginet ”Thrive Leads” och klicka på knappen ”Install selected products”.

Step-by-Step 2: Skapa en banner för website

Efter installationen av plugin måste du besöka Thrive dashboard ” Th rive Leads page från WordPress admin sidebar.

När du väl är där klickar du bara på knappen ”Add New” bredvid alternativet ”Lead Groups”.

Detta kommer att visa popupen ”Add New Lead Group” på din vy, där du måste skriva in ett namn för den lead-grupp du skapar.

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

For instance, if you are creating a banner to build your email list, then you can name your lead group ’Email List Campaign’.

Därefter kommer den lead-grupp du skapade att läggas till på vyn. Härifrån klickar du på knappen ”Add New Type Of Opt-In Form”.

Detta öppnar en new prompt där you måste välja vilken typ av banner you gillar att skapa.

Du kan skapa en slides-in, band, widget, in-content, lightbox eller rulla matt banner enligt vad du gillar.

Dessa banners kommer att gilla ett formulär eftersom de samlar in data från dina användare, inklusive email addresses, telefonnummer och mer.

I den här tutorialen skapar vi en banner med band för vår site.

När du väljer en designtyp för en website-banner kommer prompten automatiskt att försvinna från vyn.

Nu, för att öppna din dashboard för leadgrupper, måste du klicka på knappen ”Add” i det högra hörnet av din Lead Groups tabs.

Detta tar dig till din dashboard för Lead Groups, där alla formulär och rapporter om leads för gruppen kommer att visas när din kampanj går live.

Om du t.ex. vill skapa en banner för att genomföra email addresses, kommer all information om användare som du samlar in via bannern att visas här.

Nu behöver du bara clicka på knappen ”Create Form” för att börja bygga din banner.

Detta öppnar en new prompt där you måste ange ett namn för formuläret och click the ”Create Form” button.

När ditt formulär har skapats kommer det att displayed i din dashpanel för Lead Groups.

Därefter klickar du på knappen ”Edit Design” i det högra hörnet för att börja bygga din banner.

Step-by-Step 3: Customize din website-banner

Thrive visual editor kommer nu att startas i en new tab på din vy.

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

Du kan sedan använda en av de förgjorda templates som den är eller ytterligare customize den med visual editor. När du har gjort ditt val klickar du bara på knappen ”Choose Template” för att gå vidare.

När du har lagt till en template för en bandbanner kan du enkelt customize elementen i den genom att clicka på varje element. Då öppnas elementets inställningar i sidebaren till vänster.

Om du till exempel vill ändra färgen på knappen i din template måste du clicka på den för att öppna dess inställningar i sidebaren.

Om du vill add a completely new element to your banner, then you can also do that by clicking the ’+’ icon in the right corner of the screen.

Detta kommer att öppna sidebaren ”Add Elements” till höger, där du kan drag and drop element som du väljer på bannern.

For instance, if you want to add social media account buttons to your banner, then you will have to drag and drop the Social Följ element from the right sidebar.

När du är nöjd klickar du på knappen ”Save Work” längst ner i vänstra hörnet för att spara dina ändringar.

Efter det måste du gå tillbaka till din dashboard för Lead Groups.

Step-by-Step 4: Konfigurera Banner Settings

När du är tillbaka i din dashpanel kan du ändra positionen för din banner genom att clicka på alternativet ”Position” i formulärets row.

Detta öppnar prompten ”Position Settings”, där du kan välja din önskade bannerposition från dropdown-menyn.

Därefter klickar du på knappen ”Save”.

För att konfigurera bannerns visningsfrekvens klickar du sedan på alternativet ”Display Frequency” i formulärets row.

Detta öppnar prompten ”Display Settings”, där du kan använda slidern för att bestämma hur många gånger bannern ska visas på vyn.

Om du behåller siffran 0 kommer bannern att visas all tid. När du har gjort ditt val klickar du på knappen ”Save” för att store dina settings.

Om du vill add to en specifik trigger för din banner display, då måste du click the ’Trigger’ alternativ in the form row.

Detta kommer att visa prompten ”Trigger Settings”. Här kan du välja en utlösare för din banner från dropdown-menyn, till exempel efter en viss period eller när en användare når längst ner på sidan.

När du är klar klickar du på knappen ”Save” för att spara dina Settings.

Step 5: Publicera din banner

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

När du väl är där, förstora tabben Lead Groups och toggle ’Display On Desktop’ till ’On’. Om du också vill visa din banner på mobila enheter kan du toggle ’Display On Mobile’ till ’On’.

Därefter klickar du på kugghjulet icon i det övre högra hörnet av Lead Groups tab för att öppna upp displayinställningarna.

Här kan du selecta de pages på webbplatsen som du vill att bannern ska displayed på. Om du till exempel vill att bannern ska visas högst upp på alla sidor och inlägg kan du kontrollera boxen bredvid dessa alternativ.

Slutligen klickar du på knappen ”Save and Close” för att spara dina ändringar.

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

Så här gillade vi det på vår demo website.

Bonus: Add to Smart App Banners i WordPress

Om du har en mobil app till din website är det en bra idé att displaya smarta app-banners. Dessa banners kommer att främja dina appar och uppmuntra iPhone- eller iPad-användare att downloada dem.

När besökarna klickar på denna banner kommer de att tas till app store, där de kan download your app. Om appen redan är installerad på deras device kommer smart app-bannern att be dem att öppna appen istället.

Du kan enkelt add to en smart app banner i WordPress med WPCode. Det är det bästa WordPress code snippets plugin på marknaden som gör att du enkelt kan lägga till din apps ID på webbplatsen.

Mer information finns i vår tutorial om hur du enkelt lägger till en banner för smarta appar i WordPress.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du enkelt kan skapa en banner för en website i WordPress. Du kanske också vill se vår Beginner’s guide om hur du customize färger på din WordPress-webbplats och våra toppval för den bästa webbdesignprogramvaran.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.