En este artículo te explicaremos cómo configurar las secciones y elementos de tu landing page. Ahora que has organizado las secciones de tu landing page, es hora de completarlas con elementos como texto, imágenes o botones.
Hemos preparado una serie de artículos para ayudarte a crear tus landing pages:
- Introducción: ¿Qué es una landing page?
- Parte 1: Configurar la landing page
- Parte 2: Definir la estructura de la landing page
- Parte 3: Editar la configuración de todos los elementos de la landing page - ESTÁS AQUÍ
- Parte 4: Añadir un formulario a la landing page y usar las opciones avanzadas
- Parte 5: Publicar la landing page
Configuración común
La configuración de algunas secciones y elementos es común. Primero describiremos la configuración común y después la específica de cada uno.
Alineación
|
La configuración Alignment (Alineación) permite elegir cómo deseas alinear un elemento (horizontal y verticalmente). |
Espaciado
|
La configuración Spacing (Espaciado) permite definir el espacio vertical y horizontal alrededor y dentro de secciones y elementos:
Podrás elegir entre distintos tamaños de espaciado desde XS (más pequeño) hasta XL (más grande). |
Visibilidad
|
En las secciones:
|
|
|
En elementos:
|
Color de fondo
| La configuración Background Color (Color de fondo) te permite añadir un color de fondo a una sección o elemento y administrar su transparencia. |
Imagen de fondo
|
La configuración Background Image (Imagen de fondo) permite añadir una imagen de nuestra biblioteca de imágenes, de una URL o de tu ordenador como fondo de una sección o elemento:
|
Sección
Propiedades
|
|
La configuración Properties (Propiedades) permite cambiar el nombre de la sección. El nombre de las secciones aparece cuando navegas por el panel Layout (Diseño). |
Color de fondo, imagen de fondo y espaciado
Las opciones de configuración Background Color (Color de fondo), Background Image (Imagen de fondo) y Spacing (Espaciado) se describen en la sección Common settings (Configuración común) de este artículo.
Estilo
|
La configuración Style (Estilo) permite personalizar el aspecto de la sección:
|
Marcador
|
El botón Bookmark (Marcador) permite guardar una sección para reutilizarla en otras páginas de destino. Puede ser útil para los encabezados y pies de página que utilices siempre en tus landing pages. Puedes encontrar las secciones guardadas en Sections (Secciones) > Bookmark (Marcador) en el panel izquierdo del editor. |
Fila
Puedes editar la configuración de una fila accediendo a la pestaña Layout (Diseño) del panel izquierdo, como vimos en Landing pages - Parte 2: Definir la estructura de la landing page. También puedes utilizar la ruta de navegación que aparece en la parte superior de la pantalla cuando haces clic en un elemento.
Color de fondo, imagen de fondo, espaciado y visibilidad
Las opciones de configuración Background Color (Color de fondo), Background Image (Imagen de fondo), Spacing (Espaciado) y Visibility (Visibilidad) se describen en la sección Common settings (Configuración común) de este artículo.
Avanzado
|
Columna
Puedes editar la configuración de una columna accediendo a la pestaña Layout (Diseño) del panel izquierdo, como vimos en Landing pages - Parte 2: Definir la estructura de la landing page. También puedes utilizar la ruta de navegación que aparece en la parte superior de la pantalla cuando haces clic en un elemento.
Estilo
|
Color de fondo, imagen de fondo, espaciado y visibilidad
Las opciones de configuración Background Color (Color de fondo), Background Image (Imagen de fondo), Spacing (Espaciado) y Visibility (Visibilidad) se describen en la sección Common settings (Configuración común) de este artículo.
Texto
| Nuevo editor de landing pages |
| Editor clásico de landing pages |
Puedes utilizar un elemento Text (Texto) para añadir y dar formato al texto en la landing page.
Barra de formato
La barra de formato permite modificar el estilo del texto. Selecciona el texto que deseas editar para mostrar la barra de formato y haz clic en los 3 puntos del extremo derecho para acceder a más opciones.
Alineación y espaciado
Las opciones de configuración Alignment (Alineación) y Spacing (Espaciado) se describen en la sección Common settings (Configuración común) de este artículo.
Imagen
| Nuevo editor de landing pages |
| Editor clásico de landing pages |
Las imágenes son una forma perfecta de personalizar el diseño de tu landing page y hacerla más atractiva. Puedes seleccionar una imagen de nuestra biblioteca de imágenes, de una URL o de tu ordenador.
Alineación y espaciado
Las opciones de configuración Alignment (Alineación) y Spacing (Espaciado) se describen en la sección Common settings (Configuración común) de este artículo.
Imagen
|
|
La configuración Image (Imagen) permite seleccionar una imagen y cambiar su tamaño:
|
Estilo
|
|
La configuración Style (Estilo) permite definir el aspecto de la imagen:
|
Logotipo
| Nuevo editor de landing pages |
| Editor clásico de landing pages |
Los logotipos son una forma perfecta de mostrar tu marca en la landing page.
Alineación y espaciado
Las opciones de configuración Alignment (Alineación) y Spacing (Espaciado) se describen en la sección Common settings (Configuración común) de este artículo.
Imagen
|
|
La configuración Image (Imagen) permite seleccionar un logotipo y cambiar su tamaño:
|
Estilo
|
|
La configuración Style (Estilo) permite definir el aspecto del logotipo:
|
Botón
| Nuevo editor de landing pages |
|
|
| Editor clásico de landing pages |
Puedes utilizar un elemento Button (Botón) para establecer un enlace a un sitio web o a otra subpágina de la landing page. Añadir botones a tu landing page es ideal para resaltar enlaces específicos en los que deseas que las personas hagan clic.
Alineación, espaciado y visibilidad
Las opciones de configuración Alignment (Alineación), Spacing (Espaciado) y Visibility (Visibilidad) se describen en la sección Common settings (Configuración común) de este artículo.
Propiedades
|
La configuración Properties (Propiedades) permite definir el enlace del botón:
|
Estilo
|
La configuración Style (Estilo) permite personalizar el aspecto del botón:
|
Divisor
| Nuevo editor de landing pages |
|
|
| Editor clásico de landing pages |
Puedes utilizar un elemento Divider (Divisor) para añadir una separación visual entre los diferentes elementos y secciones de la landing page.
Espaciado
La configuración Spacing (Espaciado) se describe en la sección Common settings (Configuración común) de este artículo.
Estilo
|
Elige el nivel de grosor del divisor: Thin (Fino), Thick (Grueso) o Thickest (Más grueso). |
Color
|
Elige el color del divisor. |
Formulario
| Nuevo editor de landing pages |
|
|
| Editor clásico de landing pages |
Puedes utilizar un elemento Form (Formulario) para crear una landing page de generación de leads. Para obtener más información sobre los formularios de una landing page, consulta nuestro artículo dedicado Parte 4: Añadir un formulario a la landing page y usar las opciones avanzadas.
Icono
| Nuevo editor de landing pages |
|
|
| Editor clásico de landing pages |
Puedes utilizar un elemento Icon (Icono) para añadir contenido visual e ilustrar la landing page.
Alineación y espaciado
Las opciones de configuración Alignment (Alineación) y Spacing (Espaciado) se describen en la sección Common settings (Configuración común) de este artículo.
Configuración
|
La Settings (Configuración) de un icono permite seleccionar un icono y personalizar su aspecto:
|
Vídeo
| Nuevo editor de landing pages |
|
|
| Editor clásico de landing pages |
Puedes utilizar un elemento Video (Vídeo) en la landing page para mostrar tu marca o tus productos sin utilizar demasiado texto.
Espaciado
La configuración Spacing (Espaciado) se describe en la sección Common settings (Configuración común) de este artículo.
URL
| La configuración URL permite añadir el enlace al vídeo. Puedes utilizar un vídeo publicado en YouTube, Vimeo, Dailymotion, Canal+, Wista, Twitch, Youku o Coub. |
Estilo
|
La configuración Style (Estilo) permite administrar el aspecto del vídeo:
|
Contenedor
Puedes utilizar un elemento Container (Contenedor) para agrupar varios elementos y moverlos o cambiar su tamaño a la vez.
Imagen de fondo, espaciado y visibilidad
Las opciones de configuración Background Image (Imagen de fondo), Spacing (Espaciado) y Visibility (Visibilidad) se describen en la sección Common settings (Configuración común) de este artículo.
Estilo
|
La configuración Style (Estilo) permite personalizar el aspecto del contenedor:
|
Código
| Nuevo editor de landing pages |
|
|
| Editor clásico de landing pages |
Puedes utilizar un elemento Code (Código) para añadir fragmentos de código a la landing page, como una sección de comentarios de Facebook.
⏩ ¿Qué es lo siguiente?
- Parte 4: Añadir un formulario a la landing page y usar las opciones avanzadas
- Parte 5: Publicar la landing page
- ¿Están las landing pages adaptadas para el SEO?
- Duplicar una landing page existente
- Gestionar las subpáginas de la landing page
🤔 ¿Tiene alguna duda?
Si tiene alguna pregunta, no dude en ponerse en contacto con nuestro equipo de asistencia mediante la creación de un ticket desde su cuenta. Si todavía no tiene una cuenta, puede ponerse en contacto con nosotros aquí.
Si necesitas ayuda con un proyecto usando Brevo, podemos ponerte en contacto con la agencia partner de Brevo adecuada.