Share
Senaste uppdatering: Vi har fler bra nyheter! Unhounce har lagt till flera nya designfunktioner, vilket ger Unbounce användare tillgång till några mycket kraftfulla designverktyg. De nya funktionerna är:
Med dessa uppdateringar kan Unbounce-kunder lägga till dessa funktioner utan att använda någon tredjepartskod. Alla operationer som läggs till i den här uppdateringen kan utföras snabbt och enkelt - webbdesigners av alla randar kommer att kunna utnyttja de nya funktionerna i Unbounce.
Vi har uppdaterat inlägget igen för att återspegla de senaste ändringarna. Vi visar dig var du ska hitta funktionerna och hur du använder dem. Du kan lära dig mer om de senaste uppdateringarna i slutet av del 2 nedan!
Uppdatering: Stora nyheter! Unbounce landningssidor är nu mobila mottagliga, vilket innebär att designers kan skapa och sälja mallar som automatiskt anpassas till vilken enhet som helst. Detta är Unbounces största produktuppdatering hittills och tusentals marknadsförare letar efter att uppgradera sina målsidor så att de är mobila mottagliga. Med andra ord, de kommer att behöva nya mallar ASAP.
Vi har uppdaterat det här inlägget för att gå igenom vad mobilmottagaren är och hur du kan designa en mobilmottaglig mall i Unbounce. Du kan hoppa till del 4 nedan om du redan har behärskat Unbounce och är redo att börja designa för mobil!
I denna handledning kommer jag att presentera dig för att Unbounce, ett verktyg för att bygga kampanjspecifika målsidor. Vi går igenom anatomin för olika typer av målsidor, går igenom verktygets funktioner och täcker sedan vad som behövs för att sälja dina egna Unbounce mallar på Themeforest.
Unbounce byggdes för att lösa ett mycket specifikt problem; att bemyndiga professionella marknadsförare att självständigt bygga vackra och högpresterande kampanjspecifika målsidor. Det är, utan hjälp av utvecklare eller - här är mallar som kommer in - designers.
Eftersom Unbounces primära användarbas är marknadsförare som kanske inte är bekanta med robusta designverktyg, är landningssidan byggaren designad för att vara lätt att använda, med ett WYSIWYG, dra och släpp gränssnitt. Med detta sagt kan skickliga designers också känna sig lika hemma; Det är möjligt att lägga till anpassade JavaScript, CSS och HTML-widgets och finjustera sidelement till pixeln.
Landningssidor är fristående webbsidor som tjänar ett specifikt, fördefinierat mål för marknadsförare. Om marknadsförare försöker sälja en produkt eller tjänst kan de använda en målsida för att utbilda användaren innan de riktas till prissidan. Om de marknadsför en ny e-bok behöver de en målsida för att samla kontaktinformation från sina besökare innan de överlämnar filen. För båda dessa kampanjer (och nästan alla kampanjer!) Skickar du bara besökare till deras hemsida - istället för en dedikerad målsida - skulle stavning misslyckas med marknadsföring.
Kort sagt är målsidor utformade för att driva användare mot ett visst mål med konvertering.
Mest erfarna professionella marknadsförare. De driver ständigt marknadsföringskampanjer och kan inte / vill inte lita på sina interna utvecklare för att skapa en unik målsida för varje kampanj. Ungefär en tredjedel av våra kunder är en del av ett företags marknadsföringsteam, ytterligare ett tredje arbete hos en marknadsföringsbyrå och resterande tredje är entreprenörer.
Om Unbounce-kunder inte har designkropparna känner sig bekväma att bygga en sida från början, kommer de att börja från en mall eller att deras designer skapar en mall för dem. När de har anpassat en mall för att passa behoven hos kampanjen använder kunderna ofta samma mall för varje liknande kampanj som de kör.
A / B-testning är en kärnfunktion för Unbounce. Användare kan kopiera sin färdiga sida, göra en ändring till designen eller kopian av den nya sidan, dela trafik mellan de två sidorna och använd Unbounce-rapportering för att bestämma vilken version som konverteras bättre. A / B-testning gör det möjligt för kunder att ständigt förbättra sina målsidor och marknadsföringskampanjer.
Den här guiden hjälper dig att designa och bygga en högkonverterande målsida för Unbounce-plattformen.
Vi uppmanar mallförfattare att anmäla sig till Unbounce's gratis konto och [email protected] för att låta dem veta att du utformar mallar för återförsäljning. Emailing vårt team kommer att se till att ditt konto är ledigt om du överstiger 200 unika besökare som normalt är tillåtna på gratisplanen.
Låt oss snabbt köra ner vad vi ska täcka i denna handledning.
Låt oss jämföra Webtrends hemsida (vänster) med en av sina målsidor (höger). Hemsidan är vackert utformad och tillåter en besökare att utföra ett antal uppgifter. Det finns fem koncept som presenteras i huvudpromotområdet (via en roterande banner), fyra kompletterande meddelanden under det och totalt tjugoåtta interaktionspunkter.
Marknadsföringskampanjerna bör dock vara laserfokuserade och driva användarna till en enda åtgärd. Vid utformning av en målsida som ska användas i marknadsföringskampanjer, begreppet Uppmärksamhetsförhållande måste övervägas. Attention Ratio (AR) definieras som förhållandet mellan interaktiva element (länkar / läckor) på sidan, till antalet kampanjomvandlingsmål (vilket är en). På denna hemsida är uppmärksamhetsförhållandet 28: 1 vilket betyder att det finns tjugosju distraherande åtgärder och en önskad åtgärd.
Jämför hemsidan med en av landets generationssidor (höger). På målsidan finns det bara en åtgärd att utföra; Användare uppmanas att fylla i formuläret och klicka på CTA-knappen för att slutföra konverteringen. Detta ger en mycket mer fokuserad upplevelse för besökare, vilket håller uppmärksamhetsförhållandet vid 1: 1.
Det finns fem måste ha kärnelement på vilken målsida som kan brytas ner ytterligare i en mer detaljerad lista över byggstenar:
Diagrammet nedan representerar en provlayout. Ordern och platsen för de 5 elementen kommer att bestämmas av den berättelse du vill berätta för dina besökare, och kan variera från det här exemplet. Men det är bra att titta på detta som referens när vi går igenom varje element.
Det finns två huvudtyper av målsidor: blygenerering (lead gen) och click-through.
Ledande gensidor används för att fånga användardata, till exempel ett namn och en e-postadress. Det enda syftet med sidan är att samla in information som möjliggör vidare kommunikation med utsikterna vid en annan tidpunkt. En ledande gensida kommer att innehålla en blankett tillsammans med en beskrivning av vad besökaren kommer att få för att lämna in sina personuppgifter.
Ledgenflöde Klickbaserade målsidor syftar till att övertyga besökaren att klicka till en annan sida.
Används vanligtvis i e-handelståg, kan de erbjuda information om en produkt eller tjänst för att "värma upp" en besökare och få dem att närma sig ett inköpsbeslut. När prospekten klickar till nästa sida kommer de att primeras med all information de behöver och kommer mycket mer sannolikt att köpa.
Vid Unbounce använder vi ett standardnätsystem som använder 12 kolumner, vilket gör en 940px behållare. I exemplet nedan bryts ned tillgängliga kolumnkombinationer. Vi rekommenderar att du använder Unbounce-nätet för de bästa målsidans designresultat.
Unbounce erbjuder en standard uppsättning teckensnitt inom sin målsidebyggare samt en uppsättning Google Web Fonts. Vi rekommenderar att du använder följande tecken när du utformar för att avvisa.
Nedan visas en lista över Googles webbfonter som är tillgängliga i Unbounce, använd / ladda ned endast följande teckensnitt från Google Web Fonts Library.
Nedan visas en lista över standardfonter som finns i Unbounce.
Varje målsida har ett mål i åtanke; flytta besökare för att utföra en uppmaning, till exempel att fylla i en blankett eller klickar på en annan sida. Nedan hittar du ett urval av de vanligaste typerna av målsidor.
Både enkla minimalistiska mönster och fullt utformade exempel visas.
Att knacka på populära webbdesigntrender kan hjälpa till att ställa in din målsida förutom andra, men genomförandet kan vara svårt att koda. För att tillåta att Unbounce-användare utnyttjar några senaste och effektiva designtrender har vi byggt nya verktyg i Unbounce-byggaren. Du kan nu integrera funktioner som parallax rullar in i din målsida med ett knapptryck utan att behöva förlita dig på tredje partskod.
Du har scoured internet för den perfekta bilden för din sida. Du lägger till den i din sektion och den är större än behållaren. Det finns en enkel åtgärd för detta i Unbounce.
När du väl har lagt till bilden i din sidavdelning, välj bara Sträck för att passa sidavsnitt. Om du skulle vilja att den fyller hela sidan kan du välja Sträck för att passa sida.
För att skapa en fast bild som finns kvar när besökare bläddrar ner sidan (parallax), välj bara kryssrutan "Fast bakgrund som du rullar". Ett designelement som kan vara mycket effektivt på målsidor, kräver parallell scrollning vanligtvis anpassad kod. Unbounce låter dig lägga till den här funktionen med ett klick.
Notera: Den här funktionen visas inte när besökare är i mobilvy.
Med hjälp av färgöverlagringsfunktionen kan du lägga till tints på dina bakgrundsbilder som ger en viss färg du väljer till förgrunden.
Du kan justera transparensen i dina bilder genom att välja funktionen Opacitet. En färgöverdrag på 100 kommer att genomsyra din bakgrund med din valda färg helt.
För att säkerställa att din sida fortfarande ser ut och fungerar som den är avsedd efter den delas, var god och använd inte följande:
Översättningen av en design till en målsida på Unbounce-plattformen ska utföras på ett perfekt sätt. I exemplet nedan är målsidan uppbyggd av sidavsnitt och kolumner med hjälp av standard Unbounce-nätverket. Exportera alla dina bildtillgångar i .png eller .jpg-format innan du börjar.
När vi bygger en målsida från en photoshop-fil rekommenderar vi att du börjar från en "tom sida" på Unbounce-plattformen.
Använd din ursprungliga Photoshop-fil som din guide genom att ange bredden på sidan i sidegenskapsrutan. Tilldela bakgrundsfärgen till målsidan. Ladda upp en bakgrundsbild om det behövs. Ställ in standardtextfärgen för att vara den vanligaste textfärgen i din design. Tilldel länkfärgen för att slutföra sidegenskaperna.
Nu är det dags att strukturera målsidan. Dra och släpp sidosektioner på din sida. Vanligtvis skulle du lägga till en sida sektion för varje klart definierad vertikal del av din design. Du kan till exempel lägga till sidavsnitt för: rubriken, innehållsområde 1, innehållsområde 2 etc., sidfoten. Då kan du ställa in höjden på varje sektion enligt mätningarna i din photoshop-fil. När alla sidavsnitt har upprättats öppnar du trädstruktursmenyn till vänster och namnger varje sektion i enlighet därmed. Detta gör det enklare att ändra och organisera målsidan.
Varje nytt element som skapas på målsidan kommer att visas i trädstrukturen, så se till att du namnger varje nytt element som det läggs till, för framtida referens och enkel ändring.
Du kan tilldela en bakgrundsfärg eller gradient till en sidavdelning, eller du kan ladda upp en bild som ska användas för din bakgrund. Bilder kan också sida vid sida. I exemplet nedan uppladdades en bakgrundsstruktur för huvudområdet och en för de mörkare remsorna ovan och under.
Bilder som du har klippt och exporterat från Photoshop kan nu laddas upp och läggas till målsidan. Dra och släpp bilder med hjälp av bildverktyget på den vänstra verktygsfältet och placera dem på målsidan enligt din Photoshop-design
När du är placerad, kom ihåg att namnge dem i trädstrukturen. För att placera video på din målsida, använd videofunktionen från det vänstra verktygsfältet och klistra in din YouTube / Vimeo inbäddningskod i fönstret som dyker upp. Ändra storlek och positionera den enligt det avsedda storleken och bildförhållandet.
Dra och släpp textverktyget på sidan. Placera varje textblock enligt din Photoshop-fil och sätt in din kopia med hjälp av textredigeraren nedan. Du kan justera din kopia, typsnitt, storlek, linjehöjd och färg för att matcha din photoshop-fil.
Du kan använda rutor som behållare för element som former, bilder eller text. Ändra stroke-, färg- och hörnradie för önskat visuellt resultat, och till och med vrider om i rutor om det behövs.
Dra och släpp ditt formulärelement på målsidan. Du kommer att bli uppmanad till formulärbyggnadsöverläggningsfönstret. Välj färdiga fält eller skapa ditt eget. När du använder det förlagda e-postfältet, aktivera alternativet "Validera som e-postadress". När du är klar klickar du på för att välja formuläret och stilera genom att justera mellanrum, teckensnitt, färger, bredd och höjd i egenskapsrutan till höger.
Stylisera knappar efter färg, gradient eller genom att lägga till en anpassad bild. Rollover-stater kan också ställas in. Redigera knapptexten och ändra typsnittet för att matcha din design.
Om du har en blankett på din sida utlöses en bekräftelsida när formuläret är fyllt i. Du kan komma åt fliken Bekräftelsida i det övre vänstra hörnet på din sida.
Ändra utformningen av bekräftelsessidan för att matcha utformningen av din målsida. Detta kommer att försäkra användare om att de har följt rätt väg och ger en sömlös upplevelse från landning till efterkonvertering
Varje målsida behöver ett omvandlingsmål. Du kan ställa in det genom att klicka på fliken Konverteringsmål i egenskapsfönstret. Om du har en blankett bör den anges som "formulärinsändning".
När alla dina målsidor är på sidan, dra bara för att placera elementen så att de matchar din Photoshop-fil och skapa den slutliga layouten. Använd förhandsvisningsläge för att göra en slutgiltig recension av din målsida.
Mobile Responsive i Unbounce låter dig servera antingen en mobil eller en stationär version av din sida automatiskt till besökare beroende på deras webbläsars storlek utan att använda en omdirigering. När Mobile Responsive är konfigurerat och aktiverat på en sida, kommer alla besökare som använder en mobilenhet att se den mobila sidan av din sida, medan alla som använder en stationär enhet ska visas på skrivbordet.
Unbounce sätter "brytpunkten" för dina mobila responsiva sidor vid 600px. Det innebär att alla webbläsarfönster med ett visningsutrymme på 600px eller mindre kommer att visas i sidans mobila vy. Varje webbläsare med ett visningsport på mer än 600px kommer att se skrivbordsversionen av sidan.
Notera: näthinnan, som iPhone, är tekniskt större än 600px på grund av sin höga upplösning, men visningen fungerar som mindre webbläsarfönster, så nethårens telefoner visar mobilversionen av sidan
Det finns några saker du behöver anpassa din mobila mottagliga sida och börja visa den till dina mobila besökare:
Klicka på knapparna längst ner till höger i fönstret Page Builder för att växla mellan skrivbord och mobilvisning.
Du kan ändra storlek på texten från din stationära version för att passa din mobila version. Markera textrutan och använd skalfältet längst upp till höger på egenskapssidan. Textrutan själv kan också ändras separat på skrivbord och mobil.
Notera: Eventuella justeringar av teckensnitt, teckensnittstorlek, format eller linjehöjd som gjorts från textredigeraren (i stället för skalaen) påverkar båda vyerna.
Blanketter och knappar kommer att vara desamma över din mobil- och skrivbordsvy. Du kan gömma en knapp i en vy och visa en annan i den andra vyn. Din form måste vara konsekvent i båda versionerna ändå.
Om du har objekt som du vill gömma i antingen mobil eller skrivbordsvisning klickar du på objektet och klickar sedan på ikonen Synlighet i egenskapspanelen.
Du kan också styra synligheten genom att klicka på Sidinnehåll längst ner till vänster i sidan Builder.
När du väljer objekt inom sidobyggaren ser du dem markerade i din sidinnehållspanel. Du ser ett öga när elementet är synligt eller en solid cirkel om det inte är det. Klicka för att växla mellan de två.
Notera: Om du väljer att dölja en ruta eller sidavsnitt med objekt som är näst inuti, kommer alla nestade objekt att döljas.
Som standard, om något element flyttas mellan sidavsnitt, flyttas det i båda vyerna. Om du vill flytta element utanför ett sidsnitt utan att ändra sidsektionerna, håll ned kommandotangenten (mac) eller kontrollknappen (Windows) medan du drar ett element. Du får se en påminnelse om detta när som helst du flyttar ett element från en sida till en annan utan att hålla ner Kommando eller Kontroll.
Om flera element nestas i en ruta flyttas de elementen i en vy, flyttar alla element i den andra vyn. Du kan också använda Command / Control + -knappen för att inte vara ett objekt i en vy och flytta det oberoende av den andra vyn.
Tips: kom ihåg att du också kan flytta + klicka för att flytta mer än ett element i taget
Out-of-Bounds-varningar: Du får se en varning om något av dina föremål ligger utanför gränssnitten för din målsida. Flytta bara objektet inom dina sidgränser, eller göm det, för att ta bort varningen. Du kan också inaktivera varningar utanför gränssnittet med kryssrutan längst upp till höger om sidobyggaren.
När du är klar med att lägga ut din mobilsida, gå till Egenskaper-rutan till höger och kolla Visa mobilversion till besökare för att aktivera mobilvisningen. Spara sedan och publicera (eller publicera) din sida igen.
Notera: Genom att publicera din sida kan du tillhandahålla en länk för levande förhandsgranskning i mallmarknader.
En målsida mall ska vara anpassningsbar. Slutanvändaren ska kunna byta ut några hjälmbilder eller fotografiska bakgrunder. För att säkerställa att kvaliteten på din målsida förblir intakt och att din sida godkänns av ThemeForest, följ dessa riktlinjer:
När du väl har byggt en vacker och lättanpassad målsida för målsida måste du ladda ner den innan du kan dela den med (eller sälja den till) världen. För att ladda ner en sida, gå in i sidöversikten (den sektion som listar alla dina sidors varianter och statistik), hitta växel / kuggikonen längst upp till höger och klicka på "Hämta sida".
Ett dialogfönster kommer att visas som kommer att maila dig när filen är klar att ladda ner. Filen kommer att ha en ".unbounce" -tillägg. När du har laddat ner din fil, var god och byt namn på den om det behövs, men lämna ".unbounce" -tillägget intakt.
Vill du paketera flera layouter av samma mall? Undvik att använda sidvarianter för att förpacka flera layouter tillsammans.
Istället skapar du varje layout som en separat sida och laddar ned varje layout separat. Detta kommer att se till att du har en funktionell förhandsgranskningslänk för varje layout och det kommer att minska förvirringen från nedladdaren eftersom varianter används speciellt för A / B-testning.
Jag hoppas att det här gav dig en grundlig introduktion till Unbounce och författande av mobila mottagliga Unbounce-mallar till salu på marknadsplatser som ThemeForest. Det finns dock mycket mer att lära sig, men om du har några frågor, var god och fråga dig i kommentarerna.
Accentsconagua