En este artículo, explicaremos cómo estructurar tu landing page. Puedes estructurar tu landing page añadiendo, moviendo, duplicando y eliminando páginas, secciones y elementos.

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 - ESTÁS AQUÍ
• Parte 3: Editar la configuración de todos los elementos de la landing page 
• Parte 4: Añadir un formulario a la landing page y usar las opciones avanzadas
• Parte 5: Publicar la landing page

Información relevante

El nuevo editor de landing pages ofrece una estructura diferente a la del editor clásico de landing pages. Asegúrate de consultar la sección correcta de este artículo según el editor de landing pages que estés utilizando:

Nuevo editor de landing pages	Editor clásico de landing pages

Nuevo editor de landing pages

Una landing page se compone de páginas, secciones y elementos.

Páginas

Puedes añadir páginas adicionales a tu landing page, como una página de agradecimiento, que puedes vincular a tu landing page principal. Para añadir una nueva página, haz clic en + Create a new page (Crear una nueva página) en el panel Pages (Páginas).

Para obtener más información sobre las subpáginas, consulta nuestro artículo dedicado Gestionar las subpáginas de la landing page.

Secciones

Dentro de una página, puedes añadir secciones para organizar tu contenido, como una sección de Header (Encabezado), una sección de Body (Cuerpo) y una sección de Footer (Pie de página). Puedes añadir una sección a tu página desde los paneles Sections (Secciones) o Layout (Diseño). 

Puedes añadir diferentes tipos de secciones a tu diseño:

1. Puedes Add a blank section (Añadir una sección en blanco) para personalizarla completamente desde cero.
2. También ofrecemos secciones predefinidas que se pueden añadir para crear tu landing page:
   

   Header (Encabezado) Cover (Portada) Benefits (Ventajas) Features (Funcionalidades) Video (Vídeo) Social proof (Prueba social) Call-to-action (Llamada a la acción)

   Team (Equipo) Footer (Pie de página) Testimonials (Testimonios) Forms (Formularios) FAQs (FAQ) How it works (Cómo funciona)

Cambiar el nombre de una sección

Para cambiar el nombre de una sección de tu landing page, haz clic en una sección e introduce un nombre en el campo Name this section (Asignar un nombre a esta sección). Cambiar el nombre de las secciones es clave para tener una visión general clara de la estructura de tu landing page.

Mover una sección

Para reorganizar tu diseño, puedes mover las secciones de la landing page. En el panel Layout (Diseño), arrastra y suelta la sección en el orden deseado.

Duplicar una sección

Para duplicar y reutilizar una sección en tu landing page:

• En el panel Layout (Diseño), pasa el cursor por encima de una sección y haz clic en el icono ❏ Duplicate (Duplicar).
  

• En tu diseño, haz clic en Section (Sección) y selecciona el icono ❏ Copy Section (Copiar sección).
  

Intercambiar una sección

Para sustituir una sección completa de tu diseño por una sección en blanco o predefinida de tu elección:

1. Directamente desde tu diseño, haz clic en Section (Sección) y selecciona el icono 🔁 Swap Section (Intercambiar sección).
   
2. Selecciona una sección en blanco o predefinida para sustituirla.

Eliminar una sección

Para eliminar una sección de tu landing page:

• Directamente desde tu diseño, selecciona un elemento y haz clic en el icono 🗑️ Delete (Eliminar).
  
• En tu diseño, haz clic en Section (Sección) y selecciona el icono 🗑️ Delete (Eliminar).
  

Elementos

Dentro de una sección, puedes añadir elementos como un contenedor, texto, botón, imagen, vídeo, divisor, logotipo, icono, código y formulario. Para obtener más información sobre los tipos de elementos disponibles en una landing page y cómo editar su configuración, consulta la Parte 3: Editar la configuración de todos los elementos de la landing page.

Para añadir un elemento en una sección, haz clic en + Elements (Elementos) y arrastra y suelta el elemento que quieras en la sección.

Mover un elemento

Para reorganizar tu diseño, puedes mover los elementos de la landing page. Para mover un elemento, arrástralo y suéltalo donde quieras que esté en tu landing page.

Cambiar el tamaño de un elemento

Para cambiar el tamaño de un elemento en tu landing page:

1. Pasa el cursor sobre el elemento cuyo tamaño quieras cambiar.
2. Selecciona la esquina inferior derecha azul del elemento y arrástrala hasta alcanzar el tamaño deseado.
   

   

Duplicar un elemento

Para duplicar y reutilizar un elemento en tu landing page, selecciónalo y haz clic en el icono ❏ Duplicate (Duplicar).

Eliminar un elemento

Para eliminar un elemento de tu landing page, selecciónalo y haz clic en el icono 🗑️ Delete (Eliminar).

Editor clásico de landing pages

Diseño de la landing page

Veamos cómo estructurar una landing page creada con nuestro editor. Esta es la estructura de la landing page:

Secciones

Cada página se compone de secciones, lo que hace que el editor de landing pages sea fácil de usar y flexible. Por ejemplo, tendrás una sección de Header (Encabezado), una sección de Body (Cuerpo) y una sección de Footer (Pie de página).

Puedes elegir dos tipos de secciones para añadir a tu diseño:

1. Puedes Add a blank section (Añadir una sección en blanco) para personalizarla completamente desde cero.
2. También ofrecemos secciones predefinidas que se pueden añadir para crear tu landing page.
   

Puedes cambiar el nombre de cada sección para que quede aún más clara al crear tu landing page. Para ello, simplemente haz clic en la sección y completa el campo Name this section (Asignar un nombre a esta sección) en el panel derecho.

También puedes asignar un nombre a una sección en Sections (Secciones) > Section X (Sección X) > ⚙️. La sección de edición aparecerá a la derecha.

Filas y columnas

Dentro de una sección hay filas que se pueden dividir en varias columnas. 

Dentro de las columnas, puedes añadir elementos como texto, imagen, botón de CTA, divisor, formulario, icono, vídeo, logotipo y código HTML. Para obtener más información, consulta nuestro artículo dedicado Parte 3: Editar la configuración de todos los elementos de la landing page.

Añadir una sección, columna o fila

Hay diferentes formas de añadir filas o secciones. Puedes hacerlo directamente en el diseño o a través del panel izquierdo (ya sea en Sections (Secciones) o Layout (Diseño).

Añadir una sección o fila directamente desde el diseño

1. Pasa el ratón por encima de una sección.
2. En la parte inferior de la sección, verás el botón ADD ROW OR SECTION (AÑADIR FILA O SECCIÓN).
3. Haz clic en él y, a continuación, en ADD ROW (AÑADIR FILA) o ADD SECTION (AÑADIR SECCIÓN).
   
   
4. Para filas: elige qué plantilla debe tener tu nueva fila (hasta 4 columnas)
5. Para secciones: se abre el panel izquierdo y puedes elegir entre Add a Blank Section (Añadir una sección en blanco) o una pre-made section (sección predefinida) de la lista. Las secciones también se pueden añadir directamente desde el panel Sections (Secciones) de la izquierda y se añadirán justo encima de la sección del pie de página o al final de tu diseño si has empezado desde cero.

Desde aquí no se pueden añadir columnas. Consulta la siguiente sección para saber cómo añadirlas.

Añadir una sección, columna o fila desde el panel de diseño

También puedes añadir secciones o filas directamente desde el panel Layout (Diseño) al navegar por la estructura. En cada paso, verás el botón + Add section (Añadir sección), + Add column (Añadir columna) o + Add row (Añadir fila). 

Mover secciones, filas, columnas y elementos

Ahora que ya sabes cómo añadir secciones, filas y columnas, es posible que quieras reorganizarlas mientras creas tu diseño. Para mover elementos, debes ir al panel Layout (Diseño).

Desde allí, puedes simplemente arrastrar y soltar los diferentes elementos. A continuación, se muestra un ejemplo con los elementos de una columna:

Duplicar o eliminar secciones, filas, columnas y elementos

Todos los elementos de tu landing page se pueden duplicar:

• Puedes duplicar secciones, filas, columnas y elementos desde el panel Layout (Diseño) haciendo clic en el icono Duplicate (Duplicar) al pasar el cursor por encima del elemento.
• También puedes duplicar una sección o un elemento desde el panel Edit (Editar) de la derecha al hacer clic en la sección o el elemento. En la esquina inferior derecha, encontrarás la opción Duplicate (Duplicar).

Añadir una página

Para añadir una nueva página, en la barra lateral izquierda, haz clic en la pestaña Pages (Páginas) y, a continuación, en el botón + Create a new page (Crear una nueva página). Obtén más información sobre las subpáginas aquí.

⏩ ¿Qué es lo siguiente?

• Parte 3: Editar la configuración de todos los elementos de la landing page 
• 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.