Al pensar 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 principal. Este enfoque permite que las personas se comuniquen con usted de inmediato 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.
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 la columna GRATIS
Para poner sus manos en el diseño de la sección 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 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.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 de Financial Advisor . 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: Ajuste
- Posición de la imagen de fondo: Centro
Espaciado
Pase a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
desbordamientos
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 utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y modifique la configuración de tamaño de la siguiente manera:
- Igualar alturas de columna: Sí
- Ancho: 80 % (escritorio), 100 % (tableta y teléfono)
- Ancho máximo: 1380px
- Alineación de filas: Derecha
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno 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 animación: 70%
- Opacidad inicial de 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 contenido H1 de su elección.
Configuración de texto H1
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:
- Fuente del encabezado: Oswald
- Estilo de fuente del título: Mayúsculas
- Color del texto del título: #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 #2 a la Columna 1
Agregar contenido de descripción
Pasamos al siguiente módulo, que es otro módulo de texto. Agregue algún contenido de descripción de su elección.
Configuración de texto
Pase 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 línea de texto: 1,9 em
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 copia
El último módulo que necesitamos en la columna 1 es un módulo de botones. Agregue alguna copia de su elección.
Configuración de botones
Pase a la pestaña de diseño del módulo y cambie la configuración del botón 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: 1px
- Fuente del botón: Oswald
- Estilo de fuente del botón: Mayúsculas
Agregue el módulo Blurb a la columna 2
Agregar contenido
Vamos a la segunda columna. Allí, el primer módulo que necesitamos es un módulo de Blurb. Agregue un título de su elección.
Seleccionar icono
A continuación, seleccione un icono.
Configuración de iconos
Pase 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: superior
- Alineación de iconos: Centro
- Usar tamaño de fuente de icono: Sí
- Tamaño de fuente del icono: 250 px (escritorio), 150 px (tableta y teléfono)
Configuración del texto del título
Modifique la configuración del texto del título a continuación.
- Título Nivel de encabezado: 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.
- Relleno izquierdo: 11%
- Relleno 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
- Retardo de animación: 400ms
- Opacidad inicial de animación: 100%
Agregue el módulo de formulario de contacto a la columna 2
Girar campos de ancho completo
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 hágalos de 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
Pase 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 inferior de campos: 20px
- Fuente de los campos: Oswald
- Estilo de fuente de los campos: Mayúsculas
- Alineación de texto de campos: Centro
- Campos Tamaño del Texto: 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: 1px
- Fuente del botón: Oswald
- Estilo de fuente del botón: Mayúsculas
Dimensionamiento
También nos estamos asegurando de que el ancho sea ‘100%’ en la configuración de tamaño.
- Ancho: 100%
Espaciado
Pase a la configuración de espaciado a continuación y aplique algunos valores de relleno personalizados.
- Acolchado superior: 14%
- Acolchado inferior: 14%
- Relleno izquierdo: 12%
- Relleno 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
- Retardo de animación: 400ms
- Opacidad inicial de 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 principal. 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 de forma gratuita! 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.