Cuando esté creando un encabezado personalizado para su sitio web, utilizando el generador 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 lo ayudará a mantener limpia la apariencia general de su encabezado y, al mismo tiempo, brindará la posibilidad de ponerse en contacto sin necesidad de desplazarse. En este tutorial, le mostraremos cómo crear un formulario de contacto desplegable usando Divi y algunos códigos JQuery y CSS. ¡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 la plantilla de encabezado global GRATIS
Para poner sus manos en 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 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!
1. Vaya a Divi Theme Builder y comience a construir el encabezado global
Ir al Creador de temas Divi
Comience yendo a 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 crear un encabezado global personalizado.
2. Crear diseño de encabezado
Ajustes de sección
Color de fondo
Una vez dentro de la plantilla de encabezado global, notará una sección. Abra esa sección y use un color de fondo blanco.
- Color de fondo: #FFFFFF
Espaciado
Elimine el relleno superior e inferior predeterminado de la sección a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Sombra de la caja
Aplique también una sombra de caja sutil.
- Fuerza de desenfoque de sombra de cuadro: 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 utilizando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 95%
- Ancho máximo: 100%
Espaciado
Agregue un poco de relleno superior e inferior personalizado a continuación.
- 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.
|
01
|
align-items: center; |
Índice Z de la columna 2
También nos estamos asegurando de que la segunda columna tenga un valor de índice z más alto para fines de respuesta.
- Índice Z: 12
Agregar módulo de imagen a la columna 1
Cargar 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
Cambie la alineación del módulo a continuación.
- Alineación de imagen: Centro
Dimensionamiento
Modifique el ancho también.
- Ancho: 3vw (Escritorio), 5vw (Tableta), 7vw (Teléfono)
Seleccione el menú
En la segunda columna, agregaremos un módulo de menú.
Disposición
Pase 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ú
Modifique la configuración del texto del menú del módulo a continuación.
- 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 entre letras del menú: 1px
Ajustes 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 alguna copia de su elección.
Color de fondo
Agregue un color de fondo a continuación.
- Color de fondo: #007dff
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
- Peso de fuente de texto: Negrita
- Color del texto: #ffffff
- Tamaño de texto: 0.8vw (Escritorio), 2vw (Tableta), 3vw (Teléfono)
- Alineación de texto: Centro
Dimensionamiento
Modifique la configuración de tamaño del módulo a continuación.
- 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)
Borde
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
Pasamos 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
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: #007fff
- Tamaño del texto: 3vw
- Altura de 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
Agregue el 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
Utilice un título también.
Color de fondo
Vamos a cambiar el color de fondo a continuación.
- 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 campos: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Fuente de los campos: 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
Modifique la configuración del texto del título a continuación.
- Título Nivel de encabezado: 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,6 em
Configuración de texto captcha
Junto con la configuración de texto 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: 100px
- 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)
- Relleno izquierdo del botón: 2vw (escritorio), 7vw (tableta y teléfono)
- Relleno derecho del botón: 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)
- Relleno izquierdo: 2vw (escritorio), 6vw (tableta y teléfono)
- Relleno derecho: 2vw (escritorio), 6vw (tableta y teléfono)
Borde
Modifique la configuración del borde a continuación.
- 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:
|
01
|
border-radius: 20px; |
Título de contacto:
|
01
|
margin-bottom: 1vw; |
Captcha:
|
01
|
margin-top: 1.5vw; |
3. Personalice los elementos para crear un formulario de contacto al hacer clic
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 abrir la configuración de la columna 3 y agregar una altura personalizada receptiva en la pestaña avanzada.
Escritorio:
|
01
|
height: 3vw; |
Tableta:
|
01
|
height: 5vw; |
Teléfono:
|
01
|
height: 6vw; |
Luego, agregaremos la misma clase CSS a los dos primeros módulos de texto en la columna 3.
- Clase CSS: mostrar-contacto
Agregar clase CSS al formulario de contacto
También necesitaremos una clase de 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.
|
01
|
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 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.
|
01
02
03
04
05
|
jQuery(function($){$(".show-contact").click(function() {$('.contact-form-module').slideToggle();});}); |
|
01
02
03
04
05
06
07
08
|
.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 la acción 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 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.