Share
Siste oppdatering: Vi har flere gode nyheter! Unbounce har lagt til flere nye designfunksjoner, noe som gir Unbounce brukere tilgang til noen svært kraftige designverktøy. De nye funksjonene er:
Disse oppdateringene vil tillate Unbounce kunder å legge til disse funksjonene uten å bruke noen tredjeparts kode løsninger. Alle operasjonene i denne oppdateringen kan utføres raskt og enkelt - webdesignere av alle striper vil kunne dra nytte av de nye funksjonene i Unbounce.
Vi har oppdatert innlegget igjen for å gjenspeile disse siste endringene. Vi viser deg hvor du skal finne funksjonene, og hvordan du bruker dem. Du kan lære mer om de siste oppdateringene på slutten av del 2 nedenfor!
Oppdater: Store nyheter! Unbounce landingssider er nå mobilsvarlige, noe som betyr at designere kan opprette og selge maler som automatisk tilpasses til en hvilken som helst enhet. Dette er Unbounces største produktoppdatering til dags dato, og tusenvis av markedsførere vil se opp for å oppgradere deres destinasjonssider slik at de er mobil-responsive. Med andre ord, de kommer til å trenge nye maler ASAP.
Vi har oppdatert dette innlegget for å gå gjennom hva mobil responsivt er, og hvordan du kan designe en mobil-responsiv mal i Unbounce. Du kan hoppe til del 4 nedenfor hvis du allerede har mestret Unbounce og er klar til å begynne å designe for mobil!
I denne opplæringen skal jeg introdusere deg til Unbounce, et verktøy for å bygge kampanjespesifikke destinasjonssider. Vi vil gå gjennom anatomien til ulike typer destinasjonssider, gå gjennom verktøyets funksjoner, og dekke hva som trengs for å selge dine egne Unbounce maler på Themeforest.
Unbounce ble bygget for å løse et svært spesifikt problem; å gi profesjonelle markedsførere mulighet til å bygge vakre og veldrevne kampanjespesifikke destinasjonssider alene. Det er, uten hjelp av utviklere eller - her er der malene kommer inn - designere.
Siden Unbounce sin primære brukerbase er markedsførere som kanskje ikke er kjent med robuste designverktøy, er byggesiden builder designet for å være enkel å bruke, med et WYSIWYG, dra og slipp-grensesnitt. Når det er sagt, kan dyktige designere også føle seg like hjemme; det er mulig å legge til egendefinerte JavaScript-, CSS- og HTML-widgets og finjustere sideelementer til pikselet.
Landingssider er frittstående nettsider som tjener et bestemt, forhåndsdefinert mål for markedsførere. Hvis markedsførere prøver å selge et produkt eller en tjeneste, kan de bruke en destinasjonsside for å utdanne brukeren før de rettes til prissiden. Hvis de fremmer en ny eBok, trenger de en destinasjonsside for å samle kontaktinformasjon fra sine besøkende før overlevering av filen. For begge disse kampanjene (og nesten alle kampanjer!) Bare å sende besøkende til deres hjemmeside - i stedet for en dedikert destinasjonsside - ville stave markedsføringsfeil.
Kort sagt, destinasjonssider er utformet for å skubbe brukere mot et bestemt, konverterings-sentrert mål.
Mest erfarne profesjonelle markedsførere. De driver kontinuerlig markedsføringskampanjer og kan ikke / ikke vil stole på deres interne utviklere for å bygge en unik destinasjonsside for hver kampanje. Omtrent en tredjedel av våre kunder er en del av et selskaps markedsføringsgruppe, et tredje arbeid i et markedsføringsbyrå og de resterende tredje er gründere.
Hvis Unbounce-kunder ikke har designkoteletter til å føle seg komfortable, bygger en side fra bunnen av, vil de starte fra en mal eller ha sin designer lage en mal for dem. Etter at de har tilpasset en mal som passer til kampanjens behov, bruker de ofte samme mal for hver lignende kampanje de kjører.
A / B-testing er en kjernefunksjon i Unbounce. Brukere kan kopiere sin ferdige side, gjøre en endring til design eller kopi av den nye siden, del trafikk mellom de to sidene og bruk Unbounce's rapportering for å finne ut hvilken versjon som konverterer bedre. A / B testing gjør det mulig for kundene å forbedre landingssider og markedsførings kampanjer.
Denne veiledningen vil hjelpe deg med å designe og bygge en konverterings destinasjonsside for Unbounce-plattformen.
Vi oppfordrer malforfattere til å registrere seg for Unbounce's gratis konto og [email protected] for å fortelle dem at du designer maler for videresalg. Sending av teamet vårt vil sikre at kontoen din forblir ledig hvis du overskrider 200 unike besøkende som normalt er tillatt på gratisplanen.
La oss raskt løpe ned hva vi skal dekke i denne opplæringen.
La oss sammenligne Webtrends hjemmeside (venstre) med en av deres destinasjonssider (høyre). Hjemmesiden er vakkert designet og lar en besøkende utføre en rekke oppgaver. Det er fem konsepter presentert i hovedpromotivområdet (via et roterende banner), fire tilleggsmeldinger under det, og totalt tjueåtte samspillingspunkter.
Markedsføringskampanjer skal imidlertid være laserfokuserte og føre brukere til en enkelt handling. Når du designer en destinasjonsside som skal brukes i markedsføringskampanjer, er begrepet Oppmerksomhetsforhold må vurderes. Oppmerksomhetsforhold (AR) er definert som forholdet mellom interaktive elementer (linker / lekkasjer) på siden, til antall kampanjekonverteringsmål (som er en). På denne hjemmesiden er oppmerksomhetsforholdet 28: 1, noe som betyr at det er tjuefire distraherende handlinger og en ønsket handling.
Sammenlign hjemmesiden med en av de ledende generasjonens landingssider (høyre). På destinasjonssiden er det bare en handling å utføre; Brukerne blir bedt om å fylle ut skjemaet og klikke på CTA-knappen for å fullføre konverteringen. Dette gir en mye mer fokusert opplevelse for besøkende, og holder oppmerksomhetsforholdet på 1: 1.
Det er fem må-ha-kjerneelementer på en hvilken som helst destinasjonsside som kan brytes ned videre til en mer detaljert liste over byggeklosser:
Diagrammet nedenfor representerer en prøveoppsett. Ordren og plasseringen av de 5 elementene vil bli bestemt av historien du vil fortelle de besøkende, og kan variere fra dette eksemplet. Men det er nyttig å se på dette som referanse når vi går gjennom hvert element.
Det er to hovedtyper landingssider: blygenerering (lead gen) og click-through.
Ledende gensider brukes til å fange opp brukerdata, for eksempel navn og e-postadresse. Det eneste formålet med siden er å samle inn informasjon som vil tillate videre kommunikasjon med prospektet på en annen tid. En ledende genside vil inneholde et skjema sammen med en beskrivelse av hva den besøkende vil få i retur for å sende inn sine personlige data.
Ledergenstrømning Klikk-through destinasjonssider har som mål å overtale besøkende til å klikke gjennom til en annen side.
Vanligvis brukt i e-handelstunneler, kan de tilby detaljer om et produkt eller en tjeneste for å "varme opp" en besøkende og bringe dem nærmere ved å ta en innkjøpsbeslutning. Når prospektet klikker videre til neste side, blir de primet med all den informasjonen de trenger og vil være mye mer sannsynlig å kjøpe.
Ved Unbounce bruker vi et standardnettet system som bruker 12 kolonner, og gjør en 940px container. Eksempelet nedenfor bryter ned kolonnekombinasjonene som er tilgjengelige. Vi anbefaler at du bruker Unbounce-rutenettet for å få de beste resultatene for destinasjonssiden.
Unbounce tilbyr et standard sett med skrifttyper innenfor byggemålsbyggeren, samt et Google Web Fonts-sett. Vi anbefaler at du bruker følgende skrifttyper når du designer for Unbounce.
Nedenfor er en liste over Google Web Fonts tilgjengelig i Unbounce, bruk / last ned kun de følgende skriftene fra Google Web Fonts Library.
Nedenfor er en liste over standardfonter tilgjengelig i Unbounce.
Hver destinasjonsside har et mål i tankene; Flytter besøkende til å utføre en oppfordring, for eksempel å fylle ut et skjema eller klikke på en annen side. Nedenfor finner du et utvalg av de vanligste typene av destinasjonssider.
Både enkle minimalistiske design samt fullstilte eksempler vises.
Å tappe på populære webdesigntrender kan bidra til å sette destinasjonssiden bortsett fra andre, men implementeringen kan være vanskelig å kode. For å tillate unbounce brukere å utnytte noen nylige og effektive designtrender, har vi bygget nye verktøy i Unbounce-byggeren. Du kan nå integrere funksjoner som parallax ruller inn i destinasjonssiden din ved å klikke på en knapp uten å stole på tredjeparts kode.
Du har slettet Internett for det perfekte bildet for siden din. Du legger den til i delen din, og den er større enn beholderen. Det er en enkel løsning for dette i Unbounce.
Når du har lagt til bildet i sideseksjonen, velger du bare Strekk for å passe sideavsnittet. Hvis du vil at den skal fylle hele siden, kan du velge Strekk for å passe på siden.
For å lage et fast bilde som forblir på plass mens besøkende ruller nedover siden (parallax), velg bare avkrysningsruten "Fast bakgrunn som du ruller". Et designelement som kan ha stor innflytelse på destinasjonssider, krever parallaxrulling og krever egendefinert kode. Unbounce lar deg legge til denne funksjonen ved å klikke på en knapp.
Merk: Denne funksjonen blir ikke vist når besøkende er i mobilvisning.
Ved hjelp av funksjonen for fargeoverlegg, kan du legge til toner i bakgrunnsbildeene dine som gir en bestemt farge du velger i forgrunnen.
Du kan justere gjennomsiktigheten til bildene dine ved å velge Opacity-funksjonen. Et fargeoverlegg på 100 vil gjennomsyre bakgrunnen med den valgte farge helt.
For å sikre at siden din fortsatt ser ut og fungerer etter hensikten etter at den er delt, må du unngå å bruke følgende:
Oversettelsen av et design til en destinasjonsside på Unbounce-plattformen bør utføres på en perfekt måte. I eksempelet nedenfor er destinasjonssiden strukturert av sidestykker og kolonner ved hjelp av standard Unbounce-nettverket. Eksporter alle bildene dine i .png eller .jpg-format før du begynner.
Når du bygger en destinasjonsside fra en Photoshop-fil, anbefaler vi at du starter fra en "tom side" på Unbounce-plattformen.
Bruk din originale Photoshop-fil som din guide ved å angi bredden på siden i sidegenskapsruten. Tilordne bakgrunnsfarge til destinasjonssiden. Last opp et bakgrunnsbilde om nødvendig. Angi standard tekstfargen som den mest brukte tekstfargen i designet. Tilordne linkfarge for å fullføre sidegenskapene dine.
Nå er det på tide å strukturere destinasjonssiden. Dra og slipp sideseksjoner på siden din. Vanligvis vil du legge til en side seksjon for hver klart definert vertikal del av designet. For eksempel kan du legge til sidestykker for: topptekst, innholdsområde 1, innholdsområde 2 etc., bunnteksten. Deretter kan du angi høyden på hver seksjon i henhold til målingene i Photoshop-filen. Når alle sidestykker er satt opp, åpner du trestrukturstruktursmenyen til venstre, og navn hvert avsnitt tilsvarende. Dette gjør det enklere å endre og organisere destinasjonssiden.
Hvert nytt element som er opprettet på destinasjonssiden, vises i trestrukturen, så sørg for at du nevner hvert nytt element som det er lagt til, for fremtidig referanse og enkel modifikasjon.
Du kan tilordne en bakgrunnsfarge eller gradient til en sideseksjon, eller du kan laste opp et bilde som skal brukes til bakgrunnen din. Bilder kan også flises. I eksemplet nedenfor ble en bakgrunnstekstur lastet opp for hovedområdet, og en annen for de mørkere stripene over og under.
Bilder som du har klippt opp og eksportert fra Photoshop, kan nå lastes opp og legges til destinasjonssiden. Dra og slipp bilder ved hjelp av bildeverktøyet på venstre verktøylinje, og plasser dem på destinasjonssiden i henhold til ditt photoshop-design
Når du er plassert, husk å navngi dem i trestrukturen. Hvis du vil legge inn video på destinasjonssiden din, bruker du videoverktøyet fra venstre verktøylinje og limer inn YouTube / Vimeo-innebygningskoden i vinduet som dukker opp. Endre størrelsen og plasser den i henhold til ønsket størrelse og størrelsesforhold.
Dra og slipp tekstverktøyet på siden. Plasser hver tekstblokk i henhold til din Photoshop-fil, og sett inn kopien din ved hjelp av tekstredigering nedenfor. Du kan justere kopi, skrift, størrelse, linjehøyde og farge for å matche din Photoshop-fil.
Du kan bruke bokser som beholdere for elementer som former, bilder eller tekst. Endre strekk-, farge- og hjørneradius for det ønskede visuelle resultatet, og til og med slå om i boksene om nødvendig.
Dra og slipp formelementet ditt på destinasjonssiden. Du blir bedt om å legge til skjemabildet overleggsvinduet. Velg forhåndsdefinerte felt eller lag ditt eget. Når du bruker det forhåndsdefinerte e-postfeltet, slår du på alternativet "Valider som e-postadresse". Når du er ferdig, klikker du for å velge skjemaet og styler ved å justere mellomrom, fonter, farger, bredde og høyde i egenskapsruten til høyre.
Styler knapper etter farge, gradient eller ved å legge til et egendefinert bilde. Rollover-statene kan også settes. Rediger knappeteksten og endre skriftinnstillingene for å matche designet.
Hvis du har et skjema på siden din, blir en bekreftelsesside utløst når skjemaet er fylt ut. Du kan få tilgang til fanen Bekreftelsesside øverst til venstre på siden din.
Endre utformingen av bekreftelsessiden for å matche utformingen av destinasjonssiden din. Dette vil forsikre brukere om at de har fulgt den riktige banen, og gir en sømløs opplevelse fra landing til postkonvertering
Hver destinasjonsside trenger et konverteringsmål. Du kan angi dette ved å klikke på "Konverteringsmål" -fanen i egenskapsruten. Hvis du har et skjema, bør det settes som "Form Submission".
Når alle elementene på destinasjonssiden er på siden, drar du bare for å plassere elementene for å matche din Photoshop-fil og opprette det endelige layoutet. Bruk forhåndsvisningsmodus for å gjøre en endelig gjennomgang av destinasjonssiden din.
Mobile Responsive i Unbounce gjør det mulig å betjene enten en mobil eller en desktopversjon av siden din automatisk til besøkende, avhengig av nettleserens størrelse uten å bruke en omdirigering. Når Mobile Responsive er satt opp og aktivert på en side, vil alle besøkende som bruker en mobil enhet, se mobilvisningen til siden din, mens alle som bruker en stasjonær enhet, vil bli vist på skrivebordet.
Unbounce setter "break point" for de mobile responsive sidene dine på 600px. Dette betyr at et hvilket som helst nettleservindu med en visning på 600 px eller mindre vil bli vist på mobilvisningen til siden. Enhver nettleser med et visningsport på over 600px vil se den stasjonære versjonen av siden.
Merk: Retina-skjermer, som iPhone, er teknisk større enn 600px på grunn av deres høye oppløsning, men visningsporten oppfører seg som mindre nettleservindu, så retina-telefoner vil vise mobilversjonen av siden
Det er noen ting du trenger for å tilpasse mobilens responsive side og begynne å vise den til mobil besøkende:
Klikk på knappene nederst til høyre i vinduet Page Builder for å bytte mellom skrivebord og mobilvisning.
Du kan endre størrelsen på teksten fra din desktop-versjon for å passe til mobilversjonen. Velg tekstboksen og bruk skalaen øverst til høyre på Egenskapssiden. Tekstboksene i seg selv kan også resizes separat på skrivebord og mobil.
Merk: Eventuelle justeringer av skrift, skriftstørrelse, format eller linjehøyde laget av tekstredigereren (i stedet for skalaen) vil påvirke begge visningene.
Skjemaer og knapper vil være de samme på mobil og skrivebord. Du kan skjule en knapp i en visning og vise en annen i den andre visningen. Skjemaet ditt må være konsekvent i begge versjoner skjønt.
Hvis du har objekter du vil gjemme i enten mobil eller desktopvisning, klikker du på objektet, og deretter klikker du ikonet Synlighet i Egenskapspanelet.
Du kan også kontrollere synligheten ved å klikke på Sidens innhold nederst til venstre i Page Builder.
Når du velger objekter i sidebyggeren, ser du dem fremhevet i ditt sideinnholdspanel. Du ser et øye når elementet er synlig eller en solid sirkel hvis den ikke er. Klikk for å veksle mellom de to.
Merk: Hvis du velger å skjule en boks eller sideseksjon med objekter som er nestet inne, vil alle nestede gjenstander bli skjult.
Som standard, hvis et element flyttes mellom sidestykker, blir det flyttet i begge visningene. Hvis du vil flytte elementer utenfor en sideseksjon uten å endre sideseksjonene, holder du nede Kommandotasten (Mac) eller Kontrolltasten (Windows) mens du drar et element. Du får se en påminnelse om dette når som helst du flytter et element fra en sideseksjon til en annen uten å holde nede Kommando eller Kontroll.
Hvis flere elementer er nestet i en boks, flytter de elementene i en visning, vil også flytte alle elementene i den andre visningen. Du kan også bruke Command / Control + klikk for å unparent et element i en visning og flytte det uavhengig av den andre visningen.
Tips: Husk at du også kan skifte + klikk for å flytte mer enn ett element om gangen
Ubegrensede advarsler: Du får se en advarsel hvis noen av objektene dine er utenfor grensene til destinasjonssiden din. Bare flytt objektet i sidens grenser, eller skjul det, for å fjerne advarselen. Du kan også deaktivere advarsler utenom grensene ved å bruke avmerkingsboksen øverst til høyre i Page Builder.
Når du er ferdig med å legge ut mobilsiden din, går du til Egenskaper-panelet til høyre og merker Vis mobilversjon til besøkende for å aktivere mobilvisningen. Lagre og publiser deretter (eller publiser) siden din.
Merk: Når du publiserer siden, kan du gi en forhåndsvisningslink i malmarkeder.
En destinasjonssidemal må være tilpassbar. Sluttbrukeren skal kunne bytte ut noen heltte bilder eller fotografiske bakgrunner. For å sikre at kvaliteten på destinasjonssiden din forblir intakt, og at siden din godkjennes av ThemeForest, følg disse retningslinjene:
Når du har bygget en vakker, lett å tilpasse destinasjonssiden mal, må du laste den ned før du kan dele den med (eller selge den til) verden. For å laste ned en side, gå inn i oversikten over siden (delen som viser alle sidens varianter og statistikk), finn tannhjulikonet øverst til høyre og klikk på "Last ned side".
Et dialogvindu vil vises, som vil sende deg en e-post når filen er klar til nedlasting. Filen vil ha en ".unbounce" -utvidelse. Når du har lastet ned filen, kan du omdøpe den etter behov, men la forlengelsen ".unbounce" være intakt.
Vil du pakke flere oppsett av samme mal? Vennligst kontroller at du bruker sidevarianter til å pakke inn flere layouter sammen.
I stedet lager hver layout som en egen side og laster ned hvert layout separat. Dette sikrer at du har en funksjonell forhåndsvisningslink for hvert layout, og det vil redusere forvirring fra nedlasteren, da varianter brukes spesielt for A / B-testing.
Jeg håper dette ga deg en grundig introduksjon til Unbounce og authoring mobil-responsive Unbounce maler for salg på markedsplasser som ThemeForest. Det er nok mer å lære, men hvis du har noen spørsmål, vær så snill å spørre deg i kommentarene.
Accentsconagua