Primeros pasos con el editor de Landing Pages

•  Sección de elementos: son los diferentes bloques que se pueden añadir a la landing page.
•  Contenido: es una zona de visualización y trabajo donde podemos añadir contenido a la landing page.
•  Opciones: la columna derecha mostrará las diferentes opciones del elemento seleccionado o de la página en su conjunto si no hay ningún elemento seleccionado.

Ahora trabajaremos con estas opciones.

Paso 3: Seleccionar el color de fondo

Una de las primeras opciones que podemos usar es seleccionar el color de fondo de toda la página:

El color de fondo de tu landing page se puede elegir en la columna derecha, en la sección Documento y luego en la opción Color de fondo. Esta selección cambiará el color de fondo de la landing page.

Paso 4: Seleccionar el color de fondo del contenedor principal

Ahora vamos a ver otra de las herramientas principales del editor, la Vista de lista:

La Vista de lista se muestra al hacer clic en uno de los iconos de la zona superior izquierda, el cuarto icono. Al hacer clic en él, se mostrará una lista de todos los elementos de la landing page organizados de forma jerárquica.

Esto nos permitirá mostrar las opciones de bloque de cada uno de los elementos (en la pestaña Bloque del lado derecho) e incluso moverlos para que se muestren antes o después de ellos en el editor. Agruparlos entre sí, etc.

Una vez seleccionado el elemento, veremos cómo la columna derecha muestra las opciones de ese bloque en particular. Por ejemplo, podemos seleccionar un color diferente para el texto (Color) o cambiar el ancho (Dimensiones).

La estructura predeterminada que se muestra una vez creada la landing page es la siguiente

• Una columna principal más grande
• Con otra columna interior más pequeña

Esto se hace para que la columna interior permanezca siempre centrada en la pantalla. Puedes ver dos valores en la columna derecha:

•  Contenido: Sería el ancho del contenido.
•  Ancho: Es el ancho máximo de la columna.

De esta forma, al definir un ancho de contenido ligeramente menor, tendríamos un margen entre el borde del contenedor y el propio contenido.

En la imagen de arriba, podemos ver cómo se han configurado algunos parámetros y el contenido básico, con un ancho ligeramente mayor que el predeterminado.

Paso 5: arrastrar elementos

Ahora veamos cómo añadir nuevos elementos a la zona de trabajo:

Lo primero que hay que hacer es seleccionar el elemento, en este caso un separador, y arrastrarlo con el ratón hasta el lugar deseado.

A medida que mueves el ratón por la zona de contenido, verás una barra azul que indica la ubicación prevista para el contenido.

Paso 6: Estructurar el contenido

Una de las formas más sencillas de estructurar la landing page es usar columnas:

Una opción útil es la de tres columnas, ya que nos permitirá usar la columna central como separador de contenido:

Después de añadir las columnas, podemos ir a la Vista de lista y seleccionar la columna central; a la derecha, en la columna de bloque, tendremos el campo Ancho vacío. Pero si aquí definimos un Ancho de 30px, esta columna se reducirá y podrá actuar como separador

A continuación, haz clic en el símbolo más para añadir contenido a las columnas.

La selección te permite elegir entre los bloques disponibles, en este caso, por ejemplo, un párrafo.

En el ejemplo, también hemos añadido un elemento "Lista" debajo del párrafo. Puedes seguir añadiendo elementos a esta columna.

Ahora añadiremos un formulario a la tercera columna seleccionando esa columna, haciendo clic en "+" y seleccionando Formulario de registro:

Como comentamos antes, podremos elegir entre los formularios existentes en la cuenta desde el menú desplegable que nos permite seleccionar un formulario de los que ya hemos creado (Elegir un formulario):

Y se añadirá de la siguiente manera:

IMPORTANTE: No puedes cambiar el color de fondo ni ningún otro aspecto visual de tu formulario de registro al crear una landing page. Esto debe hacerse al crear el formulario de registro, algo que ya hiciste antes de crear la landing page. Cualquier cambio que realices en el formulario de registro se reflejará en la landing page.

Paso 7: añadir imágenes

Primero, añadiremos dos columnas más y, una vez creadas, podemos hacer clic en sus respectivos signos "+" para añadirles contenido. Ahora añadamos una imagen con texto al lado.

Usaremos la columna izquierda para añadir una imagen y la columna derecha para añadir un párrafo.

Puedes usar una imagen que ya se haya subido (Biblioteca de medios) o subir un archivo desde tu ordenador (Subir).

Cuando haces clic en la imagen, aparecen dos círculos que te permiten arrastrarla para darle el tamaño que quieras.

A la derecha, en las opciones de bloque, también puedes cambiar el ancho o establecer un atributo de texto alternativo.

Llegados a este punto, añadiremos texto en la columna derecha haciendo clic en "+" y seleccionando Párrafo; después, podemos añadir el texto deseado.

Paso 8: Añadir un botón

Por último, añadiremos un botón justo debajo de las dos columnas. Para ello, haz clic en Botones (en la opción Diseño) y el botón aparecerá en negro justo debajo, con el texto Añade texto...

Haz clic en Añade texto y justo arriba verás las opciones para modificar el botón, de izquierda a derecha: Seleccionar botones, Botón, Arrastrar, Cambiar la justificación del elemento, Cambiar la alineación vertical, Alinear, Enlace, Negrita, Cursiva, Más y Opciones.

Puedes hacer los cambios que quieras. En nuestro ejemplo, lo hemos alineado al centro, hemos cambiado el texto a Pulsa para comprar, hemos puesto el texto en negro y el fondo en blanco.

Ahora solo tienes que hacer clic en Guardar y tu landing page estará lista.