Crea una página de evento.

Aprende DXPR BuilderCrear páginasSigue un tutorial

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.

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.

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

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.

¿Qué sigue?