Hur man skapar en landningssida som konverterar i WordPress

Vill du veta hur man skapar en landningssida som konverterar? Börja med ett beslut: den enda handling du vill att besökaren ska göra. Allt annat, från hjältens layout till knappens färg, följer av det. Skissa sektionerna i gråskala, skriv rubriken innan du rör ett block och skär bort allt som inte tjänar den handlingen. Resten av guiden visar hur det går till i WordPress, med webbplatseditorn, och vilka gränser du stöter på.

Varför behöver en landningssida en annan brief än startsidan?

En startsida tjänar många besökare med många mål. En landningssida tjänar en besökare med ett mål, oftast någon som kommer från en annons, ett nyhetsbrev eller ett sökresultat. Den skillnaden förändrar hela bygget.

Navigationen krymper eller försvinner. Sekundära länkar går bort. Sidfoten tappar sin sitemap. I ett blockbaserat tema betyder det en dedikerad mall, inte en dold meny på en delad mall. Skapa en tom mall i webbplatseditorn, ta bort mallens sidhuvud och behåll bara logotypen och uppmaningen.

Låt bli att återanvända startsidans hjälte. Förra våren använde en frilanskollega startsidans Omslag-block till en sida för ett webbinarium och lät hela menyn stå kvar. Besökarna gick iväg till bloggen. Att ta bort sju menyalternativ var den billigaste åtgärden under kvartalet.

Vad ska du skissa innan du öppnar editorn?

Papper först. Rita fem eller sex rektanglar staplade vertikalt och ge var och en ett namn: hjälte, problem, lösning, bevis, erbjudandets detaljer och en avslutande uppmaning. De flesta guider, från HubSpot till Unbounce, är ense om ungefär den här ordningen, och den håller för att den speglar hur en skeptisk läsare fattar beslut.

Arbeta i gråskala. Färg döljer svag hierarki, och en gråskalig skiss avslöjar den snabbt. Om du inte kan se vilken rektangel som är viktigast när allt är grått, kommer inte besökaren att se det heller.

Skriv sedan orden. Rubrik, en stödjande mening och knapptext. Designa runt riktig text, för en layout byggd på lorem ipsum brister alltid när den verkliga rubriken blir tre rader lång. På arabiska eller hebreiska, där samma mening ofta blir längre, är det här inte valfritt.

Hur bygger du en hjälte som förtjänar scrollen?

Hjälten har fyra jobb: säga vad resultatet blir, säga vem sidan är till för, erbjuda en enda handling och visa något som gör påståendet trovärdigt. En rubrik som nämner ett resultat (”Lansera en kundsajt på en eftermiddag”) slår en rubrik som nämner en funktion (”En flexibel sidbyggare”).

I Gutenberg bygger du hjälten av ett Omslag-block som innehåller ett Grupp-block, så att du kan begränsa innehållsbredden oberoende av bakgrunden. Ställ in Gruppen på en innehållsbredd på cirka 640 till 720 pixlar, lägg till ett Rubrik-block, ett Stycke och ett enda Knappar-block med en knapp. En knapp. Två knappar betyder två beslut, och det andra är oftast det som klickas.

Håll det visuella stödet ärligt. En riktig skärmbild av produkten slår en dekorativ bild. Har du bara abstrakta bilder, använd dem med lägre vikt och låt rubriken bära sidan. Undvik karuseller i hjälten: de gömmer budskapet på bilder som de flesta besökare aldrig ser.

Marginalia: den här layouten fungerar från WordPress 6.5 och framåt, där Omslag- och Grupp-blocken beter sig förutsägbart i webbplatseditorn.

Hur mycket bevis behöver sidan, och var ska det stå?

Bevis svarar på frågan som hjälten väcker: kan jag tro på det här? Placera dem direkt under hjälten, inte längst ned där bara den redan övertygade läsaren kommer.

Bra bevis är specifika. En namngiven kund med ett mätt resultat är värt mer än fem generiska stjärnor. En logotypremsa hjälper om logotyperna känns igen av din publik, och ett enda vittnesmål med riktigt namn och roll väger tyngre än ett bildspel med anonyma citat.

Var försiktig med siffror du inte kan belägga. Vissa populära guider anger konverteringsfrekvenser som inget analysverktyg skulle kunna producera. Om du anger ett tal, säg varifrån det kommer och när det mättes, eller utelämna det. Din egen före- och eftermätning på din egen sajt är bättre än någon lånad statistik.

Vilka layoutregler spelar störst roll på mobil?

Största delen av trafiken till landningssidor från annonser och sociala medier kommer från en telefon, så designa den vyn först och bred ut sedan. Använd en enda kolumn, håll radlängden kort och se till att uppmaningen går att nå med tummen.

Tre regler täcker det mesta av skadan. Håll tryckytor på minst 24 gånger 24 CSS-pixlar, vilket är minimikravet i WCAG 2.2 på nivå AA, och helst mycket större för huvudknappen. Håll brödtexten läsbar utan zoom. Och upprepa uppmaningen efter bevissektionen, så att ingen behöver scrolla upp för att hitta den.

Testa sidan på en äldre telefon och på ett mobilnät med svag täckning, inte bara i webbläsarens simulator. Simulatorn visar layouten men inte hur länge bilden tar att komma fram, och det är just väntan som avgör om besökaren stannar. Notera var tummen hamnar när du scrollar, och flytta knappen om den ligger i en zon där du måste sträcka dig.

I ett blockbaserat tema hanterar du avstånd med skalan som definieras i theme.json, inte med egen padding på varje block. WordPress referens för theme.json beskriver förinställningarna, och när du använder dem håller du mobilens och datorns rytm konsekvent utan en stilmall full av överskrivningar.

Vad har hastighet med design att göra?

Allt. En landningssida som ser utmärkt ut men laddar långsamt tappar besökaren innan rubriken hinner visas. Google anser att en Largest Contentful Paint på 2,5 sekunder eller mindre är bra, och på en landningssida är det största elementet nästan alltid hjältebilden eller rubriken. Se web.dev-förklaringen av LCP för hur måttet mäts.

Det får praktiska konsekvenser. Komprimera hjältebilden och servera den som WebP. Lazy-loada inte hjältebilden, eftersom den är elementet du vill ska målas först. Begränsa webbtypsnitten till en familj, helst ett variabelt typsnitt som är självhostat med en rimlig reserv. Ta bort bildspel, automatiskt uppspelad video och tredjepartschattwidgetar från första skärmen.

Här förlorar WordPress-landningssidor ofta mot hostade byggare. En sida som är sammansatt av ett tungt flerändamålstema kan skicka hundratals kilobyte oanvänd CSS. Ett lätt blockbaserat tema med en dedikerad mall skickar betydligt mindre, och skillnaden syns direkt i LCP.

Hur hanterar du kontrast, tillgänglighet och RTL?

Tillgänglighet är en designbegränsning, inte en revision i slutet. WCAG 2.2-kriteriet för kontrast kräver minst 4,5 till 1 mellan vanlig text och dess bakgrund, och W3C:s förklaring av kriteriet för minsta kontrast visar hur du testar det. En blekgrå bildtext på ett vitt kort underkänns, och det gör många pastellfärgade knappar med vit text också.

Kontrollera knappen först. Den är elementet som hela sidan finns för, och den har ofta svagast kontrast eftersom den valdes för varumärkesfärg snarare än läsbarhet.

För tvåspråkiga målgrupper eller arabisk- och hebreiskspråkiga användare är spegling mer än att vända sidan. Ikoner som antyder riktning, som pilar på knappen, måste vändas. Padding och marginaler bör använda logiska egenskaper (inline-start och inline-end) i stället för vänster och höger. Typsnitt måste testas i rubrikstorlek, eftersom många latinska displaytypsnitt saknar ett arabiskt motsvarande och reservtypsnittet ändrar den visuella tyngden.

Testa RTL-vyn på en riktig enhet med riktig text. En spegelvänd layout som ser bra ut med platshållartext kan brytas när den verkliga arabiska rubriken radbryts på ett annat sätt.

Vilka verktyg passar för en WordPress-landningssida?

Du har tre ärliga alternativ. Bygg den nativt i webbplatseditorn med mönster, vilket ger den lättaste sidan och mest kontroll men kräver mest av dig. Använd en visuell byggare som Divi, som snabbar upp layoutarbetet och kostar en del sidvikt. Eller generera ett första utkast med en AI-sajtbyggare och bygg sedan om de delar som betyder något för hand.

Var skeptisk mot alla verktyg som lovar en färdig, konverterande sida från en enda prompt. Den genererade strukturen är en rimlig startpunkt för sektionsordningen och platshållartexterna. Den är sällan en bra slutgiltig design, och markupen behöver ofta städas innan en kund kan underhålla den.

Om sidan ligger utanför WordPress är en hostad byggare som Framer eller Webflow ett legitimt val för en kampanj som ska köras i sex veckor och sedan försvinna. Välj utifrån hur länge sidan ska leva och vem som ska redigera den, inte utifrån demon.

Hur testar och förbättrar du sidan efter lansering?

Lanseringen är början på mätningen. Sätt upp en konverteringshändelse, koppla den till din analys och kontrollera att formulärinskickningar faktiskt spåras innan du skickar trafik dit. En sida som inte kan rapportera sina egna resultat går inte att förbättra.

Ändra en sak i taget. Rubriken först, eftersom den har störst effekt, sedan knapptexten och sist bevisens ordning. Låt varje test gå tillräckligt länge för att samla ett meningsfullt antal konverteringar, i stället för att stanna vid den första lovande dagen. Med en liten publik kan ett test ta veckor, och det är helt okej. Tålamod slår en falsk vinnare.

Två underhållspunkter glöms lätt bort. Om sidan bara finns för betalda kampanjer bör du avgöra om den ska indexeras, eftersom en tunn dubblett av ditt erbjudande kan konkurrera med din huvudsida. Och om formuläret samlar in personuppgifter, lägg till den samtyckestext som din region kräver före lansering, inte efter det första klagomålet.

Vad ska du göra den här veckan?

Öppna en tom mall i webbplatseditorn och bygg bara hjälten, med riktig text och en knapp. Kontrollera sedan den på mobilen och mät dess LCP. Gör ett mönster av den, så att nästa kundsida börjar från en testad sektion i stället för en tom duk.

Ta sedan en skärmdump av sidan på din telefon och visa den för någon som inte känner projektet. Fråga vad de tror att erbjudandet är efter fem sekunder. Om svaret inte stämmer med din avsikt är det rubriken som behöver arbete, inte bilden.