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 lo ayudará a mantener limpio el aspecto general de su encabezado y al mismo tiempo le brinda la posibilidad de ponerse en contacto sin la necesidad de desplazarse. En este tutorial, le mostraremos cómo crear un formulario de contacto desplegable utilizando Divi y algunos códigos JQuery y CSS. ¡También podrás descargar el archivo JSON gratis!

Descargar el tutorial GRATIS

Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. 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 «volverá a suscribir» ni recibirá correos electrónicos adicionales.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

formulario de contacto desplegable

Móvil

formulario de contacto desplegable

1. Vaya a Divi Theme Builder y comience a construir el encabezado global

Ir a Divi Theme Builder

Comience yendo al Divi Theme Builder en el back-end de su sitio web de WordPress.

formulario de contacto desplegable

Construir encabezado global

Haga clic en ‘Agregar encabezado global’ y seleccione ‘Construir encabezado global’ para comenzar a construir un encabezado global personalizado.

formulario de contacto desplegable

2. Diseño de encabezado de compilación

Configuraciones 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

formulario de contacto desplegable

Espaciado

Elimine el relleno superior e inferior predeterminado de la sección a continuación.

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

formulario de contacto desplegable

Sombra de la caja

Aplica una sombra de cuadro sutil también.

  • Caja Shadow Blur Fuerza: 50px
  • Color de sombra: rgba (0,0,0,0.15)

formulario de contacto desplegable

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

formulario de contacto desplegable

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 personalizado: sí
  • Ancho de canal: 1
  • Igualar alturas de columna: sí
  • Ancho: 95%
  • Ancho Máx .: 100%

formulario de contacto desplegable

Espaciado

Agregue algunos rellenos superiores e inferiores personalizados a continuación.

  • Relleno superior: 1vw
  • Relleno inferior: 1vw

formulario de contacto desplegable

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;

formulario de contacto desplegable

Columna 2 Índice Z

También nos estamos asegurando de que la segunda columna tenga un valor de índice z más alto para fines receptivos.

  • Índice Z: 12

formulario de contacto desplegable

Agregar módulo de imagen a la columna 1

Subir logo

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

formulario de contacto desplegable

Alineación

Cambie la alineación del módulo a continuación.

  • Alineación de imagen: centro

formulario de contacto desplegable

Dimensionamiento

Modificar el ancho también.

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

formulario de contacto desplegable

Agregar módulo de menú a la columna 2

Seleccione el menú

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

formulario de contacto desplegable

Diseño

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

  • Estilo: Centrado

formulario de contacto desplegable

Configuración de texto del menú

Modifique la configuración de texto del menú del módulo a continuación.

  • Fuente del menú: Abrir sin
  • Peso de 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

formulario de contacto desplegable

Menú desplegable Configuración de texto

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

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

formulario de contacto desplegable

Íconos

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

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

formulario de contacto desplegable

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

Agregar copia

¡Al tercer módulo! Agregue un módulo de texto con alguna copia de su elección.

formulario de contacto desplegable

Color de fondo

Agregue un color de fondo a continuación.

  • Color de fondo: # 007dff

formulario de contacto desplegable

Configuraciones de texto

Pase a la pestaña de diseño del módulo y cambie la configuración de texto en consecuencia:

  • Fuente de texto: Open Sans
  • Peso de fuente de texto: negrita
  • Color del texto: #ffffff
  • Tamaño del texto: 0.8vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Alineación de texto: centro

formulario de contacto desplegable

Dimensionamiento

Modifique la configuración de tamaño del módulo a continuación.

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

formulario de contacto desplegable

Espaciado

Luego, agregue un relleno personalizado superior e inferior.

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

formulario de contacto desplegable

Frontera

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

  • Todas las esquinas: 100 px

formulario de contacto desplegable

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

Agregar símbolo al cuadro de contenido

En el siguiente módulo, que es otro módulo de texto. Agregue el siguiente símbolo de flecha al cuadro de contenido: ‘▼’.

formulario de contacto desplegable

Configuraciones de texto

Pase a la pestaña de diseño del módulo y cambie la configuración de 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

formulario de contacto desplegable

Índice Z

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

  • Índice Z: 11

formulario de contacto desplegable

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 necesita.

formulario de contacto desplegable

Añadir título

Usa un título también.

formulario de contacto desplegable

Color de fondo

Estamos cambiando el color de fondo a continuación.

  • Color de fondo: # e7f2ff

formulario de contacto desplegable

Configuraciones 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 del texto del foco de campos: # 007dff
  • Relleno superior de campos: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Campos de relleno inferior: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Campos Fuente: Open Sans

formulario de contacto desplegable

  • Campos Tamaño del texto: 0.7vw (escritorio), 1.8vw (tableta), 3vw (teléfono)

formulario de contacto desplegable

Configuración del texto del título

Modifique la configuración del texto del título a continuación.

  • Nivel de título 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

formulario de contacto desplegable

Captcha Text Settings

Junto con la configuración de texto captcha.

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

formulario de contacto desplegable

Configuraciones de botones

Continúa peinando 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

formulario de contacto desplegable

  • Fuente del botón: Abrir sin
  • Peso de fuente del botón: negrita

formulario de contacto desplegable

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

formulario de contacto desplegable

Espaciado

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

  • Relleno 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)

formulario de contacto desplegable

Frontera

Modifique la configuración del borde a continuación.

  • Todas las esquinas: 10px

formulario de contacto desplegable

Elemento principal, título de contacto y CSS de 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 del contacto:

01
margin-bottom: 1vw;

Captcha:

01
margin-top: 1.5vw;

formulario de contacto desplegable

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 algo de altura personalizada receptiva en la pestaña avanzada.

Escritorio:

01
height: 3vw;

Tableta:

01
height: 5vw;

Teléfono:

01
height: 6vw;

formulario de contacto desplegable

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

formulario de contacto desplegable

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

formulario de contacto desplegable

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;

formulario de contacto desplegable

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

Y para crear la función de clic, necesitaremos un código JQuery. Usaremos también 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;
}

formulario de contacto desplegable

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!