Cómo crear una ventana emergente de esquina de formulario de contacto fijo con las opciones de tamaño de Divi

Cada semana, le proporcionamos paquetes de diseño Divi nuevos y gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de diseño, también compartimos un caso de uso que lo ayudará a llevar su sitio web al siguiente nivel.

Esta semana, como parte de nuestra iniciativa de diseño de Divi en curso, le mostraremos cómo agregar una ventana emergente de esquina de formulario de contacto fijo a su página utilizando las opciones de tamaño de Divi. Este enfoque lo ayudará a configurar un formulario de contacto que sigue a los visitantes durante su estadía en su sitio web, ¡sin la necesidad de un complemento adicional!

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

1. Subir la página de inicio del paquete de diseño de quiropráctico

Agregar nueva página

Empiece por crear una nueva página. Una vez que haya nombrado la página y la haya publicado, cambie a Visual Builder.

Subir la página de inicio del paquete de diseño de quiropráctico

Sube la página de inicio del paquete de diseño de quiropráctico a continuación. Aunque usaremos este diseño específico, puede hacer que la técnica funcione en cualquier página en la que esté trabajando.

2. ¡Empecemos a recrear!

Agregar nueva sección al final de la página

Vamos a dedicar una sección completamente nueva a la ventana emergente del formulario de contacto fijo al hacer clic. Agrega esta sección al final de tu página.

Color de fondo

Abra la configuración de la sección y use un color de fondo completamente transparente. Más adelante en esta publicación, arreglaremos toda la sección. El uso de un color de fondo transparente asegurará que todo lo que aparece debajo del contenedor de la sección se vea.

• Color de fondo: rgba (255,255,255,0)

Dimensionamiento

Vaya a la pestaña de diseño y cambie el ancho de la sección en diferentes tamaños de pantalla.

• Ancho: 37% (escritorio), 95% (tableta), 100% (teléfono)
• Alineación de la sección: derecha

Espaciado

Quite el acolchado superior predeterminado a continuación.

• Relleno superior: 0px

Clase CSS

También necesitaremos darle a nuestra nueva sección una clase CSS personalizada. Más adelante en la publicación, usaremos esta clase CSS para agregar algo de código JQuery y CSS.

• Clase CSS: sección abierta

Índice Z predeterminado

Para asegurarnos de que la sección aparezca en la parte superior de todo el contenido de la página, aumentaremos el índice z de la sección en la configuración de visibilidad.

• Índice Z: 99

Hover Z Index

Agregue también el mismo valor de índice z al pasar el mouse.

• Índice Z: 99

Agregar fila n. ° 1

Estructura de la columna

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

Agregar módulo Blurb

Dejar los cuadros de contenido vacíos

El primer y único módulo que necesitamos en esta fila es un módulo Blurb. Asegúrese de dejar vacíos los cuadros de título y contenido.

Seleccionar icono

Seleccione un icono a continuación.

Color de fondo

Cambie también el color de fondo de la propaganda.

• Color de fondo: #FFFFFF

Configuración de iconos

Vaya a la pestaña de diseño y aplique la siguiente configuración de iconos:

• Color del icono: # ff5f24
• Ubicación del icono: Arriba
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 46 px (escritorio), 30 px (tableta), 25 px (teléfono)

Dimensionamiento

A continuación, modifique la configuración de tamaño en diferentes tamaños de pantalla.

• Ancho: 140 px (escritorio), 105 px (tableta), 80 px (teléfono)
• Alineación del módulo: derecha

Espaciado

También agregaremos algunos valores de relleno superior e inferior personalizados en diferentes tamaños de pantalla.

• Relleno superior: 50 px (escritorio), 35 px (tableta), 25 px (teléfono)
• Relleno inferior: 20 px (escritorio), 10 px (tableta), 0 px (teléfono)

Frontera

Para crear una forma circular, necesitaremos agregar un valor alto a cada una de las esquinas en la configuración del borde. Estamos usando '500px'.

Sombra de la caja

También agregaremos una sombra de caja sutil para permitir que aparezca la forma circular.

• Fuerza de desenfoque de sombra de caja: 80px

Animación

Abra la configuración de animación a continuación y elimine la animación del icono.

• Animación de iconos: sin animación

Clase CSS

Por último, pero no menos importante, agregue una clase CSS al módulo Blurb. Más adelante en esta publicación, usaremos esta clase CSS para hacer que la función de clic funcione.

• Clase CSS: contacto abierto

Agregar fila n. ° 2

Estructura de la columna

¡A la segunda fila! Utilice la siguiente estructura de columnas:

Color de fondo

Sin agregar ningún módulo todavía, abra la configuración de fila y agregue un color de fondo blanco.

• Color de fondo: #FFFFFF

Frontera

A continuación, agregue un radio de borde '39px' a cada una de las esquinas.

Sombra de la caja

Y complete la configuración de la fila agregando una sombra de cuadro sutil.

• Fuerza de desenfoque de sombra de caja: 80px

Agregar formulario de contacto

Elementos

El único módulo que necesitamos en esta fila es un módulo de formulario de contacto. Una vez que haya agregado el módulo, desactive el captcha en la configuración de elementos.

• Mostrar Captcha: No

Los campos

Vaya a la pestaña de diseño y cambie el color de fondo de los campos en la configuración de los campos.

• Color de fondo de los campos: rgba (0,126,255,0.13)

Botón

Continúe diseñando el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 16px
• Color del texto del botón: #FFFFFF
• Color de fondo del botón: # ff5f24
• Ancho del borde del botón: 2px
• Color del borde del botón: rgba (0,0,0,0)
• Radio del borde del botón: 0px
• Fuente del botón: Karla
• Peso de la fuente del botón: negrita
• Acolchado superior del botón: 14px
• Acolchado de la parte inferior del botón: 14px
• Acolchado del botón izquierdo: 20px
• Acolchado del botón derecho: 20px

Espaciado

Y agregue algunos valores de relleno personalizados.

• Acolchado superior: 30px
• Acolchado inferior: 30px
• Relleno izquierdo: 40px
• Relleno derecho: 40px

Agregar módulo de código

Insertar código JQuery

Una vez que haya completado el módulo de formulario de contacto, ¡es hora de hacer que la función de clic funcione! Agregue un módulo de código a la segunda fila de la sección e inserte las siguientes líneas de código JQuery entre las etiquetas de script, como puede ver en la pantalla de impresión a continuación:

jQuery(function($){
$(".contact-open").click(function() {
 $('.section-open').toggleClass('section-open-active');
});
});

Cambiar la configuración de la sección

Altura

Continúe abriendo la configuración de la sección. Cambie la altura en diferentes tamaños de pantalla.

• Altura: 190 px (escritorio), 140 px (tableta), 125 px (teléfono)

Elemento principal predeterminado

Agregue un código CSS personalizado al elemento principal de la sección siguiente para fijarlo en la esquina inferior derecha.

bottom: 0;
right: 0;
position: fixed;

Elemento principal de desplazamiento

Asegúrese de agregar la posición fija al elemento principal de desplazamiento también.

position: fixed;

Agregar código CSS personalizado a la página

Abrir configuración de página

Para completar el efecto de alternancia, también necesitaremos agregar un poco de código CSS a la página. Abra la configuración de la página.

Agregar CSS personalizado

Vaya a la pestaña avanzada y agregue las siguientes líneas de código CSS:

.section-open-active {
height: auto !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 fijo a sus páginas utilizando la configuración de tamaño de Divi. Puede hacer que este enfoque funcione en cualquier tipo de sitio web que esté creando. Este tutorial es parte de nuestra iniciativa de diseño Divi en curso, donde tratamos de poner algo extra en su caja de herramientas de diseño cada semana. Si tiene alguna pregunta o sugerencia, asegúrese de 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.