Crea una página de destino de marketing.

Aprende DXPR BuilderCrear páginasSigue un tutorial

Aquí creas una página de destino para una oferta: un hero de foto con un botón Pide una demo, tres funciones con iconos, dos testimonios y una llamada a la acción de cierre. Úsala para una página de campaña o de producto con un objetivo. Para un sitio entero en una página con desplazamiento, sigue Crea un sitio web de una página con desplazamiento en su lugar.

El vídeo crea una página para un producto de analítica llamado Insight.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda una foto ancha para el hero.
  • La página está abierta en el constructor. Para una nueva, ve a Contenido > Añadir contenido > Página de destino (/node/add/landing_page) y haz clic en Guardar.
  • Los elementos nuevos caen arriba de su sección o columna. Añade los elementos de una columna en orden inverso, o arrástralos a su sitio después.

Paso 1: añade el hero

  1. Haz clic en Añadir elementos en la página vacía y elige Sección en la pestaña Diseño. Pasa el cursor sobre ella y abre Más > Ajustes.
  2. En Clases HTML elige Centrar texto.
  3. Abre el panel Estilo. En Imagen de fondo haz clic en Seleccionar imagen, marca una foto y haz clic en Insertar selección. Pon Estilo de fondo en Cubrir.
  4. Elige un Fondo azul marino oscuro y un Color de fuente blanco, y haz clic en Guardar.
  5. Haz clic en + en la sección y elige Botón. Pon Título en «Pide una demo», Enlace en /demo, Tipo en Claro y Tamaño en Grande, y haz clic en Guardar.
  6. Haz clic en + de nuevo y elige Texto; cae encima del botón. Escribe el titular como Encabezado 2 y el subtítulo debajo. Pon Color de fuente en blanco en el panel Estilo y haz clic en Guardar. El tema imprime el título de página como Encabezado 1 de la página. Para que este encabezado sea el Encabezado 1 en su lugar, lee Crea páginas amables con el SEO.

Paso 2: añade las funciones

  1. Pasa el cursor sobre el hero y haz clic en Añadir sección debajo. Dale a la sección nueva la clase Centrar texto.
  2. Haz clic en + en la sección y elige Fila. Haz clic en su icono de cuadrícula (Diseño de columnas), elige el ajuste 1/3 + 1/3 + 1/3 y haz clic en Guardar.
  3. Haz clic en + en la primera columna y elige Texto. Escribe el nombre de la función como Encabezado 3, añade una línea y haz clic en Guardar.
  4. Haz clic en + en la misma columna y elige Icono; cae encima del texto. Elige el juego Font Awesome Free Solid, busca bolt y haz clic en el icono. Pon Tamaño en Muy grande (3x), abre Utilidades de icono, pon Estilo en Círculo y haz clic en Guardar.
  5. Repite para la segunda columna con chart-line y la tercera con shield.

Paso 3: añade los testimonios

  1. Añade una tercera sección con Añadir sección debajo. Abre Más > Ajustes, elige un Fondo gris claro en el panel Estilo y haz clic en Guardar.
  2. Haz clic en + en la sección y elige Fila; llega con dos columnas iguales.
  3. Haz clic en + en cada columna y elige Cita en bloque. Escribe la cita, rellena Atribución con el nombre y rol de la persona, y haz clic en Guardar.

Paso 4: añade la llamada a la acción

  1. Añade una cuarta sección y abre Más > Ajustes. Elige Centrar texto en Clases HTML, luego el Fondo morado y el Color de fuente blanco en el panel Estilo. Haz clic en Guardar.
  2. Haz clic en + en la sección y elige Botón. Pon Título en «Reserva una visita», Enlace en /demo, Tipo en Claro y Tamaño en Grande, y haz clic en Guardar.
  3. Haz clic en + de nuevo y elige Texto; cae encima del botón. Escribe «Mira Insight con tus propios datos» como Encabezado 2 y añade una línea. Pon Color de fuente en blanco y haz clic en Guardar.

Paso 5: guarda y muestra la vista previa

  1. Haz clic en Guardar en la barra de herramientas del constructor.
  2. Abre el menú de vista (el icono de ojo) y elige Vista previa.

Ve más allá

No sale en el vídeo:

  • Formulario de contacto: inserta un bloque de formulario web desde la pestaña Bloques de Drupal en lugar del último botón; lee Añade formularios a las páginas
  • Foto más oscura: en el panel Efectos de fondo del hero pon Efecto de fondo en Degradado. Elige el mismo color oscuro con alrededor de 60 % de opacidad como Color inicial y Color final
  • Hero más alto: dale a la sección del hero 100 píxeles de relleno superior e inferior en el panel de Estilo correspondiente
  • Empieza desde una plantilla: en una página vacía, haz clic en Elegir una plantilla y elige un diseño de página de destino; lee Plantillas de página

Lo que ves

El titular, el subtítulo y el botón Pide una demo quedan centrados en blanco sobre la foto. Siguen tres funciones, cada una un icono en círculo sobre un encabezado corto y una línea. Dos citas quedan lado a lado sobre una banda gris, y una banda morada cierra la página con Reserva una visita.

Si no ves la página como se muestra

  • Los iconos no tienen círculo. Estilo está en el panel Utilidades de icono, no en General. Abre los ajustes del icono, abre Utilidades de icono y pon Estilo en Círculo.
  • La foto del hero no llena la sección. Estilo de fondo aún está en Valores por defecto del tema. Abre el panel Estilo de la sección y ponlo en Cubrir.
  • Un icono queda debajo de su texto de función. El icono entró antes que el texto, y los elementos nuevos caen arriba de su columna. Arrastra el icono encima del texto por el tirador de su barra de control.
  • Tus cambios desaparecieron tras recargar. Saliste de la página antes de hacer clic en Guardar en la barra de herramientas del constructor. Si Guardar muestra un error, lee Los cambios no se guardan.

¿Qué sigue?