Cómo agregar y ordenar elementos de tu landing page

Cómo agregar y ordenar elementos de tu landing page

Usuarios autorizados: Administradores y editores.
La misión: Agrega y ordena elementos de tus landing pages con estas 4 acciones.

1. Agrega elementos

1.1 Para agregar elementos a tus landing pages, haz clic sostenido en el elemento que desees agregar y arrástralo hasta la sección de tu landing donde prefieras agregarlo.
1.2 En el caso de que en el menú ubicado a la izquierda de la pantalla no veas la opción Elementos, haz clic en la "x" ubicada en el panel izquierdo y automáticamente, verás el menú principal de tu editor de landings.

2. Activa la visualización de bordes

2.1 El editor de landing pages de Escala cuenta con la opción de activar una visualización de bordes de todos los elementos presentes en cada sección de tu landing page. Esta visualización te permite asegurar que la distribución de los elementos sea exactamente como la deseas.
2.2 Para activar la visualización de bordes, dirígete hacia la parte superior del editor de tu landing page y haz clic en el botón que indica Bordes.
2.3 Seguidamente, podrás visualizar el espacio que ocupa cada elemento, bien sea una columna, una imagen, un título, un párrafo o un botón.


3. Ajusta margen y padding

3.1 En caso de que haya alguna irregularidad de simetría entre distintos elementos, selecciona el elemento o columna que desees alinear junto con los demás y haz clic en Diseño.
3.2 Luego, despliega la pestaña que indica Espacio y podrás ajustar tanto el margen (espacio exterior) como el padding (espacio interior) del elemento o columna y así lograr que se vea armónico junto con el resto de la sección de tu landing page.


 Nota: Si a simple vista sigues teniendo dificultades para alinear los elementos, puedes seleccionar un elemento distinto al que deseas corregir, hacer clic en Diseño > Espacio y conocer cuál es el número que corresponde al margen y padding de ese elemento. Una vez lo hayas detallado, podrás seleccionar cualquier otro elemento, colocar el mismo número tanto en margen como en padding y así asegurar que tengan proporciones iguales para que luzcan exactamente de la misma manera.

4. Optimiza el diseño en distintos dispositivos

4.1 Una vez hayas ajustado los elementos según tu preferencia, puedes proceder a optimizar el diseño de la misma manera en distintos dispositivos. Para esto, haz clic en el ícono de tablet o teléfono ubicados en la barra superior de la landing page.
 Nota: Ten en cuenta que al explorar las distintas visualizaciones, la proporción de la pantalla variará según el tipo de dispositivo seleccionado, por lo que puede que algunos de los elementos de tu landing page cambien de lugar y sea necesario realizar ajustes nuevamente.
4.2 Para hacer cualquier ajuste, sigue el mismo procedimiento realizado anteriormente, es decir, selecciona el elemento que deseas modificar, haz clic en Diseño > Espacio y procede a ajustar tanto el margen como el padding según tu preferencia.
4.3 Una vez hayas terminado de hacer los cambios en los distintos tipos de dispositivos, haz clic en el botón que indica "Guardar" y tendrás tu landing page optimizada.


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


    • Related Articles

    • Cómo agregar un contador regresivo a tu landing page

      Usuarios autorizados: Administradores y editores. La misión: Integra un contador regresivo a tu landing page con estas 3 acciones. 1. Accede al editor de landing pages 1.1 En Escala, puedes agregar un contador regresivo para promocionar tus productos ...
    • Cómo separar elementos en tu landing page

      Usuarios autorizados: Administradores y editores. La misión: Ajusta el espacio entre elementos con estas 3 acciones. 1. Inserta separadores 1.1 Para editar el espacio que hay entre los elementos de tu landing page, existen tres maneras de hacerlo. La ...
    • Cómo editar las secciones de tu landing page

      Usuarios autorizados: Administradores y editores. La misión: Edita las secciones de tu página con estas 4 acciones. 1. Detalla el contenido de las secciones  1.1 Cada sección de tu landing page contiene filas, columnas y, dentro de esas columnas, ...
    • Cómo editar tu landing page responsive

      Usuarios autorizados: Administradores y editores. La misión: Edita la vista por dispositivos de tu landing page responsive con estas 3 acciones. 1. Cambia tu plantilla a visualización mobile 1.1 Primero, haz clic en  los íconos de dispositivos que se ...
    • Cómo editar los estilos globales de tu landing page

      Usuarios autorizados: Administradores y editores. La misión: Personaliza los estilos globales de tu landing page con estas 4 acciones. 1. Personaliza el estilo y diseño predeterminado de tu landing page 1.1 Para personalizar los estilos personales de ...