Últimas noticias de SeedProd

Tutoriales, consejos y recursos de WordPress para hacer crecer tu negocio

Cómo hacer una página de aterrizaje móvil + buenas prácticas

Cómo crear una página de aterrizaje adaptable a dispositivos móviles en WordPress 

Escrito por: imagen de autor Stacey Corrin
imagen de autor Stacey Corrin
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.
     Revisado por: John Turner
imagen del revisor John Turner
John Turner es el cofundador de SeedProd. Cuenta con más de 20 años de experiencia empresarial y de desarrollo y sus plugins se han descargado más de 25 millones de veces.

¿Quieres saber cómo hacer una página de aterrizaje móvil para tu sitio web WordPress?

A todos nos ha pasado alguna vez: intentar navegar por un sitio web en el teléfono y que la mitad de la página no aparezca en el lateral de la pantalla. Lo mismo ocurre con los enlaces que son tan pequeños que apenas se pueden tocar. ¿Esas páginas? Está claro que no están optimizadas para dispositivos móviles. Cambiemos eso.

En esta guía, le mostraré cómo crear una página de aterrizaje adaptada a dispositivos móviles que sea fácil de usar y que genere grandes conversiones.

Why Make Your Landing Page Mobile-Friendly?

You need to make your landing page mobile-friendly because over half of all website traffic comes from smartphones. Research suggests that 47% of consumers expect sites to load in 2 seconds or less, and 40% would abandon those that take more than 3 seconds.

KissMetrics page abandonment statistics

Plus, Google prioritizes mobile-friendly websites in search results. So, if your landing page is mobile-friendly, you can reach more potential customers and keep them on your page long enough to take action.

Cómo hacer una página de destino móvil en WordPress

Existen dos vías principales para crear páginas de destino adaptadas a dispositivos móviles en WordPress:

  1. Utilizando un plugin constructor de páginas de aterrizaje como SeedProd que genera diseños responsivos.
  2. Crea tu propio diseño adaptable desde cero utilizando HTML, CSS y los principios de mobile-first.

En esta guía trataremos el método más sencillo, el del plugin SeedProd.

SeedProd Arrastrar y soltar WordPress constructor de sitios web

Con SeedProd, puede crear cualquier página de destino en WordPress sin escribir código. Viene con un constructor de arrastrar y soltar fácil de usar y cientos de plantillas de páginas de destino sensibles que hacen que la construcción de una página móvil sea pan comido.

SeedProd se integra perfectamente con los mejores servicios de email marketing para hacer crecer tu lista de correo electrónico. También puede conectarse a miles de aplicaciones de terceros a través de Zapier.

Lo mejor de todo, SeedProd es la velocidad del rayo. A diferencia de otros constructores de páginas de WordPress, SeedProd está optimizado para la velocidad, por lo que no ralentizará los tiempos de carga de su página. También funciona con cualquier tema de WordPress.

Siga los siguientes pasos para aprender a hacer una página de aterrizaje móvil utilizando SeedProd.

Paso 1. Instalar SeedProd Instalar SeedProd Landing Page Builder Plugin

En primer lugar, tendrá que instalar y activar el plugin Se edProd en su sitio web WordPress. Si necesitas ayuda para hacerlo, puedes consultar esta guía sobre la instalación de SeedProd Pro.

Nota: Existe una versión gratuita de SeedProd que te permite crear una página de aterrizaje gratis. Para esta guía, usaré la versión pro porque ofrece más opciones de plantillas y bloques.

Después de la instalación, aparecerá una pantalla pidiéndole que introduzca los detalles de su clave de licencia. Puede encontrar su clave de licencia en el panel de control de su cuenta SeedProd.

Activar el plugin de modo de mantenimiento seedprod

Pegue su clave de licencia en el campo correspondiente y haga clic en el botón Verificar clave.

Paso 2. Elija una plantilla móvil

Una vez que haya introducido su clave de licencia, desplácese hacia abajo en la página hasta que vea el botón "Crear su primera página".

Crea tu primera página de seedprod

Al hacer clic en el botón, accederá al panel de control de la página de destino y hará clic en el botón Añadir nueva página de destino.

Añadir una nueva página de destino en WordPress

Aquí verás una biblioteca de plantillas de páginas de destino diseñadas para responder a dispositivos móviles. Puedes filtrar las plantillas por tipo haciendo clic en cualquiera de los filtros de la parte superior de la página.

plantillas de páginas de destino seedprod

Cuando elijas una plantilla, presta mucha atención a cómo se adaptarán el diseño y los elementos a las pantallas más pequeñas. Evita plantillas con diseños estrechos, texto pequeño o demasiadas columnas o secciones que no se vean bien en dispositivos móviles.

Para disfrutar de la mejor experiencia móvil, busque plantillas con un diseño sencillo de una sola columna, botones grandes y táctiles y un amplio espacio entre los elementos.

También es posible editar cualquier plantilla para adaptarla a las necesidades de tu negocio, así que elige cualquier plantilla que se ajuste a lo que estás buscando. Para mi ejemplo, elegí la plantilla Mobile App Sales Page.

Plantilla de página de ventas de aplicaciones móviles

Basta con pasar el ratón por encima de la miniatura de la plantilla y hacer clic en el icono de la marca para elegirla.

Aparecerá una ventana emergente que te pedirá que introduzcas el nombre y la URL de tu página. No te preocupes, puedes cambiarlo más tarde en la configuración de la página.

asigne un nombre y una url a su página de aterrizaje móvil

Ahora haga clic en el botón Guardar y empezar a editar la página para iniciar el constructor de arrastrar y soltar.

Paso 3. Personalice su página de destino para móviles

Al iniciar su página, se cargará una interfaz visual de arrastrar y soltar en la que podrá personalizar el contenido y el diseño de la plantilla.

cómo hacer una página de aterrizaje móvil en WordPress usando SeedProd

A la izquierda están los bloques de la página de destino para añadir varios elementos como imágenes, texto, botones y más. El panel de previsualización de la derecha muestra el aspecto de la página en tiempo real a medida que se construye.

Bloques de la página de aterrizaje de SeedProd

Al personalizar para móviles, hay varias áreas clave en las que centrarse:

Menús para móviles

SeedProd le permite añadir menús de navegación adaptados a dispositivos móviles, como menús hamburguesa que se contraen para ahorrar espacio. Puede personalizar el estilo, las animaciones y el comportamiento del menú.

Configuración del menú móvil de SeedProd

Objetivos táctiles

Asegúrese de que todos los elementos que se puedan tocar, como botones y enlaces, tengan áreas de clic/toque lo suficientemente grandes para que se activen fácilmente en pantallas móviles (al menos 48px).

Opciones móviles y de espaciado para los objetivos táctiles

Los bloques de SeedProd le permiten ajustar el relleno y el espaciado según sea necesario.

Optimizar los medios de comunicación

Las imágenes y vídeos de gran tamaño pueden ralentizar los tiempos de carga en móviles. Utiliza herramientas de carga lenta y compresión para optimizar los activos multimedia.

Compresión de imágenes

Jerarquía visual

Utilice los bloques de diseño de SeedProd, como secciones, columnas y espaciado, para establecer un flujo de contenido lógico y una jerarquía que sea fácil de escanear en pantallas pequeñas.

Navegación móvil

La opción Layout Navigation es una forma excelente de visualizar la fluidez de su página de destino móvil.

Además de personalizar elementos individuales, SeedProd también le permite añadir secciones pre-construidas optimizadas para móviles como cabeceras/pies de página adhesivos, áreas de preguntas frecuentes expandibles, contenido con pestañas y mucho más.

Secciones de la página de destino

Por ejemplo, añadir una sección de preguntas frecuentes es una forma excelente de ofrecer a los usuarios respuestas a preguntas habituales. Los desplegables de respuestas se expanden y contraen con un solo clic, lo que ahorra espacio en la página y mejora la experiencia del usuario en navegadores móviles.

añada una sección de preguntas frecuentes a su página de aterrizaje móvil

Además, las secciones de preguntas frecuentes pueden ayudar a reducir el abandono de carritos y aumentar sus tasas de conversión.

Consejo de experto

Considere la posibilidad de añadir un botón de llamada a su página para que los usuarios que naveguen desde un teléfono móvil puedan simplemente pulsar un botón para llamarle de inmediato.

Continúa añadiendo contenido a tu página hasta que estés satisfecho con su aspecto. A continuación, haz clic en el botón verde Guardar de la esquina superior derecha para guardar la configuración.

Paso 4. Configure sus ajustes

Otra cosa que me encanta de SeedProd es su capacidad para integrarse con varias herramientas y aplicaciones de automatización de terceros. Puedes conectar tu página de aterrizaje a Google Analytics para monitorizar tu rendimiento e incluso vincularla a tu servicio de email marketing para hacer crecer tu lista de correo electrónico.

Conecte su servicio de marketing por correo electrónico

Para conectarte a una aplicación o servicio, haz clic en la pestaña Conectar de la parte superior de tu página. Allí verás los servicios con los que puedes integrarte.

Conéctese a un servicio de marketing por correo electrónico con SeedProd

Por ejemplo, para enlazar con su lista de correo electrónico de Constant Contact, es tan sencillo como hacer clic en la imagen de Constant Contact y seguir las instrucciones.

Conectar la página de destino con el contacto constante

Cuando alguien se suscribe a través de su página de destino, puede verlos en su panel de SeedProd navegando a SeedProd " Suscriptores, independientemente de si integra un servicio de email marketing.

Resumen de suscriptores de la página de aterrizaje de SeedProd

Esta es una solución excelente si estás empezando y no quieres comprometerte con un proveedor específico todavía, ya que te permite obtener datos visuales precisos sobre el recuento de suscriptores de páginas y nuevos suscriptores a lo largo del tiempo.

Configurar los ajustes de la página

Ahora, mira la configuración de tu página de destino haciendo clic en la pestaña Configuración de la página. En los Ajustes generales, puedes cambiar el nombre y la URL de tu página, el estado de publicación y activar el Modo de aislamiento.

Configuración de la página de aterrizaje de SeedProd

El modo de aislamiento elimina cualquier código innecesario de la carga de su página para hacerla más rápida. Sólo carga la información necesaria para mostrar su página a los usuarios. Activar este modo debería ayudar a eliminar cualquier conflicto con temas o plugins de WordPress.

Las siguientes pestañas le permiten editar la configuración SEO y Analytics de su página de destino.

Configuración de análisis de la página de destino

A continuación, la pestaña Scripts le permite pegar scripts personalizados de encabezado, cuerpo y pie de página. Esto es útil para reorientar a los visitantes de la página con su píxel de seguimiento de Facebook, etc.

Step 5. Preview & Publish Your Mobile Landing Page

Antes de publicar su página de destino, asegúrese de que es apta para móviles. Si los elementos de la página no son compatibles con dispositivos móviles y no ofrecen una experiencia de usuario móvil excelente, la gente abandonará la página.

Puede comprobar cómo se ve su página de destino en dispositivos móviles con la opción Vista previa móvil.

previsualice su página de destino en móvil

Para empezar, busque el icono del teléfono móvil en la parte inferior de su página y haga clic en él para ver las versiones para móvil o tableta de su página.

Vista previa de la página de destino en dispositivos móviles

Como puedes ver, tu diseño ahora se muestra en una sola columna para pantallas móviles. Sin embargo, si hay algo que no se ve bien para móviles, puedes ajustarlo dentro de la vista previa de la página.

Por último, después de comprobar que su página de destino se ve muy bien en los dispositivos móviles, es el momento de ponerla en marcha.

Junto al botón verde Guardar, verás una flecha. Aquí, puedes hacer clic en la flecha para guardar tu página como plantilla para usarla más tarde o hacer clic en Publicar.

publique su página de aterrizaje móvil

Después de hacer clic en Publicar, verá una ventana que le indica que su página de destino ya está publicada.

su página de aterrizaje móvil ha sido publicada

Ahora, haga clic en el botón Ver página en directo para ver cómo queda.

Aquí está la versión final de una página que he creado en mi sitio web de prueba:

Ejemplo final de página de destino móvil

Ejemplos e inspiración de páginas de destino para móviles

Echa un vistazo a estos mejores ejemplos de páginas de aterrizaje para móviles que he encontrado si necesitas algo de inspiración antes de diseñar tu página.

1. Bugaboo

Ejemplo de página de aterrizaje móvil de Bugaboo

El primero es un ejemplo de página móvil de Bugaboo, una tienda online de productos para bebés y niños. Me gusta cómo el diseño de su página de aterrizaje tiene un diseño de una sola columna y es limpio, moderno y fácil de navegar desde cualquier dispositivo.

2. Etsy

Como puedes ver, Etsy oculta el menú de navegación de la página principal con un menú para móviles. Las imágenes son nítidas y los botones lo bastante grandes para que los compradores puedan pulsarlos.

Ejemplo de página de destino móvil de Etsy

Además, el cuadro de búsqueda ocupa toda la anchura de la página para móviles, lo que facilita su uso en pantallas pequeñas.

3. Holgura

Ejemplo de página de destino móvil de Slack

Me gusta especialmente la página de aterrizaje móvil de Slack porque la han adaptado al dispositivo del usuario. Como yo usaba un iPhone, personalizaron la página para la tienda de Apple.

Este enfoque es una forma excelente de dirigirse a públicos específicos. Y como la página se adapta a las necesidades de ese público, es más probable que conviertan.

4. Hélice cartografiada

Ejemplo de página de destino móvil de Maped Helix

Maped Helix tiene un diseño de página de aterrizaje móvil nítido que no deja nada al azar. Cuenta con una barra adhesiva en la parte superior de la página para animar a los usuarios a suscribirse y botones CTA claramente etiquetados que dirigen a los usuarios a secciones populares de su sitio.

Mejor aún, los colores de los botones CTA varían según su importancia, y el color más intenso indica en qué botón deben hacer clic primero los usuarios.

5. Evernote

Evernote simplifica las cosas con este ejemplo. La llamada a la acción es clara, procesable y la página se carga rapidísimo. Dado que la página prácticamente no tiene imágenes, es sorprendentemente llamativa.

Una página de aterrizaje móvil de sólo texto puede no ser la mejor solución para todo el mundo, pero son eficaces para las marcas adecuadas.

6. Espacio para la cabeza

Ejemplo de página de destino móvil de Headspace

La página de aterrizaje móvil de Headspace utiliza texto grande y legible combinado con amplios espacios en blanco para ofrecer una experiencia limpia y centrada que atrae tu atención hacia su principal llamada a la acción.

Preguntas frecuentes sobre las páginas de destino para móviles

¿Qué es una página de destino móvil?
Una página de aterrizaje móvil es una página web diseñada específicamente para dispositivos móviles. A diferencia de las páginas web normales, que a menudo contienen múltiples secciones y opciones de navegación, las páginas de destino para móviles se centran en un único objetivo. Puede tratarse de captar clientes potenciales, impulsar las ventas, promover las descargas de aplicaciones o cualquier otra acción específica que desee que realicen los visitantes.
¿Cuáles son los tipos de páginas de destino para móviles y cuál es su finalidad?
El objetivo principal de una página de aterrizaje móvil es convertir a los visitantes en clientes o clientes potenciales. Para conseguirlo, suelen diseñarse con un mínimo de distracciones, llamadas a la acción claras y una experiencia de usuario optimizada para pantallas pequeñas.

Existen varios tipos de páginas de aterrizaje para móviles, cada una con una finalidad específica:

Páginas de captación: Recopilan direcciones de correo electrónico u otra información de contacto a cambio de un imán de clientes potenciales, como un libro electrónico o un código de descuento.

Páginas de clics: Calientan a los clientes potenciales proporcionándoles información adicional sobre un producto o servicio antes de dirigirlos a una página de ventas.

Páginas de captación de clientes potenciales: Recogen clientes potenciales a través de formularios, a menudo junto con una actualización de contenidos o un registro en un seminario web.

Páginas de ventas: Venden un producto o servicio directamente, con un fuerte enfoque en los beneficios y características.
¿Por qué las páginas de destino móviles son esenciales para su negocio?
Según Statista, hay más de 6.930 millones de usuarios de smartphones en el mundo, y el 69% de las personas utilizan sus dispositivos móviles para buscar productos. Esto hace que las páginas de aterrizaje móviles sean esenciales para las empresas que quieren tener éxito en el actual panorama mobile-first.

He aquí por qué debe dar prioridad a las páginas de aterrizaje móviles:

Mejora de la experiencia del usuario: El diseño optimizado para móviles garantiza que los visitantes puedan navegar e interactuar fácilmente con su contenido, lo que conduce a una experiencia de usuario positiva.

Mayores tasas de conversión: Al centrarse en un único objetivo y minimizar las distracciones, las páginas de destino móviles pueden aumentar significativamente las tasas de conversión en comparación con las páginas web estándar.

Mejor SEO móvil: Los motores de búsqueda favorecen las páginas de destino adaptadas a móviles, mejorando su visibilidad en los resultados de búsqueda móvil.

Mayor credibilidad de la marca: Ofrecer una experiencia móvil fluida demuestra que su empresa es moderna y está atenta a las necesidades del cliente.

Al invertir en páginas de destino móviles, puede aprovechar los 6.930 millones de usuarios de teléfonos inteligentes en todo el mundo e impulsar un crecimiento significativo para su empresa.

A continuación, más consejos para móviles

Espero que esta guía le haya proporcionado los conocimientos y las mejores prácticas necesarias para crear páginas de destino de alta conversión y adaptadas a dispositivos móviles para su sitio web de WordPress.

Si adopta una mentalidad mobile-first, optimiza el rendimiento y aprovecha las técnicas de diseño responsivo, podrá asegurarse de que sus páginas de destino ofrezcan una experiencia de usuario fluida que impulse más clientes potenciales y ventas del público móvil, cada vez más numeroso.

Si le ha gustado este artículo, puede que le resulten útiles estos otros consejos de diseño adaptado a dispositivos móviles:

Gracias por leernos. Nos encantaría conocer tu opinión, así que no dudes en dejarnos un comentario con tus preguntas y comentarios.

También puede seguirnos en YouTube, X (antes Twitter) y Facebook para obtener más contenidos útiles para hacer crecer su negocio.

avatar de autor
Stacey Corrin Escritor
Stacey lleva más de 10 años escribiendo sobre WordPress y marketing digital, y mucho más tiempo sobre otros temas. Además, le fascinan el diseño web, la experiencia de usuario y el SEO.

Divulgación: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, es posible que ganemos una comisión. Sólo recomendamos productos que creemos que aportarán valor a nuestros lectores.