Hoe een Pagewiz bestemmingspagina sjabloon te maken, klaar voor verkoop

Pagewiz is ontworpen om professionele marketeers, bedrijfseigenaren en gelieerde ondernemingen in staat te stellen binnen enkele minuten nieuwe campagnes voor bestemmingspagina's te lanceren en ze eenvoudig te optimaliseren voor een hoog succespercentage. Deze tutorial zal je helpen bij het ontwerpen van landingspagina's met Pagewiz, waardoor je uiteindelijk je Pagewiz-sjablonen kunt verpakken en verkopen op Envato Market.

Tips voor de conversiegerichte ontwerper

Wanneer u sjablonen voor bestemmingspagina's gaat maken, moet u ervoor zorgen dat deze voldoen aan de empirische kennis van online marketing, verzameld via duizenden succesvolle en / of mislukte campagnes op bestemmingspagina's.

Als u echt graag op deze hete online marketingwagon wilt springen en ernaar streeft om op conversies georiënteerde bestemmingspaginasjablonen te kunnen ontwerpen, lees dan verder:

Basiselementen die elke bestemmingspagina moet hebben

Er zijn vijf basiselementen die op elke bestemmingspagina moeten worden uitgelegd:

  1. Kop + subkop
  2. Call-to-action (CTA) -knop / -formulier
  3. Feature / Benefit subsecties
  4. Geloofwaardigheid bouwers
  5. Kort overzicht van de regel

(1 - 2) De twee meest prominente elementen op uw pagina moeten de kop + sub-kop en uw CTA zijn. De eerste haalt uw bezoekers binnen en de tweede geeft hen (en de campagne) de pay-off.

"Boven de vouw" - op een online pagina is alles dat kan worden gezien zonder naar beneden te hoeven scrollen. In dit gebied moet uw bezoeker uw kop + subkoptekst zien; dit is het exemplaar dat hen in een belofte trekt en het belangrijkste voordeel van uw aanbod oplevert.

Als uw aanbieding niet ingewikkeld is en / of de gebruikelijke lezer al bekend is met uw aanbieding, is het waarschijnlijk handig om uw eerste CTA-knop / -formulier vlak bij de kop + de bovenregel boven de vouw te plaatsen. Met andere woorden, alles wat een gemotiveerde bezoeker nodig heeft om zijn of haar beslissing om naar uw bestemmingspagina te komen in de eerste plaats te valideren, is in de eerste plaats. Ze hoeven niet rond te zoeken om verdere actie te ondernemen. Ze kwamen. Zij zagen. Ze hebben geklikt.

Verminder de wrijving - maak het gemakkelijk voor hen.

Hoe gemakkelijk kunnen bezoekers van uw bestemmingspagina uw call-to-action (CTA) -knop vinden? Als je antwoord niet "Hoe kunnen ze het missen ?!" is, dan heb je misschien wat werk te doen.

De kleur van de CTA-knop moet opvallen in de rest van het kleurenschema van de pagina. Dus een oranje CTA-knop werkt mogelijk goed op een pagina die bestaat uit blauwe tinten, maar minder op een pagina waar rood dominant is. Kijk naar het scherm waar je een CTA-knop hebt geplaatst. Wat is het eerste dat je ogen trekt? Als het niet uw CTA-knop is, kan het wijzigen van de kleur een goede aanpassing zijn om in uw sjabloonbundel een variant te maken.

(3 - 5) De manier waarop u ervoor kiest om de lijst met functies en voordelen van uw bestemmingspagina, de geloofwaardigheidsbouwers en de bottom-line samenvatting in te delen, is geheel aan u. Je zult een manier moeten vinden om deze in je ontwerp te integreren, terwijl je er extra op moet letten om je twee meest prominente elementen niet uit te wissen. Onthoud die twee van een paar zinnen terug?

Natuurlijk zullen mensen die je sjabloon kopen ruimte moeten hebben voor kopiëren om uit te wijden over de kenmerken van hun aanbod. Ze zullen ook een aantal sociale bewijzen moeten kunnen plaatsen, zoals:

  • Testimonials of tweets van echte mensen.
  • Beïnvloeding door beïnvloeders, waaronder het bedrijfslogo of de badge van de beïnvloeder.
  • Beveiligingszegels zoals PayPal-geverifieerd en anderen opnemen om het comfort te bieden dat u veilig op uw pagina kunt kopen.
  • Geef volledige contactgegevens op, waaronder een telefoonnummer, e-mailadres en badges voor sociale media. Ze kunnen je bereiken als dat nodig is.

Als uw sjabloon plotseling overvol raakt, onthoud dan: rommel op de bestemmingspagina is verwarrend en geeft uw bezoekers geen enkele aandacht. Witte ruimte is je vriend en helpt je om je sjabloon duidelijker en meer conversiegericht te maken.

Geen navigatie!

Het doel van het maken van een bestemmingspagina staat tegenover het opnemen van een navigatiebalk.

Let op: u ontwerpt geen website.

Het enige doel waarop uw bestemmingspagina zich moet richten, is het converteren van zijn bezoekers.

Als je hen opties biedt om rond te dwalen, wordt je primaire doel belemmerd. Wanneer de conversietrechter meerdere keuzes heeft, is het minder waarschijnlijk dat een potentiële klant handelt naar datgene waarnaar hij / zij verwijst door de directeur van de campagne. Dit is de simpele reden waarom u geen navigatiemenu op uw bestemmingspagina moet plaatsen.

Uw eerste Pagewiz-landingpagina

Nadat u uw Pagewiz-account hebt gemaakt en wilt beginnen met het exporteren van uw sjabloonontwerp naar Pagewiz - log dan in op uw account en klik op het grote rode + Maak een nieuwe bestemmingspagina knop rechtsboven:

U wordt vervolgens gevraagd het type campagne op de bestemmingspagina te kiezen: Desktop of Mobiel.

Het campagnetype dat u selecteert, is van invloed op de paginabreedte van uw sjabloon: Desktop-bestemmingspagina-sjablonen zijn meestal 960px breed op Pagewiz, terwijl mobiele sjablonen een aanbevolen breedte van 320 px hebben (hoewel u deze later altijd kunt wijzigen).

Het is belangrijk dat u uw aangepaste sjabloonontwerp start door de lege sjabloon te kiezen om de eenvoudigste start te maken en niets te verwijderen voordat u begint:

Secties gebruiken om uw pagina te construeren

Het is nu tijd om secties te gebruiken om uw bestemmingspaginasjabloon slim te verdelen, zodat u deze gemakkelijker kunt beheren en aanpassen:

Zodra ik een nieuw gedeelte heb geplaatst, kan ik een achtergrond, achtergrondkleur of afbeelding als achtergrond instellen. Ik gebruik een van de vele texturen die beschikbaar zijn binnen Pagewiz:

Dan klik ik op de Uitbreiden om het uit te strekken naar de volledige breedte van het scherm (buiten de breedte van mijn pagina, die 960 px is):

Ik zou ook een afbeelding kunnen instellen als achtergrond voor die sectie als ik dat wilde, door de sectie te selecteren waarop ik een achtergrondafbeelding zou willen toepassen en op te klikken Textuur> Gebruik een afbeelding als een structuur.

Elementen positioneren en uitlijnen

Wanneer u een element aan uw pagina toevoegt, wordt het absoluut gepositioneerd, waar u het ook wilt plaatsen. Pagewiz zal u niet vragen om een ​​element boven op een ander te plaatsen, of om het op een niet-uitgelijnde manier te plaatsen. Het zal het eenvoudig plaatsen.

Dat gezegd hebbende, heeft Pagewiz een aantal geavanceerde positioneringshulpmiddelen om ervoor te zorgen dat alles precies is gepositioneerd, precies zoals jij het wilt:

X, Y Positionering

Positioneringscoördinaten zijn beschikbaar voor u om veel dingen aan te passen. Elk element dat u op uw pagina plaatst, heeft de waarden Top (y) en Left (x), die u kunt aanpassen in het bovenste menu, op basis van de metingen in uw Photoshop / Illustrator-bestand.

Op deze manier worden uw ontwerpen nauwkeurig op de pixel bijgehouden.

De uitlijning van elementen

Een andere geweldige manier om ervoor te zorgen dat elementen die u op uw pagina plaatst, nauwkeurig op elkaar zijn afgestemd, is door gebruik te maken van de ingebouwde uitlijnhulpmiddelen van Pagewiz. Deze hulpmiddelen worden getoond wanneer u elementen multi-selectie door Ctrl + Klikken op hen. Nadat u meer dan één element hebt geselecteerd, kunt u de uitlijningstools gebruiken om de randen of middens van de geselecteerde elementen uit te lijnen.

Bekijk video:

Een formulier toevoegen en aanpassen

U kunt een formulierelement aan uw bestemmingspaginasjabloon toevoegen om er een leadgeneratie-bestemmingspagina van te maken door een a te slepen Het formulier element van de werkbalk aan de linkerkant:

Pas uw formuliervelden en instellingen aan zoals u dat wilt:

Doorklik-bestemmingspagina = geen formulier

Bent u bezig met het ontwerpen van een Click-through sjabloon voor bestemmingspagina's? Dan mag er geen formulier op staan, maar alleen een CTA-knop om op te klikken. Sleep daarvoor een knopelement naar het ontwerp van uw bestemmingspagina en pas het naar wens aan.

Tekstuele elementen

Gebruik de koppen voor de koppen opschrift element, en voor de tekst van je alinea's gebruik je het rich text-element - beide staan ​​op de linker werkbalk, zodat je ze naar je ontwerp kunt slepen.

fonts

De volledige Google Fonts-bibliotheek staat tot uw beschikking wanneer u het lettertype kiest dat u op uw sjablonen wilt gebruiken:

Bekijk een voorbeeld van uw creatie

De Pagizebouwer van Pagewiz heeft een grote Voorbeeld om u constant te laten controleren hoe uw sjabloonontwerp eruit ziet. Het is belangrijk om een ​​kijkje te nemen in de preview voordat u uw sjabloon daadwerkelijk publiceert, omdat u mogelijk zult ontdekken dat verschillende browsers uw pagina anders weergeven en dat u waarschijnlijk voor elke onnauwkeurigheid wilt zorgen die is opgetreden.

Mobiliseer uw sjabloon!

Belangrijk: laat uw sjabloon niet ontbreken op een mobiele versie van de bestemmingspagina. Sjablonen voor bestemmingspagina's verwachten het en kunnen heel goed afzien van de aankoop van uw ontwerp (hoe aantrekkelijk dat ook mag zijn), alleen omdat u de mobiele versie er niet in hebt opgenomen.

Het is keer op keer bewezen dat veel potentiële leads die op een bestemmingspagina terechtkomen, zullen stuiteren of gewoon niet kunnen converteren als deze niet correct wordt weergegeven op hun mobiele apparaat.

Als dat u niet overtuigt van het belang van het ontwerpen van een mobielvriendelijke bestemmingspagina, denkt u nog steeds niet als een online marketeer ...

Hoe u uw sjabloon mobielvriendelijk kunt maken:

Er zijn twee manieren om dit te doen:

# 1 Maak een nieuwe lege bestemmingspagina en kies de Basispagina voor mobiele landingspagina's voor een sjabloon die is geoptimaliseerd voor alle browsertypen van mobiele apparaten.

Hiermee kunt u de mobiele versie helemaal opnieuw ontwerpen. Vervolgens kunt u die voor mobiel geoptimaliseerde bestemmingspagina samen met de reguliere (960px brede) bestemmingspagina die u heeft gemaakt, bundelen.

# 2 De andere (snellere) manier is om de pagina die u hebt gemaakt voor desktopbrowsers te dupliceren.

Wanneer u uw ontwerp hebt gedupliceerd, kunt u een nieuwe (mobiele) breedte instellen. De aanbevolen breedte voor mobiele pagina's is 320 pixels.

Nadat u de nieuwe breedte van de pagina op 320px hebt ingesteld, moet u ervoor zorgen dat geen enkel element buiten de grenzen van 320 pixelbreedten blijft door ze naar binnen te slepen en hun formaat aan te passen aan de vereisten van het ontwerp:

Uw bundel voorbereiden voor A / B-tests

Inspanningen voor een geweldige campagne eindigen niet op de lanceringsdag. Zodra de campagne loopt, kunt u op Pagewiz onbeperkte A / B-tests uitvoeren om de conversie te maximaliseren en kunt u de tevredenheid van uw sjabloonkopers verhogen door hen verschillende versies van uw sjabloon voor de bestemmingspagina te bieden, oftewel: varianten om mee te testen.

U kunt verschillende pagina's samen bundelen en uw kopers voorzien van verschillende kleuren of verschillende manieren om uw sjabloon te converteren, d.w.z. een doorklikpagina en een leadgeneratiepagina (die een formulier bevat). Misschien bundel je een andere versie die de aandacht vestigt op een video?

Wanneer u uw sjabloon voor de bestemmingspagina bundelt met enkele goed doordachte varianten voor uw marketeer die winkelpubliek gebruikt voor zijn campagne - uw reputatie als een conversiegerichte sjabloonontwerper moet zich verspreiden en marketeers zullen waarschijnlijk vaker zaken met u willen doen!

Ontwerptips en -trucs van Pagewiz

Heldenafbeeldingen van volledige breedte zijn heel gewoon geworden en worden vaak gebruikt op bestemmingspagina's. Ze kunnen het ontwerp helpen een bepaald gevoel over te brengen tijdens het bezoeken van de pagina.

Om een ​​hero-achtergrondafbeelding van volledige breedte te maken, moet je een brede afbeelding van hoge kwaliteit hebben, die we aanbevelen te optimaliseren voor het web, voordat je hem uploadt naar de Pagewiz-servers.

Om het daadwerkelijk te gebruiken in uw ontwerp, maakt u eerst een nieuwe sectie door het sectieelement te verslepen vanuit het menu met elementen aan de linkerkant:

De achtergrondafbeelding van de sectie instellen:

  1. Selecteer de sectie door er één keer op te klikken
  2. Klik op de structuur knop op het bovenste lint.
  3. Kiezen om Gebruik een afbeelding als een textuur om de mediabibliotheek te openen
  4. Upload uw brede afbeelding van hoge kwaliteit en selecteer deze als de achtergrondafbeelding van de sectie.

Vervolgens kunt u de positie van de achtergrondafbeelding bepalen, die u kunt doen vanaf de onderkant van de structuur menu:

  1. Klik op de structuur knop opnieuw, op het bovenste lint.
  2. Aan de onderkant is de Textuureigenschappen controles. Klik Achtergrond positie om te definiëren hoe u de afbeelding wilt plaatsen. We concentreren ons meestal op midden in het midden eigendom.
  3. Zorg ervoor dat de achtergrond herhaling eigenschap is ingesteld op Geen herhaling, als je het niet nodig hebt.
  4. Om het formaat van de sectie te wijzigen, kunt u de kleine sectiepijlen naar de randen slepen:

Nog een laatste ding dat je moet doen is het gedeelte uitbreiden tot de volledige breedte door op de te klikken Uitbreiden knop:

Je sectie heeft nu een achtergrondafbeelding op de volledige breedte.

Pas uw ontwerpraster aan

Bovenop de X- en Y-positioneringcoördinaten van de elementen, biedt de Paginabuilder voor pagina's van Pagewiz u ook linialen en hulplijnen, zodat u een raster kunt maken (net als in Photoshop of andere ontwerpgerichte software) waarin u zich bevindt kan je ontwerp gieten.

Klik op de heersers pictogram in de bestemmingspagina builder om linialen te activeren:

Sleep zoveel liniaalgidsen als u nodig hebt (van de rechterkant / linkerkant) om uw raster te maken:

Uw ontwerp verpakken voor ThemeForest

Om uw verkopen op Envato Market te vergroten, raden we u ten zeerste aan een sjabloon te maken met meer dan één versie die in het pakket is opgenomen:

  • Mobiele versie
  • Lead Generation-versie (met een formulier)
  • Doorklikversie

Elke versie moet afzonderlijk worden geëxporteerd en als een ZIP-bestand worden gearchiveerd. Met Pagewiz exporteer je je bestemmingspagina naar de ThemeForest Marketplace. Om de exportfunctie te gebruiken, moet u een Envato Author-account hebben op Pagewiz. U kunt er een aanvragen door u te registreren op deze registratiepagina.

Als u een bestemmingspagina wilt exporteren, navigeert u eerst naar landingspagina's, klik vervolgens op de instellingen link onder de naam van de pagina die u wilt exporteren:

Klik op de Exporteren knop.

Een Pagewiz-bestand wordt gedownload naar uw computer.

Conclusie

Hopelijk heeft deze zelfstudie u de nodige informatie over de belangrijkste doelen van de campagnes voor bestemmingspagina's en een inleiding op de manier waarop Pagewiz deze maakt, mogelijk gemaakt. U weet nu ook hoe u uw Pagewiz-sjabloonbundels op ThemeForest kunt verpakken.