Diseña una sección hero.

Aprende DXPR BuilderCrear páginasSigue un tutorial

Aquí creas un hero que llena la pantalla: una foto de fondo, un titular, una línea de apoyo y un botón, con la foto moviéndose más despacio que la página cuando las personas visitantes desplazan. Úsalo arriba de cualquier página. Para crear la página entera a su alrededor, sigue Crea una página de destino de marketing después.

El vídeo crea el hero de un producto de informes.

Antes de empezar

  • Tu rol tiene el permiso Editar con DXPR Builder.
  • La biblioteca de medios guarda una foto ancha, de al menos 1920 píxeles de ancho.
  • 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.

Paso 1: añade la sección

  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, para que el titular, el texto y el botón se centren juntos.
  3. Activa 100% de alto para que el hero llene la pantalla, y Centrado vertical para que el contenido quede en el centro.
  4. Abre el panel Estilo. En Imagen de fondo haz clic en Seleccionar imagen, marca una foto ancha y haz clic en Insertar selección.
  5. Pon Estilo de fondo en Cubrir para que la foto llene la sección.
  6. Elige un Fondo oscuro, que se muestra mientras carga la foto. Pon Color de fuente en blanco, y haz clic en Guardar.

Consejo

Comprime la foto a menos de 500 KB para que el hero cargue rápido.

Paso 2: añade el botón

  1. Haz clic en + en la sección y elige Botón en la pestaña Contenido.
  2. Pon Título en «Empieza tu prueba gratis», Enlace en /trial, Tipo en Claro para contraste sobre la foto y Tamaño en Grande, y haz clic en Guardar.

Paso 3: añade el titular

  1. Haz clic en + en la sección de nuevo y elige Texto en la pestaña Contenido. Cae encima del botón, porque los elementos nuevos caen arriba.
  2. Escribe tu titular, «Informes al ritmo de tu equipo», y elige Encabezado 2 en el desplegable de encabezados. 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.
  3. Añade una línea de apoyo: «Cuadros de mando, alertas e integraciones en un espacio de trabajo. En marcha en minutos, sin programadores».
  4. En el panel Estilo pon Color de fuente en blanco, y haz clic en Guardar.

Paso 4: añade parallax

  1. Pasa el cursor sobre la sección y abre Más > Ajustes de nuevo.
  2. Abre el panel Efectos de fondo y pon Efecto de fondo en Imagen parallax. Velocidad de parallax empieza en 20; arrástrala a 35 para un efecto más fuerte y haz clic en Guardar.

Paso 5: añade contenido debajo del hero

  1. Pasa el cursor sobre el hero y haz clic en Añadir sección debajo, para que la página tenga contenido al que desplazar.
  2. Haz clic en + en la sección nueva y elige Texto en la pestaña Contenido. Escribe un encabezado y un párrafo corto, pon la primera línea en Encabezado 2 y haz clic en Guardar.

Paso 6: 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), elige Vista previa y desplaza hacia abajo.

Ve más allá

No sale en el vídeo:

  • Superposición: pon Efecto de fondo en Degradado y elige un Color inicial y un Color final oscuros con alrededor de 50 % de opacidad. El texto queda legible sobre cualquier foto. El efecto guarda un valor, así que una superposición reemplaza al parallax.
  • Hero más corto: desactiva 100% de alto y dale a la sección su propio relleno superior e inferior en el panel Estilo, por ejemplo 100 píxeles.
  • Botón ancho: activa Botón de bloque para un botón tan ancho como su columna.

Variantes

Alternativas a la creación del vídeo:

Hero con fondo de vídeo

  1. En el panel Efectos de fondo, pon Efecto de fondo en Vídeo de YouTube.
  2. Pega la URL del vídeo en URL de vídeo de YouTube.
  3. En Opciones de vídeo, marca Bucle y Desactivar en dispositivos móviles; deja el audio apagado.

Hero solo de degradado

Salta la imagen de fondo y usa el efecto Degradado con dos colores sólidos de marca para un hero que carga rápido.

Hero dividido

  1. Añade una Fila dentro de la sección; llega con dos columnas iguales.
  2. Pon el texto y el botón en la columna izquierda y una imagen en la derecha.

Lo que ves

La foto llena la pantalla con tu titular, tu línea de apoyo y tu botón Empieza tu prueba gratis centrados en blanco encima. Al desplazar hacia la segunda sección, la foto se mueve más despacio que la página.

Si no ves el hero como se muestra

  • El hero solo es tan alto como su texto. 100% de alto está desactivado. Actívalo en los ajustes de la sección y haz clic en Guardar.
  • La foto queda quieta al desplazar. Efecto de fondo aún está en Imagen simple, Velocidad de parallax está en 0, o no hay nada debajo del hero a lo que desplazar. Pon Imagen parallax, arrastra Velocidad de parallax por encima de 0 y añade la segunda sección del paso 5.
  • El titular queda oscuro sobre la foto. El elemento Texto no tiene Color de fuente propio. Abre su panel Estilo y pon Color de fuente en blanco.

¿Qué sigue?