# Design av landningssida: struktur för sidor som konverterar [Canonical HTML page](https://gradiently.design/sv/guide/landing-page-design) En landningssida är ett enda argument med ett enda slut. Här är ordningen att föra argumentet i, ett genomarbetat exempel du kan kopiera och de designval som får folk att fortsätta ner på sidan. ## The short version - En landningssida är en fristående sida byggd för ett mål, som en anmälan, en bokning eller ett köp. - En pålitlig struktur är hero, problem, så fungerar det, bevis, detaljer om erbjudandet, invändningar och en avslutande uppmaning. - Sidan ska matcha annonsen, inlägget eller e-postmeddelandet som skickade besökaren, i både ord och utseende. - Att ta bort webbplatsens navigering och extra länkar håller uppmärksamheten på den enda handling sidan finns till för. - Testa ändringar en i taget mot dina egna siffror i stället för att lita på allmänna riktvärden. Bra **design av landningssida** är ett mål, framfört i ordning. Till skillnad från en startsida, som tjänar alla, finns en landningssida för en besökare som kommer från ett ställe för att göra en sak: boka provlektionen, ställa sig på väntelistan, ta erbjudandet. Strukturen som fungerar gång på gång är en tydlig hero, problemet med läsarens egna ord, hur det fungerar, bevis, detaljerna i erbjudandet, svar på invändningar och samma uppmaning i slutet. Designens uppgift är att göra den ordningen enkel att följa. ## En sida, ett mål Skriv ner målet som en enda mening innan du designar något: ”Få förstagångsbesökare från vår Instagram-annons att boka en gratis introduktionslektion.” Då får varje sektion ett test. Hjälper det här den personen att ta det steget? Om inte, ta bort den eller flytta den till huvudwebbplatsen. ### Startsida - Tjänar alla sorters besökare - Full navigering och många länkar - Flera produkter eller tjänster - Förklarar hela verksamheten ### Landningssida - Tjänar en målgrupp från en källa - Ingen navigering, eller bara en logotyp - Ett erbjudande - För ett argument och ber en gång, sedan igen ## Struktur på landningssida, sektion för sektion 1. **Hero** Rubrik med löftet, en stödjande rad, en knapp, en bild. [Design av hero-sektion](https://gradiently.design/sv/guide/hero-section-design) går igenom den här skärmen i detalj. 2. **Problemet** Två eller tre meningar som beskriver situationen besökaren befinner sig i, med deras ord. Det visar att du förstår innan du säljer. 3. **Så fungerar det** Tre steg, vart och ett med en kort rubrik och en mening. Folk binder sig lättare när de kan föreställa sig processen. 4. **Bevis** Äkta omdömen med namn, foton av verkligt arbete, logotyper från verkliga kunder eller en kort demo. Aldrig påhittade. 5. **Erbjudandet i detalj** Vad de exakt får, när, och vad det kostar eller inte kostar. Tydliga villkor tar bort tvekan. 6. **Invändningar** En kort FAQ som besvarar skälen till att folk inte agerar: tid, pris, passform, avbokning, vad som händer sedan. 7. **Avslutande uppmaning** Upprepa rubrikens löfte och samma knapp. Besökare som läst till slutet är redo, så låt dem inte scrolla tillbaka upp. Alla sidor behöver inte alla sektioner. En väntelista inför en lansering kan vara bara en hero, tre rader om hur det fungerar och ett e-postfält. Ett erbjudande med högt engagemang, som en kurs eller en konsultation, behöver oftast alla sju och mer bevis. ## Ett genomarbetat exempel: introerbjudande på en yogastudio | Sektion | Vad sidan säger | | --- | --- | | Hero | ”Din första lektion bjuder vi på.” Stödrad: ”Små, nybörjarvänliga lektioner i Bristol, sex dagar i veckan.” Knapp: ”Boka din gratis lektion” | | Problem | ”Stora gymklasser går fort och ingen kollar din teknik. Det är svårt att komma igång när man inte vet vad man gör.” | | Så fungerar det | Välj en nybörjarlektion. Kom tio minuter i förväg, mattor finns. Stanna kvar på ett femminuterssamtal om vad som passar dig. | | Bevis | Tre korta omdömen från verkliga medlemmar med förnamn och foton, plus bilder av själva studion. | | Erbjudande | En gratis lektion för nya elever, valfritt nybörjarpass, inget kort krävs. | | Invändningar | ”Jag är inte rörlig.” ”Vad ska jag ha på mig?” ”Finns det parkering?” ”Vad händer efter den gratis lektionen?” | | Avslutande uppmaning | ”Kom och prova en lektion.” Samma knapp: ”Boka din gratis lektion” | Varje rad svarar på en fråga som en nervös nybörjare faktiskt har. Samma struktur fungerar för en tandläkares kontrollerbjudande eller en provperiod för programvara. ## Matcha sidan mot annonsen som skickade dem De flesta besökare på en landningssida kommer från något: en [Instagram-annons](https://gradiently.design/sv/guide/instagram-ad-design), en LinkedIn-annons, ett e-postmeddelande, en QR-kod på ett flygblad. I samma stund de landar kontrollerar de att de är på rätt ställe. Upprepa exakt det erbjudande annonsen hade i rubriken, och för över dess utseende: samma bakgrund, färger och text. En sida som ser orelaterad ut till annonsen känns som lockbete, även när den inte är det. En stående Instagram-annons för en yogastudio som erbjuder en gratis första lektion Instagram-annonsen i 1080×1350. En bred hero för en landningssida som upprepar samma erbjudande om gratis första lektion och samma bakgrund som annonsen Landningssidans hero i 1920×1080: samma ord, samma utseende, så att ingen undrar om de klickade på rätt länk. Att designa båda från en enda källa gör det automatiskt. I Gradiently kan en design ändras till varje storlek i ett enda steg med Pro, så att inlägget, storyn, e-postens sidhuvud och sidans hero delar en Mark och en rubrik. [En look, alla storlekar](https://gradiently.design/sv/guide/one-look-every-size) visar arbetsflödet, och [enhetligt varumärke](https://gradiently.design/sv/guide/brand-consistency) förklarar varför det betyder något bortom en enskild kampanj. ## Designval som får folk att fortsätta scrolla - **En accentfärg för varje knapp**, använd ingen annanstans. Ögat lär sig var det ska klicka. [60-30-10-regeln](https://gradiently.design/sv/guide/60-30-10-rule) är ett bra sätt att sätta balansen. - **Generöst utrymme mellan sektioner** så att var och en läses som en idé. Trånga sidor känns som hårt arbete. - **Rubriker som fungerar för sig.** Många skummar bara rubrikerna, och de ska berätta hela historien. - **Äkta foton framför stockfoton.** Ditt eget rum, din produkt, ditt team eller dina resultat. - **Korta formulär.** Fråga bara efter det du behöver nu. En e-postadress är lättare att ge än ett telefonnummer. - **Ingen navigeringsmeny**, eller bara en logotyp, så att det inte finns något att ströva iväg till. - Sidans botten: #fbf7f2 - Sektionsband: #efe6da - Text: #2b2a33 - Sekundär text: #6b6670 - Bara knappen: #c2410c En lugn palett för en landningssida: två varma bottnar som växlar mellan sektionerna, två textfärger och en accent reserverad för uppmaningen. ## Mobilen först, sedan test Trafik från inlägg i sociala medier kommer mestadels på mobil, så designa versionen som är 390 pixlar bred först. Håll rubriken och knappen på första skärmen, gör knappar minst 44 pixlar höga och använd en fast knapp bara om den inte täcker innehåll. ### Undvik - Att ändra fem saker på en gång och gissa vad som fungerade - Att kopiera en konverteringsgrad från ett blogginlägg som ditt mål - Popup-rutor som visas innan besökaren har läst något - Ett formulär som kräver tio fält för att ladda ner en guide ### Gör så här - Ändra en sak, som rubriken, och jämför - Mät mot din egen tidigare version - Låt folk läsa erbjudandet innan du ber om något - Be om minimum, ta reda på mer senare Det finns ingen universell bra konverteringsgrad. Den beror på erbjudandet, priset och trafiken. Det du alltid kan göra är att göra nästa version tydligare än den förra. För färgerna bakom allt detta, se [färgscheman för webbplatser](https://gradiently.design/sv/guide/website-color-scheme). ## FAQ ### Vilken är den bästa strukturen för en landningssida? Hero, problem, så fungerar det, bevis, detaljer om erbjudandet, invändningar och en avslutande uppmaning. Korta erbjudanden kan hoppa över sektioner, större åtaganden behöver dem alla. ### Ska en landningssida ha navigering? Oftast inte. Att ta bort menyn håller uppmärksamheten på den enda handling sidan finns till för, och en logotyp räcker. ### Hur lång ska en landningssida vara? Så lång som det krävs för att besvara besökarens frågor. En gratis väntelista kan vara en skärm, medan en betald kurs ofta behöver en lång sida med utförliga bevis och FAQ. ### Vad skiljer en landningssida från en startsida? En startsida tjänar alla besökare och länkar överallt. En landningssida tjänar en målgrupp från en källa och ber om en handling. ### Ska min landningssida se ut som min annons? Ja. Upprepa annonsens erbjudande i rubriken och behåll dess färger och bakgrund, så att besökare direkt förstår att de är på rätt ställe.