Hur man lägger till en hjältebild i WordPress (fungerar för alla teman)

Vill du att din WordPress-webbplats ska se mer professionell ut? En hjältebild är ditt bästa val.

En hjältebild är det första folk ser när de landar på din webbplats. Och du har bara cirka 3 sekunder på dig att fånga deras uppmärksamhet, så det är viktigt att göra det rätt.

Vi har byggt WordPress-webbplatser i över ett decennium nu – och vi minns när hjältebilder först blev en stor grej.

Då kämpade vi precis som alla andra. Bilderna såg konstiga ut – för stora på datorn, ihoptryckta på mobilen, eller helt enkelt trasiga. Men nu har vi fått det till en vetenskap.

Vi kommer att visa dig de enklaste sätten att lägga till en hjältebild på din WordPress-webbplats. Oavsett om du gillar att använda sidbyggare eller föredrar blockredigeraren, har vi dig täckt.

Först och främst: Förbered din WordPress-hjältebild

Innan du lägger till en hjältebild på din WordPress-webbplats, måste du skapa en som fångar dina besökares uppmärksamhet. En bra hjältesektion börjar med en fantastisk bild som visar vad din webbplats handlar om.

Canva är ett populärt verktyg för att designa webbplatsgrafik. Det är lätt att använda och kommer med massor av mallar för att skapa din hjältebild. Om du inte är ett fan av Canva har vi en lista över Canva-alternativ du kan kolla in för att hitta ett som fungerar för dig.

När du skapar din hjältebild vill du tänka på några saker.

Tänk först på storleken. Hjältebilder är vanligtvis inte för höga och täcker ofta hela bredden på din förstasida.

En vanlig WordPress-hjältebildstorlek är cirka 1920 pixlar bred med 400-600 pixlar hög (eller ibland mer). Men detta kan ändras beroende på ditt WordPress-tema.

Tänk sedan på vilket budskap du vill sända. Din hjältebild bör snabbt visa vad din webbplats handlar om. Det kan vara en produktbild, ett fotografi som representerar ditt varumärke, eller till och med en imponerande helskärmsvideobakgrund.

Till exempel bestämde vi oss för att visa upp vår grundare, Syed Balkhi, i vår hjältbild på startsidan. Det visar att det finns en verklig person bakom vårt varumärke som är dedikerad till att hjälpa WordPress-användare att lyckas, vilket är vad WPBeginner handlar om.

Lämna också lite utrymme för text. Många hjälteavsnitt har en rubrik eller en knapp. Se till att det finns plats för dessa och att de är lätta att läsa.

Det är en bra idé att titta på andra webbplatser inom ditt område för exempel på hjälteavsnitt. Detta kan ge dig idéer för din egen design. Några av posterna i våra exempel på WordPress-webbplatser kan fungera som stor inspiration.

Med det ur vägen, låt oss titta på hur man faktiskt lägger till hjältebilden.

Hur man lägger till en WordPress-hjältebild

När vi forskade för den här handledningen insåg vi snabbt att det inte alltid är enkelt att lägga till en hjältebild i klassiska WordPress-teman. Processen kan variera kraftigt beroende på ditt tema, eftersom vissa har inbyggda hjältesektioner medan andra inte har det.

Ta till exempel Sydney-temat. Det levereras med en hjältensektion redo att användas, vilket gör saker mycket enklare.

Om du försöker lägga till en hjälte till din befintliga webbplats, men ditt tema inte har en inbyggd funktion för det, kan det vara frustrerande.

För dem som precis har börjat och inte har något emot att välja ett nytt tema, rekommenderar vi att byta till ett med en inbyggd hjälteavsnitt, eftersom det kan spara tid i längden.

Om du letar efter temarekommendationer, kan du kolla in våra experters val av de bästa och mest populära WordPress-teman på marknaden. Ännu bättre, du kan använda en sidbyggare med ett tema som har en hero-sektion, vilket vi kommer att visa dig hur i metod 3.

Innan du gör några stora ändringar, föreslår vi alltid att du använder en staging-webbplats för att testa nya teman noggrant. På så sätt kan du vara säker på att du gör rätt val för din webbplats.

Om du är osäker på hur du gör detta, kolla in vår guide om hur du korrekt ändrar ett WordPress-tema.

Nöjd med ditt nuvarande klassiska tema? Inget problem. Hoppa fram till metod 4, där vi visar hur du lägger till en hjältesektion med hjälp av ett plugin. Detta tillvägagångssätt fungerar med alla teman, så du kan skapa en fantastisk hjältebild utan att behöva bygga om hela din webbplatsdesign.

Du kan använda snabblänkarna nedan för att hoppa till din föredragna metod:

• Metod 1: Använda temaanpassaren (endast klassiska teman)
• Method 2: Using Full Site Editor (Block Themes Only)
  • Steg 1: Öppna Full Site Editor
  • Steg 2: Lägg till täckblocksfunktionen på din sida/mall
  • Steg 3: Konfigurera bilden i ditt omslagsblock
  • Steg 4: Lägg till block i ditt omslagsblock
• Method 3: Using a Page Builder (Custom Landing Pages/Themes)
  • Steg 1: Konfigurera SeedProd
  • Steg 2: Anpassa ditt hjälteavsnitt
  • Steg 3: Lägg till och anpassa fler block i din hjältesektion
• Method 4: Using Hero Banner Plugin + Shortcode (All Themes)
  • Steg 1: Konfigurera hjältebanner-pluginet
  • Steg 2: Hitta CSS-väljaren för din temas sidhuvudsektion
  • Steg 3: Lägg till din Shortcode i WPCode
• Vanliga frågor om hjältebilder

Metod 1: Använda temaanpassaren (endast klassiska teman)

Om du använder ett klassiskt tema som har en hjälteavsnitt som Sydney, kan du anpassa din hjältebild via Temaanpassaren. Gå bara till Utseende » Anpassa i din WordPress-instrumentpanel för att komma igång.

💡 Snabb notering: Om Temaanpassaren saknas i din instrumentpanel, använder du förmodligen ett blocktema, och du bör hoppa vidare till metod 2.

Sidofältet bör ha flera alternativ för att anpassa ditt klassiska tema.

I Sydney kallas inställningen för att anpassa ditt hjälteavsnitt för ‘Hero Area’, men den här specifika menyn varierar beroende på tema. Klicka på den.

Sydney-temat har 3 menyer för att skapa din hjältesektion: Hjälptyp, Hjälteskjutreglage och Hjältemedier.

Vi kommer bara att använda de två första eftersom de räcker för att lägga till en hjälpsektion för vårt syfte.

Välj först ‘Hjälttyp’.

Under Hjälptyp kommer du att bli ombedd att välja vilken typ av media du ska lägga till i din hjältesektion.

Du kan välja mellan en helskärms bildspel, en video, en bild eller ingen rubrik.

Vi kommer att välja en helskärmsskjutreglage för hjältesektionen på vår startsida och hela vår webbplats. Anledningen är att det gör det möjligt för oss att skapa en skjutar med flera bilder för hjälten, och lägga till text och en knapp ovanpå bilderna.

Gå nu tillbaka till menyn Hero Area och välj 'Hero Slider'.

Öppna fliken ‘First Slide’ här och klicka på knappen ‘Select image’.

Detta öppnar ditt WordPress-mediebibliotek, där du kan ladda upp en ny bild eller välja en befintlig för din hjälteavdelning.

När du har laddat upp en bild kan du scrolla ner och ersätta texten i fälten för titel och undertitel.

Du bör se ändringarna du gör återspeglas automatiskt i sidförhandsgranskningen.

Om du vill lägga till mer än en bild i hjältesektionen kan du upprepa samma steg med resten av bilderna.

Annars kan du scrolla ner till menyn 'Sliderknapp'.

Här kan du ändra URL och text för knappen för uppmaning till handling.

Därefter, skrolla ner igen till fliken 'Sliderinställningar'.

Här kan du justera bildspelets hastighet, välja att visa samma text över alla bilder och göra bildspelets beteende responsivt.

Om du vill ändra knappens färg, gå tillbaka till Theme Customizers huvudmeny.

Klicka sedan på 'Allmänt'.

Du bör nu se flera menyer för att anpassa ditt temas allmänna inställningar.

Klicka här bara på 'Knappar'.

Nu kan du scrolla ner till sektionerna 'Standardläge' och 'Hovringsläge', där du kan ändra knappens färg beroende på dess läge.

För att ändra färgen, klicka bara på färgvalverktyget och välj en ny färg.

De flesta WordPress-teman tillåter dig också att anpassa färgerna och typografin i din design. De ändringar du gör kommer dock vanligtvis att gälla hela din webbplats, inte bara ditt hjälteavsnitt, så tänk bara på det.

I vilket fall som helst, här är hur vår hjältebild ser ut, gjord med Sydney-temat:

Metod 2: Använda Full Site Editor (endast blockteman)

Om du använder ett blocktema, kan du använda Full Site Editor's Cover-block för att enkelt skapa en hjältebild i WordPress. Inget plugin behövs.

Steg 1: Öppna Full Site Editor

Gå först till Utseende » Redigerare i din WordPress-admin.

Nu ser du redigerarens huvudmenyer.

Låt oss säga att du vill lägga till din hjältebild endast på din startsida.

I så fall klickar du bara på förhandsgranskningen av temat på höger sida av sidan.

Om du vill lägga till hjältebilden på en annan sida, en anpassad sidmall eller ett blockmönster, kan du läsa vår guide om WordPress Full Site Editing för mer information.

Steg 2: Lägg till täckblocksfunktionen på din sida/mall

Eftersom hjälpsektionen vanligtvis placeras ovanför vecket (den övre delen av din sida som visas när besökare landar på webbplatsen), måste du se till att du är på rätt plats. Hjälpsektionen ligger vanligtvis precis under rubriken.

När du har gjort det, måste du antingen ta bort befintliga block på den platsen eller lägga till ett nytt Gruppblock precis ovanför de befintliga blocken.

I vårt fall tar vi helt enkelt bort blocken som redan fanns på vår startsida. Om du vill göra detsamma kan du klicka på knappen 'Listvy' på vänster sida av sidan.

Hitta sedan blocket/blocken som du behöver ta bort för att ge plats åt din hjältesektion. När du har hittat det, klickar du bara på trepunktsknappen och väljer 'Ta bort'.

Välj nu blocket som brukade ligga precis under blocket/blocken du just raderade.

Klicka sedan på trepunktsknappen och välj 'Lägg till före'. Detta lägger till ett block precis ovanför det blocket och under sidhuvudssektionen.

I det här skedet kan du klicka på ‘+’-knappen som visas i det avsedda hjälteavsnittet.

Du måste lägga till ett Gruppblock här, eftersom detta gör att du kan hantera hjältebilden, texten, knappen och andra element som ett enda block vid behov.

Du kan nu välja en behållare att lägga dina block till.

För demonstration har vi valt den grundläggande gruppbehållaren.

Klicka sedan bara på knappen '+' inuti Grupp-blocket.

Här, fortsätt och välj blocket 'Omslag'.

Därefter ser du 3 alternativ för att lägga till din hjältebakgrundsbild: ladda upp den från din dator, lägga till den från ditt mediebibliotek eller använda din utvalda bild.

I vårt exempel klickar vi på 'Mediebibliotek' och väljer en befintlig bild.

Om bilduppladdningen lyckas, kommer du att se din hjältebild direkt. Det finns dock några justeringar du behöver göra.

Steg 3: Konfigurera bilden i ditt omslagsblock

Välj först själva 'Omslags'-blocket så att dess verktygsfält visas ovanför det.

Klicka sedan på knappen 'Justera' och välj 'Helt bredd'.

Därefter kan du klicka på duotone-ikonen för att ändra duotone-filtret som appliceras på din bild.

Om du inte gillar det kan du inaktivera det senare, vilket vi kommer att visa dig hur du gör.

Därefter kan du klicka på ikonen för innehållsposition för att ändra var din text och knapp ska visas på bilden.

Vi har valt den vänstra sidan i mitten, eftersom fokus för bilden ligger till höger.

Klicka nu på ikonen 'Inställningar' och byt till fliken 'Block'.

Här, scrolla ner till Inställningar. Det är här du kan välja att lägga till en parallaxeffekt till din bild ('Fast bakgrund') eller använda en upprepad bakgrund.

Du kan också scrolla upp och byta till stilikonen.

Här kan du ställa in överlagringens opacitet till 0 så att din bild inte använder något filter.

Om du vill ändra bildens höjd kan du ange ett nummer i pixlar i fältet 'Minsta höjd för täckning'.

Vi har beslutat att ställa in vår bild till 400 pixlar.

Anpassa gärna andra inställningar som kant och skugga, blockavstånd, utfyllnad och marginal, typografi och så vidare.

Steg 4: Lägg till block i ditt omslagsblock

Vi är nu redo att lägga till fler element till din hjältebild. Du bör se texten ‘Skriv titel’ ovanpå bilden.

Här är ett proffstips: Istället för att lägga till en rubrik direkt, klicka på knappen '+' och lägg till ett annat Grupp-block först. Tänk på detta Grupp-block som en behållare för din text och knapp.

Att placera dem inuti en behållare gör det mycket enklare att kontrollera deras justering och stil tillsammans som en enhet.

Välj sedan önskad behållare som i föregående steg.

När du har gjort det kan du klicka på '+' -knappen igen för att lägga till ett rubrikblock.

Nu kan du infoga sidans rubrik.

Ändra gärna textfärgen, storleken och dimensionerna i sidopanelen för blockinställningar om du föredrar det.

När du har gjort det kan du trycka på Enter-tangenten.

I det här skedet, lägg gärna till en underrubrik direkt under rubriken.

Slutligen kan du lägga till en call-to-action-knapp till din hjältebild.

För att göra detta, tryck bara på 'Enter'-tangenten igen, klicka på '+' -knappen och välj 'Knappar'-blocket.

Infoga sedan bara knapptexten.

Och för att lägga till en länk till knappen, klicka bara på länksymbolen i verktygsfältet och infoga din URL i lämpligt fält.

Klicka sedan på pilknappen.

Om du behöver tips och tricks för att skapa högkonverterande knappar kan du kolla in vår guide om bästa praxis för call-to-action.

Och det är i stort sett allt. Du kan lägga till fler element till din hjältebild eller anpassa den efter dina önskemål.

När du är nöjd med hur hjälteavsnittet ser ut, klickar du bara på 'Spara'.

Här är hur vårt Omslagsblock ser ut:

Metod 3: Använda en sidbyggare (anpassade landningssidor/teman)

Låt oss säga att du precis har börjat sätta upp din webbplats. Eller, du vill skapa en anpassad landningssida utan att vara begränsad av ditt temas begränsningar. I så fall rekommenderar vi att använda en sidbyggare som kommer med mallar med hero-sektioner, som SeedProd.

SeedProd är en dra-och-släpp-sidbyggare som vi ofta har använt för att skapa anpassade sidor för WPBeginner och våra andra varumärkessidor, inklusive Duplicator och OptinMonster.

Även om det är lätt att använda, erbjuder det också många inbyggda WordPress-redigeringsfunktioner som Theme Customizer, Full Site Editor och Gutenberg inte har som standard.

Tack vare det har vi kunnat spara tid och pengar på att installera tredjepartsplugins bara för att lägga till speciella funktioner till våra teman eller landningssidor.

SeedProd finns i en gratis och en betald version. Du kan absolut använda gratisversionen för att skapa en anpassad landningssida, men mall- och blockalternativen är ganska begränsade. Av den anledningen rekommenderar vi att uppgradera till en betald plan för fler funktioner, inklusive AI-innehållsgeneratorn.

För mer information, kolla in vår SeedProd-recension och vår jämförelse mellan Elementor vs. Divi vs. SeedProd, som alla är populära sidbyggare.

Steg 1: Konfigurera SeedProd

För att använda SeedProd måste du installera WordPress-pluginet som tillhandahålls i ditt SeedProd-konto i ditt adminområde. När pluginet är aktivt kommer du att bli ombedd att ange din licensnyckel, som du kan hämta från din SeedProd-kontosida.

När du har angett den, klickar du bara på knappen 'Verifiera nyckel'.

Med SeedProd har du 2 alternativ: du kan lägga till ett hjälteavsnitt på en landningssida eller vissa sidor inom ett anpassat tema.

För att konfigurera din landningssida eller ditt tema kan du läsa dessa guider:

• Hur man skapar ett anpassat WordPress-tema utan kod
• Hur man skapar en landningssida i WordPress
• Hur man skapar en squeeze page i WordPress som konverterar
• Hur man skapar vackra "kommer snart"-sidor i WordPress

För resten av handledningen kommer vi att använda Menu Sales-mallen.

Steg 2: Anpassa ditt hjälteavsnitt

När du har valt en mall för ditt tema eller landningssida kommer du till SeedProd-redigeraren.

SeedProd-redigeringsgränssnittet består av en sidförhandsgranskning på höger sida och en vänster sidopanel där du kan lägga till fler block, anpassa ett block/sektion, ångra/göra om ändringar, visa sidans lager och förhandsgranska din webbplats på mobil eller surfplatta.

Eftersom SeedProd-temat redan inkluderar en hjälpsektion är vårt jobb redan halvvägs gjort. Det vi behöver göra är bara att ersätta bilden, anpassa den och lägga till fler block till hjälpsektionen om det behövs.

Alternativt kan du hitta fler hjälpsektionsdesigner genom att växla från sidofältet Block till sidofältet Sektioner på vänster sida. Navigera sedan till ‘Hjälte’ och klicka på ‘+’-knappen på hjälpsektionsmallen som du vill lägga till på din sida.

SeedProd kommer sedan att infoga det på din sida.

Låt oss ändra hjältebilden först.

För att göra detta, klicka på den översta sektionen som inkluderar hjältebilden. Du vet att du har valt rätt sak när en lila ruta 'Redigering: Sektion' visas i sidofältet till vänster.

Håll nu muspekaren över bakgrundsbilden i sidofältet.

Klicka sedan på 'Medieikonen'. Därefter kan du ladda upp din hjältebild från din dator eller mediebiblioteket.

Välj sedan bakgrundspositionen som fungerar bäst för din bild.

Vi tycker att alternativet 'Anpassad position' ger oss bäst kontroll över positioneringen av fokusområdena, så vi väljer det alternativet.

Alternativet Anpassad position ger dig flera sätt att konfigurera bakgrunden.

För X- och Y-positionerna kan du ändra hur bilden är placerad vertikalt och horisontellt.

Inställningen för bilaga har 2 alternativ: Scroll (icke-parallax) och Fast (parallax).

Om din bild är mindre än hjälteavsnittet men du vill att hela avsnittet ska fyllas med bilden, kan du upprepa bilden i det avsnittet. Annars, välj bara ‘Ingen repetition’.

När det gäller storleken på WordPress hjältebild kan du välja alternativet 'Auto' om du vill att bilden automatiskt ska anpassas till hjälteavdelningen.

Lek gärna med dessa inställningar för att se vad som fungerar bäst för din bild.

En annan sak du kan göra är att tona ner bakgrundsbilden så att din text framträder bättre.

För att göra detta kan du dra reglaget ‘Dimma bakgrund’ till önskad opacitetsnivå.

Om du vill ändra den överliggande bakgrundsfärgen, klickar du bara på färgvalsknappen 'Överfärgsfärg'.

Välj sedan helt enkelt din föredragna färg.

Låt oss nu rulla tillbaka upp och växla till 'Avancerade' inställningar. Det är här du kan lägga till alla möjliga coola effekter till ditt hjälteavsnitt.

Du kan till exempel öppna fliken 'Partikelbakgrund' och lägga till en animerad partikelbakgrund till din bild. Detta kan göra ditt hjälteavsnitt mycket mer imponerande och unikt.

Därefter kan du lägga till en anpassad formdelare högst upp och/eller längst ner på din hjälteavsnitt genom att gå till menyn ‘Shape Divider’.

Att göra detta kan lägga till mer visuellt intresse i din hjältesektion. Dessutom, om du lägger till en rolig formdelare längst ner, kan du uppmuntra användare att scrolla ner på din landningssida och lära sig mer om ditt erbjudande.

Steg 3: Lägg till och anpassa fler block i din hjältesektion

Med din hjältebild redo, låt oss lägga till fler block i hjälteavsnittet.

Eftersom vår redan har ett rubrikblock, klickar vi på det och anpassar det. När det är markerat bör du se att vänster sidofält nu har ett orange band som säger 'Redigerar: Rubrik'.

Det häftiga med SeedProd är att det har en inbyggd AI-innehållsgenerator.

Så, om du är osäker på vilken rubrik du ska använda, kan du klicka på knappen 'Redigera med AI' för att få några idéer.

Du bör nu se ett popup-fönster där du kan skriva ditt innehåll med AI.

Vi vill generera en helt ny rubrik, så vi klickar på knappen ‘Ny prompt’ för att göra det.

Berätta sedan bara för AI:n vilken typ av innehåll den vill skapa.

Klicka sedan på knappen 'Generera text'.

AI:n kommer sedan att generera innehållet åt dig.

Men du kan fortfarande ändra det genom att ändra tonen, förenkla språket, göra texten längre eller kortare, och till och med översätta den till över 50 språk.

När du är nöjd med hur rubriken ser ut, klickar du bara på 'Infoga'.

Nu kan du skrolla ner i vänster sidofält.

Det här är där du kan ändra textens justering, teckenstorlek och rubrikens tagg för att passa dina preferenser.

Om du vill att texten ska sticka ut ännu mer, kan du rulla tillbaka upp och växla till fliken ‘Avancerat’.

I menyn Stilar, klicka på 'Redigera' vid Typografiinställningarna. Här kan du fritt ändra teckensnittsfamilj, radhöjd, bokstavsavstånd och textens versalisering.

Du kan också gå lite längre ner och lägga till en textskugga till rubriken.

Här har vi valt att skapa en anpassad skugga för att få texten att sticka ut ännu mer.

För att lägga till en underrubrik under rubriken kan du bara klicka på knappen 'Block' i sidofältet till vänster.

Detta tar dig till blockbiblioteket.

Dra och släpp nu 'Text'-blocket precis under rubriken.

Inställningarna för Textblocket liknar ganska mycket rubrikblocket, så du kan upprepa samma steg som tidigare för att skapa underrubriken.

För att lägga till en call-to-action-knapp måste du dra och släppa blocket 'Knapp' till sidan.

Den placeras vanligtvis precis under underrubriken.

När det är gjort, fortsätt och ange din knapptext i lämpligt fält.

Du kan också lägga till en undertitel precis under huvudknappens text för mer kontext.

Rulla sedan ner och lägg till en länk till din knapp.

Ändra gärna knappens justering och storlek också.

Flytta nu tillbaka upp i sidofältet och byt till fliken 'Mallar'.

Det här är där du kan ändra din knappstil så att den bättre matchar din WordPress-design.

Om du inte gillar standardmallarnas design, byt då till fliken 'Avancerat'.

Här kan du ändra knappens typografi, stil, färg, stoppning, skuggeffekt och så vidare.

Fortsätt gärna att anpassa din mall tills den ser bra ut.

När du är nöjd klickar du bara på knappen 'Spara' högst upp och väljer 'Publicera' för att göra sidan live.

Och det var allt för att lägga till en hero-bild med en sidbyggare.

Här är hur hjältensektionen ser ut på vår demosida:

Metod 4: Använda Hero Banner Plugin + Shortcode (Alla teman)

Denna sista metod fungerar tekniskt sett med alla teman, men vi rekommenderar den mest för personer som använder ett klassiskt tema utan en inbyggd hjältesektion.

För att följa den här metoden måste du installera pluginet Hero Banner Ultimate. För steg-för-steg-instruktioner kan du kolla vår guide om hur man installerar ett WordPress-plugin för nybörjare.

Steg 1: Konfigurera hjältebanner-pluginet

När pluginet är aktivt, gå till Hero Banner » Add Hero Banner.

Ge sedan din hjältebanner en titel. Detta kommer att fungera som din rubrik.

När du är klar, infoga lite text i den visuella klassiska redigeraren som kommer att fungera som din underrubrik. Ändra gärna formateringen och färgen här.

Skrolla nu ner till avsnittet 'Hero Banner – Inställningar'.

Här kan du välja en banderollayout. Även om du inte kan förhandsgranska layouten i realtid inuti plugininställningarna, är det enkelt att byta mellan dem senare på din faktiska sida för att hitta den du gillar bäst.

Vi väljer Layout 1 för vår handledning.

När det gäller Banner Type kan du välja 'Background Image' för en hjältebild, men du kan också välja 'Background Video' om du har en heltäckande video att använda som hjälte.

Glöm sedan inte att klicka på 'Ladda upp bild' för att lägga till din bild från datorn eller mediebiblioteket.

I det här skedet kan du ställa in bakgrundsbildens storlek till 'Täck' så att bilden är i full bredd.

Du vill också välja ‘Rulla’ för bakgrundsbildens fäste för att inaktivera eventuell parallaxeffekt.

Gå ner tills du når inställningen för banderollfärg.

Det är här du kan ändra färgen på rubriken (Title Color) och underrubriken (Content Color). Klicka helt enkelt på färgväljaren för att göra det.

Dessutom kanske du vill lägga till en överläggsfärg ovanpå bilden, vilket kan vara användbart för att justera läsbarheten av texten mot bilden.

Vi har bestämt oss för färgen svart, med en opacitet på 0,5.

Låt oss konfigurera inställningarna för call-to-action.

Här kan du infoga texten och länken för din knapp. Du kan också ändra färgen under 'Knapp – Klass 1'.

Allt du behöver göra nu är att scrolla tillbaka upp.

Därefter klickar du på 'Publicera'.

Låt oss nu gå till Hero Banner » Hero Banner. Du bör nu se att din hjältebild har skapats och att pluginet har genererat en kortkod för dig att visa den.

Notera denna kortkod, eftersom vi kommer att behöva den senare.

Steg 2: Hitta CSS-väljaren för din temas sidhuvudssektion

För att visa hjältebilden måste vi hitta en specifik 'adress' för din temas sidhuvudsektion.

Detta kallas en CSS-selektor, och den talar om exakt var vårt plugin ska placera hjältebilden. Oroa dig inte, du behöver inte skriva någon kod själv.

För att göra detta, besök din webbplats på framsidan. Högerklicka sedan på din sidhuvudsektion och välj 'Inspektera'.

På höger sida måste du hitta vilken CSS-väljare sidhuvudssektionen använder. Du kan föra muspekaren över alla kodavsnitt tills du ser att sidhuvudssektionen är markerad på frontend.

Här är ett exempel:

Om hela sidhuvudsavsnittet är markerat när du för muspekaren över koden, är du på rätt spår.

Högerklicka nu på det kodavsnittet och välj Kopiera » Kopiera selektor.

När du har gjort det kan du antingen klistra in selektorn någonstans säkert, som i en textredigerare, eller bara ha den här fliken öppen.

Steg 3: Lägg till din Shortcode i WPCode

Nästa steg är att installera WPCode, som är ett plugin för kodavsnitt.

Tekniskt sett behöver du inte använda ett plugin för att infoga anpassade kodavsnitt i dina temafiler. Men vi ville göra detta för att hålla saker säkra, eftersom inklistring av kod i en temafil kan orsaka oväntade fel.

Vi har funnit att WPCode är till stor hjälp för att hantera anpassade kodavsnitt utan att bryta din webbplats.

Installera först WordPress-pluginet i ditt adminområde. När pluginet är aktivt, navigera till Kodavsnitt » + Lägg till avsnitt, välj 'Lägg till din anpassade kod (nytt avsnitt)' och klicka på knappen '+ Lägg till anpassat avsnitt'.

Nu ska vi ge ditt nya kodavsnitt ett namn. Det kan vara något enkelt, som 'Hjältebanner Kortkod'.

Ändra sedan Kodtyp till 'PHP-utdrag'.

I rutan Kodförhandsgranskning, klistra in följande kodavsnitt:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

Se till att ändra [hbupro_banner id="XXX"] med din egen Hero Banner-kortkod som du såg tidigare.

Rulla sedan ner till sektionen 'Infogning'.

Här bör Infoga-metoden vara ‘Auto Insert’ och Platsen bör vara ‘After HTML Element.’

Klistra sedan in selektorn du kopierade tidigare i fältet 'CSS Selector'. I vårt fall var det #masthead, men detta varierar beroende på tema.

När det är gjort kan du växla knappen 'Inaktiv' så att den blir 'Aktiv' och klicka på knappen 'Spara utdrag'.

Och det var allt!

Om du tittar på din webbplats bör du nu se Hero Banner-bilden precis under din rubrik:

Vanliga frågor om hjältebilder

Här är en lista över några vanliga frågor som våra läsare ofta ställer om hjältebilder:

Vilken är den bästa storleken för en WordPress-hjältebild?

En bra utgångspunkt för storleken på hjältebilder är 1920 pixlar bred med 400 till 600 pixlar hög. Detta säkerställer att den ser skarp ut på de flesta stationära skärmar utan att ta upp för mycket vertikalt utrymme.

Den perfekta storleken beror dock ofta på ditt specifika WordPress-tema. Vi rekommenderar alltid att testa hur din bild ser ut på både datorer och mobila enheter.

Kan jag använda en video i min hjältesektion?

Absolut. Att använda en videobakgrund kan göra din webbplats mer dynamisk och omedelbart fånga besökarnas uppmärksamhet. De flesta sidbyggare som SeedProd och standard WordPress Cover-blocket inkluderar enkla alternativ för att lägga till en videobakgrund istället för en statisk bild.

Hur gör jag min hjältebild mobilvänlig?

Moderna teman och sidbyggare är utformade för att vara responsiva, så de skalar automatiskt din hjältebild för mindre skärmar. Nyckeln är att välja en bild som fortfarande ser bra ut när den är beskuren.

Det är också mycket viktigt att komprimera din bild innan du laddar upp den. Detta säkerställer att den laddas snabbt för besökare med långsammare mobila anslutningar.

Är en hjältebild samma sak som en slider?

De är lika men inte exakt likadana. En hjältebild är vanligtvis en enda, stor bannerbild högst upp på en webbsida. Å andra sidan roterar en slider genom flera bilder eller videor. Du kan använda en slider i din hjältesektion, som vi visade i metoden för klassiska teman.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du lägger till en hjältebild i WordPress. Du kanske också vill kolla in vår guide om hur du lägger till en förladdningsanimation i WordPress och våra experttips för bästa verktygen för att skapa och sälja digitala produkter.

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.