---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-evento'
title: 'Crea una página de evento | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:56:59+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Aquí creas una página para un evento. Tiene un hero de foto con la fecha y un botón Regístrate ahora, los detalles junto a un mapa, tarjetas de ponentes y una banda de inscripción. Úsala para jornadas de puertas abiertas, charlas y webinars. 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 la página para una jornada de puertas abiertas de una universidad.
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Crea una página de evento'
      description: |-
        Aquí creas una página para un evento. Tiene un hero de foto con la fecha y un botón Regístrate ahora, los detalles junto a un mapa, tarjetas de ponentes y una banda de inscripción. Úsala para jornadas de puertas abiertas, charlas y webinars. 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 la página para una jornada de puertas abiertas de una universidad.
      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:59+0000'
      dateModified: '2026-10-24T17:19:22+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/documentacion/aprender-dxpr-builder/tutoriales/pagina-evento'
      articleSection: 'Sigue un tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/tutoriales/pagina-evento'
      description: |-
        Aquí creas una página para un evento. Tiene un hero de foto con la fecha y un botón Regístrate ahora, los detalles junto a un mapa, tarjetas de ponentes y una banda de inscripción. Úsala para jornadas de puertas abiertas, charlas y webinars. 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 la página para una jornada de puertas abiertas de una universidad.
      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
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Sigue un tutorial](/es/hc/documentation/learn-dxpr-builder/tutorials/overview) # Crea una página de evento.

 Aprende DXPR BuilderCrear páginasSigue un tutorial

   ## En esta guía

 Guías relacionadas

- [Añadir un mapa](/es/hc/documentation/learn-dxpr-builder/elements/map)
- [Añadir una tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta)
- [Diseña una sección hero](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/seccion-hero)

Aquí creas una página para un evento. Tiene un hero de foto con la fecha y un botón **Regístrate ahora**, los detalles junto a un mapa, tarjetas de ponentes y una banda de inscripción. Úsala para jornadas de puertas abiertas, charlas y webinars. Para un sitio entero en una página con desplazamiento, sigue [Crea un sitio web de una página con desplazamiento](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/sitio-web-una-pagina) en su lugar.

El vídeo crea la página para una jornada de puertas abiertas de una universidad.

  ## 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 sección 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 «Regístrate ahora», **Enlace** en la página de inscripción, **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 nombre del evento como **Encabezado 2**, luego la fecha y un lema. 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](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/seo#step-1-start-the-content-at-heading-2).

## Paso 2: añade los detalles y el mapa

1. Pasa el cursor sobre el hero y haz clic en **Añadir sección debajo**. Haz clic en **+** en la sección nueva y elige **Fila**; sus dos columnas iguales son la división que necesitas.
2. Haz clic en **+** en la columna izquierda y elige **Texto**. Escribe «Detalles del evento» como **Encabezado 2**, añade una línea para fecha, lugar y contacto, y haz clic en **Guardar**.
3. Haz clic en **+** en la columna derecha y elige **Mapa**. Escribe la **Dirección** del lugar, pon **Alto de mapa** en 320 y haz clic en **Guardar**.

## Paso 3: añade a las personas ponentes

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**. 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 cada columna y elige **Tarjeta**. Abre **Más** > **Ajustes**, pon el **Encabezado** en la sesión y el **Título** en el nombre y rol de la persona ponente, y haz clic en **Guardar**.

## Paso 4: añade la llamada a la acción de inscripció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 «Apúntate», **Enlace** en la página de inscripción, **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 «Regístrate hoy» 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:

- **Fotos de ponentes**: haz clic en **+** en una tarjeta y añade una biografía de **Texto**, luego haz clic en **+** en la tarjeta de nuevo y añade una **Imagen**; cae encima del texto
- **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**
- **Programa**: añade un elemento **Texto** e inserta una tabla con el botón **Tabla** para hora, sesión y ponente
- **Inscripción en la página**: lee [Añade formularios a las páginas](/es/hc/documentation/learn-dxpr-builder/tutorials/add-forms)

## Lo que ves

El nombre del evento, la fecha y el botón **Regístrate ahora** quedan centrados y en blanco sobre la foto. Debajo, los detalles llenan la mitad izquierda y un mapa del lugar la derecha. Tres tarjetas de ponentes quedan sobre una banda gris, y una banda morada cierra la página con **Apúntate**.

## Si no ves la página como se muestra

- **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**.
- **El mapa muestra el sitio equivocado.** Google Maps busca la dirección tal como está escrita. Añade el código postal, la ciudad y el país a **Dirección** y guarda de nuevo.
- **Una tarjeta no muestra diálogo de ajustes tras añadirla.** Las tarjetas se abren vacías, sin diálogo. Pasa el cursor sobre la tarjeta y abre **Más** > **Ajustes** para rellenar **Encabezado** y **Título**.
- **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](/es/hc/documentacion/aprender-dxpr-builder/solucion-problemas/cambios-no-guardan).

## ¿Qué sigue?

- [Elemento mapa](/es/hc/documentation/learn-dxpr-builder/elements/map) para los ajustes del mapa
- [Elemento tarjeta](/es/hc/documentacion/aprender-dxpr-builder/elementos/tarjeta) para tipos de tarjeta y elementos hijos
- [Sección hero](/es/hc/documentacion/aprender-dxpr-builder/tutoriales/seccion-hero) para más opciones de hero