Vilket är det bästa sättet att göra en målsida själv? Hur man gör en målsida själv: steg-för-steg-instruktioner

Att skapa en målsida (målsida) eller målsida, målsida, förenklar användarens väg till önskat mål så mycket som möjligt. En sådan sida är utformad för att påverka en persons grundläggande instinkter, för att uppmuntra honom att utföra riktade åtgärder: klicka, ring, beställ, köp "just nu".

Målsidor är bäst lämpade för att genomföra reklamkampanjer för en specifik tjänst eller erbjudande med ett unikt (lågt) pris, samt för att attrahera målgruppen från kontextuella reklamsystem Google AdWords, Yandex.Direct, sociala nätverk och nyhetsbrev via e-post:

Vad är målsida?

Målsida är en separat sida som används för:

• försäljning av en specifik produkt eller tjänst;
• skapa en prenumerationsbas.

Efter att ha bestämt dig för att skapa en landningssida måste du använda de nödvändiga inflytandetriggers som driver användaren att snabbt fatta ett beslut (köpa en produkt, ange information för att få rabatt, gå en kurs, webinar, etc.).

Ur användarens synvinkel är en landningssida den sida som han hamnar på efter att ha klickat på en informatör, banner, reklaminlägg etc. En målsida skiljer sig fundamentalt från en webbutik. För att sälja en produkt och genomföra en annonskampanj skapar du din egen sida och använder olika påverkanstriggers.

Typer av målsidor:

• Autonom. Detta är den vanligaste typen av målsida. Huvuduppgiften är att uppmuntra användaren att köpa eller vidta en specifik åtgärd som rekommenderas av sidan;
• Microsite. En liten, ofta separat webbplats, bestående av högst 5 sidor som innehåller information om en produkt eller tjänst;
• Huvudsida. För en målsida, använder en eller flera resurssidor;
• Landos hemsida. En resurs som helt består av oberoende målsidor:

Typer av målsidor

• Reklam. Innehålla en stor mängd text-, grafik- och videoinformation om tjänsten;
• Viral. Annonsen är förklädd som en artikel eller ett spel. Det handlar ofta om e-post, sociala nätverk, chattar;
• Riktade lead-sidor. Designade för att samla in information om målgruppen, som regel innehåller de ett minimum av information.

En väldesignad målsida kan öka omvandlingen av besökare till riktiga köpare.

Varför behöver du en målsida?

Huvudsyftet med en målsida är försäljning. Målsidan innehåller säljtext, en presentation av en produkt eller tjänst och en uppmaning. Målsida är ett utmärkt verktyg för att snabbt starta en tjänst eller produkt på Internet. Målsidor låter dig samla in prenumeranter och förfrågningar om tjänster etc.

Om du presenterar din produkt/tjänst korrekt, gör en bra presentation, anger styrkor och även ställer upp ett trafikflöde (annonsering på sociala nätverk, kontextuell reklam, etc.), är allt du behöver göra att samla in ansökningar från dina kunder och sälja dem den annonserade produkten/tjänsten.

Fördelar med att använda målsidan

Att landa, i jämförelse med vanliga resurssidor som erbjuder tjänster eller produkter, har ett antal fördelar:

• Inriktar sig på en specifik målgrupp. Målsidan erbjuder inte många beslut som kräver att användaren väljer, utan ett unikt erbjudande som är svårt att motstå;
• Hög konvertering. Enligt statistik kan användning av målsidor i reklamsyfte öka konverteringen med 10-15 %;
• Fullständig information om den produkt/tjänst som erbjuds, men utan ytterligare övergångar och länkar;
• Möjligheten att samla besökarnas kontakter och fylla på databasen med potentiella kunder, till vilka du senare kan skicka information om kommande kampanjer/utlottningar;
• Låg kostnad för att skapa en målsida. Även nybörjare har råd att skapa en målsida och testar på så sätt produktnischer för att börja sälja på Internet:

Var och hur används målsidor?

Du kan göra en målsida till den interna eller huvudsidan för en företagsresurs, en ensidig webbplats eller en sida på ett socialt nätverk. På senare tid har det blivit allt mer populärt (offlinesidor) för nyckelprodukter, i en tid då företaget redan har en företagswebbplats. Detta är vad juridiska och medicinska företag, banker, mobiloperatörer och många andra gör.

Var används målsidor?

• I reklamkampanjer som använder kontextuell reklam med pay-to-click (PPC) i Yandex.Direct, Google AdWords, Begun. I det här fallet omdirigeras trafik till målsidor som är optimerade för nyckelfrågor.
• I bannerannonseringskampanjer, förutsatt att det grafiska materialet placeras på tematiska resurser utformade för målgruppen. Till exempel placeras bannerannonsering för nya produkter inom elektronikområdet på nyhetsportaler inom segmentet för specialister inom IT-teknikområdet;
• I nyhetsbrev av informations- och marknadsföringsbrev som innehåller en länk till målsidan. Till exempel nyhetsbrev för en webbutik som tar hänsyn till användarens tidigare köp;
• Genomföra bloggkampanjer där användaren omdirigeras till resursens målsida, med ägaren av vilken bloggaren tidigare ingår ett partnerskapsavtal för placering av bannerreklam, post- och PR-artiklar;
• Kampanjer på sociala nätverk (VKontakte, Facebook, Twitter, etc.) eller på populära media-värdsajter (till exempel YouTube, Flickr, etc.). Användare omdirigeras till målsidan för annonsören som har ett avtal om att placera reklammaterial med den valda mediaresursen:

Grundläggande sätt att skapa en målsida

• Gratis målsidesmallar och generatorer. Nuförtiden finns det många alternativ på Internet för gratis mallar och designers som låter dig skapa en målsida. Den mest populära tjänsten. Detta är ett utmärkt alternativ för företag med en begränsad budget, men med en personal med specialister som är insatta i marknadsföring och design;
• Kontakta specialister. Du kan beställa text för en målsida från en copywriter, designutveckling från en designer och integration med motorn från en programmerare. Samtidigt ska företaget ha en marknadsförare i personalen som ska följa projektet i alla dess skeden. Fördelarna med denna metod inkluderar relativt låg kostnad och ganska höga resultat, nackdelarna är risken för fel vid val av specialister;
• Outsourcing av byråer. Denna metod för att skapa en målsida innebär att kontakta en byrå som tar på sig analysen av konkurrenter, väljer ett koncept, utvecklar en strategi för reklamkampanjer, löser problemet med integration med motorn och startar projektet. Allt som krävs av dig är en brief för att skapa en landningssida, och byrån tar över utvecklingen av en nyckelfärdig landningssida. Fördelarna med denna metod inkluderar hög effektivitet och tidsbesparing, nackdelarna är högre kostnad än i tidigare alternativ;
• Behåll en stab av specialister som kommer att ta itu med... Detta är det dyraste och mest effektiva sättet. Ditt eget team, bestående av en designer, copywriter, marknadsförare och layoutprogrammerare, kommer att tillåta dig att till fullo marknadsföra din produkt/tjänst på marknaden.

Är det möjligt att skapa en målsida själv?

Du kan skapa en landningssida själv, men du kommer att behöva ha vissa färdigheter inom webbutveckling, analys och design. Om du inte har sådan erfarenhet, använd tjänster som erbjuder färdiga mallar där du bara behöver fylla i texten och konfigurera domänen och hosting.

Att skapa en målsida själv kommer att spara pengar och tid. På Internet kan du hitta resurser med mallar för olika ämnen, som kommer med instruktioner för snabb installation och programvara som tillåter redigering. Kostnaden för sådana kit kan vara mycket lägre än priset för att utveckla en målsida i en specialiserad byrå:

Är det möjligt att skapa en målsida gratis?

Eftersom intresset för målsidor ständigt växer, erbjuder utvecklare allt fler verktyg för att skapa målsidor baserade på mallar. Här är en lista över de mest populära metoderna och tjänsterna:

• Du kan skapa en gratis landningssida om du registrerar dig på Wix;
• Du kan skapa en målsida med Adobe Photoshop;

Det tredje alternativet är mest lämpligt för nybörjare som har ett minimum av kunskap och inte vill slösa tid på att lära sig komplexa webbprogrammeringssystem.

Optimering av målsida

Att skapa en målsida är halva striden, det är viktigt att optimera den korrekt. Ensidiga webbplatser har en, men ganska betydande, nackdel - det är ganska svårt för sökmotorer att hitta dem. Flersidiga resurser har unika rubriker, korrekt länkning och en komplex struktur som anger vikten på sidor, etc.

Arkitekturen för en ensidig webbplats gör det inte möjligt att utföra högkvalitativ intern optimering i klassisk mening, för att "skräddarsy" webbplatsen efter sökmotorernas krav. En lösning från Google gjorde det möjligt för oss att bli av med detta problem - layout med JavaScript och PushState-metoden.

För att optimera din målsida bör du göra följande:

• dela upp målsidan i block;
• Varje block måste få sin egen unika indikator, titel, beskrivning och titel, URL.

Det vill säga att varje block måste ha samma egenskaper som varje enskild sida på sajten, medan sökroboten kommer att uppfatta din sida som flera unika sidor. Besökare på målsidan kanske inte märker detta beslut; bara de mest uppmärksamma kommer att märka att webbadressen och titeln ändras när de rullar längs sidan. För att genomföra ett sådant projekt behöver du viss kunskap inom området SEO och layout med JavaScript.

Om du bara behöver information om tjänster som du kan göra en landningssida med, gå direkt till steg 5 – välj ett layoutverktyg. Om du vill förstå algoritmen för att skapa en målsida från A till Ö, läs då hela artikeln.

Hur man gör en landningssida - steg-för-steg-instruktioner i 9 steg Steg 1. Förberedelse Syfte med målsidan

Först och främst bestämmer vi syftet med målsidan, vad vi vill ta emot från sidans besökare. Vanligtvis är detta en av tre saker:

1. Försäljning av varor/tjänster (exempel: sälja honung, sälja logotypdesigntjänster, sälja en onlinekurs);
2. Ta emot en kontakt (exempel: prenumeration på nyhetsbrevet, begäran om mätning);
3. Information (exempel: inbjudan till ett gratis offlineevenemang, kampanjsida för en butik med kampanjer).

Vi bestämmer målgruppen och vad som är viktigt för dem

I detta steg är det viktigt för oss att förstå vem som är målgruppen för vårt erbjudande, vilka smärtor de har, vilka önskningar, vilka rädslor och vad dessa människor vill ta emot. Det är viktigt att förstå allt detta så att webbplatselement, som text och design, görs med fokus på målgruppen (målgrupp).

Hur bestämmer man målgruppen?

• Analysera de kunder som du redan har arbetat med eller arbetar med;
• Fråga kunderna vad som är viktigt för dem. Ja, det stämmer, bara ring eller skriv, förbered en lista med frågor i förväg;
• Kom ihåg, eller ännu bättre, skriv ner de frågor som du oftast får om din produkt;
• Läs tematiska sajter/forum, se vad som oroar dina kunder.

Tittar på konkurrenter (benchmarking)

När du har skrivit ner alla dina tankar och idéer om den framtida målsidan är det dags att börja analysera konkurrenter (benchmarking). Om du redan känner till dina konkurrenter, bra; om inte ännu, sök sökmotorerna med hjälp av nyckelorden för din nisch.

Syftet med analysen är att hitta och se vad konkurrenterna gör dåligt och inte upprepar sina misstag, och vad de gör bra, att titta på idéer, saknade block, intressanta designlösningar. Detta betyder inte att du bara behöver kopiera dem, självklart behöver du inte göra det, spara dem åt dig själv, och sedan anpassa dem till ditt projekt när du skriver texten och utvecklar designen.

Så här gör jag: Jag skapar en separat mapp som heter "Idéer" och tar skärmdumpar av intressanta block.

Steg 2. Skriva text till målsidan

För många (inklusive mig) är att skriva text det svåraste utvecklingsstadiet, så jag försöker personligen alltid att delegera detta steg till en copywriter.

Sätt kaoset i huvudet på papper

Helt enkelt, utan att tänka på sekvensen, överför alla tankar och idéer för den framtida landningen till papper. Skriv ner allt du vill prata om. När du skriver en sådan lista med tankar, plus att vi tittade på idéer från konkurrenter, är nästa steg att kombinera allt detta och komponera blocken och strukturen på målsidan.

Att göra landningsblock

En målsida består av vissa block; du kan inte bara skriva fast text som en artikel och bara publicera den. Det här kommer att bli fruktansvärt jobbigt att läsa.

Här är huvudlistan över block som kan hittas på 90 % av målsidorna:

Första skärmen med USP (unik säljförslag)

Produktupplysning (beskrivning av tjänst eller produkt)

Författare/företagsinformation

Recensioner

Fall (framgångsberättelser)

Formulär/uppmaning

FAQ (Svar på vanliga frågor)

Kontakter / sidfot

Vilka andra block kan det finnas på webbplatsen:

• Fakta i siffror
• Fördelar (fördelar)
• Video
• Portfölj
• För vem
• Stadier av samarbete (eller hur man gör en beställning, hur man lämnar en förfrågan)
• Tariffer och priser
• Partners
• Galleri
• Schema
• Team
• Certifikat, diplom, tackbrev
• Dokumentation
• Timer

När ramverket för målsidan är klart börjar vi skriva texten. Du kan göra det själv eller lägga ut det till en copywriter.

Vi lägger det viktigaste i början. Du behöver inte skriva om dig själv i början av sidan, visa din produkt först.

Byt ut allmänna ord med fakta. Det finns ingen anledning att övertyga besökarna om någonting, överlåt detta till dem. (Exempel: skriv inte att ni är ledande på marknaden som går att lita på, visa recensioner av företag som ni tillhandahållit tjänster till och de var nöjda, bifoga dessutom den ursprungliga recensionen för att inte vara ogrundad).

Fungerar särskilt bra på den första skärmen och USP. Efter att en besökare landar på din målsida har du tre sekunder på dig att fånga deras uppmärksamhet. Om du inte hade tid kommer personen att stänga sidan och fortsätta surfa. Den första skärmen bör vara så relevant som möjligt för frågan genom vilken besökaren nådde webbplatsen. (Exempel: om en person söker efter "Redovisning för en enskild företagare" behöver du inte visa en målsida med rubriken "Redovisning för en LLC").

USP (Unique Selling Proposition). Enkelt uttryckt, huvudtiteln och beskrivningen, som kortfattat borde berätta vad den här målsidan handlar om. Du kan skapa en USP med 4U-teknik.

Ju kortare desto bättre. Försök att skriva textblock så korta som möjligt. Ingen läser långa inslag av text, idag har människor alltid tidsbrist och det måste man ta hänsyn till. Om du fortfarande behöver tillhandahålla mycket information, dela upp den i stycken och block.

Fler titlar. Textstycken ska inte skrivas bara så, utan rubrik. De flesta besökare, när de besöker en webbplats, bläddrar först igenom webbplatsen för att försöka utvärdera om de kom dit eller inte. Och här är det rubrikerna som spelar en viktig roll, eftersom han kommer att skumma sidan och utvärdera sidan exakt efter dem.

Vill du inte komponera texten själv? Hitta en copywriter som gör detta åt dig.

Var man ska leta efter en copywriter

Copywriting utbyte ContentMonster.ru

Copywriting utbyte Etxt.biz

Privata företag eller specialister. Du kan söka efter dem genom en sökning eller på sociala nätverk (VK, Facebook, Instagram).

Du kan vända dig till en copywriter inte bara för att utveckla text från grunden. Till exempel kan du kontakta oss med en färdig lista med block, med initiala skisser, eller till och med med redan sammanställd text, som copywritern kommer att "återuppliva", göra mer intressanta och korrigera fel.

Steg 3. Att göra en prototyp

Innan designstadiet är det viktigt att skapa en prototyp, låt mig berätta varför. Det finns flera anledningar:

Utan en prototyp kommer du att spendera mer tid, konstigt nog :) I början av min karriär, efter att ha skrivit texten, gjorde jag designen direkt. Jag trodde att jag skulle spara tid på det här sättet, men i verkligheten visade det sig att allt tog ännu längre tid, eftersom det inte är bekvämt att omedelbart komma med designelement utan ram.

Problem med kunden om du gör en landningssida på beställning. Alla hade den här situationen. Du godkände texten och började genast göra designen, spenderade mycket tid, skickade den till kunden, och han säger att allt är fel och måste göras om, texten bytas, etc. Detta är mycket svårare att göra när designen är redan klar än när du bara har en prototyp från text och cirklar.

En prototyp kan jämföras med skissen du gör innan du målar. Få människor kan ta färger och genast måla en bild. Så här gör vi först en skiss, ser hur det blir ungefär, vilka block som kan flyttas, ändras, läggas till eller tas bort text osv.

Ett exempel från mitt fall av en prototyp och en design gjord med denna prototyp.

Exempel på prototyp

Exempel på prototypdesign

På prototypen anger vi:

• Placering av text, markera rubriker;
• Var kommer grafiken (bilder, ikoner) att finnas?
• Var kommer knapparna att sitta?
• På vilket block blir bakgrunden ljus och på vilket block blir det mörkt.

Prototyptjänster:

• Photoshop. Jag gör det i Photoshop. Efter att vi godkänt prototypen med kunden är det bekvämt att göra en design här utifrån prototypen.
• Moqups tjänst. En speciell tjänst med färdiga element, bara dra och släpp och lägg till din text.
• På papper. Du kan skissera en prototyp för hand om målsidan inte är komplicerad och du inte vill bry dig för mycket.

Jag startar alltid en prototyp på papper, det är bekvämare för mig. Sedan överför jag den till Photoshop.

Använd Bootstrap Grid

Jag råder dig också att göra designen på ett rutnät så att den senare enkelt kan anpassas till olika enheter. Om du väljer ett designverktyg för layout, där själva designen anpassar sig till olika skärmar (mer om layoutverktyg senare), och inte använder en separat mobilversion av sajten, så måste designen utvecklas på ett rutnät.

Photoshop-rutnätsmallen som jag använder i mitt arbete kan du.

Steg 4. Göra designen

Alla designelement för målsidan kan delas in i tre delar, detta är urvalet:

Font

Färger

Diagram (foton, ikoner, bilder)

Varje element sätter en viss stämning, det är viktigt för oss att välja en sådan kombination av alla element så att besökaren utvecklar den rätta, förtroendefulla inställningen till vårt företag och vår produkt.

Som ett exempel: På en webbplats som tillhandahåller begravningstjänster är det osannolikt att ljusa färger och en flicka med ett strålande leende med inskriptionen med stora bokstäver PROMOTION! Eller en sida om att organisera semester i grå, bleka färger, med svarta knappar och en platta serif-font, efter att ha tittat som du vill falla i depression, och inte beställa en semester för ditt barn. Exemplen är naturligtvis överdrivna, du kommer knappast att se dem i livet (även om det är möjligt), men jag tror att du förstår kärnan.

Låt oss diskutera varje element mer i detalj.

Font

Text är grunden för alla webbplatser, så typsnitt är inte mindre viktigt än färg eller grafik. Ett typsnitt kan också sätta stämningen; det kan vara lätt eller brutalt, framkalla en känsla av dyrbarhet eller enkelhet, etc.

Baserat på ditt ämne och den känsla du vill väcka hos besökarna.

Om du inte vill bry dig om att komma på kombinationer, ta de färdiga neutrala alternativen som jag har förberett åt dig. De kommer att passa vilket tema som helst. Detta:

• Roboto
• Öppna sans
• Pt sans

Välj en eller två av dem och blanda.

Till exempel:

Titel – Roboto (fet)
Text - Roboto (Lätt)

Titel - Open sans (fet)
Text - Roboto (Lätt)

Rubrik - Pt sans (vanlig)
Text - Open sans (Light)

Var kan jag få tag i typsnitt?

Det finns gratis och betalda typsnitt. I de första stegen råder jag dig att använda gratis typsnitt från Google Fonts. Det finns bra alternativ där, och de jag beskrev ovan finns också där.

Varför rekommenderar jag Google-teckensnitt?

Eftersom deras licens tillåter dig att använda typsnitten både för dig själv och för kommersiella ändamål. Om du bestämmer dig för att köpa typsnittet du gillar från utvecklare eller i speciella onlinebutiker, så ok, det finns inga problem, men om du planerar att ladda ner teckensnitt gratis från tredjepartswebbplatser, är det viktigt att kontrollera licensen, eftersom du kan bryta mot upphovsrätten om du använder ett teckensnitt som är betalt, men du inte köpte det.

Om du skapar en webbplats för dig själv, ersätt dig själv; om du gör den för en kund, ersätt kunden.

FärgHur väljer man rätt färgschema för en webbplats?

Vita, grå och svarta färger ingår redan i uppsättningen, de används alltid, till exempel är teckensnittet vitt, grått eller svart, bakgrunden på webbplatsen är vit, grå eller svart. Vad du än säger kommer dessa färger redan att användas på målsidan. De kallas akromatiska (innehåller inte färgnyanser). Allt som återstår är att välja kromatiska färger (färgnyanser).

Vanligtvis använder en webbplats en, två eller tre kromatiska färger. Jag råder dig att välja en eller högst två, annars finns det en chans att du inte kommer att kunna kombinera dem harmoniskt och webbplatsen kommer att se ful och inharmonisk ut.

Se en intressant video om detta ämne

Du måste också välja dem baserat på ditt ämne.

Exempel på vilken stämning varje färg framkallar:

Materialet om färger är hämtat härifrån.

Grafik (foton, ikoner, bilder)

Den senaste trenden är att det är bättre att använda så många av dina bilder som möjligt än att använda bilder från stockfoton eller gratisbilder från Internet. Detta hände för att stockfoton redan har blivit tråkiga; identiska leende kvinnor från ett callcenter eller glada, jockade flyttare i blå overaller framkallar en känsla av, åtminstone, misstro.

Om jag ska vara ärlig har jag också syndat med detta tidigare, men nu ber jag (jag ber) kunder att skicka så många av sina ”live” bilder på produkter, personal, lokaler osv.

Det är sant att det är bättre att ta ett foto på din telefon, även om det är av lägre kvalitet, men klienten kommer att förstå att du inte gömmer dig bakom en mask av en bild från Internet, du visar ditt ansikte, en annan punkt för lita på din person.

Naturligtvis finns det ämnen där det inte finns något speciellt att visa, då kan du redan tillgripa stockfoton. Jag råder fortfarande att köpa bilder där istället för att leta efter gratis i sökningen, eftersom de oftare används på andra webbplatser.

Någon kommer att säga, "Ilya, bilderna ser ut som ett flygplan!" - det finns en sådan sak :) Det finns ett sätt för dig att ladda ner bilder för en dollar, om tjänsten. Tja, om du gör ett projekt för ett stort kommersiellt företag, är det bättre att budgetera detta belopp och köpa bilder från ett officiellt fotolager, igen för att skydda dig själv.

• Service ShopDiz.pro - ladda ner bilder från lager för 0,5-1 dollar.
• ShutterStock-tjänsten är den mest populära aktien med ett stort antal foton, vektorer och videor.

När du väljer bilder, fokusera också på ditt ämne och vilka känslor du vill väcka hos kunderna. Förtroende, glädje, pålitlighet, lycka, etc.

Hur kommer man på designidéer för block? Det finns ingen universell regel här. Det viktigaste är att ta bort allt som verkar onödigt för dig, förkorta texten, använda grafik med måtta och inte överbelasta. Titta på exempel på bra landningssidor, gör anteckningar för dig själv, ta skärmdumpar på block som du gillar, så att du sedan kan göra något liknande i dina projekt.

Steg 5. Välj ett layoutverktyg

Det finns många layoutverktyg tillgängliga idag, jag kommer bara att prata om de som jag har använt själv och som är mest bekväma för mig och för kunderna.

1. CMS WordPress + WPBakery eller Elementor-byggare

Du installerar WordPress CMS, installerar mallen, WPBackery-byggaren är betald, men den kommer gratis med 99% av mallarna som jag . Det finns en andra bekväm designer, det här är Elementor, det är gratis, men för att utöka dess funktionalitet, köp Pro-versionen av Elementor. För mig är båda designers bekväma, jag kan inte rekommendera en, var och en har sina egna fördelar. Titta på beskrivningarna och alternativen för webbplatser med båda konstruktörerna och välj den lämpliga.

Jag använder det här alternativet främst om vi, förutom målsidan, behöver ytterligare sidor, det vill säga vi gör en flersidig webbplats. Eller, för att inte vara bunden till någon plattform, bör sajten finnas på ditt personliga webbhotell.

På den här bloggen använder jag till exempel mallen The7, som kommer med plugin-programmet WPBakery.

Du kan välja en domän på tjänsten:

• Reg.ru - domänregistrering
• Timeweb.com - om du köper en domän omedelbart med hosting, så är det mer lönsamt att köpa här

Domänregistrering är densamma för alla tjänster:

Registrera ett konto på tjänsten;

Välj ett domänalternativ, namnet måste vara fritt;

Välj en zon (ru, com, рф, etc.);

Ange dina passuppgifter, om du registrerar dig som en juridisk person, sedan företagsuppgifter;

Betala för en domän i ett år (eller flera år på en gång);

Redo!

För att associera en domän med den valda designern eller webbhotellet måste du registrera ns-servrar i domäninställningarna. Support hjälper dig att klara av den här uppgiften om du inte kan ta reda på det på egen hand.

Steg 7. Layout av målsidan

När designen är klar och du har bestämt dig för layoutmetoden. Nästa steg är att avsluta det hela.

Det skulle vara omöjligt att prata om alla layoutverktyg i en artikel; du måste studera dem själv. Alternativ för hur du kan göra detta:

- det här är min kurs, som jag spelade in med hjälp av mallen The7 och WPBakery-konstruktorn;

Tilda.Education - lektioner och webbseminarier om Tilda-designern;

WPlovers kanal- killen spelar in lektioner på Elementor;

LPGenerator kunskapsbas - svar på vanliga frågor om LPGenerator-plattformen.

Steg 8. Bifoga ytterligare verktygOnline chat

Online chatt ökar konverteringen, bevisat! Om det är något som en person inte förstår och behöver råd. Alla kommer inte att ringa eller mejla supporten, det är bekvämare att fråga och omedelbart få svar i en onlinechatt. Du kan koppla upp till exempel Jivosite, jag använder det själv, det "tar" mig nya kunder. Du kan skriva till mig i chatten "Hej!"

CallbackMetrica

Det är viktigt att spåra webbplatsindikatorer; utan siffror blir du som en blind kattunge. Det är viktigt att förstå hur många som besökte webbplatsen, hur många som lämnade en förfrågan, vilka allmänna indikatorer webbplatsen har, du kan till och med titta på besökarnas beteende, hur de ser på webbplatsen. Du kan installera Yandex Metrics och/eller Google Analytics.

Retargeting

Om du planerar att köra reklam på sociala nätverk, installera sedan koden för det önskade sociala nätverket på din webbplats. Denna kod kommer att samla in en lista över besökare som besökte din målsida (det vill säga intresserade av erbjudandet) och som har en profil på sociala nätverk. Sedan kan du visa din reklam för dem på det valda sociala nätverket.

CRM

CRM ansvarar för att inte en enda applikation från sajten försvinner, så att du för varje applikation förstår vilka åtgärder som måste vidtas (ringa tillbaka, skicka en förfrågan, träffas, påminna om dig själv om 14 dagar, etc.). Detta är sant om du har ett flöde av kunder, men om du har 2-3 per månad, då tror jag att du inte behöver CRM.

De mest populära CRM:erna är:

• AmoCRM (pris 499 - 1499 rubel/månad)
• Bitrix24 (pris, från gratis plan till 11 990 rubel/månad)
• Google kalkylblad, Excel eller penna och papper (om du behöver det för en budget)

Kalkylator

För vissa nischer är det viktigt att använda en miniräknare för att beräkna en tjänst eller produkt. Detta är inte bara bekvämt, utan ökar också applikationskonverteringen. För det är alltid intressant att trycka på knappar, flytta spakar och se vad slutpriset blir. Och det ökar också beteendeindikatorer för sökmotorer.

Kalkylatorn kan antingen beställas från utvecklarna, vilket är dyrt, eller så kan du använda en färdig tjänst. Det finns en tjänst uCalc, som kan anpassas för populära CMS, designers eller en anpassad webbplats. Bygg din kalkylator med en bekväm konstruktör och lägg till den på webbplatsen.

Samla en abonnentbas

Om du bestämmer dig för att samla kundkontakter i en prenumerantdatabas för att kunna skicka e-post eller SMS senare, måste du använda en speciell tjänst. Du kanske vill överväga SendPulse, jag har nyligen granskat den här tjänsten, vilket du kan. SendPulse har en gratis plan med vilken du kan testa tjänsten. Om inte hans, så finns det andra erbjudanden på marknaden, till exempel MailerLite, UniSender, JustClick, GetResponse, etc.

Steg 9. Verifiering

Så! Allt är konfigurerat, uppkopplat, sidan finns redan på internet, hurra, bra jobbat. Nu är det dags att kolla upp det. Vad exakt ska jag kontrollera?

Textkontroll

Se till att korrekturläsa texten eller kontakta en korrekturläsare/copywriter för att få det gjort. Vi kontrollerar texten för fel, oavsiktligt kopierade block vid layout etc. Inget förstör intrycket av ett seriöst företag mer än fel i texten.

Anpassningsförmåga kontroll

Se till att kontrollera målsidans layout på din surfplatta och telefon. Anpassar sig allt bra? Ja, ibland händer det att det inte går att ordna allt perfekt, men det ska åtminstone vara läsbart och mer eller mindre snyggt. Om ett block inte kan anpassas ordentligt måste du göra två identiska block, dölja ett på datorversionen och dölja det andra på mobila enheter. Och varje block är bekvämt att konfigurera för den valda upplösningen.

Testar knapparna

Kontrollera att alla knappar har det önskade värdet bifogat: förankra till önskad plats, öppna ett modalt fönster, gå till en annan sida, etc.

Kontrollera ansökningsblanketter

Skicka en testförfrågan och kontrollera mejlets leveransbarhet. Om du har integrerat med CRM, kontrollera då att applikationen ingår i CRM.

Exempel på målsidor

Du kan se exempel på landningssidor som jag har utvecklat

Om du behöver göra en landningssida för att beställa, skriv i kommentarerna eller lämna en förfrågan

RESULTAT

Om du har slutfört alla steg, så grattis, din målsida är redo att börja! Nu behöver du din målsida för att ge dig kunder, för detta måste du ställa in reklam, men det är en historia för en annan artikel. Jag hoppas att den här artikeln var användbar för dig och att du kunde förstå hela processen med att utveckla en nyckelfärdig målsida av hög kvalitet. För eventuella frågor kan du skriva i kommentarerna under detta inlägg. Du kan också skriva ner dina metoder och knep när du skapar en webbplats, det ska bli intressant att läsa och lära dig dina prestationer :)

Google Fonts

Skriv dina tankar i kommentarerna. Vi ses i andra artiklar!

Landing, landing, landing, landing page, one-page site, langing page, one-page, selling site, landing page.

Så många namn, till och med helt perversa, på samma sak. Poängen är att nästan oavsett vad du gör behöver du en sådan sida.

Tja, eftersom det behövs, låt oss lösa problemet med att skapa det. Göra en målsida själv? Efter den här artikeln – ingen fråga!

Dessutom är den korrekt, meningsfull och träffar målet. Som de säger, du kan göra din omhuldade säljande målsida själv.

Just in case eller steg 0

Det brukar sägas att ensidiga sajter skapas för att sälja eller få en persons kontakter online, men i själva verket finns det ett mycket bredare utbud av uppgifter här:

Ta emot nya förfrågningar om varor/tjänster;

Öka varumärkesmedvetenheten;

Informera om tillhandahållande av varor/tjänster;

Ge råd om tjänster;

Ta emot CV från kandidater;

Attrahera partners, återförsäljare, representanter;

Ge tillgång till tjänsten;

Och så vidare.

Innan du börjar skapa måste du komma ihåg att du inte kan försöka sälja en produkt och locka återförsäljare på en sida. Och allt för att det här är olika uppgifter, och detta innebär olika målsidor.

Viktig. Innan du skapar måste du tydligt definiera syftet med din målsida. Och kom ihåg - det borde finnas ett mål.

Låt detta minska räckvidden för potentiella människor, men öka effektiviteten på sidan, vilket kommer att motivera allt ekonomiskt.

STEG 1 – Donera eller gör det själv

I det här steget måste du bestämma vilket av de två lösningsalternativen du ska välja.

Vad ska man göra... Vad ska man göra

Och de kommer att väljas ut utifrån dina ekonomiska och tidsresurser. Låt oss titta på var och en av dem med sina för- och nackdelar.

Konstruktör

En gång skrev en kund ett klagomål till oss efter att ha fått sidan. Dess kärna var att vi inte tog en massa pengar med rätta.

Det hela såg väldigt konstigt ut, för han hade redan satt sig in i allt och skrivit på avtalet. Men vi är inget fattigt företag, så det är lättare för oss att låta klienten gå i fred (inte alltid) än att försöka bevisa något. Det var vad vi gjorde.

Och allt detta hände för att han hittade en målsidedesigner på Internet och lärde sig att han kunde göra allt själv, spenderade bokstavligen 5-6 timmar på det och betalade inte mer än 1 000 rubel i månaden.

Men du och jag förstår att du kan montera en "bil" själv, men hur långt kommer den att gå, hur individuell kommer den att vara, hur mycket kommer den att ha rätt teknisk utrustning...

Vi beskrev i detalj alla steg för att skapa en målsida med deadlines i artikeln.

Fördelar :

• Billig. Mycket så. 500-1000 rubel per månad och du är den lyckliga ägaren av en ensidig webbplats;
• Bara. Du behöver inte tänka på layout, anpassning för mobila enheter eller koppla SMS-aviseringar om nya applikationer till din telefon. Allt detta är redan där och gjort för din bekvämlighet;
• Snabb. Du kan göra och konfigurera allt väldigt snabbt. Dessutom kommer det inte att vara svårt att göra förändringar;
• Teknisk support. Har du en fråga? De kommer att svara dig så snabbt och noggrant som möjligt. Ett stort plus;
• Gratis provperiod. Nu har nästan alla målsidedesigners en 14-dagars gratis provperiod. Registrera dig och...

En liten sanning om livet. “14 dagars gratis! Under den här tiden kommer jag att tjäna pengar på en landningssida på webbplatsbyggaren och beställa en vacker webbplats från en byrå”, tänkte de.

Efter 14 dagar, efter att knappt ha lyckats besegra designern, efter att ha gjort allt fel och inte fått en enda beställning via sajten, insåg de att one-pagers inte fungerade.

Minus:

• Kunskap. Du måste veta vilka block du ska använda, deras sekvens osv.

  Har du bestämt dig för att ta en titt på dina konkurrenter? Bra! Men hur vet du att dina konkurrenter har en effektiv målsida och visar bra prestanda?

• Design. Om du arbetar med en designer för första gången kommer du inte att kunna titta på målsidans design i slutet av arbetet utan tårar.

  Även om detta inte är det första alternativet. Förvänta dig inte en cool design som kommer att bli "Wow!"

• Begränsning. Antalet färdiga block är begränsat, liksom deras funktionalitet. Designlösningar presenteras inte heller i det bredaste utbudet.

  Därför, om du vill att en fågel ska flyga hit när en person lämnar en ansökan (som om hans ansökan flög iväg till dig med brevduvor), kan du glömma en sådan idé.

Personligen kan vi rekommendera denna målsidesbyggare. Vi brukar hänvisa kunder till dem som precis har börjat eller testar en nisch.

Frilansare

Låt oss gå rakt på sak och av erfarenhet. Att hitta en frilansare som på egen hand skapar en säljande målsida från grunden och på nyckelfärdig basis är OMÖJLIGT. Nå det är sant.

Det är möjligt att hitta individuella specialister: en designer som kommer att skapa designen av en framtida webbplats, eller en programmerare som kommer att sätta ihop den, men det finns inget monster som kan KVALITET göra en webbplats inifrån och ut.

Med allt arbete menar jag också sådana personer som: internetmarknadsförare, copywriter, projektledare. Det är helt enkelt omöjligt att vara bra på allt, åtminstone fysiskt.

Därför är det perfekta sättet att arbeta med en frilansare när du analyserar, samlar in och förbereder allt själv.

Och designern och layoutdesignern som hittas på frilansbörsen implementerar det helt enkelt, och utan något initiativ.

Fördelar :

• Tid. Både plus och minus. Fördelen är att du slipper det mesta av besväret med att implementera utseendet och den tekniska komponenten.
• Kvalitet. Det främsta pluset. De kommer att göra hundra procent bättre än du gör det själv från grunden.

  Åtminstone, eftersom de har erfarenhet och kunskap som du har inom sitt område, låt oss vara ärliga, nästan ingen.

Minus:

• Ansvar. Om sajten inte fungerar så är ingen annan än du att skylla på. Eftersom du är den som styr dem och talar efter behov.

  Sök. Du behöver speciell kunskap om var du ska leta efter dem, hur du tilldelar dem uppgifter och... du behöver även fylla i en brief, visa tekniska specifikationer osv.

• Tid och nerver. Dags att hitta en frilansare, tid att skapa uppgifter, dags att göra en målsidasprototyp, tid att kontrollera. Du kommer att slösa mycket tid och nerver.

  Majoriteten av frilansare är slarviga (jag ber om ursäkt, men det är så här det är), så förseningar i deadlines och periodiska förluster från kommunikationsradar kommer att inträffa.

  Och detta är det minsta du kan förvänta dig när du vill skapa en målsida billigt.

• Pengar. Du kommer att behöva punga ut pengar, eftersom en bra specialist utan "anslutningar" kostar ganska mycket.

  En genomsnittlig kvalitetsdesign kommer att kosta cirka 8-10 tusen, layout kommer också att kosta runt detta belopp. Återigen beror allt på komplexiteten i projektet och artisterna själva.

• Bedragare. Arbetet är uppbyggt enligt följande: 50/50 Förskottsbetalning och sedan resterande betalning efter avslutat projekt.

  Jag vill inte förolämpa någon, men bland frilansare finns det många människor som... inte tar sig an projektet efter att ha fått en förskottsbetalning. Enkelt uttryckt går de vilse.

Nu lite om betalning: om du bestämmer dig för att arbeta med en frilansare rekommenderar jag följande betalningsschema: gör en förskottsbetalning på 50 procent som en säker transaktion (nästan alla börser har det).

Och överför resten av beloppet direkt till frilansaren. I det här fallet kommer du att betala för mycket 15%, men du kommer att skydda dig själv.

Lifehack. Om en frilansare kommer att lura dig, kommer han att avråda dig från en säker transaktion. Detta kommer att vara din signal.

Steg 2 – till vem och vad?

Det tråkigaste (men mest nödvändiga) blocket i den här artikeln. Det spelar ingen roll vilken väg du går. Du kommer själv att skapa en effektiv målsida eller skicka den till en specialiserad byrå. Du behöver i alla fall veta 3 saker:

Din målgrupp;

Hunts stege;

Insidan av ditt företag.

Den enda skillnaden är att om du skapar en landningssida ensam måste du skriva och tänka igenom allt själv.

Byrån kommer att ge dig att fylla i en detaljerad brief, tack vare vilken de gör schemaläggningen av målgruppen och så vidare själva. Vi tar dock en annan väg och fyller i korten själva och kommunicerar med dig via Skype.

Vi tror uppriktigt att detta är det enda sättet att få all information, eftersom det är möjligt att ställa följande frågor under samtalet. Och sådana frågor dyker alltid upp.

Målgruppen

Vi har redan skrivit om att definiera målgruppen, eller ännu djupare definiera kunden.

Denna studie kommer att ge dig en förståelse för vem din potentiella kund är, vilka rädslor, invändningar och önskningar han har relaterat till din produkt/tjänst.

Vad ska du sätta press på i en framtida landningssida, vilka ord du ska använda, vilka bilder är bäst att infoga. Ett förenklat sammanfattningsdiagram ser ut så här:

Målpublik Hunt's Ladder

Men vad ger kunskap om Hunts stege? Precis som kundens avatar kommer den att ge själva strukturen på den framtida målsidan.

Jag ska berätta kort, men när det gäller en ensidig webbplats, eftersom företagare ofta inte förstår i vilket stadium av medvetenhet deras potentiella kund är (om du är för lat för att läsa, titta på videon).

Kort sagt, innan en person fattar ett köpbeslut går en person igenom 5 steg/nivåer av medvetenhet:

Steg "Indifferens". Det finns inget problem.

Steg "Medvetenhet". Det finns ett problem, men det finns ingen lösning.

Steg "Jämförelse". Alternativ för att lösa problemet jämförs med varandra.

Steg "Val". Lösningsalternativet har valts. Letar efter produkter.

Steg "Köp". Val mellan produktleverantörer.

Hur kan denna komplexitet hjälpa dig när du skapar en målsida? Låt oss titta på varje steg och hur vi går vidare:

Steg "Indifferens". Du måste skapa problemet i personens huvud först. Visa att om han inte köper/köper det så blir allt dåligt.

Steg "Medvetenhet". Du måste visa på de första skärmarna att det finns olika alternativ för att lösa hans problem.

Steg "Jämförelse". Du behöver förmedla att din lösning är bättre än andra och för detta kan du göra en jämförelsetabell, erbjuda en produktrecension, forskningsresultat, personlig konsultation om urval m.m.

Steg "Val". Du behöver visa vilket erbjudande som passar honom, eller snarare i vilken form/paket. För att göra detta avslöjar vi fler fördelar med våra produkter.

Steg "Köp". Du måste först och främst visa fördelarna med att arbeta med ditt företag, och först därefter prata om produkten och att den är den bästa.

Det verkar som att du inte behöver detta, men... Till exempel, om en person väljer mellan att köpa en lägenhet och att bygga sitt eget hus, så ska husets målsida ha ett block som förklarar varför ett hus är bättre än ett hus. lägenhet.

Paket

Du kan ungefär föreställa dig hur din hemsida kommer att se ut i ditt huvud. Och det är bra om du har en företagsidentitet eller varumärkesbok (idealiskt skulle jag till och med säga).

Hur är det med fördelarna med din produkt eller ditt företag som helhet? Och flera dussin frågor till som du behöver svara på innan du går vidare till att skapa en prototyp och webbplats.

För att rätt frågor bildar de rätta svaren, som du tar och paketerar in på din webbplats. Detta steg hjälper dig att ta alla de mest värdefulla sakerna i ditt företag och visa upp det.

Så att du får essensen, här är ett exempel på 10 frågor som hjälper dig att bättre/djupare förstå ditt företag och din produkt, och servera den "med en underbar sås":

Formulera 3-5 "skäl till varför det är objektivt sett mer lönsamt att köpa från dig snarare än från konkurrenter."

Vilka produktionsfunktioner har ditt företag?

Ger du intern personalutbildning?

Jämför produkten med liknande produkter. Ange fördelar och nackdelar.

Vem är företagets person eller personer?

Vilka bonusar är du villig att ge till kunder när du köper stora belopp?;

Beskriv i detalj stegen i arbetet med klienten från första kontakt till slutförande av arbetet.

Berätta för oss om de ekonomiska villkoren för arbetet (förskottsbetalning, avbetalningar, anstånd med första betalningar, produktlån, rabatter, produkt till försäljning, återköp av illikvida tillgångar, etc.).

Vilka publikationer finns om företaget eller från företaget? (expertkommentarer, intervjuer, tv-programdomare, spalter, artiklar).

Dina kunder är stjärnor.

STEG 3 – Prototyp

Äntligen kom vi till det mest intressanta. Nu ska vi skapa din framtida hemsida.

Eller snarare, för nu, hur man gör en prototyp själv, men det här är åtminstone mer intressant än att bara beskriva målgruppen.

Steg 1. Prototypstruktur

En prototyp är strukturen och sekvensen av block för en framtida målsida, som du enkelt kan bygga utifrån urvalskriterierna och invändningarna från din målgrupp.

Det bästa sättet att göra detta är enligt följande: ta ett papper och skriv ner en sekvens av block/betydelser. Det ser ut ungefär så här:

En mössa;

Företagsförmåner;

Katalog;

Egen produktion;

Stock;

Team;

etc.

Du och jag är de som föreskriver blocken, men vi får inte heller glömma de två klassiska strukturerna som något reklammaterial är byggt på, och målsidan är inget undantag:

(produkter);

PmPHSA(). Står för Pain, more Pain, Hope, Solution, Action (smärta, ökad smärta, hopp, lösning, uppmaning till handling).

Den här artikeln kommer att hjälpa dig så att du inte klurar på hur du förmedlar en av de utvalda betydelserna och gör ditt liv mycket enklare när du skapar en prototyp själv.

Förlåt för min uppriktighet, men det är jävligt trevligt för mig att se människor som också jobbar natt (bara gör det utan att kompromissa med din hälsa). Jag började tänka att arbetsnarkomanerna hade dött ut. När det gäller resultatet av samarbetet nämner jag bara detta faktum: under toppdagar fick vi 140 ansökningar om dagen, och vi var tvungna att anställa en hel försäljningsavdelning för internetmarknadsföringskanalen. Tack!

öppna recension Dmitry Novozhilov, D-färg

Vet du vad e-postmarknadsföring är? Till exempel visste jag inte innan jag träffade killarna från Convert Monster. Jag trodde naivt att detta bara var ett vackert ord. Jag trodde och hörde samtidigt att det hjälper att arbeta mer effektivt med kundbasen. För sex månader sedan skaffade vi en kundbas. Den sammanställdes från dagliga ansökningar för dagisfranchise. Det fanns många ansökningar, men konverteringen låg kvar på en mycket låg nivå. Jag kämpade med detta fenomen - jag försökte själv skicka brev till databasen. Det räckte alltid inte till – för att komponera nästa nyhetsbrev väl tog det en halv arbetsdag. För varje minut som spenderades uppstod behovet av att göra en kompetent kedja mer och mer. Men än så länge har breven skickats en gång i veckan eller en gång varannan månad. Det fanns ingen konsekvens i arbetet. Något saknades. Under lång tid kunde vi inte förstå exakt vad. Killarna från Convert Monster kom snabbt igång. De första resultaten lät inte vänta på sig. Efter att ha aktiverat den första e-postkedjan gjorde vi flera transaktioner med den gamla databasen. De stod för kostnaderna för att lansera e-postmarknadsföring. Efter ett par månader märker vi en trefaldig ökning av konverteringen. Och det här är bara början. Vi arbetar för närvarande med att ytterligare öka den nuvarande konverteringsfrekvensen. Till exempel tre gånger till. Beräkna själv: - hur mycket pengar kommer en höjning av omvandlingskursen med två gånger att ge? Det är minimum! - Hur mycket får du om du stänger minsta procentandel av kunder från din befintliga bas? Är du fortfarande osäker på om du ska kontakta Convert Monster?

öppna recension Sergey Degtyarev

Vi har använt internettrafik för att locka kunder under lång tid. Ungefär ett och ett halvt år. Under denna tid bytte vi 2 leverantörer tills Convert Monster rekommenderades till oss. Samarbetsvillkoren för de flesta företag som tillhandahåller liknande tjänster är likartade: budget för månaden, upprätta en reklamkampanj och så kör vi. Då blir kampanjen föråldrad, en nedgång börjar, och som en konsekvens, brist på kunder. Sedan ber du chefer att ändra taktik, strategi, rubriker, semantisk kärna – du vädjar till alla helgon. Och de (chefer, inte helgon) gör ingenting. Eller så kanske de gör det, men det blir inget resultat. En dag sätter det tänderna på spetsen, du lämnar det här kontoret för en annan, sedan börjar du leta efter nästa. Viktig! Innan du börjar leta efter den allra första, prova själv. Naturligtvis är dina resultat just nu de bästa möjliga, de är helt enkelt NOLL! Vi kom till Convert Monster i desperation. Detta var ögonblicket när Yandex satte upp en installation - de tog bort garantin som vi satt så bra på och mjölkade den så mycket som möjligt och OMÖJLIGT. Vi förstod att lyckan inte skulle komma omedelbart, men vi väntade på den. Och verkligen! Det började sakta knacka på våra dörrar – ansökningar och försäljning började strömma in. Sedan misslyckande - sommar, lågsäsong, arbete i minus. Men killarna gav inte upp och vi minskade inte budgetarna, för vi vet VAD det hotar. Sänk aldrig din budget eller lämna webbplatsen som ger dig inkomst! Slutresultat: mer än 6 miljoner i intäkter genom Yandex.Direct. Vi är mer än nöjda med vårt samarbete! Om du har några tvivel om att arbeta med Convert Monster eller inte, kontakta oss då! Vi berättar var du ska börja. Då kommer din väg till dem att bli längre, och den sista utgången till Convert Monster blir din "utandning" och ljuset i slutet av tunneln. Alla vägar kommer fortfarande att leda till dem. Om du letar efter dem såklart. Det är en tidsfråga. Positionera dig själv som ett företag som är redo att utvecklas och skala. Annars kommer de helt enkelt inte att vara intresserade av dig.

öppna recension Isabella Ritz, Ritz Group LLC

Innan jag kontaktade dig beställde jag en målsida från ett företag och Yandex Direct-installation från ett annat. Båda företagen är välkända på marknaden, men var och en av vår webbplats + reklamkampanjkombinationer försökte inte hjälpa, utan kritiserade bara den andra artisten: programmerare - direktologer, direktologer - programmerare. Som ett resultat, baserat på din rekommendation, kontaktade vi dig och på bara 4 månader ökade vi antalet ansökningar med 4 gånger (upp till 120 per månad) och vår onlineförsäljningsomsättning till flera miljoner rubel.

öppen recension Vladislav Shupenya, Kimberlit företag

Hälsningar, mina kära läsare. Idag kommer vi att prata om tekniska aspekter med vilka vi kan öka försäljningskonverteringen av våra varor eller tjänster. En av de viktiga punkterna är en väldesignad landningssida med produkter. Den så kallade landningssidan, vars skapande vi kommer att prata om senare och få färdiga sidkoder.

Vad är en målsida? Det här är sidan som folk brukar landa på efter att ha klickat på en annons. Skapad för ett erbjudande: produkt, tjänst eller prenumeration. En effektiv målsida är hörnstenen i framgångsrik marknadsföring på nätet. Produkten kan vara den bästa på marknaden, annonserna är fulländade, men utan en bra målsida ger ansträngningar inte 100 % resultat. Den berättar för besökarna vad som erbjuds och varför de ska vilja ha det. En känsla av brådska bidrar till snabbt beslutsfattande och användarens övergång till kategorin klient.

Hur skapar man en målsida? Det är fel att tro att svaret ligger i förmågan att typsätta. En bra landningssida är resultatet av ett samordnat arbete med mål, text, design och kod. Målsidor, varav exempel kommer nedan, hjälper nybörjare att lära sig grunderna i att arbeta med layout, men ersätter inte konverteringstexter och förståelse för målgruppen. Du kan också skapa dem med hjälp av olika målsidedesigners.

Så innan du skapar en målsida, fråga dig själv:

• Vad kommer en person att göra efter att ha landat på målsidan? Kommer han köpa något? Kommer du att fylla i formuläret? Prenumerera på nyhetsbrevet? Sätt upp tydliga mål innan du spårar din omvandlingsfrekvens.
• Vilka är mina konkurrenter? I verkligheten är dessa tre frågor: vem, hur framgångsrika är de och hur kan deras prestationer tillämpas? Imitation är den uppriktigaste formen av smicker. Om dina konkurrenter gör något som fungerar, replikera det på din webbplats.
• Vem är min publik? Ju bättre du förstår din nisch och målgrupp, desto större är chansen att dina ansträngningar ger resultat.

Du måste erbjuda all nödvändig information, men inte så mycket att du överväldigar och driver bort din potentiella kund.

Exempel på att skapa en landningssida + kodning för dummies

Innan vi börjar, låt oss ta en snabb titt på HTML och CSS. Att förstå hur de fungerar hjälper dig att skapa en landning.

HTML är ett webbläsarmarkeringsspråk för webbplatsvisualisering. Skrivet med taggar inom vinkelparenteser som definierar innehållet.

Taggen öppnas () och stängs () runt fyllningen:

innehåll

För finjustering läggs attribut till efter namnet:

innehåll

CSS - definierar hur HTML-element ska ordnas. Består av väljare, egenskaper och värden:

#selector (egenskap: värde;)

Väljaren matchar namnet på en specifik tagg i html. Att ändra värden och lägga till egenskaper justerar dess utseende. Du kan skapa sidor som ser olika ut genom att använda olika CSS-stilar på samma HTML.

5 första steg

För snabb layout kommer vi att använda en mall med minimal design baserad på bootstrap. Detta är ett system med egna väljare, som används över hela världen för att snabba upp layouten.

Det ser blygsamt ut.

Av denna fisk skapas en webbplats för varje smak i flera steg.

Katalogstruktur i mappen:

• index.html: Detta är huvudfilen som vi kommer att redigera.
• /tillgångar: hjälpfiler finns här:
• /css: Katalogen innehåller bootstrap och ikonstilar. Filen vi kommer att redigera är main.css.
• /img: mapp för webbplatsbilder.
• /fonts: ikonteckensnitt.
• /js: bootstrap javascript-filer.

Steg 1: Använda en rubrik

Rubriken och underrubrikerna är nyckelplatser som hjälper till att förmedla värdet av erbjudandet på ett tydligt sätt.

Låt oss ändra titeln och namnet på webbplatsen. Här behöver du inte ha skrivkunskaper - du skriver din egen text på de gulmarkerade platserna på skärmen.

Steg 2. Brevity är omvandlingens syster. Lägger till förmåner och priser

Du behöver 4 sektioner:

• fördelar;
• priser;
• recensioner;
• uppmaning till handling.

Låt oss skapa ett avsnitt av huvudinnehållet "main", där vi kommer att infoga de nödvändiga avsnitten:

…..
…..
…..
…..

Fyll med fyllning istället för prickar.

För förmånsdelen behöver du denna kod:

Fördelar
Snabb

Pålitlig

Sed diam nonummy

Lönsam

Elit, sed diam nonummy

Tekniskt

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Pålitlig

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lönsam

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Tekniskt

Lorem ipsum dolor sit amet, consectetuer adipiscing

Pålitlig

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lönsam

Lorem ipsum dolor sit amet, consectetuer adipiscing

Innehåll för tydlighet:

Det ser fortfarande slarvigt ut, men det finns ingen anledning till panik, låt oss fortsätta.

Vi skriver ner priser. Innehållet ändras på samma sätt som i det första steget. Allmän beskrivning med klassen "tariffer" och tre tariffer.

Tariffplaner

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Taxa nr 1
$10

per månad/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Beställa
Tariff nr 2
$20

per månad/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Beställa
Taxa nr 3
$30

per månad/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Beställa

Ser ut så.

För närvarande är vi inte intresserade av utseendet på den framtida målsidan - vi kommer att titta på exempel på att ändra stilar nedan.

Steg 3: Trust Signals och Call to Action

Att använda riktade signaler indikerar för besökarna att varumärket är pålitligt. Signaler kan ta många former, men den klassiska är kundfeedback.

Recensioner

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud övning ullamco laboris nisi ut aliquip ex ea commodo:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
“Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

Låt oss göra en uppmaning till handling.

Fördel när du beställer idag

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Beställ nu!

Recensioner hjälper potentiella kunder att välja att köpa produkten. För tydlighetens skull behöver vi avatarer, så vi lägger dem omedelbart på plats - under varje citat.

Kundnamn.

Steg 4: Grid- och mobilvänlig integration

För att implementera rutnätet behöver vi Bootstrap-behållare. Det är viktigt att komma ihåg det totala antalet giltiga kolumnsegment - 12. Klassen bestämmer bredden på innehållsvisningen. Det som är bra med detta färdiga rutnät är att behållarna är designade med lyhördhet i åtanke och är omedelbart användbara på mobila enheter. Detaljerad beskrivning på den officiella hemsidan. Rutnätet ser ut så här.

Innehållet i "main" kommer att slås in i en behållare. För att göra detta skrivs följande högst upp:

… .

Om du behöver blocket för att passa hela skärmens bredd, så sätts behållaren inuti. Här blir det en jumbotron och en uppmaning till handling.

Vi kommer att slå in alla element som kräver placering ovanpå varandra med linjeavskiljare.

Vi kan nu justera bredden på kolumnerna, med fokus på bootstrap-rutnätet. Efter lindningen slutade fyllningen att fastna på skärmens kanter och snygga indrag uppstod.

Vi sätter priser i rad med kolumnklassen col-lg-4. Inuti radrader är det inte längre nödvändigt att skriva separata div:er för lindning, de kan kombineras med befintliga avgränsade med ett mellanslag.

I analogi ställer vi upp kolumner för avsnittet recensioner och förmåner. Om du behöver flytta ett element åt sidan, använd offset-kolumnklassen col-lg-offset-2. Siffran i slutet avgör hur många baskolumner skiftet kommer att ske med.

Steg 5. Teckensnitt och ikoner

Vi implementerar Google Font-rubriker. När valt, öppna importfliken och kopiera data från den till main.css-filen. Vi lägger också till titelväljare till filen som det nya typsnittet används för.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* importtypsnitt för rubriker */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", sans-serif; /* Googlefont-utdata */
}

För tydlighetens skull beskrivs fördelarna av en klass med det självförklarande namnet text-center och FontAwesome-ikoner från bootstrap-setet.

Vid denna tidpunkt är förberedelsen helt klar.

Landningssida: exempel på koder med erbjudande, parallax och räknare

Vi använder de tre mest populära typerna: med en mening, en form och med en nedräkningsräknare. Allt eftersom layouten fortskrider kommer mallen att kompletteras med effekter.

Exempel 1: med en mening

Låt oss ställa in bakgrunden för huvuddelen och stoppningen så att den första skärmen täcks.

Jumbotron (
bakgrund: #f5f5f5 url(../img/fon.jpg) övre mitten ingen upprepad;
max-bredd: 100 %;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Låt oss ändra storleken på jumbotronhuvudet från h2 till h1. Därefter skriver vi stilar för de element som behöver ändras.

Låt oss börja med ikonerna.

Fördelar i(
färg: #cac4c4;
}

Efter hash-tecknet anges en färg. Du kan välja ditt eget alternativ med hjälp av html-färgtabeller eller en bildredigerare.

Indrag för avsnittsrubriker

avsnitt h2 (
padding-top: 30px;
margin-bottom: 25px;
}

Vi gör i ordning tullarnas utseende. För enkelhetens skull skapar vi våra egna klasser för de element som vi specifikt vill lyfta fram.

Taxa nr 1
$10

per månad/per person

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Beställa

Och mycket CSS. Vilka platser sektionerna ansvarar för anges i kommentarerna - /* mellan snedstreck med en asterisk */

/* =========Tariffer stilar======== */
/* allmän syn på tariffen */
.pricing_item(
bakgrund: #f2f2f2;
position: relativ;
display: -webkit-flex;
display: flex;

flex-riktning: kolumn;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
stoppning: 2em 3em;
marginal: 1 em;
färg: #262b38;
markör: standard;
overflow: gömd;

}
/* ändra bakgrund när du klickar på */
.pricing_item:hover (
färg: #444;
bakgrund: #daebef;
}
/* individuell prislappsbakgrund i varje taxa */
.pricing_item:first-child .price (
bakgrund: #9ba9b5;
}
.pricing_item:nth-child(2).price (
bakgrund: #1f6098;
}
/* på breda skärmar är den mellersta tariffkolumnen indragen och markerad */
@mediaskärm och (min-bredd: 66.250em) (
.pricing_item(
marginal: 1,5 em 0;
}
.featured(
z-index: 10;
marginal: 0;
teckenstorlek: 1,15 em;
}
}
/* titel */
.pricing_item h3 (
teckenstorlek: 2em;
marginal: 0,5em 0 0;
färg: #1d211f;
}
/* prislappsbakgrund */
.pris(
teckenstorlek: 2em;
font-weight: fet;
färg: #fff;
position: relativ;
z-index: 100;
linjehöjd: 95px;
bredd: 100px;
höjd: 100px;
marginal: 1.15em auto 1em;
gränsradie: 50%;
bakgrund: #77a5cc;
-webkit-transition: färg 0,3s, bakgrund 0,3s;
övergång: färg 0,3s, bakgrund 0,3s;
}
/* valuta */
.valuta(
teckenstorlek: 0,5 em;
vertikal-align: super;
}
/* förtydligande av förslaget */
.mening (
font-weight: fet;
marginal: 0 0 1em 0;
stoppning: 0 0 0,5em;
färg: #2a6496;
}
/* lista */
.pricing_item ul (
teckenstorlek: 0,95 em;
marginal: 0;
stoppning: 1,5em 0,5em 2,5em;
text-align: vänster;
}
/* listobjekt */
.pricing_item li (
stoppning: 0,15em 0;
}
/* prisbeställningsknapp */
.pricing_item-knapp(
font-weight: fet;
margin-top: auto;
stoppning: 1em 2em;
färg: #fff;
border-radie: 5px;
bakgrund: #428bca;
-webkit-transition: bakgrundsfärg 0.3s;
övergång: bakgrundsfärg 0,3s;
}
/* ändra färg när knappen trycks ned */
.pricing_item button:hover,
.pricing_item button:focus (
bakgrundsfärg: #285e8e;
}
/* taxebakgrund*/
.bg-2 (
bakgrund: #dddddd;
}

Resultat

Recensioner. Låt oss ge dem ett snyggt utseende och ange deras plats.

/* =========Rekommendationsstilar======== */
vittnesmål (
stoppning: 4em 0;
text-align: center;
}
.testimonials .avatar img (
gränsradie: 50%;
flyta till vänster;
display: inline;
marginal-höger: 1em;
bredd: 65px;
höjd: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p (
text-align: vänster;
padding-top: 1em;
färg: #5d5d5d;
teckensnittsvikt: 900;
}

Allt som återstår är att dekorera den sista uppmaningen och sidfoten.

/* Åtgärd */
.handling(
bakgrund: #476177;
min-höjd: 180px;
bredd: 100%;
stoppning: 4em 0;
text-align: center;
}
.action h2 (
färg: #fff;
teckensnittsvikt: 300;

}
.action p(
färg: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
teckenstorlek: 1,2 em;
}
.action .container (
marginal-top: 3em;
}
/* Sidfot */
sidfot (
bakgrund: #333333;
stoppning: 1em 0;
text-align: höger;
}
sidfot p(
färg: #fff;
linjehöjd: 1;
text-transform: versaler;
teckenstorlek: 0,7em;
marginal-top: 0,5em;
}

Sidfotsknappen tilldelas den inbyggda bootstrap-klassen btn-default.

Väcker mallen till liv. Vi kommer att introducera smidig rullning och knappar för sektioner, samt textanimering på den första skärmen.

För övergångarna till arbete kommer vi att ersätta några av sektionsklasserna med id - för förmåner och taxor. Och vi kommer att lägga till länkar till id:t till knapparna. Skärmdump - vad är fäst vid vad, markerat med en gul markör.

Vi sätter indrag för knappar - jbutton. Scrollning när den trycks fungerar, men väldigt abrupt.

Smidiga övergångar skapas med javascript eller jquery. Den senare är ansluten till Bootstrap-mallar som standard.

Scrollningen är nu smidig.

Lägga till animering i text med Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Detta är en färdig öppen källkod, den kan användas på vilken webbplats som helst. Placera filen från Github i css-mappen och ange sökvägen.

Vi väljer effekterna här: https://daneden.github.io/animate.css/. Vi har valt fadeInDown. Det är skrivet i koden så här:

Nu när sidan är laddad eller uppdaterad kommer texten att animeras. Redo.

Exempel 2: med form och parallaxeffekt

Ju fler formulärfält en besökare presenteras för, desto mindre sannolikt är det att han fyller i dem. Be om endast den minsta nödvändiga informationen.

Den är sammansatt i analogi. Vi kommer att ändra bakgrunder och färger. Och naturligtvis lägger vi till en form.

Låt oss börja med parallax.

Låt oss ändra bakgrunden på jumbotronen till transparent:

bakgrund: transparent;

Inuti huvudet kommer vi att infoga skriptet:

$(window).scroll(function(e)(
parallax();
});
funktion parallax())(
var scrolled = $(window).scrollTop();
$(".bgparallax").css("top",-(rullad*0.2)+"px");
}

Den första raden i kroppen är en behållare för parallax:

Och i CSS är dess beteende:

Bgparallax (
bakgrund: url(/../img/fon.jpg) upprepa;
position: fast;
bredd: 100%;
höjd: 300%;
topp:0;
vänster:0;
z-index: -1;
}

Parallax är redo. Men att göra ändringar i koden och en ny bakgrund kräver omtilldelning av färgschemat.

Göra menyn mörk:

Navbar-standard (
bakgrundsfärg: #333;
kantfärg: #444;
färg: mörkgrå;
gräns-radie: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
färg: mörkgrå;
bakgrundsfärg: rgba(0, 0, 0, 0,5);
}

Vi ersätter meningen i jumbotron med en ny - med formulärkoden:

Målsidan förvandlar besökare till kunder
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

Och vi föreskriver utseendet

/* form */
.headform-list (
list-stil-typ: ingen;
linjehöjd: 26px;
teckensnittsvikt: 400;
stoppning: 0px;
margin-bottom: 40px;
}
.huvudform(
overflow: gömd;
position: relativ;
bakgrundsfärg: rgba(0,0,0,.4);
stoppning: 35px 40px;
border-radie: 8px;
}
inmatning, knapp, välj, textområde (
bredd: 100%;
margin-bottom: 10px;
}
.headform-list li .fa (
position: absolut;
topp: 0px;
vänster: 0px;
bredd: 42px;
teckenstorlek: 24px;
text-align: center;
}
.headform-list li(
position: relativ;
min-höjd: 38px;
stoppning-vänster: 62px;
margin-bottom: 20px;
}
.jumbotron p (
färg: #fff;
teckenstorlek: 16px;
teckensnittsstil: kursiv;
}

Även jumbotronens text hamnade här, eftersom den krävde förändringar.

Vi ändrar taxorna.

/* allmän syn på tariffen */
.pricing_item(
bakgrundsfärg: rgba(0,0,0,.4); /* rad ändrad */
border-radie: 4px; /* rad ändrad */
position: relativ;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: kolumn;
flex-riktning: kolumn;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
stoppning: 2em 3em;
marginal: 1 em;
färg: #f2f2f2; /* rad ändrad */
markör: standard;
overflow: gömd;
box-shadow: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* ändra bakgrund när du klickar på */
.pricing_item:hover (
färg: #444;
bakgrund: #ddd; /* rad ändrad */
}

Nu ser de ut så här - en genomskinlig bakgrund och rundade hörn.

Mallen är klar.

Exempel 3: med nedräkningsräknare

Vi ändrar fyllningen av jumbotronen igen och färgar om mallen för att matcha den nya bakgrunden, liknande den tidigare mallen. Anslut räknarskriptet:

HTML





Tiden väntar inte
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit teface feugasi duis dolore.

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = new Countdown((
tid: 86400 * 3, // 86400 sekunder = 1 dag
bredd: 300
, höjd: 60
, rangeHi: "dag"
, stil: "vänd" //