Primeros pasos con el editor de Landing Pages

En este tutorial vamos a ver los pasos más habituales para crear una sencilla landing page con formulario de registro.

Algo que has de considerar primero es que el formulario debe estar creado previamente en la sección Suscriptores>>Formularios de suscripción, pues serán esos formularios ya creados los que se inserten en las páginas de aterrizaje.

Paso 1: Definir la Landing page

Para ello has de pulsar en la opción Landing page del menú principal y seguidamente pulsar en el botón +Añadir.

Tras ello te aparecerá la ventana donde podrá seleccionar una de la plantillas que será la base de tu landing page, en nuestro caso usaremos la primera de ellas, una vacía que recibe el nombre de Blanco.

Selecciona una de ellas pulsando sobre Seleccionar plantilla y te aparecerá una ventana emergente donde has de elegir un nombre para identificar a la landing (Elija un nombre para su nueva landing page:) y pulsa en Guardar. Con ello ya tienes creada la base de tu landing page, ahora solo resta darle forma.

IMPORTANTE: Para guardar los cambios realizados, en cualquier momento puedes pulsar el el botón azúl llamado Guardar.

Paso 2: La pantalla principal

Ahora vamos a ver con detalle las opciones que tienes en la ventana principal nada mas crear la landing, ellas las podremos ver esta pantalla:

Está dividida en tres secciones principales, desde la izquierda:

Sección de elementos: son los diferentes bloques que se pueden ir añadiendo a la landing.
Contenido: ssto sería una visualización y zona de trabajo donde podemos ir agregando contenido a la landing.
Opciones: sa columna derecha mostrará las diferentes opciones del elemento seleccionado, o de la página en su conjunto si no hubiera un elemento seleccionado.

Ahora iremos trabajando con estas opciones.

Paso 3: Seleccionar el color de fondo

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

El color de fondo de la landing lo podremos elegir desde la columna derecha, sección Documento y luego eligiendo la opción Color de fondo. Esa selección hará que todo el fondo de la página sea del color elegido.

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 haciendo click en uno de los iconos de la zona superior izquierda, el cuarto icono. Al hacer click nos mostrará un listado de todos los elementos de la landing organizados de forma jerárquica.

Esto nos permitirá ir mostrando las opciones de bloque de cada uno de los elementos (desde la pestaña Bloque de la parte derecha), e incluso moverlos para que aparezcan antes o después en el editor. Agruparlos unos dentro de otros, etc.

Una vez seleccionado el elemento, veremos como la columna derecha, muestra las opciones para ese bloque concreto. Por ejemplo, podemos seleccionar el color del texto (Color), o modificar el ancho (Dimensiones).

La estructura por defecto que tenemos nada más crear la landing es:

Una columna principal más grande
Con otra columna interior menos ancha

Esto sirve para que la columna interior siempre permanezca centrada en la pantalla. Es posible ver en la columna derecha dos valores:

Contenido: Este sería el ancho del contenido.
Ancho: Este sería el ancho máximo de la columna.

De esta forma, estableciendo un ancho del contenido algo menor, tendríamos un margen entre el borde del contenedor y el propio contenido.

En la imagen superior podemos ver cómo se han establecido unos parámetros y contenido básico, con un ancho un poco mayor al que viene por defecto.

Paso 5: Arrastrar elementos

Ahora vamos a ver cómo agregar nuevos elementos a la Zona de trabajo:

Lo primero es seleccionar el elemento, un separador en este caso, y arrastrarlo con el ratón a la ubicación deseada.

Al mover el ratón por la zona de contenido, podremos ver una barra azul, indicando la ubicación prevista para el contenido.

Paso 6: Estructurando los contenidos

Una de las formas más sencillas de estructurar la landing es a través del uso de columnas:

Una opción útil es la de tres columnas, porque nos permitirá utilizar la columna del medio como separador de contenidos:

Tras agregar las columnas podemos ir a la Vista de lista y seleccionar la columna del medio, a la derecha en la columna de bloque tendremos el campo Ancho vacío. Pero si definimos aquí un Ancho de 30px esa columna se reducirá y podrá actuar como un separador.

Después solo es necesario hacer click en el símbolo más para darles contenido a las columnas.

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

En el ejemplo también hemos agregado un elemento “Lista” debajo del párrafo. Es posible continuar agregando elementos a esta columna.

Ahora agregaremos un formulario en la tercera columna para lo que seleccionamos dicha columna, pulsamos en "+" y seleccionamos Singup form:

Como comentábamos antes, podremos elegir entre los formularios existentes en la cuenta desde el desplegable que nos permite seleccionar un formulario de los que ya tengamos creados (Select a Form):

Y quedaría incrustado de la siguiente manera:

IMPORTANTE: La configuración del color de fondo del formulario, así como del resto de elementos, se realiza en la propia sección de formularios, no pudiendo efectuarse desde la misma landing. Todo cambio que se realice en el formulario, se reflejará en la landing.

Paso 7: Añadiendo imágenes

Primero añadiremos dos columnas más y una vez creadas se ha de pulsar en sus respectivos signos "+" para dotarlas de contenido. Ahora vamos a añadir una imagen con un texto al lado.

Vamos a utilizar la columna izquierda para añadir una imagen, y la derecha para agregar un párrafo.

Podemos utilizar alguna imagen que ya tengamos subida (Biblioteca de medios), o subir una desde nuestro equipo (Subir).

Al pinchar sobre la imagen, aparecen dos círculos que nos permiten arrastrarla para darle el tamaño que queramos.

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

Justo ahora añadimos un texto en la columna derecha, pulsando sobre "+" y seleccionando Parrafo, para luego añadir el texto deseado.

Paso 8: Añadiendo un botón

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

Pulsa sobre Añade texto y justo arriba te aparecerán las opciones que te permiten modificar el botón, de izquierda a derecha son: Seleccionar botones, Botón, Arrastar, Cambiar la justificación de los elementos, Cambiar la alineación vertical, Alinear, Enlace, Negrita, Cursiva, Mas y Opciones.

Puedes modificarlo a tu gusto, en nuestro ejemplo le hemos alineado al centro, cambiado el texto a Pulsa para comprar, colocado el texto en negro y puesto el fondo de color blanco.

Solo resta pulsar en Guardar y ya estaría finalizado.