Landing pages - Parte 3: Edita la configuración de todos los elementos de tu landing page

clickable_banner-pricing_3_en-us.png

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:

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:

  • El margin (margen) crea espacio alrededor de un componente, fuera de los bordes definidos.
  • El padding (relleno) crea espacio dentro de un componente, entre la sección o el elemento y sus bordes.

Podrás elegir entre distintos tamaños de espaciado desde XS (más pequeño) hasta XL (más grande).

Visibilidad

En las secciones:

  • La configuración Visibility (Visibilidad) permite controlar la visibilidad de las secciones de la landing page en función del dispositivo que se utilice para verla. Puedes elegir Hide on Mobile (Ocultar en el móvil) y/o Hide on Desktop (Ocultar en el escritorio).
  • Al elegir ocultar una sección en un dispositivo determinado, la sección aparecerá tachada en el editor y aparecerá el siguiente mensaje: "This section is not visible on mobile/desktop" (Esta sección no es visible en móvil/escritorio) dependiendo de la opción seleccionada.

En elementos:

  • La configuración Visibility (Visibilidad) permite controlar la visibilidad de algunos elementos de la landing page en función del dispositivo que se utilice para verla. Puedes elegir Hide on Mobile (Ocultar en el móvil) y/o Hide on Desktop (Ocultar en el escritorio).
  • Esta configuración no tiene ningún impacto visual en el editor y solo afecta a las landing pages publicadas para evitar que pierdas el rastro del contenido dentro del editor.

 

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.
💡 Información relevante
El color del texto cambiará automáticamente según el color de fondo de la sección.

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:

  • Caption (Título): añade un título a la imagen de fondo.
  • Remove (Eliminar): elimina la imagen de fondo actual.
  • Replace (Reemplazar): elige una nueva imagen de fondo para reemplazar a la actual.
  • Background size (Tamaño de fondo): selecciona cómo debe ajustarse la imagen de fondo a la sección o elemento.
  • Background Repeat (Repetición de fondo): selecciona si deseas repetir la imagen de fondo en toda la sección o elemento.
  • Color Overlay (Superposición de color): selecciona un color para añadirlo sobre el contenido de la sección o elemento y administrar su transparencia.

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).
💡 Información relevante
Te recomendamos que asignes un nombre a las secciones para que te resulte más fácil hacer un seguimiento y navegar por ellas.

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:

  • Edge to Edge (Borde a borde): determina el espaciado horizontal en los lados de la sección.
  • Full Height (Altura completa): muestra la imagen como una imagen completa.
  • Background Parallax (Paralaje de fondo): utiliza el desplazamiento de paralaje para que la imagen de fondo de la sección se desplace más lento que el contenido de primer plano.

Marcador

lp_bookmark_en-us.png

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

Las Rows (Filas) solo están disponibles en el editor clásico de landing pages.

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

  • Hide gutters between columns (Ocultar los márgenes entre columnas): establece el tamaño del espacio (margen) entre las columnas de la fila.
  • Border radius (Radio del borde): redondea las esquinas de la fila. 

Columna

Las Columns (Columnas) solo están disponibles en el editor clásico de landing pages.

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.

mceclip11.png

Estilo

  • Resize (Cambiar tamaño): elige el tamaño de la columna.
  • Mobile size (Tamaño para móviles): elige el tamaño de la columna para móviles.
  • Border radius (Radio del borde): redondea las esquinas de la columna. 

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:

  • Img URL (URL de la imagen): introduce la URL de la imagen que deseas añadir.
  • Remove (Eliminar): elimina la imagen actual.
  • Replace (Reemplazar): elige una nueva imagen para reemplazar a la actual.
  • Resize (Cambiar tamaño): elige el tamaño de la imagen.

Estilo

La configuración Style (Estilo) permite definir el aspecto de la imagen:

  • Drop shadow (Sombra paralela): añade una sombra a la imagen.
  • Border radius (Radio del borde): define la forma redondeada de la imagen.
  • Border style and Border color (Estilo del borde y Color del borde): añade un borde a la imagen y selecciona su color.
  • Border width (Ancho del borde): define el ancho del borde de la imagen.
  • Border radius (Radio del borde): selecciona la forma redondeada del borde 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

mceclip1.png

La configuración Image (Imagen) permite seleccionar un logotipo y cambiar su tamaño:

  • Caption (Título): añade un título al logotipo.
  • Img URL (URL de la imagen): introduce la URL del logotipo.
  • Remove (Eliminar): elimina el logotipo actual.
  • Replace (Reemplazar): elige un nuevo logotipo para reemplazar el actual.
  • Crop logo (Recortar logotipo): recorta el logotipo según el tamaño deseado.
  • Alt: añade una etiqueta alt para brindar información descriptiva sobre el logotipo.
  • Link (Enlace): añade un enlace de redirección al logotipo.

Estilo

La configuración Style (Estilo) solo está disponible en el nuevo editor de landing pages.

La configuración Style (Estilo) permite definir el aspecto del logotipo:

  • Border style and Border color (Estilo del borde y Color del borde): añade un borde al logotipo y selecciona su color.
  • Border width (Ancho del borde): define el ancho del borde del logotipo.
  • Border radius (Radio del borde): selecciona la forma redondeada 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:

  • Call to action (Llamada a la acción): introduce el texto que deseas mostrar en el botón de llamada a la acción.
  • Pick an action (Elegir una acción): elige una de las tres acciones: enlazar a una URL, anclar a una sección o enlazar a una página de este embudo.
    Si se ancla a una sección, selecciona en la lista desplegable a qué sección deseas que se ancle.
    Si se vincula a una página de este embudo, selecciona en la lista desplegable a qué página deseas que se vincule.
  • Pick a target (Elegir un objetivo): elige abrir el enlace en una nueva pestaña.
  • URL (link) (URL [enlace]): añade el enlace al que debe redirigir el botón.

Estilo

La configuración Style (Estilo) permite personalizar el aspecto del botón:

  • Color: elige el color del botón.
  • Outline style and Outline color (Estilo del contorno y Color del contorno): elige un tipo de contorno para el botón y su color.
  • Outline width (Ancho del contorno): define el ancho del contorno del botón.
  • Full width (Ancho completo): elige si el botón debe ser tan ancho como la página.
  • Fill (Relleno): elige que el botón esté lleno o hueco:
    mceclip0.png
  • Shape (Forma): elige si la forma del botón debe ser cuadra, redonda o de pastilla.
  • Shadow (Sombra): añade una sombra clara u oscura al botón.
  • Button icon (Icono de botón): añade un icono al botón y elige su posición.

Divisor

💡 Información relevante
Solo se puede añadir un divisor horizontal.
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
mceclip24.png

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:

  • Replace (Reemplazar): elige un nuevo icono para reemplazar el actual.
  • Resize (Cambiar tamaño): elige el tamaño del icono.
  • Background (Fondo): añade un color de fondo al icono.
  • Foreground (Primer plano): añade un color de primer plano al icono.
  • Border style and Border color (Estilo del borde y Color del borde): añade un borde al icono y selecciona su color.
  • Border width (Ancho del borde): define el ancho del borde del icono.
  • Border radius (Radio del borde): selecciona la forma redondeada del borde del icono.
  • Link (Enlace): añade un enlace de redirección al icono.

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:

  • Border style and Border color (Estilo del borde y Color del borde): añade un borde al vídeo y selecciona su color.
  • Border width (Ancho del borde): define el ancho del borde del vídeo.
  • Border radius (Radio del borde): define la forma redondeada del borde del vídeo.

Contenedor

El elemento Container (Contenedor) solo está disponible en el nuevo editor de landing pages.

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:

  • Background color and Transparency (Color de fondo y Transparencia): añade un color de fondo al contenedor y administra su transparencia.
  • Border style and Border color (Estilo del borde y Color del borde): añade un borde al contenedor y selecciona su color.
  • Border position (Posición del borde): establece el lado del contenedor en el que se añadirá el borde.
  • Border width (Ancho del borde): define el ancho del borde del contenedor.
  • Border radius (Radio del borde): selecciona la forma redondeada del contenedor.
  • Drop shadow (Sombra paralela): añade una sombra al 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

💡 Información relevante
El código insertado en el editor solo se puede probar en landing pages publicadas.

⏩ ¿Qué es lo siguiente?

🤔 ¿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.

💬 ¿Fue útil este artículo?

Usuarios a los que les pareció útil: 0 de 16