Cómo agregar un formulario de contacto Dopdown a su encabezado global

Al crear un encabezado personalizado para su sitio web, utilizando el generador de temas de DIV, encontrará la forma ideal de agregar un CTA. Una forma en que puede hacer esto es agregar un formulario de contacto desplegable. Esto lo ayudará a mantener la apariencia general del encabezado limpio, al tiempo que ofrece la posibilidad de entrar en contacto sin tener que correr. En este tutorial, le mostraremos cómo crear un formulario de contacto desplegable utilizando algunos códigos JQuey y CSS. ¡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 el encabezado global de forma gratuita para poner su mano en la plantilla Global de encabezado gratuita, primero deberá descargarlo 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!
1. Acceda al constructor de temas Div Div y comience a crear encabezado Global Access Divine Builder Comience accediendo al edificio de temas de división desde su sitio web de WordPress.
Cree el encabezado global Haga clic en “Agregar espectáculo global” y seleccione “Build Global Show” para comenzar a crear un encabezado global personalizado.

2. Construya la sección Configuración de configuración del diseño del encabezado que una vez que llegue a la plantilla de encabezado global, notará una sección. Abra esa sección y use un color de fondo blanco.

Color de fondo: #ffffff
El espacio elimina el llenado predeterminado e inferior de la sección a continuación.

SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Box Shadow también aplica una sombra de caja sutil.

Poder de poco claro de la sombra de la caja: 50 px
Color de la sombra: RGBA (0.0,0,0,15)
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, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1eglitó las alturas de la columna: Sí
Ancho: 95%
Ancho máximo: 100%
Espacio agregue algunos forros personalizados en la parte superior e inferior.
Revestimiento superior: 1VW

Revestimiento inferior: 1 VW
El elemento principal y alinee todo el contenido de la columna agregando una sola línea de código CSS al elemento principal de la fila. Alinine-Ritams: Centro;
La columna 2 del índice Z también asegura que la segunda columna tenga un valor de índice más alto para fines receptivos.

IND ÍNDICE: 12

Agregue el módulo de imagen a la columna 1 ¡Cargue el logotipo es hora de comenzar a agregar módulos! Comenzando con un módulo de imagen en la columna 1. Cargue un logotipo.
Cambio de alineación La alineación del módulo.

Alineación de imágenes: centro

Cambio de dimensión y ancho.
Ancho: 3VW (escritorio), 5VW (tableta), 7VW (teléfono)

Agregue un módulo de menú a la columna 2 Seleccione el menú En la segunda columna, agregaremos un módulo de menú.
Apariencia Vaya a la pestaña Diseño del módulo y cambie el estilo de apariencia.

Estilo: centrado

Configuración de texto del menú Luego cambie la configuración de texto del menú Módulo.
Menú de fuentes: abre sans

El peso de la fuente del menú: semi en negrita
Color de texto del menú: # 000000
Tamaño del texto del menú: 0.8VW (escritorio), 2VW (tableta), 3VW (teléfono)
Cartas de menú de espacio: 1 PX
Configuración de texto en el menú desplegable y luego cambie el color del menú desplegable.
Menú de la línea de color Deny: # 007dff

Iconos junto con el color del icono del menú de hamburguesas.
Icono de menú de hamburguesas de color: # 007dff

Agregue el módulo de texto 1 a la columna 3 ¡Agregue una copia al tercer módulo! Agregue un módulo de texto con una copia de su elección.
El color de fondo agrega un color de fondo.

Color de fondo: # 007dffsets 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
El peso de la fuente de texto: en negrita

Color de texto: #ffffff
Tamaño de texto: 0.8VW (escritorio), 2VW (tableta), 3VW (teléfono)
Alineación de texto: Centro
Dimensión luego cambie la configuración del tamaño del módulo.
Ancho: 33%
Alineación del módulo: centro

Espacio y luego, agregue algunos revestimientos personalizados desde arriba e inferior.

Revestimiento superior: 0.8VW (escritorio), 2VW (tableta y teléfono)
Bajo forro: 0.8VW (escritorio), 2 VW (tableta y teléfono)

Borde y complete la configuración del módulo agregando un rayo de borde.
Todas las esquinas: 100 px
Agregue el módulo de texto 2 a la columna 3 Agregue el símbolo al interruptor del cuadro de contenido al siguiente módulo, que es otro módulo de texto. Agregue el siguiente símbolo de flecha al cuadro de contenido: “▼”.

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: # 007fff

Tamaño del texto: 3VW
Altura de la línea de texto: 0em
Alineación de texto: Centro
El índice Z también aumenta el índice del módulo Z.
IND ÍNDICE: 11
Agregue el módulo de formulario de contacto a la columna 3 Agregue los siguientes campos de ancho y el último módulo que necesitamos en la tercera columna es un formulario de contacto. Agregue todos los campos de ancho completos que necesita.

Agregar título Use un título.
El color de fondo continúa cambiando el color de fondo.

Color de fondo: # E7F2FF

Configuración de campo Luego, cambie a la pestaña Diseño del módulo y modifique la configuración del campo.

El color del fondo del campo: #ffffff
Campos de texto en color: # DDDDDDDDDDDRI TEXTO DE TEXTO: # 007DFF

Revestimiento de campo más alto: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Campos de llenado más bajos: 1VW (escritorio), 2VW (tableta), 3VW (teléfono)
Campos de fuentes: Open Sans
Campos de tamaño de texto: 0.7VW (escritorio), 1.8VW (tableta), 3VW (teléfono)
Configuración de texto de título Luego cambie la configuración del texto del título.
Nivel de encabezado del título: H3
Título Fuente de peso: Bold

Alineación del texto del título: Centro

Color de texto del título: # 007dff
Título Tamaño del texto: 1VW (escritorio), 2.5VW (tableta), 3.5VW (teléfono)
Altura de la línea de título: 1.6em
Configuración de texto de CaptCha junto con la configuración de texto Captcha.
Font Captcha: Open Sans
Color de texto Captcha: # 007dff
Configuración Continúe extinguiendo el botón.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 0.8VW (escritorio), 2VW (tableta), 3VW (teléfono)
El color del texto del botón: #ffffff

El color de fondo del botón: # 007dff
El ancho del nudo del botón: 0 PX
Botón Raza: 100 PX
Botón de fuente: Abrir sans
Botón de peso de fuente de fuente: en negrita
El margen de botón superior: 1 VW
Reinicio para botones: 1VW (escritorio), 2VW (tableta y teléfono)

Reinicio del botón: 1VW (escritorio), 2VW (tableta y teléfono)
Botón de revestimiento izquierdo: 2VW (escritorio), 7VW (tableta y teléfono)

Botón de revestimiento derecho: 2VW (escritorio), 7VW (tableta y teléfono)
Espacio, use algunos valores de llenado personalizados en diferentes tamaños de pantalla.
Revelaje superior: 4VW (escritorio), 6VW (tableta y teléfono)
Bajo forro: 4VW (escritorio), 6VW (tableta y teléfono)
ENLIZACIÓN IZQUIERDA: 2VW (escritorio), 6VW (tableta y teléfono)

Revestimiento derecho: 2VW (escritorio), borde de 6VW (tableta y teléfono) y luego cambia la configuración de borde.
Todas las esquinas: 10 PX
Elemento principal, el título de contacto y Captcha CSS completan la configuración del módulo agregando algunos pequeños cambios CSS a la pestaña avanzada. Elemento principal: Border-Radius: 20px; Título de contacto: Margen-Bottom: 1VW; Captcha: margen-top: 1.5VW;
3. Personalice los elementos para crear el formulario de contacto haciendo clic en Agregar altura de la columna 3 Una vez que tenga todos los módulos en su lugar, es hora de crear el efecto. El primer paso para lograr el resultado deseado es la apertura de la configuración de la columna 3 y agregar alturas personalizadas receptivas en la pestaña avanzada. Escritorio: Altura: 3VW; Compresado: Altura: 5VW; Teléfono: Altura: 6VW;
Agregue la clase CSS al botón y la flecha luego, agregaremos la misma clase CSS a ambos módulos de texto en la columna 3.

Clase CSS: show-contact
Agregue la clase CSS al formulario de contacto, necesitaremos una clase CSS personalizada y para el módulo de formulario de contacto.

Clase CSS: módulo formular de contacto

Oculte el módulo de formulario de contacto Continuar agregando una línea de código CSS adicional al elemento principal del módulo de formulario de contacto. Esto nos permitirá ocultar el módulo antes de hacer clic. Pantalla: ninguno;

Agregue un módulo de código a la columna 3 con el código JQuey y CSS y para crear la función de clic, necesitaremos un código jQuery. También usaremos un código CSS personalizado. Agregue un nuevo módulo de código en la columna 2 con el código. Asegúrese de colocar el código jQuery entre las etiquetas de script y el código CSS entre las etiquetas de estilo. JQuery (function ($) {
$ (“. Show-Contact”). Click (function () {

$ (‘. CONTACTO-FORM-MODE’). SlidEteGogle ();});
})).

Cursor: puntero;

}
.et-Menu> li {
ROLDE-LEFT: 0.7VW! IMPORTANTE;
Right de relleno: 0.7VW! IMPORTANTE;
}
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 agregar un formulario de contacto desplegable a su encabezado personalizado. Esta es una excelente manera de activar la acción desde el principio. ¡También distribuí el archivo JSON de forma gratuita! Si tiene alguna pregunta o sugerencia, 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.