Hur man skapar en landningssida i WordPress: 3 enkla metoder 

Den ökande populariteten för visuellt tilltalande WordPress-webbplatser är något som en WordPress-webbplatsägare måste hålla koll på. När en användare landar på din webbplats är det första som fångar deras uppmärksamhet designen på en startsida eller en landningssida i WordPress.

Även om det är viktigt att betona WordPress webbdesign , är det också viktigt att fokusera på leadgenerering och uppmaningar till handling (CTA) på din webbplats, vilket är vad en landningssida är till för. Det blir ännu viktigare när du driver en marknadsföringskampanj eller vill att användare ska boka, köpa eller helt enkelt landa på din sida för att få användarinformation.

Det är här en landningssida kommer in som en hjälpande hand. En landningssida i WordPress hjälper till att fånga användarnas uppmärksamhet och levererar information som de verkligen behöver. Men hur skapar du en landningssida som matchar både ditt varumärkes röst och användarnas avsikt?

I den här bloggen ska vi ge en enkel guide till att skapa en landningssida med tre olika men enkla metoder. Så, låt oss börja.

Vad är en landningssida?

Först och främst, låt oss förstå vad en landningssida är i WordPress. Många missförstår en landningssida med en startsida på webbplatsen. Det är dock viktigt att notera att båda är olika.

En startsida är den första sidan en användare landar på när hen söker efter din webbplatsdomän . Den är utformad för att fånga användarnas uppmärksamhet med visuellt tilltalande designelement och alla viktiga detaljer om ditt företag/varumärke.

Även om startsidan är ett utmärkt sätt att engagera användare och spendera mer tid på din webbplats, uppmuntrar en landningssida användare att vidta åtgärder på din webbplats, till exempel att fylla i ett kontaktformulär , köpa en specifik produkt eller tjänst, eller kanske prenumerera på din e-postlista. Dess huvudsyfte är att engagera användare och konvertera dem till leads i alla former.

En landningssida har vanligtvis färre länkar och fokuserar bara på en sak, en uppmaning till handling (CTA). Du kan välja vilken CTA som helst som fungerar för ditt mål, men de flesta landningssidor syftar till att få besökare att köpa eller dela sin information för leadgenerering .

Till skillnad från din hemsida, där du bara har en, kan du skapa så många landningssidor som du behöver. Vill du skapa en landningssida i WordPress? Fortsätt läsa.

Läs också: Bästa SaaS-mallarna för landningssidor

Hur man skapar en landningssida i WordPress: 3 metoder 

Nu när du förstår syftet med en landningssida på din webbplats, låt oss utforska de tre enkla sätten att skapa en i WordPress. Även om varje metod kräver lite ansträngning, kan vår steg-för-steg-guide för att skapa en landningssida i WordPress hjälpa dig att gå vidare och designa en perfekt landningssida på nolltid.

Metod 1: Skapa en landningssida i WordPress med ett plugin

Nu vet vi att det kan bli en rejäl uppgift att bygga en landningssida om du är nybörjare på WordPress. Men oroa dig inte; WordPress har många enkla sätt att skapa och designa din landningssida. Ett av dessa är att använda ett plugin för att skapa en landningssida.

Många WordPress-plugins levereras med en dra-och-släpp-byggare och färdiga mallar för landningssidor, vilket gör det superenkelt att komma igång. Låt oss se hur:

Även om det finns många bra sidbyggare för att skapa en landningssida på en WordPress-webbplats, använder vi oss av Elememtor -sidbyggaren för att visa dig hur det görs. På samma sätt kan du också använda sidbyggare som Divi, Seedprod etc. för att skapa en landningssida i WordPress.

Jämför: Elementor vs Beaver Builder

Elementor ger dig mer flexibilitet och kraft med sin dra-och-släpp-designredigerare. Med det har du mer kontroll över din design och kan göra varje aspekt av din landningssida så kreativ som du vill.

Vet: WordPress-webbplatsmallar för ditt företag

Steg 1: Installera Elementor

När din WordPress-webbplats är konfigurerad kan du enkelt använda Elementor-pluginet för att designa landningssidor med dess visuella dra-och-släpp-gränssnitt. Det bästa av allt? Elementor är gratis och tillgängligt direkt från WordPress.

För att installera det, gå bara till din WordPress-instrumentpanel, gå till Plugins → Lägg till nytt och sök efter "Elementor". Så enkelt är det!

Steg 2: Skapa en ny landningssida

För att komma igång, gå till Mallar → Landningssidor i din WordPress-instrumentpanel och klicka på knappen Lägg till ny landningssida

Detta tar dig till Elementor-redigeraren, där du får två alternativ: välj bland en mängd olika fördesignade landningssidesmallar eller stäng mallbiblioteket och börja bygga din sida från grunden om du föredrar en anpassad metod.

Lär dig: Hur man visar populära WordPress-inlägg med ett plugin

Steg 3: Anpassa med färger, teckensnitt och färgväljaren

Innan du börjar designa din landningssida är det en bra idé att konfigurera den visuella redigeraren ordentligt.

När du skapar en ny landningssida kommer Elementor automatiskt att använda Elementors Canvas- layout. Detta ger dig en tom sida utan sidhuvud , sidfot eller sidofält, perfekt för att bygga en fokuserad landningssida.

Nästa steg är att ställa in de globala standardfärgerna: primärfärgen är vit, sekundärfärgen och textfärgen är svart.

Dessa standardfärgscheman tillämpas automatiskt när du lägger till en ny widget, vilket gör designprocessen smidigare och snabbare.

Dessutom kan du designa och ställa in landningssidans översta sektion, sidhuvud och navigeringsområde , ytterkant och galleri. Du kan ändra bakgrundsfärg, bild och justering så att din landningssida matchar dina varumärkesfärger.

Relaterat: Bästa AI-webbdesignmallar

Steg 4: Integrera med tredjepartsverktyg

Att använda intressanta verktyg för att attrahera fler användare och öka intäkterna från leads på din webbplats är alltid ett bra alternativ. Med Elememtor kan dina landningssidor integreras med populära marknadsföringsverktyg för att förbättra din kampanjs prestanda.

Med Elementors visuella formulärbyggare kan du till exempel enkelt skapa ett kontaktformulär och utforma det så att det matchar resten av din sida. Du kan enkelt ansluta det till en e-postmarknadsföringstjänst som MailChimp med hjälp av Elementors inbyggda formulärintegrationer.

Steg 5: Publicera din landningssida

När du har redigerat och designat din landningssida är det dags att trycka på publicera-knappen. Innan du trycker på publicera är det alltid en bra idé att förhandsgranska din landningssida för att se till att allt ser helt rätt ut.

För att förhandsgranska sidan klickar du bara på ögonikonen i den nedre vänstra panelen. När du är nöjd med resultatet kan du publicera sidan. Därefter ändras den gröna Publicera-knappen till en grå Uppdatera-knapp för framtida redigeringar.

Viktig läsning: Tillgängliga webbplatser för alla: ADA-kompatibla webbdesignlösningar

Metod 2: Skapa en landningssida i WordPress med ett tema

En annan metod för att skapa en landningssida på din WordPress-webbplats är att välja ett WordPress-tema och anpassa designen och layouten för landningssidan. Det finns många gratis WordPress-teman tillgängliga för att skapa en landningssida.

Astra och Neve är två av de mest populära WordPress-teman och är kompatibla med populära verktyg som WooCommerce och Beaver Builder. Alternativt kan du också använda Elementors landningssidesmallar för att enkelt bygga en professionell landningssida.

Lär dig: Anpassa WooCommerce-mallar och produktsidor

Nu ska vi se hur du kan skapa en landningssida med ett WordPress-tema:

Steg 1: Välj ett tema

Börja med att gå till Min webbplats → Design → Teman i din WordPress-instrumentpanel. WordPress har ett enormt bibliotek med teman; välj ett tema du gillar eller ladda ner ett nytt. När du har hittat ett, klicka bara på de tre punkterna bredvid dess namn och tryck på Aktivera .

Kolla även: Bästa e-handelsgränssnittsteman och exempelwebbplatser

Steg 2: Redigera innehåll

Enkelhet bör vara nyckeln till att designa din landningssida. Ju mindre röra det är, desto lättare är det för användarna att navigera. Så du bör rensa bort alla extra sidor eller inlägg. Gå till Min webbplats → Webbplats → Sidor och klicka på de tre punkterna bredvid den sida du inte behöver och välj sedan Papperskorgen . Det spelar egentligen ingen roll vilken sida du väljer att behålla.

Utforska: Bästa WordPress-teman för småföretag

Steg 3: Ställ in en statisk startsida

Ställ sedan in sidan du behåller som din statiska startsida. Klicka bara på de tre punkterna bredvid och välj alternativet för att göra den till din startsida. Detta säkerställer att besökare landar på din anpassade sida när de besöker din webbplats.

Steg 4: Anpassa din sida

Nu är det dags att anpassa den! Klicka på de tre punkterna igen och tryck på Redigera. Du kan lägga till text, bilder, kontaktformulär och uppmaningsknappar för att verkligen göra sidan till din egen.

Fortsätt läsa: Hur skapar man sin egen logotyp för sin webbplats?

Steg 5: Sänd live!

När du är nöjd med designen klickar du på Publicera för att publicera din landningssida. Det var allt, din nya landningssida är nu igång!

Metod 3: Skapa en anpassad landningssida i WordPress

Detta är den sista och mest rekommenderade metoden om du fortfarande är nybörjare på WordPress. Men om du vill använda en mer anpassad metod för att designa din WordPress-landningssida och är okej med kodnings- och designprocessen, kan det här steget göra det enklare för dig.

Låt oss se hur:

Steg 1: Skapa ett barntema

Börja med att skapa ett undertema i din WordPress. Varför? Eftersom det nuvarande temat på din WordPress-webbplats vanligtvis kallas "föräldratema" kanske du vill skapa ett nytt undertema som inte påverkar din nuvarande temakonfiguration när du skapar en landningssida.

Steg 2: Skapa en style.css-fil

När ditt barntema är konfigurerat är det dags att redigera style.css-filen med följande kod för att definiera detaljerna för ditt anpassade tema:

/* Temanamn: Anpassad landningssida Temabeskrivning: Ett undertema baserat på Twenty Sixteen, anpassat för landningssidor Författare: Ditt namn Författar-URI: https://yourwebsite.com Mall: twentysixteen Version: 1.0 Text Domän: custom-landing-page

Steg 3. Skapa en functions.php-fil

Nästa steg är att ladda både föräldra- och barntemats stilmallar. För att göra detta, skapa en ny fil som heter functions.php i din mapp för barntemat.

Börja med den inledande PHP-taggen och lägg sedan till koden för att köa ner det överordnade temats stilark. Här är ett exempel på vad du kan lägga till:

<?php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ?>

Med detta på plats är ditt barntema nu konfigurerat och redo att fungera tillsammans med ditt föräldratema.

Steg 4: Installera och aktivera ditt barntema

Nu är det dags att installera och aktivera ditt barntema i WordPress. För att kontrollera om allt fungerar korrekt kan du testa några CSS-stilar. Släpp bara den här koden i din style.css- fil och ladda om din startsida. Om bakgrundsfärgen ändras, grattis, allt är konfigurerat och fungerar som förväntat!

brödtext, #sida { bakgrund: #ECE8C1;}

Läs mer: Snabbaste WordPress-teman (med PageSpeed-poäng)

Steg 5: Skapa en anpassad sida

När ditt tema är aktiverat kan du skapa en anpassad sidmall för din landningssida. Börja med att skapa en ny fil som heter landing-page.php i din underordnade temamapp och lägg till denna kod:

<?php /* Template Name: Landing Page */ ?>

Du kan gärna ändra mallnamnet till vad du vill och sedan spara filen.

När du redigerar eller skapar en ny sida i WordPress kommer den här anpassade mallen nu att finnas som ett alternativ i sidofältet. Kom bara ihåg att den fortfarande är tom tills vi lägger till innehåll!

Steg 6. Anpassa landningssidan med CSS

Nu när din mall för landningssida är konfigurerad är det dags att anpassa den.

• Kopiera header- och loopkoden :
  Öppna ditt överordnade temas page.php -fil (finns i public_html → wp-content → Themes → yourtheme ) och kopiera koden som börjar med get_header();. Klistra in den i din landing-page.php- fil så att det ser ut så här:

<?php /* Template Name: Landing Page */ ?> <?php get_header(); while ( have_posts() ) : the_post(); get_template_part( 'template-parts/content/content-page' ); if ( comments_open() || get_comments_number() ) { comments_template(); } endwhile; get_footer(); ?>

• Ta bort sidofält och sidfot :
  För att hålla sidan ren och fri från störningar, ta bort sidofältet och sidfoten genom att radera dessa rader:

get_sidebar(); get_footer();

• Lägg till anpassat innehåll :
  Använd WordPress blockredigerare för att lägga till innehåll på din landningssida eller installera Gutenberg Forms- pluginet för att skapa anpassade formulär.

• Lägg till extra CSS :
  För ytterligare anpassning, navigera till Utseende → Anpassa → Ytterligare CSS . Du kan ändra bakgrund, teckensnitt och andra element här.

• Ändra bakgrundsfärg:

.site-content-contain { bakgrundsfärg: #DEF0F5; position: relativ;}

• Anpassa teckensnitt:

p { färg: blågrön; typsnittsfamilj: Georgia; typsnittsstorlek: 22px;} h1 { färg: vit; textjustering: centrerad;}

Detta ändrar bakgrundsfärgen till ljusgrön och justerar teckensnittet och storleken för din landningssida. Även om den här metoden kan verka lite knepig för nybörjare blir den enklare med övning eller professionell hjälp från WordPress-utvecklare och designers.

Tips för att skapa en perfekt landningssida i WordPress

Att skapa en landningssida i WordPress är ganska enkelt om du följer metoderna ovan och väljer den som passar dig bäst. Men du behöver också förstå hur man förstärker en landningssida för att få ut det mesta av den.

Dynamiska landningssidor ger utmärkta insikter i kunddata och leadgenerering. Att spåra kunddatan som kommer via dessa landningssidor kan också hjälpa dig att förstå hur många användare som faktiskt följer dina marknadsföringskampanjer.

Ibland räcker det inte att skapa en landningssida; att designa en landningssida som kan konvertera potentiella leads är allt vi behöver för vår webbplats. Låt oss se hur:

Enkelhet är bäst

Använd minimalistisk design . Enkelt är det nya smarta, och landningssidor måste utformas med det i åtanke. En landningssida är i huvudsak utformad för att konvertera potentiella leads. Så du måste se till att den är lätt för användare att navigera. För mycket information eller element kan förvirra målgruppen. Håll det därför enkelt och rent för maximal konverteringsoptimering .

Lär dig: Sätt att öka dina konverteringar längst ner i tratten

Anpassa landningssidan till dina mål

Innan du utformar din landningssida, se till att definiera och anpassa dina marknadsförings-/annonseringsstrategier till designen. Oavsett om du väljer att använda engagerande uppmaningar till handling eller kontaktformulär för att samla in information, måste resultatet överensstämma med dina slutmål. Det är så du kan få ut maximalt av din landningssida.

Design för att skapa effekt

Hur viktigt det än är att hålla landningssidan enkel är det viktigt att den gör den effektfull. En landningssida måste vara tillräckligt insiktsfull för att skapa effekt. Du kan använda bilder eller djärva ämnesrader för att fånga användarnas uppmärksamhet och skapa engagemang .

Gör ett test

Kom alltid ihåg att testa din landningssida! Du vet inte hur din landningssida har uppfattats eller använts av användare om du inte testar den själv. Testa uppmaningar till handlingar, prenumerationsknappen i kontaktformuläret eller andra element på din landningssida. Detta säkerställer att du inte missar några leads från din landningssida.

Läs mer: Omdesign av webbplats: Tecken på att du behöver en makeover av webbplatsen

Övervaka och optimera

När du väl har skapat en landningssida i WordPress och publicerat den slutar ditt arbete inte där. För att få framgångsrika resultat måste du regelbundet kontrollera och övervaka dess prestanda. Det är som vanligt WordPress-underhåll . Håll koll på vad som fungerar och vad som inte fungerar. Prova att använda olika rubriker, bilder eller element för att se vad som fungerar bäst. Fortsätt att förbättra och optimera sidan.

Välj white-label WordPress: Bästa white-label webbdesignbyråer: Toppval

Avslutning

En landningssida är en viktig del av alla WordPress-webbplatser, eftersom den hjälper till att öka konverteringsfrekvensen och engagera besökare. Beroende på din skicklighetsnivå finns det några sätt att skapa en i WordPress.

Om du precis har börjat är det enklast att använda ett plugin eller tema. Med massor av inbyggda funktioner kan du anpassa och optimera din landningssida utan att behöva vara ett kodningsproffs.

Å andra sidan ger det dig mer flexibilitet och kontroll över designen att bygga en landningssida från grunden om du är bekväm med HTML, PHP och CSS.

Oavsett vilken väg du väljer, se till att fokusera på en stark rubrik, en ren design och en tydlig uppmaning till handling för att skapa en landningssida som konverterar.

Vanliga frågor om hur man skapar en WordPress-landningssida