Cómo crear una ventana de contacto fija en la esquina emergente con las opciones de dimensión de la Divica

Cada semana, le proporcionamos Divin de diseño y paquetes de diseño gratuitos que puede usar para su próximo proyecto. Para uno de los paquetes de apariencia, también compartimos un caso de uso que lo ayudará a llevar el sitio web al siguiente nivel. Esta semana, como parte de nuestra iniciativa continua de diseño de la Divica, le mostraremos cómo agregar una ventana de esquina emergente fija en su página utilizando las opciones de dimensión de la Divic. Este enfoque lo ayudará a configurar un formulario de contacto que sigue a los visitantes al permanecer en su sitio web, ¡sin la necesidad de un complemento adicional!
Vamos a eso. Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

1. Cargue la página de destino de la disposición del quiropráctico Agregue una nueva página Inicio creando una nueva página. Después de haber nombrado la página y publicarla, cambie a Visual Builder.

Cargue la página de destino del paquete de maquillaje para quiroprácticas Cargue la siguiente página de destino para el paquete de apariencia quiropráctica. Aunque utilizaremos este aspecto específico, puede hacer que la técnica funcione en cualquier página en la que trabaje.

2. ¡Comencemos a recrear! Agregue una nueva sección a la parte inferior de la página, dedicaremos una sección completamente nueva al formulario de contacto emergente fijo al hacer clic. Agregue esta sección al final de la página.

El color de fondo abre la configuración de la sección y usa un color de fondo totalmente transparente. Más adelante en esta publicación repararemos toda la sección. Usando un color de fondo transparente, se asegurará de que todo aparezca debajo del contenedor de sección. Fondo: RGBA (255,255,255.0)
Dimension Switch 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: Derecho
Espacio Eliminar el relleno predeterminado establecido a continuación.

SUS Lingo: 0 PX
La clase CSS necesitará ofrecer nuestras nuevas secciones y una clase CSS personalizada. Más tarde, usaremos esta clase CSS para agregar el código JQUEY y CSS.

Clase CSS: sección abierta
Índice Z predeterminado para garantizar que la sección aparezca por encima de todo el contenido de la página, aumentaremos el índice de la Sección Z en la configuración de visibilidad.

IND ÍNDICE: 99
Coloque el índice del cursor Z Agregue el mismo valor del índice Z y en el flotador.

IND ÍNDICE: 99
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Agregue el modo de propaganda Deje primero los cuadros de contenido y la única forma en que necesitamos en esta fila es un módulo de propaganda. Asegúrese de dejar los objetivos para el título y el contenido.

Seleccione el icono Seleccione un icono adicional.

Cambio de color de fondo y color de fondo.

Color de fondo: #ffffff
Icono de configuración Vaya a la pestaña Diseño y aplique la siguiente configuración del icono:

Icono de color: # FF5F24
Colocando iconos: arriba
Use el icono del tamaño de la fuente: sí
Fuente del icono del tamaño de la fuente: 46 PX (escritorio), 30 px (tableta), dimensión de 25 px (teléfono) y luego cambia la configuración de tamaño para diferentes tamaños de pantalla.
Ancho: 140 PX (escritorio), 105 px (tableta), 80 px (teléfono)

Alineación del módulo: correcto
Espacio también agregaremos algunos valores de llenado personalizados, superior e inferior, en diferentes tamaños de pantalla.
Revestimiento superior: 50 PX (escritorio), 35 px (tableta), 25 px (teléfono)

Bajo forro: 20 PX (escritorio), 10 px (tableta), 0 px (teléfono)
Border Para crear una forma circular, tendremos que agregar un alto valor a cada esquina de la configuración del borde. Usamos “500px”.
Box Shadow También agregaremos una sombra de una caja sutil para permitir que aparezca la forma circular.

Poder de poco claro de la sombra de la caja: 80 px

Animación luego abra la configuración de animación y elimine la animación del icono.
Animación de iconos: sin animación

La clase CSS final, pero no menos importante, agregue una clase CSS al módulo de blurb. Más adelante en esta publicación, usaremos esta clase CSS para hacer que la función de clic funcional.
Clase CSS: contacto abierto


¡Agregue la estructura de la fila # 2 de la columna por segundo! Use la siguiente estructura de columna:
El color de fondo sin agregar módulos, abra la configuración de la fila y agregue un color de fondo blanco.

Color de fondo: #ffffff

El borde agregue un radio de borde “39px” a cada una de las siguientes esquinas.
Box Sombra y complete la configuración de la fila agregando una sombra sutil de la caja.

Poder de poco claro de la sombra de la caja: 80 px

Agregue un elemento de formulario de contacto La única forma en que necesitamos en esta fila es un módulo de contacto. Después de haber agregado el módulo, deshabilite Captcha en la configuración de elementos. Afiși Captcha: No
Los campos van a la pestaña de diseño y cambian el color de fondo de los campos en la configuración del campo.

Color de fondo de campo: RGBA (0.126,255,0,13)
Botón Continuar estilizando el botón.

Use estilos personalizados para el botón: Sí
Tamaño de texto de texto: 16 PX

El color del texto del botón: #ffffff
El color de fondo del botón: # FF5F24
El ancho del nudo del botón: 2 PX
Color de borde de dibujo: RGBA (0.0,0,0)
El rasgo de botón de botón: 0 px
Botón de fuente: Karla
Botón de peso de fuente de fuente: en negrita
Forro para botones: 14 px
Forro para botones: 14 px
Botón izquierdo de revestimiento: 20 PX
Botón de revestimiento derecho: 20 PX
Espacio y agregue algunos valores de llenado personalizados.
Revestimiento superior: 30 px
Finamiento inferior: 30 px



Junta izquierda: 40 PX
Revestimiento derecho: 40 PX
Agregue un módulo de código, ingrese el 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 funcional! Agregue un módulo de código a la segunda fila desde la sección e ingrese 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: jquey (function ($) {
$ (“. Contact-Open”). Click (function () {
$ (‘.

});
});
Cambie la configuración de la sección de altura Continúe abriendo la configuración de la sección. Cambie la altura a 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 a su lado para solucionarlo en la esquina inferior derecha. Abajo: 0; derecha: 0;

Posición: fijo;
Coloque el cursor en el elemento principal, asegúrese de agregar la posición fija al elemento principal del cursor. Posición: fijo;

Agregue el código CSS personalizado a la página Abra la configuración de la página para completar el efecto de conmutación, necesitaremos agregar un poco de código CSS a la página. Abra la configuración de la página.
Agregue la pestaña avanzada CSS Access CSS y agregue las siguientes líneas de código CSS: .Section-OPERA {
Altura: Auto! IMPORTANTE;

}

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales En esta publicación, le mostré cómo agregar un formulario de contacto fijo a sus páginas utilizando la configuración de la dimensión de la Divic. Puede hacer este enfoque para trabajar en cualquier tipo de sitio web que cree. Este tutorial es parte de nuestra iniciativa continua de diseño de la Divic, donde tratamos de introducir algo adicional en el conjunto 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.