Share
Laatste update: We hebben meer goed nieuws! Unbounce heeft verschillende nieuwe ontwerpfuncties toegevoegd, waardoor Unbounce-gebruikers toegang hebben tot enkele zeer krachtige ontwerptools. De nieuwe functies zijn:
Met deze updates kunnen klanten van Unbounce deze functies toevoegen zonder gebruik te maken van code-oplossingen van derden. Alle bewerkingen die in deze update worden toegevoegd, kunnen snel en eenvoudig worden uitgevoerd - webontwerpers van alle niveaus kunnen profiteren van de nieuwe functies in Unbounce.
We hebben het bericht opnieuw bijgewerkt om deze recente wijzigingen weer te geven. We laten u zien waar u de functies kunt vinden en hoe u ze kunt gebruiken. U kunt meer informatie vinden over de nieuwste updates aan het einde van Deel 2 hieronder!
Bijwerken: Groot nieuws! Losstaande landingspagina's zijn nu mobiel-responsief, wat betekent dat ontwerpers sjablonen kunnen maken en verkopen die zich automatisch aanpassen aan elk apparaat. Dit is de grootste productupdate van Unbounce tot nu toe en duizenden marketeers zullen hun bestemmingspagina's upgraden zodat ze mobiel reageren. Met andere woorden, ze zullen zo snel mogelijk nieuwe templates nodig hebben.
We hebben dit bericht bijgewerkt om u te laten zien wat mobiel responsief is en hoe u een sjabloon kunt ontwerpen dat reageert op mobiel in Unbounce. Je kunt naar deel 4 hieronder springen als je Unbounce al onder de knie hebt en klaar bent om te gaan ontwerpen voor mobiel!
In deze zelfstudie introduceer ik u Unbounce, een tool voor het bouwen van campagnespecifieke landingspagina's. We doorlopen de anatomie van verschillende soorten bestemmingspagina's, gaan door de functies van de tool en bespreken wat er nodig is om uw eigen Unbounce-sjablonen op Themeforest te verkopen.
Unbounce is gebouwd om een heel specifiek probleem op te lossen; professionele marketeers in staat stellen om op hun eigen manier prachtige en goed presterende campagnespecifieke landingspagina's te bouwen. Dat wil zeggen, zonder de hulp van ontwikkelaars of - hier komen sjablonen binnen - ontwerpers.
Omdat de primaire gebruikersbasis van Unbounce marketeers zijn die mogelijk niet bekend zijn met robuuste ontwerpprogramma's, is de bestemmingspagina builder zo ontworpen dat deze eenvoudig te gebruiken is, met een WYSIWYG, slepen-en-neerzetten-interface. Dat gezegd hebbende, bekwame ontwerpers kunnen zich ook zo thuis voelen; het is mogelijk om aangepaste JavaScript-, CSS- en HTML-widgets toe te voegen en pagina-elementen aan de pixel aan te passen.
Bestemmingspagina's zijn zelfstandige webpagina's die een specifiek, vooraf gedefinieerd doel voor marketeers dienen. Als marketeers een product of service proberen te verkopen, kunnen ze een bestemmingspagina gebruiken om de gebruiker te informeren voordat ze naar de prijspagina worden geleid. Als ze een nieuw e-boek promoten, hebben ze een bestemmingspagina nodig om contactgegevens van hun bezoekers te verzamelen voordat ze het bestand overhandigen. Voor beide campagnes (en bijna elke campagne!) Zou het simpelweg sturen van bezoekers naar hun startpagina - in plaats van een speciale bestemmingspagina - een marketingfout betekenen.
Kort gezegd, bestemmingspagina's zijn ontworpen om gebruikers naar een specifiek, op conversie gericht doel te duwen.
Meest ervaren professionele marketeers. Ze voeren voortdurend marketingcampagnes uit en kunnen / willen niet op hun interne ontwikkelaars vertrouwen om een unieke bestemmingspagina voor elke campagne te bouwen. Ongeveer een derde van onze klanten maakt deel uit van het marketingteam van een bedrijf, een ander derde werk bij een marketingbureau en de overgebleven derde zijn ondernemers.
Als klanten ontkoppelen niet over de ontwerpkarbonades beschikken om zich op hun gemak te voelen bij het volledig opnieuw opbouwen van een pagina, starten ze met een sjabloon of laten hun ontwerpers een sjabloon voor hen maken. Nadat ze een sjabloon hebben aangepast aan de behoeften van hun campagne, gebruiken klanten vaak dezelfde sjabloon voor elke vergelijkbare campagne die ze uitvoeren.
A / B-testen is een kernkenmerk van Unbounce. Gebruikers kunnen hun voltooide pagina dupliceren, een wijziging in het ontwerp of de kopie van de nieuwe pagina aanbrengen, verkeer tussen de twee pagina's opsplitsen en de rapportage van Unbounce gebruiken om te bepalen welke versie beter converteert. Met A / B-tests kunnen klanten hun bestemmingspagina's en marketingcampagnes voortdurend verbeteren.
Deze gids helpt je bij het ontwerpen en bouwen van een hoog-converterende bestemmingspagina voor het Unbounce-platform.
We moedigen template-auteurs aan zich aan te melden voor het gratis account van Unbounce en e-mail [email protected] om hen te laten weten dat u sjablonen ontwerpt voor wederverkoop. Het e-mailen van ons team zorgt ervoor dat uw account gratis blijft als u de 200 unieke bezoekers overschrijdt die normaal zijn toegestaan in het gratis abonnement.
Laten we snel doornemen wat we in deze tutorial behandelen.
Laten we de Webtrends-startpagina (links) vergelijken met een van hun bestemmingspagina's (rechts). De startpagina is prachtig ontworpen en stelt een bezoeker in staat om een aantal taken uit te voeren. Er zijn vijf concepten gepresenteerd in het hoofdpromogebied (via een roterende banner), vier aanvullende berichten daaronder, en in totaal achtentwintig interactiepunten.
Marketingcampagnes moeten echter lasergericht zijn en gebruikers naar één enkele actie leiden. Bij het ontwerpen van een bestemmingspagina die moet worden gebruikt in marketingcampagnes, is het concept van Aandachtsratio moet worden overwogen. Aandachtsverhouding (AR) is gedefinieerd als de verhouding tussen interactieve elementen (links / lekken) op de pagina en het aantal campagneconversiedoelen (dat één is). Op deze homepage is de attentieverhouding 28: 1, wat betekent dat er zevenentwintig storende acties en een gewenste actie zijn.
Vergelijk de startpagina met een van de landingspagina's voor het genereren van leads (rechts). Op de bestemmingspagina is er maar één actie om uit te voeren; gebruikers worden gevraagd om het formulier in te vullen en op de CTA-knop te klikken om de conversie te voltooien. Dit levert bezoekers een veel gerichtere ervaring op, waarbij de attentieverhouding op 1: 1 blijft.
Er zijn vijf must-have kernelementen op elke bestemmingspagina, die verder kan worden opgesplitst in een meer gedetailleerde lijst van bouwstenen:
Het onderstaande diagram geeft een voorbeeldlay-out weer. De volgorde en locatie van de 5 elementen wordt bepaald door het verhaal dat u aan uw bezoekers wilt vertellen en kan afwijken van dit voorbeeld. Maar het is handig om dit als referentie te beschouwen terwijl we door elk element lopen.
Er zijn twee hoofdtypen bestemmingspagina's: leadgeneratie (leadgen) en doorklikmogelijkheden.
Leadgen-pagina's worden gebruikt om gebruikersgegevens vast te leggen, zoals een naam en een e-mailadres. Het enige doel van de pagina is om informatie te verzamelen die verdere communicatie met de prospect op een ander tijdstip mogelijk maakt. Een lead gen-pagina zal een formulier bevatten, samen met een beschrijving van wat de bezoeker krijgt in ruil voor het indienen van zijn persoonlijke gegevens.
Lead gen flow Doorklikbare bestemmingspagina's hebben tot doel de bezoeker te overtuigen door te klikken naar een andere pagina.
Ze worden meestal gebruikt in e-commercetrechters en kunnen details over een product of dienst bieden om een bezoeker te "opwarmen" en dichter bij het maken van een aankoopbeslissing te brengen. Wanneer de prospect doorklikt naar de volgende pagina, worden ze voorzien van alle informatie die ze nodig hebben en zullen ze waarschijnlijk eerder kopen.
Bij Unbounce gebruiken we een standaard rastersysteem dat 12 kolommen gebruikt, waarmee een container van 940 px wordt gemaakt. In het onderstaande voorbeeld worden de beschikbare kolomcombinaties weergegeven. We raden u aan het raster Ontbinden te gebruiken voor de beste resultaten op de bestemmingspagina.
Unbounce biedt een standaardreeks lettertypen binnen de bouwer voor het maken van bestemmingspagina's, evenals een set Google-weblettertypen. We raden u aan de volgende lettertypen te gebruiken bij het ontwerpen voor Unbounce.
Hieronder vindt u een lijst met Google-weblettertypen die beschikbaar zijn in Unbounce, gebruik / download alleen de volgende lettertypen uit de Google Web Fonts-bibliotheek.
Hieronder staat een lijst met de standaardlettertypen die beschikbaar zijn in Unbounce.
Elke bestemmingspagina heeft één doel voor ogen; bezoekers verplaatsen om een call-to-action uit te voeren, zoals het invullen van een formulier of doorklikken naar een andere pagina. Hieronder vindt u een selectie van de meest voorkomende soorten landingspagina's.
Zowel eenvoudige minimalistische ontwerpen als volledig gestileerde voorbeelden worden getoond.
Door te profiteren van populaire webontwerptrends, kunt u uw bestemmingspagina beter op anderen laten lijken, maar de implementatie kan moeilijk zijn om te coderen. Om Unbounce-gebruikers in staat te stellen te profiteren van een aantal recente en effectieve ontwerptrends, hebben we nieuwe gereedschappen in de Unbounce-bouwer gebouwd. U kunt nu functies zoals parallax-scrollen integreren in uw bestemmingspagina met één klik op een knop zonder afhankelijk te zijn van code van derden.
U hebt het internet afgezocht naar het perfecte beeld voor uw pagina. Je voegt het toe aan je sectie en het is groter dan de container. Er is een eenvoudige oplossing hiervoor in Unbounce.
Nadat u de afbeelding aan uw paginasectie hebt toegevoegd, selecteert u gewoon Stretch om pagina pagina te passen. Als u wilt dat de hele pagina wordt gevuld die u kunt selecteren Stretch to fit pagina.
Om een vaste afbeelding te maken die op zijn plaats blijft terwijl bezoekers onderaan de pagina scrollen (parallax), selecteert u gewoon het selectievakje "Vaste achtergrond als u scrolt". Een ontwerpelement dat zeer impactvol kan zijn op bestemmingspagina's, parallax scrollen vereist meestal aangepaste code. Met Unbounce kunt u deze functie toevoegen met een klik op de knop.
Notitie: Deze functie wordt niet weergegeven wanneer bezoekers zich in de mobiele weergave bevinden.
Met de functie kleuroverlay kunt u tinten toevoegen aan uw achtergrondafbeeldingen die een specifieke kleur naar uw keuze naar de voorgrond brengen.
U kunt de transparantie van uw afbeeldingen aanpassen door de optie Dekking te selecteren. Een kleuroverlay van 100 zal je achtergrond volledig doordringen in je gekozen kleur.
Ga als volgt te werk om ervoor te zorgen dat uw pagina er nog steeds uitziet en functioneert zoals bedoeld nadat deze is gedeeld:
De vertaling van een ontwerp naar een landingspagina op het Unbounce-platform moet op een perfecte manier worden uitgevoerd. In het onderstaande voorbeeld is de bestemmingspagina gestructureerd door paginasecties en kolommen met behulp van het standaard Unbounce-raster. Exporteer al uw beeldelementen in .png of .jpg-indeling voordat u begint.
Bij het bouwen van een landingspagina van een photoshop-bestand, raden we aan te starten vanaf een "lege pagina" op het Unbounce-platform.
Gebruik uw originele photoshop-bestand als uw gids en stel de breedte van de pagina in het deelvenster paginareigenschappen in. Wijs de achtergrondkleur toe aan de bestemmingspagina. Upload indien nodig een achtergrondafbeelding. Stel de standaardtekstkleur in als de meest gebruikte tekstkleur in uw ontwerp. Wijs de koppelingskleur toe om uw pagina-eigenschappen te voltooien.
Nu is het tijd om de landingspagina te structureren. Versleep pagina-secties naar uw pagina. Doorgaans voegt u één paginasectie toe voor elk duidelijk gedefinieerd verticaal gedeelte van uw ontwerp. U kunt bijvoorbeeld paginasecties toevoegen voor: de koptekst, inhoudsgebied 1, inhoudsgebied 2 enz., De voettekst. Vervolgens kunt u de hoogte van elke sectie instellen op basis van de metingen in uw photoshop-bestand. Nadat alle paginasecties zijn ingesteld, opent u het boomstructuurmenu aan de linkerkant en geeft u elke sectie een naam. Dit maakt het gemakkelijker om de bestemmingspagina aan te passen en te ordenen.
Elk nieuw element dat op de bestemmingspagina wordt gemaakt, wordt weergegeven in de boomstructuur, dus zorg ervoor dat u elk nieuw element een naam geeft, zoals het is toegevoegd, voor toekomstige referentie en eenvoudige wijziging.
U kunt een achtergrondkleur of verloop aan een paginasectie toewijzen, of u kunt een afbeelding uploaden die u voor uw achtergrond kunt gebruiken. Afbeeldingen kunnen ook worden betegeld. In het onderstaande voorbeeld is een achtergrondstructuur geüpload voor het hoofdgebied en een andere voor de donkere stroken boven en onder.
Afbeeldingen die u uit Photoshop hebt geknipt en geëxporteerd, kunnen nu worden geüpload en aan de bestemmingspagina worden toegevoegd. Sleep de afbeeldingen en zet ze neer met behulp van de afbeeldingstool op de linker werkbalk en plaats ze op de landingspagina op basis van je photoshop-ontwerp
Eenmaal geplaatst, vergeet niet om ze een naam te geven in de boomstructuur. Als u video op uw bestemmingspagina wilt plaatsen, gebruikt u de videogereedschap van de linker werkbalk en plakt u uw YouTube / Vimeo-insluitcode in het venster dat wordt weergegeven. Formaat wijzigen en positioneren volgens de beoogde grootte en beeldverhouding.
Sleep de teksttool naar de pagina. Plaats elk tekstblok op basis van uw photoshop-bestand en voeg uw kopie in met behulp van de onderstaande teksteditor. U kunt uw kopie, lettertype, grootte, regelhoogte en kleur aanpassen aan uw photoshop-bestand.
U kunt dozen gebruiken als containers voor elementen zoals formulieren, afbeeldingen of tekst. Wijzig lijn, kleur en hoekradius voor het gewenste visuele resultaat en verander zelfs van vak in cirkels indien nodig.
Versleep uw formulierelement naar de bestemmingspagina. U wordt gevraagd naar het venster voor het maken van de overlay met formulierbuilder. Kies vooraf gemaakte velden of maak uw eigen velden. Wanneer u het vooraf gemaakte e-mailveld gebruikt, schakelt u de optie "Valideren als e-mailadres" in. Als u klaar bent, klikt u om het formulier te selecteren en styliseert u de afstand, lettertypen, kleuren, breedte en hoogte in het eigenschappenvenster aan de rechterkant..
Stileer knoppen op kleur, verloop of door een eigen afbeelding toe te voegen. Rollover-toestanden kunnen ook worden ingesteld. Bewerk de knoptekst en pas de lettertype-instellingen aan zodat deze overeenkomen met uw ontwerp.
Als u een formulier op uw pagina heeft, wordt een bevestigingspagina geactiveerd wanneer het formulier wordt ingevuld. U kunt het tabblad bevestigingspagina openen in de linkerbovenhoek van uw pagina.
Pas het ontwerp van de bevestigingspagina aan het ontwerp van uw bestemmingspagina aan. Dit zal gebruikers geruststellen dat ze het juiste pad hebben gevolgd en een naadloze ervaring bieden van landen tot na de conversie
Elke bestemmingspagina heeft een conversiedoel nodig. U kunt dit instellen door op het tabblad "Conversiedoel" in het eigenschappenvenster te klikken. Als u een formulier hebt, moet dit worden ingesteld als "Formulierverzending".
Zodra al uw bestemmingspagina-elementen op de pagina staan, sleept u eenvoudig om de elementen te verplaatsen naar uw photoshop-bestand en om de uiteindelijke lay-out te maken. Gebruik de voorbeeldmodus om een laatste beoordeling van uw bestemmingspagina te maken.
Mobile Responsive in Unbounce biedt u de mogelijkheid om een mobiele of desktopversie van uw pagina automatisch aan bezoekers te laten zien, afhankelijk van hun browserformaat zonder een omleiding te gebruiken. Wanneer Mobile Responsive is ingesteld en ingeschakeld op een pagina, ziet elke bezoeker die een mobiel apparaat gebruikt de mobiele weergave van uw pagina, terwijl iedereen die een desktopapparaat gebruikt de bureaubladweergave krijgt.
Unbounce stelt het "breekpunt" voor uw Mobile Responsive-pagina's in op 600px. Dit betekent dat elk browservenster met een viewport van 600px of minder de mobiele weergave van de pagina krijgt. Elke browser met een viewport van meer dan 600px ziet de desktopversie van de pagina.
Notitie: netvliesweergaven, zoals de iPhone, zijn technisch gezien groter dan 600px vanwege hun hoge resolutie, maar de viewport gedraagt zich als een kleiner browservenster, dus retinotelefoons zullen de mobiele versie van de pagina weergeven
Er zijn een paar dingen die u nodig heeft om uw responspagina voor mobiel aan te passen en deze aan uw mobiele bezoekers te laten zien:
Klik op de knoppen rechtsonder in het venster Paginabuilder om te schakelen tussen de weergave Bureaublad en Mobiel.
U kunt de grootte van de tekst aanpassen aan uw desktopversie zodat deze bij uw mobiele versie past. Selecteer het tekstvak en gebruik de schaalbalk in de rechterbovenhoek van de pagina Eigenschappen. Het tekstvak zelf kan ook apart worden aangepast op desktop en mobiel.
Notitie: Alle aanpassingen aan lettertype, tekengrootte, opmaak of lijnhoogte gemaakt met de Teksteditor (in plaats van de schaalbalk) hebben invloed op beide weergaven.
Formulieren en knoppen zijn hetzelfde voor uw mobiele en desktopweergave. U kunt een knop in één weergave verbergen en een andere weergeven in de andere weergave. Uw formulier moet echter consistent zijn voor beide versies.
Als u objecten hebt die u in een mobiele of desktopweergave wilt verbergen, klikt u op het object en klikt u vervolgens op het pictogram Zichtbaarheid in het venster Eigenschappen.
U kunt ook de zichtbaarheid regelen door op Pagina-inhoud linksonder in Paginabuilder te klikken.
Wanneer u objecten in Paginabuilder selecteert, ziet u deze in het deelvenster Pagina-inhoud. Je ziet een oog wanneer het element zichtbaar is of een dichte cirkel als dat niet het geval is. Klik om tussen deze twee te schakelen.
Notitie: Als u ervoor kiest om een vak of paginasectie te verbergen met daarin genestelde objecten, worden alle geneste items verborgen.
Als een element tussen de paginasecties wordt verplaatst, wordt dit standaard in beide weergaven verplaatst. Als u elementen buiten een paginasectie wilt verplaatsen zonder daadwerkelijk paginasecties te wijzigen, houdt u de Command-toets (mac) of de Control-toets (Windows) ingedrukt terwijl u een element sleept. U zult hier altijd een herinnering aan zien als u een element van de ene pagina naar de andere verplaatst zonder Command of Control ingedrukt te houden.
Als meerdere elementen in een vak zijn genest, worden alle elementen in de andere weergave verplaatst door die elementen in één weergave te verplaatsen. U kunt ook Command / Control + klik gebruiken om een item in een weergave onaangeroerd te houden en het onafhankelijk van de andere weergave te verplaatsen.
Tip: onthoud dat je ook kunt verschuiven + klikken om meer dan één element tegelijk te verplaatsen
Waarschuwingen buiten de rand: u ziet een waarschuwing als een van uw objecten buiten de grenzen van uw bestemmingspagina valt. Verplaats het object binnen de grenzen van uw pagina of verberg het om de waarschuwing te verwijderen. U kunt waarschuwingen voor verboden buiten gebruik ook uitschakelen met het selectievakje in de rechterbovenhoek van de Page Builder.
Wanneer u klaar bent met het opstellen van uw mobiele pagina, gaat u naar het deelvenster Eigenschappen aan de rechterkant en vinkt u Mobiele versie weergeven aan bezoekers aan om de mobiele weergave in te schakelen. Sla uw pagina vervolgens op en publiceer deze (of opnieuw).
Notitie: Als u uw pagina publiceert, kunt u een live voorbeeldlink op sjabloone markten leveren.
Een sjabloon voor een bestemmingspagina moet aanpasbaar zijn. De eindgebruiker moet in staat zijn om elke hero shot-afbeelding of fotografische achtergrond eenvoudig uit te wisselen. Ga als volgt te werk om ervoor te zorgen dat de kwaliteit van uw bestemmingspagina intact blijft en dat uw pagina de goedkeuring van ThemeForest overneemt:
Zodra u een mooie, gemakkelijk aan te passen bestemmingspaginasjabloon heeft gemaakt, moet u deze downloaden voordat u hem kunt delen met (of kunt verkopen aan) de wereld. Om een pagina te downloaden, gaat u naar het paginaoverzicht (het gedeelte met alle varianten en statistieken van uw pagina), zoekt u het tandwiel- / tandwielpictogram in de rechterbovenhoek en klikt u op "Downloadpagina".
Er verschijnt een dialoogvenster dat u een e-mail stuurt wanneer het bestand gereed is om te downloaden. Het bestand heeft de extensie ".unbounce". Nadat u uw bestand heeft gedownload, kunt u het zo nodig hernoemen, maar laat de extensie ".unbounce" intact.
Wilt u meerdere lay-outs van dezelfde sjabloon verpakken? Blijf weg van het gebruik van paginavarianten voor het samen verpakken van meerdere lay-outs.
Maak in plaats daarvan elke lay-out als een afzonderlijke pagina en download elke lay-out afzonderlijk. Dit zorgt ervoor dat je een functionele voorbeeldlink hebt voor elke lay-out en het vermindert de verwarring van de downloader, omdat varianten specifiek worden gebruikt voor A / B-testen.
Ik hoop dat dit je een grondige inleiding gaf bij het Unbounce en authoring van mobiel-responsieve Unbounce-sjablonen die te koop zijn op markten zoals ThemeForest. Er valt echter nog veel meer te leren, dus als je vragen hebt, kun je gerust vragen stellen in de comments.
Accentsconagua