Cómo incluir sin problemas un formulario de contacto de columna deslizable en su sección Divi Hero
Publicado: 2020-07-26Cuando piense en formas de incluir CTA en el diseño de su página, podría considerar incluir un formulario de contacto en su sección de héroe. Este enfoque permite que las personas se pongan en contacto inmediatamente con usted sin tener que navegar más en su sitio web. Si está buscando una manera perfecta de hacer que esto funcione dentro de Divi, le encantará esta publicación. En este tutorial, le mostraremos cómo agregar un formulario de contacto de columna deslizable a su sección de héroe usando solo las opciones integradas de Divi. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Avance
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue el diseño de la sección Hero del formulario de contacto de columna GRATIS
Para poner sus manos en el diseño de la sección de héroe del formulario de contacto de la columna 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!
Empecemos a recrear
Agregar nueva sección
Color de fondo
Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y cambie el color de fondo.
- Color de fondo: # ff8949
Imagen de fondo
A continuación, cargaremos un patrón de fondo que forma parte del paquete de diseño del asesor financiero. Puede encontrar esta imagen de fondo en la carpeta que pudo descargar al comienzo de esta publicación.
- Tamaño de la imagen de fondo: Ajustar
- Posición de la imagen de fondo: Centro
Espaciado
Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Acolchado inferior: 0px
Desbordes
Complete la configuración de la sección ocultando los desbordamientos en la pestaña avanzada. Esto asegurará que las animaciones que agreguemos más adelante no vayan más allá del contenedor de la sección.
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:
- Ecualizar alturas de columna: Sí
- Ancho: 80% (escritorio), 100% (tableta y teléfono)
- Ancho máximo: 1380px
- Alineación de filas: derecha
Espaciado
A continuación, elimine todo el acolchado superior e inferior predeterminado.
- Relleno superior: 0px
- Acolchado inferior: 0px
Configuración de la columna 1
Espaciado
Luego, abra la configuración de la columna 1 y modifique la configuración de espaciado en diferentes tamaños de pantalla.
- Acolchado superior: 22%
- Acolchado inferior: 22%
- Relleno izquierdo: 10% (solo tableta y teléfono)
- Relleno derecho: 10% (solo tableta y teléfono)
Configuración de la columna 2
Color de fondo
A continuación, abriremos la configuración de la columna 2 y usaremos un color de fondo blanco.
- Color de fondo: #ffffff
Animación
Completaremos la configuración de la columna 2 aplicando la siguiente configuración de animación:
- Dirección de animación: izquierda (escritorio), arriba (tableta y teléfono)
- Duración de la animación: 1500ms
- Intensidad de la animación: 70%
- Opacidad inicial de la animación: 100%
Agregue el módulo de texto n. ° 1 a la columna 1
Agregar contenido H1
Es hora de agregar módulos, comenzando con un primer módulo de texto en la columna 1. Agregue algún contenido H1 de su elección.
Configuración de texto H1
Vaya a la pestaña de diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:
- Fuente de encabezado: Oswald
- Estilo de fuente de encabezado: mayúsculas
- Color del texto del encabezado: #ffffff
- Tamaño del texto del encabezado: 120 px (escritorio), 70 px (tableta), 60 px (teléfono)
Dimensionamiento
También estamos cambiando la configuración de tamaño del módulo.
- Ancho: 75% (escritorio), 100% (tableta y teléfono)
- Alineación del módulo: izquierda
Agregue el módulo de texto n. ° 2 a la columna 1
Agregar contenido de descripción
Pasemos al siguiente módulo, que es otro módulo de texto. Agregue algún contenido descriptivo de su elección.
Configuración de texto
Vaya a la pestaña de diseño del módulo y cambie la configuración del texto en consecuencia:
- Fuente de texto: Open Sans
- Color del texto: #ffffff
- Altura de la línea de texto: 1.9em
Dimensionamiento
Modifique también la configuración de tamaño.
- Ancho: 75% (escritorio), 100% (tableta y teléfono)
- Alineación del módulo: izquierda
Agregar módulo de botones a la columna 1
Agregar copia
El último módulo que necesitamos en la columna 1 es un módulo de botones. Agregue una copia de su elección.
Configuración de botones
Vaya a la pestaña de diseño del módulo y cambie la configuración de los botones de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Color del texto del botón: #ffffff
- Radio del borde del botón: 1 px
- Fuente del botón: Oswald
- Estilo de fuente del botón: mayúsculas
Agregar módulo Blurb a la columna 2
Agregar contenido
Pasemos a la segunda columna. Allí, el primer módulo que necesitamos es un módulo Blurb. Agregue un título de su elección.
Seleccionar icono
A continuación, seleccione un icono.
Configuración de iconos
Vaya a la pestaña de diseño del módulo y cambie la configuración del icono de la siguiente manera:
- Color del icono: # ffd8c6
- Ubicación del icono: Arriba
- Alineación de iconos: centro
- Usar tamaño de fuente del icono: Sí
- Tamaño de fuente del icono: 250px (escritorio), 150px (tableta y teléfono)
Configuración del texto del título
A continuación, modifique la configuración del texto del título.
- Nivel de encabezado del título: H2
- Fuente del título: Oswald
- Estilo de fuente del título: mayúsculas
- Alineación del texto del título: centro
- Color del texto del título: # ff8949
- Tamaño del texto del título: 38px
Espaciado
Agregue un poco de relleno izquierdo y derecho también.
- Acolchado izquierdo: 11%
- Acolchado derecho: 11%
Animación
Y complete el módulo agregando la siguiente configuración de animación:
- Dirección de animación: Abajo
- Duración de la animación: 1100ms
- Retraso de animación: 400 ms
- Opacidad inicial de la animación: 100%
Agregar módulo de formulario de contacto a la columna 2
Turn Fields Fullwidth
En el último módulo, que es un módulo de formulario de contacto. Abra los campos de nombre y correo electrónico individualmente y conviértalos en ancho completo en la configuración de diseño.
- Hacer ancho completo: sí
Color de fondo
Luego, regrese a la configuración general del Módulo de formulario de contacto y agregue un color de fondo.
- Color de fondo: # f7f7f7
Configuración de campos
Vaya a la pestaña de diseño y realice algunos cambios en la configuración de los campos a continuación.
- Color de fondo de los campos: #ffffff
- Color del texto de los campos: # ff8949
- Margen superior de los campos: 15px
- Margen inferior de los campos: 15px
- Relleno superior de campos: 20px
- Relleno de la parte inferior de los campos: 20px
- Fuente Fields: Oswald
- Estilo de fuente de campos: mayúsculas
- Alineación del texto de los campos: centro
- Tamaño del texto de los campos: 21px
Configuración de botones
Luego, diseñe el botón en consecuencia:
- Usar estilos personalizados para el botón: Sí
- Color del texto del botón: # ff8949
- Radio del borde del botón: 1 px
- Fuente del botón: Oswald
- Estilo de fuente del botón: mayúsculas
Dimensionamiento
También nos aseguramos de que el ancho sea '100%' en la configuración de tamaño.
- Ancho: 100%
Espaciado
Continúe con la configuración de espaciado a continuación y aplique algunos valores de relleno personalizados.
- Acolchado superior: 14%
- Acolchado inferior: 14%
- Acolchado izquierdo: 12%
- Acolchado derecho: 12%
Animación
Luego, use la siguiente configuración de animación:
- Estilo de animación: diapositiva
- Dirección de animación: Arriba
- Duración de la animación: 1100ms
- Retraso de animación: 400 ms
- Opacidad inicial de la animación: 100%
Posición
Y complete la configuración del módulo (y el tutorial) reposicionando el módulo solo en el escritorio:
- Posición: Absoluta (escritorio), predeterminada (tableta y teléfono)
- Ubicación: Centro Inferior
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo incluir sin problemas un formulario de contacto en su sección de héroe. Más específicamente, hemos creado un formulario de contacto de columna deslizable que se ve muy bien en todos los tamaños de pantalla. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.