Cómo crear una página de inicio de cumbre virtual con Divi
Publicado: 2020-07-02La promoción de un evento virtual implica una serie de estrategias promocionales. Crear una página de destino atractiva es una de ellas. Crear una página de destino para su cumbre virtual es la manera perfecta de despertar la curiosidad de su audiencia. Con la combinación correcta de secciones, puede invitar, informar y reunir a los asistentes registrados. Hoy le mostraremos cómo crear una página de inicio de cumbre virtual con cinco secciones. El diseño incluye imágenes de duotono y divisores de sección de desplazamiento. También hemos incluido un archivo JSON descargable si desea omitir el tutorial paso a paso. En la carpeta, también encontrará los gráficos de encabezado y pie de página tanto en PNG como en AI.
¡Hagámoslo!
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 tener en sus manos el diseño de la página de destino de la cumbre virtual gratuita, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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 llamar la atención del espectador, las páginas de destino también deben realizar conversiones. Una página de destino virtual de la cumbre, 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 a actuar y registrarse.
Hemos incluido las siguientes secciones en la página de inicio de la cumbre virtual:
Encabezamiento
La sección del 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 navegación sencilla al resto de la página.
En nuestro diseño, hemos incluido dos botones con enlaces de anclaje 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. En toda 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, agregamos cuatro borrones y una imagen que se puede convertir fácilmente en un video. Los anuncios enumeran cuatro razones para asistir a la cumbre y la imagen (o video) es el elemento visual que respalda la decisión.
Los altavoces
En la siguiente sección, encontrará un conjunto de módulos para seis personas. Aquí es donde presentas a los ponentes que participarán en la cumbre. Cada módulo incluye los siguientes elementos:
- Imagen
- Nombre
- Posición
- Descripción
- Enlaces a redes sociales
Asegúrese de ingresar toda la información relevante para cada orador. Además, intente utilizar la misma cantidad de líneas en el cuerpo del texto para que el diseño se vea nítido. Como puede ver, utilizamos un efecto de color duotono en todas las fotos de los oradores para darle al diseño un aspecto y una sensación interesantes. 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 con elegancia el programa de la cumbre y nos hemos asegurado 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. Intente mantener el contenido aproximadamente en la misma longitud para que el diseño se mantenga ordenado.
Las filas están organizadas por días con una imagen de título y un grupo de anuncios. 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.
Registrarse
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. 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 destino de la cumbre virtual, encontrará tres botones que navegan a esta sección para optimizar la generación de prospectos.
Cree 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.
Abrir ajustes y seleccionar 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 degradados
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 degradado de la siguiente manera:
- Tipo de degradado: sólido
- Suavidad: 100%
- Parada de opacidad n. ° 1: 100%
- Parada de color n. ° 2
- Morado oscuro # 202060
- Posición: 19%
- Punto medio:
- Punto medio de opacidad: 85%
- Punto medio de color: 50%
- Parada de opacidad n. ° 2: 55%
- Parada de color #
- Violeta # f895f8
- Posición: 100%
Guardar como 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 con una altura de 700 px. 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
Agrega 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 margen superior también.
- Margen superior: 200 px
Columna 2, 3 Configuración
Espaciado
Ajuste la configuración de las columnas 2 y 3. Primero, el espaciado
- Margen superior: 30 px
Visibilidad
Luego, oculta las columnas en el teléfono.
- Desactivar en: teléfono
Agregar 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 encabezado: 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.1em
- 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
Agrega un segundo módulo de texto. Inserte la fecha como contenido H2.
- Cuerpo: H2 Content, 15 + 16 de julio de 2020
Texto de encabezado
A continuación, aplique estilo al texto del título.
- Nivel de encabezado: H2
- Fuente: Alata
- Peso: Regular
- Alineación: Centro
- Color: Fucshia # b030b0
- Tamaño
- Escritorio y tableta: 60px
- Teléfono: 45 px
- Altura de la línea: 1.3em
Espaciado
Agregue un poco de espacio también.
- Acolchado 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: #Register
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: 25 px
- Teléfono: 20px
- Color del texto: blanco #ffffff
- Fondo: Morado # 602080
- Radio de borde: 35px
- Espaciado entre letras: 1px
- Fuente: Alata
Espaciado
Finalmente, ajuste el espaciado.
- Margen superior
- Tableta y teléfono: 15px
- Acolchado superior: 2px
Agregar módulo de botones a la columna 2
Texto
Vaya a la columna 2 y agregue un módulo de botones. Agregue la copia de su elección.
- Botón: Altavoces
Enlace
A continuación, agregue un enlace de anclaje.
- URL del enlace: #Ponentes
Alineación
En la pestaña de diseño, establezca la alineación.
- Alineación de botones
- Escritorio: Derecha
- Tableta y teléfono: Centro
Estilo personalizado del botón
Ajuste también los estilos de botones personalizados.
- Tamaño del texto: 24px
- Color del texto: blanco #ffffff
- Fondo: Transparente
- Espaciado entre letras: 1px
- Fuente del botón: Alata
- Radio de borde: 0px
Sombra de la caja
Finalmente, agregue una sombra de cuadro.
- Box Shadow: cuarta opción
- Posición horizontal: 0px
- Posición vertical: 5 px
- Color de sombra: Fucsia: # b030b0
Clonar módulo de botones en 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
Cambie el texto en el botón clonado.
- Botón: Horario
Enlace
Cambie también el enlace de anclaje.
- URL del enlace: #Schedule
Alineación
No olvide cambiar también la alineación.
- Alineación de botones
- Escritorio a la izquierda
Agregar nueva fila
Estructura de la columna
Agregue una nueva fila con dos columnas iguales.
Dimensionamiento
Primero ajuste el ancho de la canaleta.
- Ancho de canalón personalizado: 2
Espaciado
A continuación, agregue el espacio.
- Margen superior
- Teléfono: -35px
Visibilidad
Luego, ajuste la visibilidad de la fila.
- Desactivar en: tableta y escritorio
Clonar módulo de botón y colocar duplicado en la columna 1
Botón de clonar
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 botones duplicado de la columna 3 de 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
Agregue un poco de relleno también.
- Acolchado superior: 170px
- Acolchado 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. A esto lo llamaremos la fila del 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: H2 Content - ¿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 encabezado: 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 diseñe la línea en la pestaña de diseño.
- Color de línea: Fucsia # b030b0
Dimensionamiento
A continuación, ajusta el tamaño.
- 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
- Desplazamiento inicial: -6
- Desplazamiento medio: 50% / 0
- Desplazamiento final: 6
- Tableta y teléfono
- Indicación de compensación: -4
- Desplazamiento medio: 50% / 0
- Desplazamiento 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 las filas.
- Ancho: 80%
- Ancho máximo: 1800px
Configuración de la columna 1
Espaciado
Además, ajuste el espaciado de la primera columna.
- Acolchado 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 duotono.
- Imagen: Foto con efecto duotono
Frontera
Ajusta también los bordes.
- Esquinas redondeadas: 15px
Agregar módulo Blurb a la columna 2
Texto
Pase a la columna 2 y agregue un módulo de propaganda. Inserte el contenido.
- Título: Establezca 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: superior
- Alineación: Izquierda
Texto del título
Diseñe también el texto del título.
- Nivel de encabezado: H4
- Fuente: Alata
- Color: Blanco #ffffff
- Tamaño: 23px
Cuerpo de texto
No olvides darle estilo al texto del cuerpo.
- 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 del anuncio: padding-bottom: 15px;
padding-bottom: 15px;
Clonar el módulo de propaganda y colocar el duplicado en la columna 2
Clon Blurb
Duplique la primera propaganda en la columna 2.
Contenido
Actualiza el contenido.
- Título: Título nuevo
- 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 la columna 3 y clonar la 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: Título nuevo
- Cuerpo: Nuevo texto descriptivo
Imagen
Cambie también la imagen del número.
- Imagen: PNG de # 3
Ajustar Blurb 2 en la columna 3
Contenido
Modifique también el contenido de esta propaganda. Primero el texto.
- Título: Título nuevo
- 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 ponentes. Agrega una nueva sección y aplica 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 la fila de título y colocar el duplicado en una 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. A esto lo llamaremos fila de título 2.
Ajustar módulo de texto
Texto
Luego, diseñe la configuración de texto H3 en la pestaña de diseño. Ajuste también la ID de CSS en el módulo de texto clonado. A continuación, cambie el color de la línea del módulo divisor. Ahora agregue una nueva fila con 5 módulos del mismo tamaño. Ajuste el tamaño de la fila de la siguiente manera: Agregue un poco de espacio también. Agregue el módulo de primera persona a la columna 1. Sube la imagen del altavoz con el efecto de color. Recomendamos un tamaño de imagen de 550 x 770 px. Agregue algunas esquinas redondeadas a la imagen a continuación. Luego, aplique estilo al texto del título. Diseñe también el cuerpo del texto. No olvide el texto de la posición. Finalmente, agregue algo de CSS personalizado para un relleno adicional. En la configuración de filas, elimine las columnas 2-5. Duplique la columna 1 cuatro veces. Actualice el contenido de todos los módulos clonados. Primero el texto. Luego la imagen. Ahora crearemos la sección de programación. Agregue una nueva sección y aplique estilo al fondo de la siguiente manera: Ajuste la configuración de visibilidad en la pestaña avanzada. Clone la fila de título de la sección anterior y péguela en esta sección. Cambia el contenido del título. Cambie la ID de CSS en el módulo de texto clonado. Cambia también el color del divisor. Ahora, agregue una nueva fila con tres columnas del mismo tamaño. Ajusta el tamaño de la fila. Agregue un poco de espacio también. Agregue un módulo de texto a la primera columna. Inserte el contenido. Vaya a la pestaña de diseño y aplique estilo al texto del encabezado. Agregue un poco de espacio a continuación. Ahora agregue un módulo de llamado a la acción con algún contenido de su elección. Agrega un fondo de imagen también. En la pestaña de diseño, aplique estilo al texto del encabezado. A continuación, aplique estilo al texto del cuerpo. Agregue un poco de espacio también. Luego, diseñe el borde. Finalmente, agregue CSS personalizado para un estilo adicional. Vaya a la columna 2 y agregue un módulo de texto. Siga esta estructura de contenido: En la pestaña de diseño, aplique estilo al texto. Luego, aplique estilo a todos los niveles de título. Dale estilo al borde también. Duplica el primer módulo de texto dos veces. Cambie el contenido de los módulos de texto clonados. Elimina el borde del último módulo de la columna. En la configuración de filas, elimine la columna 3. Duplique la columna 2. Borre el tercer módulo de texto en la columna clonada. Actualice el contenido de cada nuevo módulo de texto. Copie el botón "registrar" en la sección del encabezado y péguelo debajo del último módulo de texto en la columna 3. Cambie la alineación del botón a la izquierda. Ajusta un poco el tamaño del texto. Duplique la primera fila en la sección de programación. Cambie el contenido en el módulo de texto clonado. Ajuste el contenido del módulo de llamada a la acción. Cambie también la imagen de fondo. También ajusta el contenido de los módulos de texto. La última sección está dedicada al registro. Agregue una nueva sección y aplique el estilo del fondo de la siguiente manera. Encontrará el gráfico de pie de página en la carpeta de descargas de arriba. También ajusta el espaciado de la sección. Y cambie la configuración de visibilidad en la pestaña avanzada. Ahora agregue una nueva fila con una columna. Agregue un divisor invisible para que actúe como enlace de anclaje para la sección. Inserte la ID de CSS que enlaza con todos los botones de "registro". Agrega una segunda fila con dos columnas iguales. Ajusta la configuración de tamaño de la fila. Agregue un módulo de temporizador de cuenta regresiva a la primera columna. Agrega el contenido y la fecha del evento. A continuación, aplique estilo al fondo. En la pestaña de diseño, aplique estilo al texto del título. Diseñe también el texto de los números. Además, el texto de la etiqueta. Luego, ajuste el tamaño de la fila. Agregue un poco de relleno también. Finalmente, diseñe el borde. Agregue un nuevo módulo de formulario de contacto a la columna 2. Elimine el campo de mensaje. 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 con el segundo campo. Regrese a la configuración general del formulario de contacto y agregue algo de contenido. Luego, diseñe los campos de la siguiente manera: Diseñe también el texto del título. Ajuste los estilos personalizados de los botones también. No olvide ajustar el radio del borde. Finalmente, agregue CSS personalizado para un relleno adicional. ¡Terminamos! Echemos un vistazo al diseño de la página de destino nuevamente en diferentes tamaños de pantalla. ¡Lo hiciste! ¿Cómo se ve su página de destino de la 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. ¿Descargó el diseño o siguió los pasos?
Texto de encabezado
CSS personalizado
Ajustar divisor
Línea
Agregar nueva fila
Estructura de la columna
Dimensionamiento
Espaciado
Agregar módulo de persona a la columna 1
Texto
Imagen
Imagen
Texto del título
Cuerpo de texto
Texto de posición
CSS personalizado
padding-bottom: 10px;
padding-bottom: 20px;
padding-bottom: 20px;
Columna duplicada 1
Columna de clonación
Ajustar contenido para módulos de personas nuevas
Texto
Imagen
4. Crear sección de programación
Agregar nueva sección
Fondo
Visibilidad
Clonar la fila de título 2
Fila duplicada
Ajustar módulo de texto
Texto
CSS personalizado
Ajustar divisor
Línea
Agregar nueva fila
Estructura de la columna
Dimensionamiento
Espaciado
Agregar módulo de texto a la columna 1
Texto
Texto de encabezado
Espaciado
Agregar llamado a la acción a la columna 1
Texto
Fondo
Texto de encabezado
Cuerpo de texto
Espaciado
Frontera
CSS personalizado
border-radius: 15px;
background-color: #162447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
background-color: #q62447;
margin-top: 500px;
padding-bottom: 40px;
padding-bottom: 40px;
Agregar módulo de texto a la columna 2
Texto
Texto
Texto de encabezado
Frontera
Clonar el módulo de texto 2 veces
Módulo de clonación de texto
Ajustar nuevos módulos de texto
Texto
Eliminar el borde del tercer módulo de texto
Frontera
Eliminar la columna 3 y clonar la columna 2
Clonar columnas
Eliminar y ajustar módulos de texto
Eliminar módulo de texto
Ajustar contenido
Clonar módulo de botón y colocar duplicado en la columna 3
Botón de clonación
Módulo de botón de ajuste
Alineación
Estilo personalizado del botón
Clonar la primera fila de la sección de programación
Fila de clonación
Ajustar el módulo de texto en la columna 1
Texto
Ajustar el módulo de llamada a la acción
Texto
Fondo
Ajustar módulos de texto
Texto
5. Crear sección de registro
Agregar nueva sección
Fondo
Espaciado
Visibilidad
Agregar nueva fila
Estructura de la columna
Agregar módulo divisor
Visibilidad
ID de CSS
Agregar nueva fila
Estructura de la columna
Dimensionamiento
Agregar módulo de temporizador de cuenta regresiva a la columna 1
Texto
Fondo
Texto del título
Texto de números
Texto de etiqueta
Dimensionamiento
Espaciado
Frontera
Agregar módulo de formulario de contacto a la columna 2
Elementos
Diseño de campos
Texto
Los campos
Texto del título
Estilos personalizados de botones
Frontera
CSS personalizado
padding-bottom: 30px;
Avance
Escritorio
Tableta
Móvil
Eso es un envoltorio