Cómo incluir sin problemas un formulario de contacto en la columna deslizante en la sección Div Hero Hero

Cuando piense en formas de incluir CTA en el diseño de su página, puede considerar incluir un formulario de contacto en la sección Hero. Este enfoque permite a las personas ponerse en contacto con usted sin tener que navegar más en su sitio web. Si está buscando una manera perfecta de hacer esto para trabajar dentro del DIV, le encantará esta publicación. En este tutorial, le mostraremos cómo agregar un formulario de contacto en la columna de diapositivas en la sección Hero utilizando solo las opciones construidas de la div. ¡Podrá descargar el archivo JSON de forma gratuita!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue la apariencia de la sección Hero del formulario de contacto de la columna para poner su mano en la sección Hero del formulario de columna gratuita, primero la descargará usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Comencemos a recrear agregar un nuevo color de fondo. Comenzar al agregar una nueva sección a la página en la que trabaja. Abra la configuración de la sección y cambie el color de fondo.
Color de fondo: # FF8949
La imagen de fondo es cargar un modelo de fondo que forma parte del paquete de apariencia del consejero financiero. Puede encontrar esta imagen de fondo en el archivo que puede descargar al comienzo de esta publicación.

Tamaño de la imagen de fondo: adecuado
Posición de la imagen de fondo: Centro
Espacio ir a la pestaña de diseño de la sección y eliminar todos los rellenos predeterminados e inferiores.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Operaciones Complete la configuración de la sección que oculta los desbordamientos en la pestaña avanzada. Esto asegurará que las animaciones que agregamos más tarde no excederán el contenedor de la sección.

Desbordamiento horizontal: oculto
Desbordamiento verticalmente: oculto
Agregue una nueva estructura de columna de fila Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abrir la configuración de la fila y modificar la configuración de tamaño de la siguiente manera: igualar las alturas de la columna: Sí

Ancho: 80% (escritorio), 100% (tableta y teléfono)
Ancho máximo: 1380 PX
Alineación de filas: correcto
El espacio elimina todas las deflantes predeterminadas y sin fondo.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Configuración de la columna 1 Espacio Luego abra la configuración de la columna 1 y cambie la configuración de espaciado en diferentes tamaños de pantalla.
Revestimiento superior: 22%

Finamiento inferior: 22%
ENLIZACIÓN IZQUIERDA: 10% (solo tableta y teléfono)
Revelaje derecho: 10% (solo tableta y teléfono)
Configuración Columna 2 Color de fondo Luego, 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 la animación: izquierda (escritorio), arriba (tableta y teléfono)

Duración de animación: 1500 ms
Intensidad de animación: 70%
Opacidad de animación para comenzar: 100%
Agregue el módulo de texto no. 1 en 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 el contenido H1 a su elección.
Configuración de texto H1 Vaya a la pestaña Diseño del módulo y cambie la configuración de texto H1 de la siguiente manera:

Título de la fuente: Oswald

Estilo de fuente de título: mayúscula
Encabezado de texto en color: #ffffff
Tamaño de texto de texto: 120 PX (escritorio), 70 px (tableta), 60 px (teléfono)
Dimensión Cambiamos 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 no. 2 en la columna 1 Agregar descripción Contenido Vaya al siguiente módulo, que es otro módulo de texto. Agregue un contenido de descripción de su elección. Configuración de texto Vaya a la pestaña Diseño del módulo y cambie la configuración de texto en consecuencia:
Texto de fuente: Abrir sans

Color de texto: #ffffff


La altura de la línea de texto: 1.9em
Dimensión Modifique la configuración de tamaño.
Ancho: 75% (escritorio), 100% (tableta y teléfono)
Alineación del módulo: izquierda

Agregue el módulo de botón a la columna 1 Agregue una copia El último módulo que necesitamos en la columna 1 es un módulo de botón. Agregue una copia de su elección.
Botón Configuración Vaya a la pestaña Diseño del módulo y cambie la configuración del botón de la siguiente manera:
Use estilos personalizados para el botón: Sí

El color del texto del botón: #ffffff

Botón Raza: 1 PX
Botón de fuente: Oswald
El estilo de la fuente del botón: mayúscula
Agregue los módulos de blurb a la columna 2 Agregar contenido a la segunda columna. Allí, el primer módulo que necesitamos es un módulo de propaganda. Agregue un título a su elección.

Seleccione el icono y luego, seleccione un icono.
Icono de configuración Vaya a la pestaña Diseño del módulo y cambie la configuración del icono de la siguiente manera:

Icono de color: # ffd8c6

Colocando iconos: arriba

Alineación de íconos: centro
Use el icono del tamaño de la fuente: sí
Icono de tamaño de fuente: 250 PX (escritorio), 150 px (tableta y teléfono)
Configuración de texto de título Luego cambie la configuración del texto del título.
Nivel de encabezado de título: H2
Título de la fuente: Oswald

Estilo de fuente de título: mayúscula
Alineación del texto del título: Centro
Color de texto del título: # FF8949
Título Tamaño del texto: 38 PX
Espacio Agregar un relleno izquierdo y derecho. Cabeza izquierda: 11%
Revelaje derecho: 11%
Animación y complete el módulo agregando la siguiente configuración de animación:

Dirección de la animación: Down
Duración de animación: 1100 ms
Retraso de animación: 400 ms

Opacidad de animación para comenzar: 100%
Agregue el módulo de formulario de contacto a la columna 2 Gire los campos al ancho completo al último módulo, que es un formulario de contacto. Abra los nombres y campos del correo electrónico individual y hazlos un ancho completo en la configuración de apariencia.
Haga un ancho completo: Sí
El color de fondo luego regresa a la configuración general del formulario de contacto y agregue un color de fondo.
Color de fondo: # F7F7F7

Configuración de campo Vaya a la pestaña Diseño y realice algunos cambios en la configuración del campo siguiente.

El color del fondo del campo: #ffffff

Campos de campo de texto: # FF8949
Margen de campo superior: 15 PX

Campos Marja de Jos: 15 PX
Revestimiento de campo: 20 PX
Bajo revestimiento de campos: 20 px
Fuente de campos: Oswald
Campos de estilo de fuente: mayúsculas
Leyes de texto: Centro
Campos de tamaño de texto: 21 PX

Establece el botón Entonces, estilice el botón en consecuencia:
Use estilos personalizados para el botón: Sí
El color del texto del botón: # FF8949
Botón Raza: 1 PX

Botón de fuente: Oswald
El estilo de la fuente del botón: mayúscula
Dimensión también, nos aseguramos de que el ancho sea “100%” en la configuración del tamaño.
Ancho: 100%

Cambio de espaciado a la configuración de separación y aplique algunos valores de llenado personalizados.
Revestimiento superior: 14%

Finamiento inferior: 14%
ENLIZACIÓN IZQUIERDA: 12%

Junta derecha: 12%
Animación Entonces, use la siguiente configuración de animación: Estilo de animación: Slide
Dirección de Animación: Up
Duración de animación: 1100 ms
Retraso de animación: 400 ms

Opacidad de animación para comenzar: 100%
Posicione y complete la configuración del módulo (y tutorial) reposicionando el módulo solo en el escritorio:
Posición: Absoluto (escritorio), predeterminado (tableta y teléfono)
Ubicación: el centro inferior
Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio
Móvil

Pensamientos finales En esta publicación, le mostré cómo incluir un formulario de contacto sin problemas en la sección de héroes. Específicamente, creamos un formulario de contacto en la columna, que se ve excelente en todo el tamaño de la pantalla. ¡Podrías 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.