---
url: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
title: 'Diseña una sección hero | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:56:49+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  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.
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Diseña una sección hero'
      description: |-
        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.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:56:49+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentation/learn-dxpr-builder/tutorials/hero-section'
      description: |-
        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.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Help Center](/es/hc)/[Documentation](/es/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Diseña una sección hero.

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Crea una página de destino de marketing](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing)
- [Añade una sección](/es/hc/documentation/learn-dxpr-builder/layout/sections)
- [Cambia el aspecto de un elemento en el panel Style](/es/hc/documentation/learn-dxpr-builder/element-settings/style-tab)

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](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) 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](/es/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).
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?

- [Página de destino](/es/hc/documentation/learn-dxpr-builder/tutorials/marketing-landing) para crear una página completa alrededor de tu hero
- [Secciones](/es/hc/documentation/learn-dxpr-builder/layout/sections) para las opciones de diseño de la sección
- [Referencia de la pestaña de estilo](/es/hc/documentation/learn-dxpr-builder/element-settings/style-tab) para todas las opciones de estilo