Cómo crear una página de inicio de cumbre virtual con Divi

Avance

Echemos un vistazo al diseño de la página de destino en diferentes tamaños de pantalla.

Escritorio

Tableta

Móvil

Descargue la página de inicio de la Cumbre Virtual GRATIS

Para poner sus manos en el diseño gratuito de la página de inicio de la cumbre virtual, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.

Secciones de la página de destino de la cumbre virtual

Para que su página de destino haga su trabajo, necesita un conjunto específico de secciones. Además de captar la atención del espectador, las páginas de destino también deben convertir . Una página de inicio de una cumbre virtual, por ejemplo, debe incluir información relevante y un llamado a la acción. Todas las secciones deben fluir de una a otra sin problemas para que el espectador se sienta inspirado para actuar y registrarse.

Hemos incluido las siguientes secciones en la página de inicio de la cumbre virtual:

Encabezamiento

La sección de encabezado incluye información importante como el título de la cumbre y la fecha del evento. Esta es la información más importante, por eso está en la parte superior. Ningún encabezado está completo sin una llamada a la acción y una fácil navegación al resto de la página.

En nuestro diseño, hemos incluido dos botones con enlaces ancla que navegan a las secciones de oradores y programación. Lo más importante es que hemos incluido un botón con un enlace a la sección de registro. A lo largo de la página, todos los botones de “registro” tienen el mismo aspecto, para tener unidad visual en el diseño.

Información

La segunda sección es una sección informativa que incita al espectador a considerar asistir a la cumbre virtual. En el diseño, hemos agregado cuatro anuncios publicitarios y una imagen que se puede convertir fácilmente en un video. Los anuncios publicitarios enumeran cuatro razones para asistir a la cumbre y la imagen (o video) es la parte visual para respaldar la decisión.

Los altavoces

En la siguiente sección, encontrará un conjunto de módulos para seis personas. Aquí es donde se presentan los oradores que participarán en la cumbre. Cada módulo incluye los siguientes elementos:

• Imagen
• Nombre
• Posición
• Descripción
• Enlaces de redes sociales

Asegúrese de ingresar toda la información relevante para cada orador. Además, intente usar la misma cantidad de líneas en el cuerpo del texto para que el diseño se vea nítido. Como puede ver, usamos un efecto de color de duotono en todas las fotos de los oradores para darle al diseño una apariencia interesante. Hay un tutorial paso a paso a continuación sobre cómo lograr este efecto en Photoshop.

Si tiene más de seis altavoces, simplemente duplique la fila o clone los módulos en filas con más o menos columnas.

El horario

La sección de programación es la siguiente. En esta área, hemos compartido elegantemente el cronograma de la cumbre y nos aseguramos de que sea estructural. Para mantener el estilo del diseño del texto, asegúrese de cambiar el contenido pero no los niveles de encabezado. Trate de mantener el contenido de aproximadamente la misma longitud para que el diseño se mantenga limpio.

Las filas están organizadas por días con una imagen de título y un grupo de anuncios publicitarios. En la parte inferior de la última columna, puede encontrar un botón de llamada a la acción para que la audiencia se registre.

Registro

Por último, pero no menos importante, está la sección de registro. Hemos incluido un temporizador de cuenta regresiva para agregar un sentido de urgencia (puede usar el módulo Divi o uno de los principales complementos de cuenta regresiva disponibles con WordPress). El formulario de contacto debe estar directamente vinculado a su lista de RSVP para que cada invitado se registre automáticamente.

A lo largo del diseño de la página de inicio de la cumbre virtual, encontrará tres botones que navegan a esta sección para optimizar la generación de prospectos.

Crear un mapa de degradado de duotono con Photoshop

Abrir imagen en Adobe Photoshop

Si desea imitar las imágenes de duotono en nuestro diseño, siga los pasos a continuación. Primero, abra una imagen en Photoshop.

Abra Ajustes y seleccione Mapa de degradado

Abra la barra de herramientas de ajustes y haga clic en el mapa de degradado. En la pestaña de propiedades, haga doble clic en la barra de degradado para abrir la ventana emergente de configuración.

Ajustar colores de degradado

En la configuración de degradado, haga doble clic en cada color para personalizar la configuración.

Para lograr el efecto de nuestro diseño, ajuste el gradiente de la siguiente manera:

• Tipo de degradado: Sólido
• Suavidad: 100%
• Parada de opacidad #1: 100%
• Parada de color #2
  
  • Púrpura oscuro #202060
  • Posición: 19%
• Punto medio:
  
  • Punto medio de opacidad: 85%
  • Punto medio de color: 50%
• Parada de opacidad #2: 55%
• Número de parada de color
  
  • Violeta #f895f8
  • Posición: 100%

Guardar como un mapa de degradado personalizado

Agregue un nombre para su degradado y haga clic en nuevo para guardarlo. Luego se almacenará en su biblioteca de gradientes. Guarde la imagen para la web a 700 px de altura. Repite el proceso con tantas imágenes como necesites. Después de aplicar el mapa de degradado, seleccione su degradado guardado.

1. Crear sección de encabezado

Agregar nueva sección

Fondo

Comencemos a recrear la página de inicio de la cumbre virtual. Cree una nueva página y ábrala con Divi Builder. Antes de agregar filas, agregue una imagen de fondo y un degradado a una nueva sección. Encontrará el gráfico de fondo en la carpeta descargable de arriba.

• Gradiente de fondo
  
  • Color 1: #1f4068
  • Color 2: #202040
• Imagen de fondo: gráfico de encabezado

Dimensionamiento

Ajuste la altura mínima a continuación.

• Altura mínima: 1050px

Espaciado

El espaciado también.

• Acolchado superior e inferior
  
  • Mesa y Teléfono: 90px

Visibilidad

Finalmente, ajuste la configuración de visibilidad en la pestaña avanzada.

• Desbordamiento horizontal y vertical: oculto

Agregar nueva fila

Estructura de la columna

Agregue una fila con tres columnas. Seleccione la estructura de columna 1/2, 1/4, 1/4.

Dimensionamiento

Ajuste el tamaño de la fila de la siguiente manera:

• Ancho: 90%
• Ancho máximo: 1800px
• Alineación: Centro

Espaciado

Agregue un poco de margen superior también.

• Margen superior: 200px

Columna 2, 3 Configuraciones

Espaciado

Ajuste la configuración para las columnas 2 y 3. Primero el espaciado

• Margen superior: 30px

Visibilidad

Luego, oculta las columnas en el teléfono.

• Deshabilitar en: Teléfono

Agregue el primer módulo de texto a la columna 1

Texto

Agregue un primer módulo de texto en la columna 1. Inserte el título como contenido H1.

• Cuerpo: Contenido H1

Texto de encabezado

En la pestaña de diseño, aplique estilo al texto del encabezado a continuación.

• Nivel de título: H1
• Fuente: Alata
• Peso: Negrita
• Alineación: Centro
• Color: Blanco roto #eaeaea
• Tamaño
  
  • Escritorio: 85px
  • Tableta: 70px
  • Teléfono: 44px
• Espaciado entre letras: 2px
• Altura de la línea: 1,1 em
• Sombra de texto: primera opción
• Color de sombra: rgba(o,0,0,0.26)

Agregue el segundo módulo de texto a la columna 1

Texto

Agregue un segundo módulo de texto. Inserte la fecha como contenido H2.

• Cuerpo: contenido H2, 15 y 16 de julio de 2020

Texto de encabezado

Aplique estilo al texto del encabezado a continuación.

• Nivel de título: H2
• Fuente: Alata
• Peso: Regular
• Alineación: Centro
• Color: Fucsia #b030b0
• Tamaño
  
  • Escritorio y tableta: 60px
  • Teléfono: 45 píxeles
• Altura de la línea: 1,3 em

Espaciado

Agrega algo de espacio también.

• Relleno inferior: 20px

Agregar módulo de botones a la columna 1

Texto

Agregue un módulo de botones para la llamada a la acción.

• Botón: Registrarse

Enlace

Agregue el enlace de anclaje.

• URL del enlace: #Registrarse

Alineación

Vaya a la pestaña de diseño y establezca la alineación.

• Alineación de botones: Centro

Estilos personalizados de botones

Dale estilo al botón también.

• Tamano del texto
  
  • Escritorio: 30px
  • Tableta: 25px
  • Teléfono: 20px
• Color del texto: Blanco #ffffff
• Fondo: Púrpura #602080
• Radio del borde: 35 px
• Espaciado entre letras: 1px
• Fuente: Alata

Espaciado

Finalmente, ajuste el espaciado.

• Margen superior
  
  • Tableta y teléfono: 15px
• Relleno superior: 2px

Agregar módulo de botones a la columna 2

Texto

Pase a la columna 2 y agregue un módulo de botón. Agregue la copia de su elección.

• Botón: Altavoces

Enlace

A continuación, agregue un enlace de anclaje.

• URL del enlace: #Hablantes

Alineación

En la pestaña de diseño, establezca la alineación.

• Alineación de botones
  
  • Escritorio: Derecho
  • Tableta y Teléfono: Centro

Estilo personalizado del botón

Ajuste los estilos de botones personalizados también.

• Tamaño del texto: 24px
• Color del texto: Blanco #ffffff
• Fondo: transparente
• Espaciado entre letras: 1px
• Fuente del botón: Alata
• Radio del borde: 0px

Sombra de la caja

Finalmente, agregue una sombra de cuadro.

• Sombra de cuadro: 4ta opción
• Posición Horizontal: 0px
• Posición vertical: 5 px
• Color de sombra: Fucsia: #b030b0

Módulo de botón de clonación a la columna 3

Botón de clonación

Clone el botón en la columna 2 y coloque el módulo duplicado en la columna 3.

Módulo de botón de ajuste

Texto

Cambia el texto en el botón clonado.

• Botón: Horario

Enlace

Cambie el enlace de anclaje también.

• URL del enlace: #Horario

Alineación

No te olvides de cambiar la alineación también.

• Alineación de botones
  
  • Escritorio izquierdo

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila con dos columnas iguales.

Dimensionamiento

Ajuste primero el ancho de la canaleta.

• Ancho de canalón personalizado: 2

Espaciado

Agregue espacio a continuación.

• Margen superior
  
  • Teléfono: -35px

Visibilidad

Luego ajuste la visibilidad de la fila.

• Deshabilitar en: tableta y computadora de escritorio

Clonar módulo de botón y colocar duplicado en la columna 1

Botón de clonación

Clone el módulo de botones en la columna 2 de la fila anterior y coloque el módulo duplicado en la columna 1 de la nueva fila.

Módulo de botón de ajuste

Estilo personalizado del botón

Ajusta el texto en el nuevo botón.

• Tamaño del texto: 20px

Sombra de la caja

Modifica también la sombra del cuadro.

• Posición vertical: 4px

Agregar módulo de botón clonado a la columna 2

Botón de clonación

Módulo de botón duplicado de la columna 3 en la fila anterior. Péguelo en la columna 2 de esta fila.

Módulo de botón de ajuste

Texto

Ajuste el contenido del texto en el botón clonado.

• Texto: Horario

2. Crear sección de información

Agregar nueva sección

Fondo

Para crear la sección de información, agregue una nueva sección y aplique estilo al fondo primero.

• Gradiente de fondo
  
  • Color 1: #202040
  • Color 2: #202060

Espaciado

Agrega algo de relleno también.

• Relleno superior: 170px
• Relleno inferior: 5px

Visibilidad

Finalmente, ajuste la configuración de visibilidad en la pestaña avanzada.

• Desbordamiento horizontal y vertical: oculto

Agregar nueva fila

Estructura de la columna

Agregue una nueva fila con una columna. Llamaremos a esto la fila de título.

Dimensionamiento

Establezca el tamaño a continuación.

• Ancho: 80%
• Ancho máximo: 1800px

Agregar módulo de texto

Texto

Agrega un módulo de texto.

• Cuerpo: Contenido H2 – ¿Por qué asistir a la Cumbre Virtual de Marketing Digital?

Texto de encabezado

En la pestaña de diseño, aplique estilo al texto del encabezado.

• Nivel de título: H2
• Fuente: Alata
• Color del texto: Blanco #ffffff
• Tamaño
  
  • Escritorio: 55px
  • Tableta: 45px
  • Teléfono: 40px
• Espaciado entre letras: 2px
• Altura de la línea: 1,1 em

Agregar módulo divisor

Línea

Ahora agregue un módulo divisor y aplique estilo a la línea en la pestaña de diseño.

• Color de línea: Fucsia #b030b0

Dimensionamiento

Ajuste el tamaño a continuación.

• Peso del divisor: 50px
• Altura máxima: 50 px

Efectos de desplazamiento

En la pestaña avanzada, agregue un efecto de desplazamiento horizontal.

• Habilitar movimiento horizontal
• Escritorio
  
  • Compensación inicial: -6
  • Compensación media: 50% / 0
  • Compensación final: 6
• Tableta y teléfono
  
  • Indicando Compensación: -4
  • Compensación media: 50% /0
  • Compensación final: 4

Agregar nueva fila

Estructura de la columna

Ahora agregue una nueva fila con tres columnas. Seleccione la estructura de columna 1/2, 1/4, 1/4.

Dimensionamiento

Antes de agregar módulos, ajuste el tamaño de fila.

• Ancho: 80%
• Ancho máximo: 1800px

Configuración de la columna 1

Espaciado

Además, ajuste el espaciado de la primera columna.

• Relleno superior: 20px

Agregar módulo de imagen a la columna 1

Imagen

Ahora agregue un módulo de imagen a la columna 1. Use una de sus imágenes con el efecto de duotono.

• Imagen: Foto con efecto duotono

Borde

Ajuste los bordes también.

• Esquinas redondeadas: 15px

Agregue el módulo Blurb a la columna 2

Texto

Pase a la columna 2 y agregue un módulo de propaganda. Inserta el contenido.

• Título: Hacer nuevas conexiones
• Cuerpo: contenido descriptivo

Imagen

Sube la imagen número 1 que puedes encontrar en la carpeta descargable.

• Imagen: PNG de #1

Imagen e icono

Ajuste la ubicación de la imagen a continuación.

• Colocación: Arriba
• Alineación: Izquierda

Texto del título

Dale estilo al texto del título también.

• Nivel de título: H4
• Fuente: Alata
• Color: Blanco #ffffff
• Tamaño: 23px

Cuerpo de texto

No te olvides de aplicar estilo al cuerpo del texto.

• Fuente: Open Sans
• Color: Blanco #ffffff
• Tamaño: 14px
• Espaciado entre letras: 1px

CSS personalizado

Finalmente, agregue un poco de relleno adicional con CSS personalizado al título de la propaganda en la pestaña avanzada.

• Título de la publicidad: parte inferior del relleno: 15 px;

Clonar módulo Blurb y colocar duplicado en la columna 2

Clon de propaganda

Duplicar la primera propaganda en la columna 2.

Contenido

Actualice el contenido.

• Título: Nuevo Título
• Cuerpo: Nuevo texto descriptivo

Imagen

Luego, cambie la imagen del número. Puede encontrar el nuevo en la carpeta descargable.

• Imagen: PNG de #2

Eliminar columna 3 y clonar columna 2

Columna de clonación

En la configuración de la fila, elimine la tercera columna y duplique la segunda. Asegúrese de devolver la estructura de la columna a 1/2, 1/4, 1/4.

Ajustar Blurb 1 en la columna 3

Contenido

Actualice el contenido del texto en la propaganda clonada.

• Título: Nuevo Título
• Cuerpo: Nuevo texto descriptivo

Imagen

Cambie la imagen del número también.

• Imagen: PNG de #3

Ajuste Blurb 2 en la columna 3

Contenido

Modifique también el contenido de esta propaganda. Primero el texto.

• Título: Nuevo Título
• Cuerpo: Nuevo texto descriptivo

Imagen

Luego, cambie la imagen del número.

• Imagen: PNG de #4

3. Crear sección de oradores

Agregar nueva sección

Fondo

Pasando a la sección de los altavoces. Agregue una nueva sección y aplique estilo al fondo.

• Gradiente de fondo
  
  • Color 1: #202060
  • Color 2: #162447

Visibilidad

Ajuste la configuración de visibilidad en la pestaña avanzada.

• Desbordamiento horizontal y vertical: oculto

Clonar fila de título y colocar duplicado en nueva sección

fila duplicada

Duplique la fila de título de la sección anterior y coloque el duplicado en la sección clonada. Llamaremos a esto, fila de título 2.

Ajustar módulo de texto

Texto

• Título: Nuevo contenido del título: Los oradores

Texto de encabezado

Luego, aplique estilo a la configuración de texto H3 en la pestaña de diseño.

• Nivel de título: H3
• Fuente: Alata
• Tamaño
  
  • Escritorio: 100px
  • Tableta: 80px
  • Teléfono: 45px

CSS personalizado

Ajuste la ID de CSS en el módulo de texto clonado también.

• ID de CSS: Altavoces

Ajustar divisor

Línea

A continuación, cambie el color de la línea del módulo divisor.

• Color de línea: Púrpura #602080

Agregar nueva fila

Estructura de la columna

Ahora agregue una nueva fila con 5 módulos del mismo tamaño.

Dimensionamiento

Ajuste el tamaño de la fila de la siguiente manera:

• Ancho: 80%
• Ancho máximo: 1800px
• Igualar la altura de la columna: Sí

Espaciado

Agrega algo de espacio también.

• Margen superior: 40px

Agregar módulo de persona a la columna 1

Texto

Agregue el módulo de primera persona a la columna 1.

• Nombre: Nombre de la persona
• Posición: Posición de la persona
• Perfiles de redes sociales: perfiles de personas
• Cuerpo: Texto Descriptivo

Imagen

Sube la imagen del altavoz con el efecto de color. Recomendamos un tamaño de imagen de 550 x 770 px.

• Imagen: Foto con efecto duotono

Imagen

Agrega algunas esquinas redondeadas a la siguiente imagen.

• Esquinas redondeadas de la imagen: 15px

Texto del título

Luego, aplique estilo al texto del título.

• Nivel de título: H4
• Fuente: Alata
• Tamaño: 33px

Cuerpo de texto

Dale estilo al cuerpo del texto también.

• Fuente: Open Sans
• Tamaño: 14px
• Espaciado entre letras: 1px

Texto de posición

No olvide el texto de la posición.

• Fuente: Alata
• Tamaño: 20px

CSS personalizado

Finalmente, agregue un poco de CSS personalizado para relleno adicional.

• Imagen de miembro: relleno inferior: 10px;

• Título: relleno inferior: 20px;

• Posición del miembro: parte inferior del relleno: 20px;

Columna duplicada 1

Columna de clonación

En la configuración de la fila, elimine las columnas 2-5. Duplica la columna 1 cuatro veces.

Ajustar contenido para módulos de personas nuevas

Texto

Actualice el contenido en todos los módulos clonados. Primero el texto.

• Nombre: Nombre de la nueva persona
• Posición: Posición de la nueva persona
• Perfiles de redes sociales: perfiles de personas nuevas
• Cuerpo: Nuevo texto descriptivo

Imagen

Luego la imagen.

• Imagen: Nueva imagen con efecto duotono (550x700px)

4. Crear sección de horario

Agregar nueva sección

Fondo

Ahora vamos a crear la sección de programación. Agregue una nueva sección y aplique estilo al fondo de la siguiente manera:

• Gradiente de fondo
  
  • Color 1: #162447
  • Color 2: #1f4068

Visibilidad

Ajuste la configuración de visibilidad en la pestaña avanzada.

• Desbordamiento horizontal y vertical: oculto

Fila de título de clon 2

fila duplicada

Clone la fila de título de la sección anterior y péguela en esta sección.

Ajustar módulo de texto

Texto

Cambia el contenido del título.

• Título: El horario

CSS personalizado

Cambie la ID de CSS en el módulo de texto clonado.

• ID de CSS: horario

Ajustar divisor

Línea

Cambia el color del divisor también.

• Color de línea: Fucsia #b030b0

Agregar nueva fila

Estructura de la columna

Ahora, agregue una nueva fila con tres columnas del mismo tamaño.

Dimensionamiento

Ajuste el tamaño de la fila.

• Ancho: 80%
• Ancho máximo: 1800px

Espaciado

Agrega algo de espacio también.

• Margen inferior: 50px

Agregar módulo de texto a la columna 1

Texto

Agregue un módulo de texto a la primera columna. Inserta el contenido.

• Cuerpo: Contenido H3 – Día 1

Texto de encabezado

Vaya a la pestaña de diseño y aplique estilo al texto del encabezado.

• Nivel de título: H3
• Color: Blanco #ffffff
• Tamaño: 50px

Espaciado

Agregue algo de espacio a continuación.

• Relleno superior: 20px
• Relleno izquierdo: 30px

Agregar llamada a la acción a la columna 1

Texto

Ahora agregue un módulo de llamada a la acción con algún contenido de su elección.

• Título: Título del tema del día – Inbound Marketing
• Cuerpo: Texto Descriptivo

Fondo

Agregue un fondo de imagen también.

• Imagen de fondo: Imagen con efecto duotono

Texto de encabezado

En la pestaña de diseño, aplique estilo al texto del encabezado.

• Nivel de título: H3
• Fuente: Alata
• Color: Blanco #ffffff
• Tamaño: 26px
• Espaciado entre letras: 1px

Cuerpo de texto

A continuación, aplique estilo al cuerpo del texto.

• Fuente: Alata
• Color: Blanco #ffffff
• Tamaño: 15px

Espaciado

Agrega algo de espacio también.

• Margen superior: -120px

Borde

Luego, diseñe el borde.

• Esquinas redondeadas: 15px

CSS personalizado

Finalmente, agregue CSS personalizado para un estilo adicional.

• Descripción de la promoción
  
  • borde-radio: 15px;
  • color de fondo: #162447;
  • relleno-izquierda: 25px;
  • relleno derecho: 25px;
  • parte inferior del relleno: 40px;

• Título promocional
  
  • color de fondo: #q62447
  • margen superior: 500px
  • parte inferior del relleno: 40px
  • parte inferior del relleno: 40px

Agregar módulo de texto a la columna 2

Texto

Pase a la columna 2 y agregue un módulo de texto. Sigue esta estructura de contenido:

• Cuerpo
  
  • Fecha: Contenido H4
  • Altavoz: Contenido H5
  • Tema: Contenido H6
  • Descripción: Contenido del párrafo

Texto

En la pestaña de diseño, estilice el texto.

• Fuente: Open Sans
• Tamaño: 14px
• Espaciado entre letras: 1px
• Alineación: Izquierda

Texto de encabezado

Luego diseñe todos los niveles de encabezado.

• Nivel de título: H4
  
  • Fuente: Alata
  • Peso: Negrita
  • Tamaño: 40px
• Nivel de título: H5
  
  • Fuente: Alata
  • Tamaño: 25px
  • Altura de la línea: 1,5 em
• Nivel de título: H6
  
  • Fuente: Alata
  • Estilo: Cursiva
  • Tamaño: 19px
  • Altura de la línea: 1,5 em

Borde

Dale estilo al borde también.

• Estilo: Borde inferior
• Ancho: 3px
• Color: Fucsia #b030b0

Clonar módulo de texto 2 veces

Módulo de texto clonado

Duplica el primer módulo de texto dos veces.

Ajustar nuevos módulos de texto

Texto

Cambie el contenido en los módulos de texto clonados.

• Cuerpo
  
  • Fecha: Nuevo contenido H4
  • Ponente: Nuevo contenido H5
  • Tema: Nuevo contenido H6
  • Descripción: Nuevo contenido de párrafo

Eliminar borde del tercer módulo de texto

Borde

Elimina el borde del último módulo de la columna.

• Ancho del borde inferior
  
  • Escritorio: 0px
  • Tableta y teléfono: 3px

Eliminar columna 3 y clonar columna 2

Clonar columnas

En la configuración de la fila, elimine la columna 3. Duplique la columna 2.

Eliminar y ajustar módulos de texto

Eliminar módulo de texto

Borre el tercer módulo de texto en la columna clonada.

Ajustar contenido

Actualice el contenido en cada nuevo módulo de texto.

• Cuerpo
  
  • Fecha: Nuevo contenido H4
  • Ponente: Nuevo contenido H5
  • Tema: Nuevo contenido H6
  • Descripción: Nuevo contenido de párrafo

Módulo de botón de clonación y lugar duplicado en la columna 3

Botón de clonación

Copie el botón «registrarse» en la sección del encabezado y péguelo debajo del último módulo de texto en la columna 3.

Módulo de botón de ajuste

Alineación

Cambie la alineación del botón a la izquierda.

• Alineación de botones: Izquierda

Estilo personalizado del botón

Ajusta un poco el tamaño del texto.

• Tamano del texto
  
  • Escritorio y tableta: 25 px
  • Teléfono: 20px

Clonar la primera fila de la sección del programa

Clonar Fila

Duplique la primera fila en la sección de programación.

Ajustar módulo de texto en la columna 1

Texto

Cambie el contenido en el módulo de texto clonado.

• Cuerpo: Día 2

Ajustar el módulo de llamada a la acción

Texto

Ajusta el contenido del módulo de llamada a la acción.

• Título: Título del tema del nuevo día
• Descripción: Nuevo contenido descriptivo

Fondo

Cambia también la imagen de fondo.

• Imagen de fondo: Nueva imagen con efecto duotono

Ajustar módulos de texto

Texto

Ajuste el contenido en los módulos de texto también.

• Cuerpo
  
  • Fecha: Nuevo contenido H4
  • Ponente: Nuevo contenido H5
  • Tema: Nuevo contenido H6
  • Descripción: Nuevo contenido de párrafo

5. Crear Sección de Registro

Agregar nueva sección

Fondo

La sección final está dedicada al registro. Agrega una nueva sección y diseña el fondo de la siguiente manera. Encontrará el gráfico de pie de página en la carpeta de descarga de arriba.

• Color de fondo: Púrpura #602080
• Imagen de fondo: gráfico de pie de página
• Posición de la imagen: centro superior

Espaciado

Ajuste el espaciado de la sección también.

• Relleno superior: 70px
• Relleno inferior: 120px

Visibilidad

Y cambie la configuración de visibilidad en la pestaña avanzada.

• Desbordamiento horizontal y vertical: oculto

Agregar nueva fila

Estructura de la columna

Ahora agregue una nueva fila con una columna.

Agregar módulo divisor

Visibilidad

Agregue un divisor invisible para que actúe como enlace de anclaje para la sección.

• Mostrar divisor: No

ID de CSS

Inserte el ID de CSS que vincula a todos los botones de «registro».

• ID de CSS: Registrarse

Agregar nueva fila

Estructura de la columna

Agregue una segunda fila con dos columnas iguales.

Dimensionamiento

Ajuste la configuración de tamaño de la fila.

• Ancho de canalón personalizado: 4
• Ancho: 80%
• Ancho máximo:: 1800px

Agregue el módulo del temporizador de cuenta regresiva a la columna 1

Texto

Agregue un módulo de temporizador de cuenta regresiva a la primera columna. Añade el contenido y la fecha del evento.

• Título: Título descriptivo
• Fecha: Fecha de inicio

Fondo

Dale estilo al fondo a continuación.

• Gradiente de fondo
  
  • Color 1: #1f4068
  • Color 2: #162447

Texto del título

En la pestaña de diseño, aplique estilo al texto del título.

• Nivel de título: H4
• Fuente: Alata
• Alineación: Centro
• Color: Blanco #ffffff
• Tamaño
  
  • Escritorio y tableta: 30px
  • Teléfono: 25x

Texto de números

Dale estilo al texto de los números también.

• Fuente: Alata
• Color: Blanco #ffffff
• Tamaño
  
  • Escritorio: 55px
  • Tableta: 35px
  • Teléfono: 25px

Texto de la etiqueta

Además, el texto de la etiqueta.

• Fuente: Alata
• Tamaño: 9px

Dimensionamiento

Luego, ajuste el tamaño de la fila.

• Ancho
  
  • Tallaje: 100%

Espaciado

Agrega algo de relleno también.

• Relleno superior e inferior: 60px

Borde

Finalmente, diseñe el borde.

• Esquinas redondeadas: 15px

Agregar módulo de formulario de contacto a la columna 2

Elementos

Agregue un nuevo módulo de formulario de contacto a la columna 2. Elimine el campo de mensaje.

• Campo de mensaje: Quitar

Diseño de campos

Ingrese la configuración para cada campo. En la pestaña de diseño, en diseño, haga clic en «hacer ancho completo». Haz lo mismo para el segundo campo.

• Diseño: hacer ancho completo

Texto

Regrese a la configuración general del formulario de contacto y agregue contenido.

• Título: Título descriptivo
• Mensaje de éxito: Su mensaje
• Botón Enviar: Registrarse

Campos

Luego, diseñe los campos de la siguiente manera:

• Color de fondo: transparente
• Color del texto: Blanco #ffffff
• Color de fondo de enfoque: transparente
• Color del texto de enfoque: Blanco #ffffff
• Fuente: Alata
• Tamaño
  
  • Escritorio: 22px
  • Tableta y teléfono: 18px
• Espaciado entre letras: 1px

Texto del título

Dale estilo al texto del título también.

• Nivel de título: H4
• Fuente: Alata
• Color: Blanco #ffffff
• Tamaño
  
  • Escritorio y teléfono: 30px
  • Teléfono: 24px
• Espaciado entre letras: 1px

Estilos personalizados de botones

Ajuste los estilos personalizados del botón también.

• Tamaño del texto: 20px
• Color del texto: Blanco #ffffff
• Color de fondo: Azul #1f4068
• Radio del borde: 15px
• Espaciado entre letras: 1px
• Fuente: Alata
• Margen superior: 10px
• Acolchado superior
  
  • Tableta y teléfono: 60px

Borde

No olvides ajustar el radio del borde.

• Esquinas redondeadas: 15px
• Ancho del borde: 2px
• Color: Blanco #fffff

CSS personalizado

Finalmente, agregue CSS personalizado para relleno adicional.

• Título de contacto: parte inferior del relleno: 30px;

Avance

¡Hemos terminado! Echemos un vistazo al diseño de la página de destino nuevamente en diferentes tamaños de pantalla.

Escritorio

Tableta

Móvil

Eso es un envoltorio

¡Lo hiciste! ¿Cómo se ve la página de destino de su cumbre virtual? Utilice este diseño para su propia cumbre virtual o para un cliente de diseño web. La navegación está optimizada para la conversión con la cantidad justa de información. También agregamos divisores de sección de desplazamiento para un pequeño extra visual.

Háganos saber lo que piensa en los comentarios. ¿Descargaste el diseño o seguiste los pasos?