como utilizar unbounce y hacer una landing page
TRANSCRIPT
![Page 1: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/1.jpg)
#YouAreAmazingWeb + Mobile + Marketing
![Page 2: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/2.jpg)
Landing Page con “Unbounce”
1
Vamos a Unbounce.com y seleccionamos “Sign Up”
![Page 3: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/3.jpg)
Landing Page con “Unbounce”
2
Vamos a la parte de abajo y damos click donde dice “Sign up for free”
![Page 4: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/4.jpg)
Landing Page con “Unbounce”
3
Rellenamos el formulario con nuestros datos y damos click en el botón “Open My Free Account” y revisamos nuestra cuenta de correo personal
con la que nos dimos de alta por indicaciones.
![Page 5: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/5.jpg)
Landing Page con “Unbounce”
4
Volvemos a unbounce.com y le damos click en “Log in”
![Page 6: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/6.jpg)
Landing Page con “Unbounce”
5
Aparecerá una ventana nueva donde debemos de “Logearnos” con nuestro correo y contraseña
![Page 7: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/7.jpg)
Landing Page con “Unbounce”
6
Una vez que nos hallas identificado nos saldrá un panel como este, en medio veremos los proyectos creados y de lado izquierdo en el
botón verde podemos crear un proyecto Nuevo.
![Page 8: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/8.jpg)
Landing Page con “Unbounce”
7
Una vez que vallamos a crear un proyecto Nuevo donde dice “Type” seleccionamos “Lead Generation” para poder tener un formulario
de contacto y después seleccionamos un diseño que nos guste a nosotros, recuerda que dando doble clickpodemos tener una vista previa del diseño
![Page 9: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/9.jpg)
Landing Page con “Unbounce”
8
Una vez seleccionado el diseño le agregamos el titulo de nuestro proyecto o landing page en la parte inferior donde dice “Page Name”
![Page 10: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/10.jpg)
Landing Page con “Unbounce”
9
Ya agregado el titulo de nuestra Landing Page le damos en el botón “Save & Start Editing” para guardar nuestra selección y empezar a trabajar
en nuestra landing page
![Page 11: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/11.jpg)
Landing Page con “Unbounce”
10
Una vez creado nuestra Landing Page para agregar una imagen nueva seleccionamos de lado derecho el botón de “image” ubicado de lado izquierdo
como lo muestra la siguiente imagen
![Page 12: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/12.jpg)
Landing Page con “Unbounce”
11
Para subir nuestras propias imágenes damos un click donde dice “Uplaod New Image” navegamos hasta la carpeta donde esta se
encuentra y le damos ok, después seleccionamos la imagen que queremos insertar y le damos en el botón “Choose”
![Page 13: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/13.jpg)
Landing Page con “Unbounce”
12
Para modificar la Imagen daremos doble click en ella y si queremos agrandarla la jalaremos con el mouse de las orillas (Click sostenido) y
la arrastramos como la imagen de abajo lo muestra
![Page 14: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/14.jpg)
Landing Page con “Unbounce”
13
Para insertar un texto nuevo es necesario dar click en el botón de “Text” ubicado en la barra de herramientas en la izquierda
y lo arrastramos a donde lo queremos ubicar dicho texto
![Page 15: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/15.jpg)
Landing Page con “Unbounce”
14
Una vez colocado el texto para editarlo le damos doble click a este mismo
![Page 16: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/16.jpg)
Landing Page con “Unbounce”
15
Cuando le damos doble click nos aparece el panel de edición de texto como en la imagen de abajo, tenemos las opciones para editar el color, tamaño, contenido etc. Una vez terminada la edición le damos click en
el botón “Close” como lo muestra la imagen
![Page 17: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/17.jpg)
Landing Page con “Unbounce”
16
Cuando queremos editar un Formulario de contacto o nuestro “Call To Action” es necesario darle un click sobre este mismo
![Page 18: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/18.jpg)
Landing Page con “Unbounce”
17
Una vez seleccionado el formulario de contacto le daremos un clicken el botón llamado “Edit Form Fields”
ubicado en la parte superior derecha como lo muestra la imagen
![Page 19: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/19.jpg)
Landing Page con “Unbounce”
18
Después de darle click al botón de “Edit Form Fields” Aparecera una ventana llamada “Design Your Form” seleccionamos dando un click el campo que queremos
editar en esta caso será el campo llamado “Name”
![Page 20: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/20.jpg)
Landing Page con “Unbounce”
19
Una vez seleccionado el campo que vamos a editar de lado derecho aparecerán nuevas opciones donde podremos cambiar el nombre del campo (Field Label) y si este este campo es obligatorio (Required Field)
como la imagen lo muestra
![Page 21: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/21.jpg)
Landing Page con “Unbounce”
20
De lado izquierdo contamos con 3 botones son para acomodar la ubicación de los campos, el botón
![Page 22: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/22.jpg)
Landing Page con “Unbounce”
21
Una vez que terminemos de editar nuestro formulario damos un click en el botón “Done” ubicado en la parte inferior derecha de su pantalla
![Page 23: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/23.jpg)
Landing Page con “Unbounce”
22
Para guardar las ediciones posteriores debemos de dar click en el botón llamado “Save” ubicado en la parte superior izquierda
![Page 24: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/24.jpg)
Landing Page con “Unbounce”
23
Si quieres ver como ha quedado nuestro diseño de “Landing Page” daremos click en el botón “Preview” ubicado en la parte superior derecha
![Page 25: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/25.jpg)
Landing Page con “Unbounce”
24
Para volver al menú principal donde están ubicados nuestros proyectos daremos click en el botón del logotipo en la parte superior izquierda
![Page 26: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/26.jpg)
Landing Page con “Unbounce”
25
Para ver la información de nuestra landing page le daremos un click en el panel de nuestro “dashboard” seleccionando el proyecto
![Page 27: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/27.jpg)
Landing Page con “Unbounce”
26
Una vez seleccionado nuestro proyecto veremos una pantalla como la siguiente, ahora duplicaremos nuestra landing page
basándonos en el diseño principal le daremos un click sobre el botón del engrane y daremos click sobre “Duplicate This Variant”
![Page 28: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/28.jpg)
Landing Page con “Unbounce”
27
Una vez duplicada nuestra landing page veremos una segunda variante de bajo de esta misma como lo muestra la siguiente imagen
![Page 29: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/29.jpg)
Landing Page con “Unbounce”
28
Para cambiar el nombre de esta daremos un click sobre el dibujo del “lápiz” o sobre el mismo titulo
![Page 30: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/30.jpg)
Landing Page con “Unbounce”
29
Para editar esta segunda variante daremos un click sobre el botón “Edit” y nos devolverá a la pantalla de edición que vimos posteriormente.
![Page 31: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/31.jpg)
Landing Page con “Unbounce”
30
Seleccionaremos el porcentaje con el que creamos indicado mostrar/publicar nuestras variantes, es decir el porcentaje de impresión de cada una para nuestros visitantes.
![Page 32: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/32.jpg)
Landing Page con “Unbounce”
31
Una vez terminados nuestros cambios publicaremos nuestra Landing Page en el bton llamado “Publish Page
![Page 33: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/33.jpg)
Landing Page con “Unbounce”
32
Cuando publiquemos nuestra Landing Page y empecemos a obtener datos/leads/conversiones encontraremos esta información sobre este
mismo panel , ubicado un poco más abajo ala derecha en el botón llamado “View Leads”
![Page 34: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/34.jpg)
Landing Page con “Unbounce”
33
Al dar click sobre “View Leads” nos devolverá una pantalla como la siguiente con los datos de la gente interesada en nuestra propuesta de valor
![Page 35: Como Utilizar Unbounce y Hacer una Landing Page](https://reader030.vdocuments.site/reader030/viewer/2022013115/55b4908dbb61eb61048b47b6/html5/thumbnails/35.jpg)
Landing Page con “Unbounce”
34
Para exportar estos datos y trabajar con ellos daremos click sobre el botón llamado “Generate CSV of Leads”