Cuando crea un encabezado personalizado para su Sitio web, usando el generador de temas de Divi, te encontrarás buscando la manera perfecta de agregar un AAL (llamado a la acción). Una forma de hacer esto es agregar un formulario de contacto desplazamiento Esto lo ayudará a mantener limpio el aspecto general de su encabezado y le brindará la posibilidad de ingresar contacte contigo, sin tener que desplazarte hacia abajo. En este tutorial, le mostraremos cómo crear un formulario de contacto desplegable usando código Divi y JQuery & CSS. ¡También podrá descargar el archivo JSON de forma gratuita!
Vamos.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo al resultado en diferentes tamaños de pantalla.
1. Vaya a Divi Theme Builder y comience a crear un encabezado global
Ir a Divi Theme Builder
Comience yendo al Divi Theme Builder en el back-end de su sitio de WordPress.
Crear un encabezado global
Haga clic en "Agregar encabezado global" y seleccione "Crear encabezado global" para comenzar a crear un encabezado global personalizado.
2. Cree el diseño del encabezado
Configuraciones de sección
Color de fondo
Una vez dentro de la plantilla de encabezado general, verá una sección. Abra esta sección y use un color de fondo blanco.
- Color de fondo: #FFFFFF
espaciamiento
Luego, elimine el relleno predeterminado superior e inferior de la sección.
- Relleno superior: 0px
- Relleno inferior: 0px
Caja de sombra
También aplique una sombra de caja sutil.
- Fuerza de desenfoque de sombra de caja: 50 px
- Color de sombra: rgba (0,0,0,0,15)
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva línea a la sección utilizando la siguiente estructura de columnas:
apresto
Sin agregar más módulos, abra los parámetros de línea y modifique los parámetros de tamaño de la siguiente manera:
- Use un ancho de canal personalizado: Sí
- Ancho de canal: 1
- Ecualizar alturas de columna: Sí
- Ancho: 95%
- Ancho máximo: 100%
espaciamiento
Luego agregue relleno personalizado superior e inferior.
- Acolchado superior: 1vw
- Relleno 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 fines reactivos.
- Índice Z: 12
Agregar un módulo de imagen a la columna 1
Descargar logo
¡Es hora de comenzar a agregar módulos! Comience con un módulo de imagen en la columna 1. Cargue un logotipo.
alineación
Luego cambie la alineación del módulo.
- Alineación de la imagen: centro
apresto
También cambie el ancho.
- Ancho: 3vw (escritorio), 5vw (tableta), 7vw (teléfono)
Agregar un módulo de menú a la columna 2
Selecciona el menu
En la segunda columna, agregaremos un módulo de menú.
Provisión
Cambie a la pestaña de diseño del módulo y cambie el estilo de diseño.
- Estilo: Centrado
Configuraciones de texto del menú
Luego cambie la configuración de texto en el menú del módulo.
- Fuente del menú: Abrir sin
- 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
Configuración de texto del menú desplegable
Luego cambie el color de la línea en el menú desplegable.
- Color de la línea del menú desplegable: # 007dff
iconos
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
Añadir una copia
¡Pasemos al tercer módulo! Agregue un módulo de texto con una copia de su elección.
Color de fondo
Luego agregue un color de fondo.
- Color de fondo: # 007dff
Configuraciones de texto
Cambie 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 la fuente del texto: negrita
- Color del texto: #ffffff
- Tamaño del texto: 0.8vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Alineación del texto: centro.
apresto
Luego modifique los parámetros de tamaño del módulo.
- Ancho: 33%
- Alineación del módulo: centro
espaciamiento
Luego agregue relleno personalizado superior e inferior.
- Acolchado superior: 0.8vw (escritorio), 2vw (tableta y teléfono)
- Acolchado inferior: 0.8vw (escritorio), 2vw (tableta y teléfono)
Frontera
Y complete los parámetros del módulo agregando un radio de borde.
- Todas las esquinas: 100 px
Agregue el módulo de texto 2 a la columna 3
Agregar un símbolo al área de contenido
Pasemos al siguiente módulo, que es otro módulo de texto. Agregue la siguiente flecha en el área de contenido: "▼".
Configuraciones de texto
Cambie 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 del texto: centro.
Índice Z
También aumentamos el índice z del módulo.
- Índice Z: 11
Agregue el módulo de formulario de contacto a la columna 3
Ahora puedes agregar un formulario de contacto justo en la parte inferior del módulo de texto que contiene la flecha. Este módulo es bastante sencillo de usar, por lo que deberá personalizar qué campos desea que sean visibles.
3. Personalice los elementos para crear un formulario de contacto con un solo clic
Agregar la altura de la columna 3
Una vez que todas las modificaciones estén en su lugar, es hora de crear el efecto. El primer paso para lograr el resultado deseado es abrir la configuración en la columna 3 y agregar una altura personalizada sensible en la pestaña avanzada.
Despacho:
height: 3vw;
la tableta:
height: 5vw;
Teléfono:
height: 6vw;
Agregue una clase CSS al botón y la flecha
A continuación, agregaremos la misma clase CSS a los dos primeros módulos de texto en la columna 3.
- Clase CSS: mostrar-contacte
Agregar una clase CSS al formulario de contacto
También necesitaremos una clase CSS personalizada para el módulo Formulario de contacto.
- Clase CSS: contacte-módulo de formulario
Ocultar el módulo de formulario de contacto
Continúe agregando una línea adicional de código CSS al elemento principal del módulo Formulario de contacto. Esto nos permitirá ocultar el módulo antes de hacer clic.
display: none;
Agregue un módulo de código a la columna 3 con JQuery y código CSS
Y para crear la función de clic, necesitaremos algo de código JQuery. También usaremos 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;}
vista
Ahora que hemos seguido todos los pasos, echemos un vistazo final a cómo se ve en diferentes tamaños de pantalla.
oficina
Lo que hay que recordar
En este artículo, le mostramos cómo agregar un formulario de contacto desplegable a su encabezado personalizado. Es una excelente manera de activar la acción desde el principio.
