imanolteran.com

HERRAMIENTAS PARA CREAR LANDING PAGESSin código ni conocimientos de desarrollo web

Landing Pages sin código

Landing Pages sin códigoimanolteran.com

HOLA, SOY IMANOL DESARROLLADOR WEB CONSULTOR DE ESTRATEGIA DIGITAL FORMADOR EN NUEVAS TECNOLOGÍAS

hola@imanolteran.com @imanolteran

Landing Pages sin códigoimanolteran.com

PODCASTSI DUDAS, HAZLO

Spotify Apple Podcasts

Google Podcasts

imanolteran.com Landing Pages sin código

Landing Pages sin códigoimanolteran.com

OTROS PROYECTOS DE FORMACIÓNPASATEAONLINE.COM

imanolteran.com

1. Introducción

2. Herramientas no-code

3. Landing pages a partir de hojas de cálculo

índice

Landing Pages sin código

imanolteran.com

01 Introducción Pongámonos en situación

Landing Pages sin código

Landing Pages sin códigoimanolteran.com

• Cada día afrontamos el nacimiento de nuevos productos o servicios.

• Pueden ser tanto proyectos internos como de cliente final.

• En el mundo digital, este ritmo de lanzamiento de nuevos productos y servicios es si cabe más rápido.

Introducción

01

7

Landing Pages sin códigoimanolteran.com

• Dependiendo del proyecto en cuestión, el simple hecho de tener una versión usable, puede llevar meses y un alto coste económico.

• La idea es que debemos ser capaces de tener esta versión usable lo antes posible y al menor coste posible.

• Debemos explorar caminos alternativos a los tradicionales en el proceso de desarrollo de productos o servicios digitales.

Introducción

01

8

Landing Pages sin códigoimanolteran.com

En la mercadotecnia en internet, se denomina página de aterrizaje a una página web a la que una persona llega tras pulsar en el enlace o botón en una guía, un portal o algún banner o anuncio de texto situado en otra página web, aplicación, red social, E-mail o portal de internet.

WIKIPEDIA

Landing Pages sin códigoimanolteran.com

• Una de las necesidades principales a la hora de lanzar cualquier proyecto es crear una landing page.

• Nos sirve para:

• Probar respuesta del mercado.

• Captar leads.

• Promocionar acciones concretas.

• Vender producto o servicio

Introducción

01

10

Landing Pages sin códigoimanolteran.com

• Nos sirve para:

• Conseguir que contacten con nosotros.

• Venta de afiliados.

• Conseguir suscriptores.

• Visualizaciones de contenido audiovisual.

Introducción

01

11

Landing Pages sin códigoimanolteran.com

• Una landing page puede ser accesible de diferentes formas:

• Dentro de nuestra página web

• Como una web independiente.

Introducción

01

12

Landing Pages sin códigoimanolteran.com

• Titulares llamativos.

• Mensaje claro.

• Beneficios a obtener.

• Minimizar vías de escape.

• Guiar al usuario hacia el objetivo.

Introducción

01

13

CARACTERÍSTICAS PRINCIPALES

Landing Pages sin códigoimanolteran.com

• Objetivo debe ser único.

• Formularios lo más cortos posibles.

• Testimonios.

Introducción

01

14

CARACTERÍSTICAS PRINCIPALES

Landing Pages sin códigoimanolteran.com

• Herramientas web o de escritorio que permiten desarrollar aplicaciones software sin tocar una sola línea de código.

• Con ellas, podemos desarrollar software para uso profesional.

• También son muy útiles para crear MVPs y validar/descartar ideas.

Introducción

01

15

NO-CODE

Landing Pages sin códigoimanolteran.com

• Desarrollo rápido.

• Lo haces tú mismo.

• Ahorro de tiempo.

• Ahorro económico.

• Validar ideas.

• Control sobre el proceso.

Introducción

01

16

VENTAJAS DEL NO-CODE

Landing Pages sin códigoimanolteran.com

• Dependencia de las herramientas.

• Efecto “Lock-in”

• Límites a la hora de personalizar.

• Límites de integración con otros servicios.

• Falta de control.

Introducción

01

17

INCONVENIENTES DEL NO-CODE

imanolteran.com

02 Landing pagesCon herramientas de email marketing

Landing Pages sin código

Landing Pages sin códigoimanolteran.com

• Una de las opciones para crear landing pages de forma sencilla, sin código de programación, es utilizar herramientas de email marketing.

• De un tiempo a esta parte, herramientas con las que estamos muy familiarizados, como Mailchimp, incluyen esta opción.

• Muy orientado a conseguir leads en nuestra web.

• Muy sencillas de utilizar, interfaz similar a la de crear una campaña de email marketing.

Email m

arketing

02

19

Landing Pages sin códigoimanolteran.com

• Mailchimp

• Mailerlite 🥇

• ConvertKit

• Acumbamail

Email m

arketing

02

20

HERRAMIENTAS DE EMAIL MARKETING

Landing Pages sin códigoimanolteran.com

• Pagos mediante Square.

• Ofrecer descargas para nuevos suscriptores.

• Dominio de Mailchimp o propio.

• ____.mailchimpsites.com

• Varias landings en un mismo dominio (subdominios).

• Análisis de visitas.

Email m

arketing

02

21

MAILCHIMP

Landing Pages sin códigoimanolteran.com

• Sistema de plantillas.

• Crear landing desde app móvil.

• Posibilidad de crear una web completa.

• No permite incrustar HTML

• Gratuito.

Email m

arketing

02

22

MAILCHIMP

Landing Pages sin códigoimanolteran.com

• Editamos audiencia a la que queremos dirigir la landing.

• Elegimos nombre para nuestra web.

• Añadimos páginas.

• Configuramos navegación.

• Editamos estilos.

• Preview en Desktop y Mobile.

• Publicar.

Email m

arketing

02

23

MAILCHIMP

Landing Pages sin códigoimanolteran.com

• Tenemos 3 opciones en el menú:

• Páginas.

• Estilos.

• Banner de cookies.

Email m

arketing

02

24

MAILCHIMP

Landing Pages sin códigoimanolteran.com

• Componemos la página mediante secciones.

• Podemos mover o eliminar secciones.

• Añadir secciones

• Distintos tipos.

• Dentro de cada tipo, varias opciones.

• Acceso a fotos de stock de Unsplash.

Email m

arketing

02

25

MAILCHIMP > PÁGINAS

Landing Pages sin códigoimanolteran.com

• Paleta de colores.

• Theme.

Email m

arketing

02

26

MAILCHIMP > ESTILOS

Landing Pages sin códigoimanolteran.com

• Una vez publicado, podemos añadir un popup, para conseguir que los visitante se suscriban a nuestro newsletter.

• Puedes elegir:

• Estilo.

• Opacidad.

• Posicionamiento.

• Tiempo para que aparezca.

Email m

arketing

02

27

MAILCHIMP

Landing Pages sin códigoimanolteran.com

• También es posible extender las métricas de la página, conectándola con:

• Mailchimp.

• Facebook Pixel.

• Google Analytics.

Email m

arketing

02

28

MAILCHIMP

Landing Pages sin códigoimanolteran.com

• Landing pages a partir de plantillas o desde cero.

• Editar “drag and drop”.

• Diferentes tipos de elementos:

• Testimonios.

• Formularios de suscripción.

• Vídeos.

• Cuenta atrás.

Email m

arketing

02

29

MAILERLITE 🥇

Landing Pages sin códigoimanolteran.com

• Encuestas.

• Venta y suscripciones mediante Stripe. (Sites Pro)

• Test A/B.

• Guardar plantillas.

• Dominio propio.

• SSL.

Email m

arketing

02

30

MAILERLITE 🥇

Landing Pages sin códigoimanolteran.com

• Cumple con RGPD.

• Tracking con Analytics y Facebook.

• Añadir código en Header y footer.

• Responsive design.

• Posibilidad de crear webs completas.

• Popups

• Gratuito.

Email m

arketing

02

31

MAILERLITE 🥇

Landing Pages sin códigoimanolteran.com

• Sites Pro

• Pago mediante Stripe.

• Landing pages ilimitadas.

• Visualización de interacción de usuarios.

• Tests A/B.

• Eliminar logo Mailerlite.

• Favicon personalizado.

Email m

arketing

02

32

MAILERLITE 🥇

Landing Pages sin códigoimanolteran.com

• Nombre de la página.

• Seleccionar audiencia.

• Seleccionar template.

• Personalizar bloques.

• Ajustes.

• Contenido.

Email m

arketing

02

33

MAILERLITE 🥇

Landing Pages sin códigoimanolteran.com

• Reorganizar bloques.

• Eliminar y componer desde cero.

• Filtro por tipos de bloque.

• Dominio:

• subscribepage.com/___

• Dominio propio

Email m

arketing

02

34

MAILERLITE 🥇

Landing Pages sin códigoimanolteran.com

• Mostrar u ocultar header y footer.

• Header

• Diferentes layouts.

• Páginas con contenido protegido.

• Popups.

• A partir de plantillas.

Email m

arketing

02

35

MAILERLITE 🥇

Landing Pages sin códigoimanolteran.com

• Publicar.

• Configurar SEO.

• Configurar textos compartir en redes sociales.

• Código Analytics o Facebook.

• Código incrustar header o footer.

• Automatizaciones para suscripciones.

Email m

arketing

02

36

MAILERLITE 🥇

imanolteran.com

03 HerramientasNo-code

Landing Pages sin código

Landing Pages sin códigoimanolteran.com

• También existen herramientas visuales 100% pensadas para crear landing pages.

• En este caso, no dependen de sistemas de email marketing.

• También pueden integrarse con estos sistemas.

• Se trata de herramientas no-code.

• Hay diferentes aproximaciones.

No-code

03

38

Landing Pages sin códigoimanolteran.com

• Carrd 🥇

• Umso 🥈

• Landingi

• Weblium

• Launchaco

No-code

03

39

HERRAMIENTAS NO-CODE

Landing Pages sin códigoimanolteran.com

• Sistema de plantillas.

• Landings responsive.

• Dominio carrd.co

• Dominios personalizados.

• Formularios de contacto.

• Formulario de registro a lista de correo.

No-code

03

40

CARRD 🥇

Landing Pages sin códigoimanolteran.com

• Pago mediante Stripe, Gumroad y Paypal.

• Inscrustar HTML.

• Tracking mediante Analytics.

• Posibilidad de quitar marca Carrd.

• Gratuito / $9-$453 al año.

No-code

03

41

CARRD 🥇

Landing Pages sin códigoimanolteran.com

• Generación de landings de forma automática.

• Indicamos paso a paso las funcionalidades:

• Tipo de producto/servicio vamos a promocionar.

• Tipo de secciones de contenido.

• Tipo de imágenes que queremos mostrar.

• Estilo.

No-code

03

42

UMSO

Landing Pages sin códigoimanolteran.com

• Una vez seguidos los pasos del Configurador, pasamos a trabajar en el Editor.

• Introducimos contenido, estructura se ajusta de forma automática.

• Previsualización en tiempo real.

• Estilos globales.

• Colores, fuentes, border…

No-code

03

43

UMSO

Landing Pages sin códigoimanolteran.com

• Una vez seguidos los pasos del Configurador, pasamos a trabajar en el Editor.

• Librería de elementos.

• Ilustraciones, iconos y mockups.

• Autoguardado.

• Restaurar cambios.

• Soporte para markdown.

No-code

03

44

UMSO

Landing Pages sin códigoimanolteran.com

• Posibilidad de alojar la landing directamente en los servidores de la plataforma:

• SSL Let´s Encrypt.

• Compresión GZIP en servidor.

• Carga rápida.

No-code

03

45

UMSO

Landing Pages sin códigoimanolteran.com

• Otras caraterísticas:

• Funcionalidad de blog.

• Generar listas de correo dentro de la propia plataforma.

• Analítica propia.

No-code

03

46

UMSO

Landing Pages sin códigoimanolteran.com

• Integraciones con servicios externos:

• Zapier.

• Stripe.

• Mailchimp.

• Google Analytics.

• Facebook Pixel.

• …

No-code

03

47

UMSO

Landing Pages sin códigoimanolteran.com

• Integraciones con servicios externos:

• Zapier.

• Stripe.

• Mailchimp.

• Google Analytics.

• Facebook Pixel.

• …

No-code

03

48

UMSO

Landing Pages sin códigoimanolteran.com

• Diferentes planes de precios:

• Gratuito.

• $29-$99 al año.

No-code

03

49

UMSO

Landing Pages sin códigoimanolteran.com

• Sistema de plantillas.

• Editor Drag&Drop.

• Publicar desde la plataforma.

• Dominio propio.

• Incrustar en WordPress (plugin).

No-code

03

50

LANDINGI

Landing Pages sin códigoimanolteran.com

• Integración con servicios de terceros:

• Zapier.

• Mailchimp.

• Hubspot.

• Google Analytics.

No-code

03

51

LANDINGI

Landing Pages sin códigoimanolteran.com

• Tests A/B.

• Herramientas para conversión.

• Formularios.

• Página de agradecimiento.

• A partir de $29.

• 14 días de prueba.

No-code

03

52

LANDINGI

Landing Pages sin códigoimanolteran.com

• Sistema de plantillas.

• Diferentes tipos de bloques.

• Diseño responsive.

• Certificado SSL.

• Acceso a imágenes de stock.

No-code

03

53

WEBLIUM

Landing Pages sin códigoimanolteran.com

• Definir estilos a nivel global de la landing.

• Integraciones con servicios de terceros:

• Zapier.

• Telegram.

• Mailchimp.

• …

No-code

03

54

WEBLIUM

Landing Pages sin códigoimanolteran.com

• Analítica de datos:

• Google Analytics.

• Hotjar.

• Facebook Pixel.

• Fuentes personalizadas.

• Gratuito / $8,25 al mes / $196 pago único.

No-code

03

55

WEBLIUM

Landing Pages sin códigoimanolteran.com

• Creación de landing page de forma automática.

• Selección tipo de proyecto.

• Selección de paleta de colores.

• Seleccionar tipo de fuente.

• Rellenar opciones para sección principal de la landing.

• Call to action principal

No-code

03

56

LAUNCHACO

Landing Pages sin códigoimanolteran.com

• A partir de ahí, podemos añadir elementos adicionales:

• Tablas de precio.

• Testimonios.

• FAQs.

• CTA.

• …

No-code

03

57

LAUNCHACO

Landing Pages sin códigoimanolteran.com

• Sitios ilimitados.

• Integración con Analytics.

• Let´s Encrypt SSL.

• Gratuito - $49.99/año

No-code

03

58

LAUNCHACO

Landing Pages sin códigoimanolteran.com

INFORMACIÓN COMPLEMENTARIACREA PROTOTIPOS DE APPS TOTALMENTE FUNCIONALES SIN CONOCIMIENTOS DE PROGRAMACIÓN CREA UNA LANDING PAGE PARA PROMOCIONAR TU PRODUCTO O SERVICIO EL FENÓMENO “NO-CODE” HA VENIDO PARA QUEDARSE APPGYVER. DESARROLLO DE APPS MULTIPLATAFORMA PROFESIONALES SIN CÓDIGO

Landing Pages sin códigoimanolteran.com

PRÓXIMOS CURSOSSTRIPE WEBFLOW ZOOM NOTION CUSTOM POST TYPES EN WORDPRESS TELETRABAJO Y TELEFORMACIÓN

imanolteran.com Landing Pages sin código

hola@imanolteran.com

Eskerrik asko