Personalizar landing pages para distintos dispositivos

Usuarios autorizados: Administradores y editores.

La misión: Personaliza el diseño responsive de tus landing pages con estas 3 acciones.

En Escala es posible crear landing pages personalizadas de acuerdo a cada dispositivo. A continuación, te mostramos cómo configurar las variaciones del diseño de una landing para móvil, tablet y escritorio.

Abre tu landing en el editor

1. Al crear tus landing pages en Escala, puedes elegir cómo se verá tu página de acuerdo al dispositivo desde donde ingresen tus leads o clientes. Para ello, lo primero que debes hacer es dirigirte a Landing Pages y selecciona + Crear para elegir una plantilla prediseñada.
2. Una vez elegida, haz clic en Editar para comenzar a hacer cambios en el diseño de tu landing.

Personaliza los elementos de tu landing page

1. En Escala, es posible ajustar el tamaño y el color de los textos, botones, íconos, videos y demás elementos de una landing page para cada dispositivo. Las modificaciones se realizan de forma individual, para ello haz clic sobre la pantalla del dispositivo que quieras cambiar. Las opciones se ubican en la barra superior del editor.

Importante: Ten en cuenta que los ajustes que hagas para la pantalla de escritorio, se aplicarán a la pantalla de tablets y móviles automáticamente. La única excepción a esta regla es que previamente hayas personalizado cualquiera de estos dos dispositivos. En ese caso, aunque personalices la dimensión y el color de los elementos en la pantalla de escritorio, los otros no se verán alterados.

2. Al hacer clic sobre el ícono de la pantalla que quieres editar, verás cómo se visualizarán los elementos de tu landing desde el dispositivo seleccionado. En este ejemplo, elegimos la versión de la landing page visitada desde el computador o escritorio.
3. Selecciona el elemento que quieras editar. En este caso, elegimos un cuadro de texto para modificar y edita el tamaño del texto y el color.

4. Luego de hacer el ajuste, haz clic en el ícono del siguiente dispositivo en el que quieras personalizar el mismo u otro elemento para esa pantalla. Repite el procedimiento haciendo los ajustes de diseño que consideres pertinentes.

Nota: En Escala puedes personalizar el diseño de los elementos para las pantallas de los distintos dispositivos. Sin embargo, debes tener en cuenta que si eliminas algún elemento de una de las vistas, automáticamente se eliminará en las demás pantallas.

5. Si deseas que un elemento no se vea en determinado dispositivo, debes ocultarlo y agregar lo que quieres que se visualice en su lugar si así lo deseas. Para ello, debes seleccionar lo que desees ocultar y, seguidamente, hacer clic en el ícono de la tuerca para indicar en cuáles pantallas lo quieres mostrar y en cuáles no.

Importante: Si necesitas conocer con más detalles sobre cómo ocultar elementos en determinadas vistas de tu landing page, haz clic aquí.

Verifica los cambios realizados

1. Tras realizar todos los cambios, haz clic en Vista previa para verificar que las modificaciones se realizaron correctamente.

2. El generador de la vista previa cargará y te mostrará las tres previsualizaciones desde la computadora, la tablet y el móvil. Así podrás verificar si todo se personalizó correctamente.

Nota: Si lo deseas, puedes hacer clic en los íconos individuales de tus dispositivos para agrandar la previsualización en tu pantalla.

3. Para salir, haz clic en Volver al editor, ubicado en la esquina superior derecha de tu pantalla y podrás seguir editando tu landing hasta finalizar.

Importante: Ten en cuenta que pare verificar los cambios, debes ingresar a Vista previa. Si haces clic directamente en los íconos de computador, tablet o móvil, ubicados en la barra superior del editor, no visualizarás las modificaciones aplicadas.

¿Estás listo para completar la misión en Escala?

Completar ahora