Necesito agregar un formulario de contacto a un encabezado global?
Cuando crea un encabezado personalizado para su Sitio web Usando Divi Theme Builder, te encuentras buscando la manera perfecta de agregar un CTA (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 sin tener que hacer scroll.
En este tutorial le mostraremos cómo crear un formulario de contacto desplazable usando código Divi y JQuery y CSS.
¡Empecemos!
vista
Antes de sumergirnos en este tutorial, echemos un vistazo a una vista previa del resultado que vamos a obtener.
Crear un encabezado global
Ir al Creador de temas
Vaya a Theme Builder desde el menú Divi presente en su tablero de WordPress y haga clic en "Agregar un encabezado global".
Seleccione 'Crear encabezado global'.
Crear un estilo de encabezado
Configuraciones de sección
Color de fondo
Una vez en el editor de plantillas, notará una sección. Abre esta sección y cambia el color de fondo.
- Fondo: #FFFFFF
espaciamiento
Luego elimine los márgenes internos superior e inferior predeterminados de la sección.
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
Caja de sombra
También aplique una sombra de caja sutil.
- Caja Sombra Azul Fuerza: 50px
- Color de fuente de los subtítulos: rgba(0,0,0,0.15)
Agregar una nueva línea
Estructura de la columna
Agregue una nueva fila a la sección utilizando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo, 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í
- Espacio entre columnas: 1
- Armonizar alturas de columnas: Sí
- Ancho máximo: 95%
- Ancho máximo: 100%
espaciamiento
Luego agregue relleno personalizado superior e inferior.
- Margen interno máximo: 1vw
- Margen interno inferior: 1vw
elemento principal
Alinee todo el contenido de la columna agregando una sola línea de código CSS al elemento de la fila principal.
align-items: center;
Z subíndice de la columna 2
También nos aseguramos de que la segunda columna tenga un valor de índice z más alto para el diseño receptivo.
- Índice Z: 12
Agregar módulo de imagen a la columna 1
Descargar logo
¡Es hora de comenzar a agregar módulos! Comenzando 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: centrada
apresto
También cambie el ancho.
- Ancho máximo: 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ú.
Provisión
Cambie a la pestaña Estilo del módulo y cambie el estilo de diseño.
- Estilos: Centrado
Configuraciones de texto del menú
Luego cambie la configuración de texto en el menú del módulo.
- Menú Fuente: Abrir Ninguno
- Menú de luz tenue: seminegrita
- Color del texto del menú: #000000
- Tamaño del texto del menú: 0,8 vw (escritorio), 2 vw (tableta), 3 vw (teléfono)
- Espaciado entre letras del menú: 1px
Ajustes de texto del menú desplegable
A continuación, cambie el color de la línea en el menú desplegable.
- Color de la línea del menú desplegable: #007dff
iconos
Cambiar el color del icono del menú de hamburguesas.
- Color del icono del menú de hamburguesas: #007dff
Agregar módulo de texto a la columna 3
Añadir un mensaje
¡Vamos al tercer módulo! Agregue un módulo de texto con un mensaje de su elección.
Color de fondo
Agrega 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
- Texto de luz suave: Negrita
- Color del texto Texto: #ffffff
- Texto Tamaño del texto: 0,8 vw (escritorio), 2 vw (tableta), 3 vw (teléfono)
- Alineación de texto: centrado
apresto
Luego modifique los parámetros de tamaño del módulo.
- Ancho máximo: 33%
- Alineación del módulo: Centro
espaciamiento
A continuación, agregue rellenos superiores e inferiores personalizados.
- Margen interno superior: 0,8 vw (escritorio), 2 vw (tableta y teléfono)
- Margen interno bajo: 0,8 vw (escritorio), 2 vw (tableta y teléfono)
frontera
Y complete los parámetros del módulo agregando un radio de borde.
- rectángulo redondeado: 100px
Agregue otro módulo de texto 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 el siguiente símbolo de 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
- Texto Tamaño del texto: 3vw
- Altura de línea de texto: 0em
- Alineación de texto: centrado
índice Z
Aumentemos también el índice z del módulo.
- Índice Z: 11
Agregue el módulo Formulario de contacto a la columna 3
Agregue campos de ancho completo de su elección
El siguiente y último módulo que necesitamos en la tercera columna es un módulo de formulario de contacto. Agregue los campos de ancho completo que necesite.
Agrega un título
Usa también un título.
Color de fondo
A continuación, cambiemos el color de fondo.
- Color de fondo: #e7f2ff
Configuraciones de campo
Vayamos a la pestaña Estilo del módulo y cambiemos la configuración del campo.
- Campos de color de fondo: #ffffff
- Color del texto del campo: #dddddd
- Color de texto de enfoque: #007dff
- Campos de relleno de vértices: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Campos de relleno inferiores: 1vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Campos de fuente: Abierto Ninguno
- Campos Tamaño del texto: 0,7 vw (escritorio), 1,8 vw (tableta), 3 vw (teléfono)
Configuración del texto del título
Edite la configuración del texto del título.
- Insertar encabezado tres: H3
- Título de luz suave: texto en negrita
- Alineación de texto: centrado
- Color del texto del título: #007dff
- Título Tamaño del texto: 1 vw (escritorio), 2,5 vw (tableta), 3,5 vw (teléfono)
- Altura de la línea del título: 1,6 cm
Configuración de texto captcha
Con ajustes de texto captcha.
- Fuente Captcha: Open Sans
- Color del texto captcha: #007dff
Configuraciones de botones
Continúe personalizando el botón.
- Usar estilos personalizados para Botón: Sí
- Tamaño del texto del botón: 0,8 vw (escritorio), 2 vw (tableta), 3 vw (teléfono)
- Color del texto del botón: #ffffff
- Botón de fondo: #007dff
- Botón de ancho de borde: 0 píxeles
- Radio del borde del botón: 100 px
- Botón de fuente: abrir ninguno
- Botón de luz tenue: texto en negrita
- Margen del botón: 1vw
- Botón de relleno superior: 1vw (escritorio), 2vw (tableta y teléfono)
- Botón de relleno inferior: 1vw (escritorio), 2vw (tableta y teléfono)
- Botón de la almohadilla izquierda: 2vw (escritorio), 7vw (tableta y teléfono)
- Botón derecho del pad: 2vw (escritorio), 7vw (tableta y teléfono)
espaciamiento
Use valores de relleno personalizados en diferentes tamaños de pantalla.
- Headroom interno máximo: 4vw (escritorio), 6vw (tableta y teléfono)
- Margen inferior interno: 4vw (escritorio), 6vw (tableta y teléfono)
- Margen interior izquierdo: 2vw (escritorio), 6vw (tableta y teléfono)
- Margen interno derecho: 2vw (escritorio), 6vw (tableta y teléfono)
frontera
Luego cambie la configuración del borde.
- Rectángulo redondeado de entrada: 10px
Elemento principal, Título de contacto y Captcha CSS
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 contacte :
| 01 | margin-bottom: 1vw; |
Captcha:
| 01 | margin-top: 1.5vw; |
Personaliza elementos para crear un formulario de contacto con un solo clic
Agregar la 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 obtener el resultado deseado es abrir la configuración de 3 columnas y agregar una altura de respuesta personalizada en la pestaña avanzada.
Despacho :
| 01 | height: 3vw; |
la tableta:
| 01 | height: 5vw; |
Teléfono:
| 01 | height: 6vw; |
Agregue una clase CSS al botón y la flecha
A continuación, agregaremos la misma clase CSS a los primeros dos 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 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 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 último vistazo al resultado.
Conclusión
En este artículo, le mostramos cómo agregar un formulario de contacto desplegable a su encabezado personalizado.
Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
