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

Cuando esté creando un encabezado personalizado para su sitio web, utilizando el creador de temas de Divi, se encontrará buscando la forma ideal de agregar un CTA. Una forma de hacerlo es agregando un formulario de contacto desplegable. Esto te ayudará a mantener limpio el aspecto general de tu encabezado y, al mismo tiempo, te brindará la posibilidad de ponerte en contacto sin necesidad de desplazarte. En este tutorial, le mostraremos cómo crear un formulario de contacto desplegable usando Divi y algo de código JQuery y CSS. ¡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 la plantilla de encabezado global GRATIS

Para tener en sus manos la plantilla de encabezado global gratuita, primero deberá descargarla 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.

Descarga los archivos

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.

DESCARGAR

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!

1. Vaya a Divi Theme Builder y comience a crear un encabezado global

Ir a Divi Theme Builder

Comience por ir al Divi Theme Builder en el backend de su sitio web de WordPress.

Crear encabezado global

Haga clic en 'Agregar encabezado global' y seleccione 'Crear encabezado global' para comenzar a construir un encabezado global personalizado.

2. Crear diseño de encabezado

Configuración de la sección

Color de fondo

Una vez dentro de la plantilla de encabezado global, verá una sección. Abra esa sección y use un color de fondo blanco.

• Color de fondo: #FFFFFF

Espaciado

A continuación, elimine el relleno superior e inferior predeterminado de la sección.

• Relleno superior: 0px
• Acolchado inferior: 0px

Sombra de la caja

Aplica también una sombra de caja sutil.

• Fuerza de desenfoque de sombra de caja: 50px
• Color de sombra: rgba (0,0,0,0.15)

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 cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 95%
• Ancho máximo: 100%

Espaciado

A continuación, agregue un poco de relleno personalizado en la parte superior e inferior.

• Acolchado superior: 1vw
• Acolchado inferior: 1vw

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.

align-items: center;

Columna 2 Índice Z

También nos aseguramos de que la segunda columna tenga un valor de índice z más alto para propósitos de respuesta.

• Índice Z: 12

Agregar módulo de imagen a la columna 1

Subir logotipo

¡Es hora de comenzar a agregar módulos! Comenzando con un módulo de imagen en la columna 1. Cargue un logotipo.

Alineación

A continuación, cambie la alineación del módulo.

• Alineación de la imagen: centro

Dimensionamiento

Modifica también el ancho.

• Ancho: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)

Agregar módulo de menú a la columna 2

Seleccione el menú

En la segunda columna, agregaremos un módulo de menú.

Diseño

Vaya a la pestaña de diseño del módulo y cambie el estilo de diseño.

• Estilo: centrado

Configuración del texto del menú

A continuación, modifique la configuración del texto del menú del módulo.

• Fuente del menú: Open Sans
• Peso de la fuente del menú: Semi negrita
• Color del texto del menú: # 000000
• Tamaño del texto del menú: 0.8vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Espaciado de letras del menú: 1px

Configuración de texto del menú desplegable

Luego, cambie el color de la línea del menú desplegable.

• Color de la línea del menú desplegable: # 007dff

Iconos

Junto con el color del icono del menú de hamburguesas.

• Color del icono del menú de hamburguesas: # 007dff

Agregue el módulo de texto 1 a la columna 3

Agregar copia

¡Vamos al tercer módulo! Agregue un módulo de texto con una copia de su elección.

Color de fondo

A continuación, agregue un color de fondo.

• Color de fondo: # 007dff

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
• Peso de la fuente del texto: negrita
• Color del texto: #ffffff
• Tamaño del texto: 0.8vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Alineación de texto: centro

Dimensionamiento

A continuación, modifique la configuración de tamaño del módulo.

• Ancho: 33%
• Alineación del módulo: centro

Espaciado

Luego, agregue un poco de relleno superior e inferior personalizado.

• Acolchado superior: 0.8vw (escritorio), 2vw (tableta y teléfono)
• Acolchado inferior: 0.8vw (escritorio), 2vw (tableta y teléfono)

Frontera

Y complete la configuración del módulo agregando un radio de borde.

• Todas las esquinas: 100px

Agregue el módulo de texto 2 a la columna 3

Agregar símbolo al cuadro de contenido

Pasemos 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 de diseño del módulo y cambie la configuración del texto en consecuencia:

• Fuente de texto: Open Sans
• Color del texto: # 007fff
• Tamaño del texto: 3vw
• Altura de la línea de texto: 0em
• Alineación de texto: centro

Índice Z

También estamos aumentando el índice z del módulo.

• Índice Z: 11

Agregar módulo de formulario de contacto a la columna 3

Agregar campos de elección de ancho completo

El siguiente y último módulo que necesitamos en la tercera columna es un módulo de formulario de contacto. Agregue todos los campos de ancho completo que necesite.

Añadir título

Usa un título también.

Color de fondo

A continuación, cambiaremos el color de fondo.

• Color de fondo: # e7f2ff

Configuración de campos

Luego, pase a la pestaña de diseño del módulo y cambie la configuración de los campos.

• Color de fondo de los campos: #ffffff
• Color del texto de los campos: #dddddd
• Color de texto de enfoque de campos: # 007dff
• Relleno superior de campos: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Relleno inferior de los campos: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Fuente Fields: Open Sans

• Tamaño del texto de los campos: 0.7vw (escritorio), 1.8vw (tableta), 3vw (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: H3
• Peso de la fuente del título: negrita
• Alineación del texto del título: centro
• Color del texto del título: # 007dff
• Tamaño del texto del título: 1vw (escritorio), 2.5vw (tableta), 3.5vw (teléfono)
• Altura de la línea de título: 1.6em

Configuración de texto Captcha

Junto con la configuración de texto del captcha.

• Fuente Captcha: Open Sans
• Color del texto Captcha: # 007dff

Configuración de botones

Continúe diseñando el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 0.8vw (escritorio), 2vw (tableta), 3vw (teléfono)
• Color del texto del botón: #ffffff
• Color de fondo del botón: # 007dff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 100 px

• Fuente del botón: Open Sans
• Peso de la fuente del botón: negrita

• Margen superior del botón: 1vw
• Acolchado superior del botón: 1vw (escritorio), 2vw (tableta y teléfono)
• Acolchado inferior del botón: 1vw (escritorio), 2vw (tableta y teléfono)
• Acolchado del botón izquierdo: 2vw (escritorio), 7vw (tableta y teléfono)
• Acolchado del botón derecho: 2vw (escritorio), 7vw (tableta y teléfono)

Espaciado

Luego, use algunos valores de relleno personalizados en diferentes tamaños de pantalla.

• Acolchado superior: 4vw (escritorio), 6vw (tableta y teléfono)
• Acolchado inferior: 4vw (escritorio), 6vw (tableta y teléfono)
• Acolchado izquierdo: 2vw (escritorio), 6vw (tableta y teléfono)
• Relleno derecho: 2vw (escritorio), 6vw (tableta y teléfono)

Frontera

A continuación, modifique la configuración del borde.

• Todas las esquinas: 10px

Elemento principal, título de contacto y CSS Captcha

Complete la configuración del módulo agregando algunos pequeños cambios de CSS a la pestaña avanzada.

Elemento principal:

border-radius: 20px;

Título de contacto:

margin-bottom: 1vw;

Captcha:

margin-top: 1.5vw;

3. Personalice los elementos para crear un formulario de contacto al hacer clic

Agregar altura de 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 abrir la configuración de la columna 3 y agregar una altura personalizada sensible en la pestaña avanzada.

Escritorio:

height: 3vw;

Tableta:

height: 5vw;

Teléfono:

height: 6vw;

Agregar clase CSS al botón y la flecha

Luego, agregaremos la misma clase CSS a los dos primeros módulos de texto en la columna 3.

• Clase CSS: show-contact

Agregar clase CSS al formulario de contacto

También necesitaremos una clase CSS personalizada para el módulo de formulario de contacto.

• Clase CSS: módulo de formulario de contacto

Ocultar módulo de formulario de contacto

Continúe agregando una línea adicional de código CSS al elemento principal del Módulo de formulario de contacto. Esto nos permitirá ocultar el módulo antes de hacer clic.

display: none;

Agregue el módulo de código a la columna 3 con código JQuery y CSS

Y para crear la función de clic, necesitaremos algo de código JQuery. También usaremos un código CSS personalizado. Agregue un nuevo módulo de código a 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() {
$('.contact-form-module').slideToggle();
});
});

.show-contact {
cursor: pointer;
}

.et-menu>li {
padding-left: 0.7vw !important;
padding-right: 0.7vw !important;
}

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 agregar un formulario de contacto desplegable a su encabezado personalizado. Esta es una excelente manera de desencadenar acciones desde el principio. ¡También hemos compartido 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 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.