Share
In het eerste deel van deze korte serie hebben we de basisbeginselen behandeld van wat bestemmingspagina's zijn. In dit deel zullen we het constructieproces van een startpagina van Instapage bekijken.
Ontwerpen die voor het eerst in Photoshop werden gebouwd, moeten worden geconverteerd naar een pixel-perfecte bestemmingspagina op het platform van Instapage. Alle pagina's zijn gestructureerd door het 960 rastersysteem te volgen en door horizontale paginasecties te gebruiken die hieronder worden uitgelegd.
Instapage biedt zijn gebruikers een verscheidenheid aan sjablonen om uit te kiezen. Hoewel we ons richten op industriespecifieke sjablonen voor onze algemene gebruikers, begint u met een leeg canvas.
U hoeft geen ander programma te gebruiken om uw Instapage-sjabloon volledig te voltooien, maar u kunt uw andere eerder ontworpen thema's desgewenst converteren of importeren. CSS en aangepast JavaScript worden ook ondersteund.
Met Instapage kunt u beginnen met het toevoegen van uw bestemmingspagina-elementen door te klikken op de VOEG NIEUW TOE optie op de hoofdwerkbalk en selecteer vervolgens welk element u aan uw pagina wilt toevoegen.
Meestal is het ideaal om één element toe te voegen aan één duidelijk gedefinieerde paginasectie. U hebt echter de volledige mogelijkheid om uw pagina naar wens te structureren. U kunt ook de hoogte van de paginasecties aanpassen aan de elementen die u hebt toegevoegd.
Binnen de applicatie is er een X / Y-tooltip die verschijnt wanneer u een element verplaatst. Dit zal helpen als je gewend bent om te ontwerpen via deze methode of als je van een ander thema converteert. De coördinaten worden bepaald door het midden van het element dat wordt verplaatst ten opzichte van hoe ver het is van de linkerbovenhoek van de hoofdpaginakolom.
De kolom Hoofdpagina heeft een gedefinieerde standaard paginabreedte van 960 px.
U kunt de volgende elementen toevoegen aan uw aangepaste sjabloon voor bestemmingspagina's:
Al deze worden toegevoegd door op het element te klikken dat u wilt toevoegen en vervolgens op uw pagina te plaatsen / bewerken. We bespreken hieronder het toevoegen van elementen in meer detail.
Paginasecties worden gebruikt om verschillende inhoudsgebieden op uw bestemmingspagina te scheiden. Het gedeelte beslaat altijd de volledige breedte van de pagina en kan niet horizontaal worden vergroot of verkleind. Paginasecties kunnen overal op de pagina verticaal worden verplaatst (weergegeven in de video)
U kunt op twee manieren inhoud met beide secties en vakken groeperen. Als u al inhoud op uw pagina hebt, kunt u een vak toevoegen (door het te kiezen uit het vormen-element) en vervolgens uw inhoud naar dat vak slepen. U kunt ook eerst het vakje maken en vervolgens objecten direct naar het vak slepen en neerzetten waarmee ze worden genest.
Nadat de objecten zijn genest, kunt u ze nu als één object over uw pagina verplaatsen. Selecteer het vak en ga vanaf daar verder.
De vorm van het vak wordt meestal gebruikt om een standaard vierkant of rechthoek te maken die u kunt gebruiken om formulieren, afbeeldingen, tekst en meer te markeren. Het mag de hele breedte van de pagina niet overspannen.
Bij het bewerken van paginasecties of doosvormen krijgt u de volgende kenmerken:
U kunt een kop en alineatekst toevoegen door op de respectieve opties in de werkbalk te klikken. Wanneer u op de alinea- of koptekstknop klikt, ziet u een vooraf ingestelde alinea op uw pagina verschijnen. Vervolgens kunt u deze alinea dienovereenkomstig bewerken.
Met de teksteditor kunt u de kleur, lettergrootte, uitlijning wijzigen en kunt u genummerde lijsten toevoegen of een koppeling maken.
Nadat u hebt geklikt om een nieuw afbeeldingselement toe te voegen, krijgt u de mogelijkheid een bestaande uit een map te kiezen of een nieuwe te uploaden. Alle afbeeldingen die u uploadt, worden op onze servers opgeslagen en u kunt deze op een later tijdstip gebruiken zonder ze opnieuw te uploaden.
U kunt afbeeldingen op elk gewenst moment vervangen door de afbeelding te selecteren> op Bewerken> te klikken en vervangen te kiezen.
Gebruik afbeeldingen om uw product of dienst te vergroten (foto's zijn meer dan duizend woorden waard), maar laat u niet al te zeer meeslepen. Te veel visuele aandacht zal gebruikers afleiden van het conversiedoel.
Als u meer wilt weten over hoe het gebruik van afbeeldingen op een bestemmingspagina de conversie kan verbeteren, bekijkt u Afbeeldingen op uw bestemmingspagina gebruiken om conversies te stimuleren.
Je kunt een video uploaden naar je bestemmingspagina door de video-optie te selecteren en te linken naar de door jou gekozen YouTube- of Vimeo-video. Je kunt de grootte van de video aanpassen en de video naar eigen behoefte positioneren. Kies vervolgens of u de video automatisch wilt afspelen of de voortgangsbalk wilt verbergen.
kiezen VOEG NIEUW TOE van de hoofdknoppenbalk en klik vervolgens op VORMEN. Hiermee vult u een formulier in op uw bestemmingspagina. U kunt uw formulier slepen en neerzetten en het formaat ervan aanpassen aan uw specifieke ontwerpbehoeften. U kunt de stijl van de knoppen, de stijl van het formulier, de kleur en het lettertype aanpassen door op de knop te klikken. BEWERK knop nadat u op het formulier hebt geklikt.
U kunt ook vooraf gemaakte velden instellen of uw eigen vervolgkeuzemenu's maken. Formulieren kunnen worden gekoppeld aan onze geïntegreerde e-maildiensten zoals Mailchimp of Aweber of kunnen alleen werken. We bieden ook een omleidingsoptie (zowel integraties als formulieromleidingen mogen niet op uw pagina worden gebruikt).
Klik op om een knop aan uw pagina toe te voegen VOEG NIEUW TOE van de hoofdwerkbalk. Hiermee vult u een knop in op uw bestemmingspagina. Als u op de knop klikt, kunt u het formaat wijzigen, de kleur of het lettertype wijzigen en de functie slepen en neerzetten waar u maar wilt.
Nadat u op de knop heeft geklikt, ziet u hierboven een koppelingspictogram. Dit is een link evenement voorzien zijn van. Hiermee wordt een linkbeheerder geopend waarmee u een uitgaande link aan uw knop kunt toevoegen, een pop-up (Lightbox) naar uw knop, een bestanddownload of een koppeling naar een andere startpagina van Instapage..
Veel bestemmingspagina's gebruiken een tweeledig aanmeldingsproces waarbij een bezoeker op een knop klikt die een pop-up opent. In de pop-up bevindt zich de leadgeneratie. Daarom en omdat pop-ups nuttig kunnen zijn voor het onthullen van meer informatie, hebben we het heel gemakkelijk gemaakt om pop-ups toe te voegen aan knoppen, afbeeldingen en tekstlinks.
Klik eenvoudig op een van deze drie soorten elementen> klik op de linkknop> en selecteer vervolgens de pop-upoptie.
U kunt de grootte van het pop-upvakje wijzigen zoals u met elk ander element zou doen. Elk type inhoud kan in de pop-up worden toegevoegd.
Omdat Instapage complete drag & drop-aanpassingen biedt, ondersteunen we momenteel geen automatisch responsief ontwerp. Daarom moet u uw desktoppagina in de mobiele weergave reconstrueren op basis van de kleinere schermgrootte en wat logisch is in een mobiele context.
U kunt elementen verplaatsen tussen uw desktop- en mobiele versie door te kopiëren en te plakken.
Mac-gebruikers:
PC-gebruikers:
Om de definitieve lay-out van uw eigen Instapage-sjabloon te zien, klikt u op de Voorbeeld optie en bekijk uw sjabloon voordat u klikt Publiceren.
Notitie: Als u uw pagina publiceert, kunt u een live voorbeeldlink op sjabloone markten leveren.
Alle bestemmingspagina-sjablonen moeten aanpasbaar zijn. Instapagegebruikers moeten in staat zijn elk element dat zij wensen eenvoudig uit te wisselen.
Om ervoor te zorgen dat sjablonen hun kwaliteit niet verliezen wanneer de eindgebruiker wijzigingen aanbrengt, is het belangrijk dat uw pagina de goedkeuring door ThemeForest goedkeurt. Houd rekening met de volgende richtlijnen:
Als u uw voltooide sjabloon wilt gebruiken, delen of verkopen, moet u deze downloaden. Om te downloaden, klik op de meer opties knop gevonden op het dashboard en selecteer Downloadpagina.
Het bestand heeft de extensie ".instapage". Nadat u uw bestand heeft gedownload, kunt u het zo nodig hernoemen, maar laat de extensie ".instapage" 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.
Hopelijk heeft dit je een grondige kennismaking gegeven met Instapage en het maken van Instapage-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.
Bekijk ook de Enmeeo Most Wanted Instapage-wedstrijd die nu plaatsvindt!
Accentsconagua