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 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 siga 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

formulario de contacto fijo

Móvil

formulario de contacto fijo

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

Agregar nueva página

Comience creando una nueva página. Una vez que haya nombrado la página y la haya publicado, cambie a Visual Builder.

formulario de contacto fijo

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

Cargue la página de inicio del paquete de diseño 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.

formulario de contacto fijo

2. ¡Comencemos a recrearnos!

Agregar nueva sección a la parte inferior de la página

Vamos a dedicar una sección completamente nueva al formulario de contacto fijo emergente al hacer clic. Agregue esta sección al final de su página.

formulario de contacto fijo

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, repararemos toda la sección. El uso de un color de fondo transparente asegurará que todo lo que aparece debajo de la sección del contenedor se muestre.

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

formulario de contacto fijo

Dimensionamiento

Pase 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 sección: derecha

formulario de contacto fijo

Espaciado

Elimine el relleno superior predeterminado a continuación.

  • Relleno superior: 0px

formulario de contacto fijo

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 algunos códigos JQuery y CSS.

  • Clase CSS: sección abierta

formulario de contacto fijo

Í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

formulario de contacto fijo

Hover Z Index

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

  • Índice Z: 99

formulario de contacto fijo

Agregar fila # 1

Estructura de columna

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

formulario de contacto fijo

Añadir módulo de publicidad

Deje 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 los cuadros de título y contenido vacíos.

formulario de contacto fijo

Seleccionar icono

Seleccione un icono a continuación.

formulario de contacto fijo

Color de fondo

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

  • Color de fondo: #FFFFFF

formulario de contacto fijo

Configuraciones de iconos

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

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

formulario de contacto fijo

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

formulario de contacto fijo

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)

formulario de contacto fijo

Frontera

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

formulario de contacto fijo

Sombra de la caja

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

  • Caja Shadow Blur Fuerza: 80px

formulario de contacto fijo

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

formulario de contacto fijo

Clase CSS

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

  • Clase CSS: contacto abierto

formulario de contacto fijo

Agregar fila # 2

Estructura de columna

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

formulario de contacto fijo

Color de fondo

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

  • Color de fondo: #FFFFFF

formulario de contacto fijo

Frontera

Agregue el radio del borde "39px" a cada una de las esquinas a continuación.

formulario de contacto fijo

Sombra de la caja

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

  • Caja Shadow Blur Fuerza: 80px

formulario de contacto fijo

Añadir 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

formulario de contacto fijo

Campos

Pase 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)

formulario de contacto fijo

Botón

Continúa peinando el botón.

  • Usar estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 16 px
  • 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 fuente del botón: negrita
  • Botón de relleno superior: 14px
  • Botón de relleno inferior: 14px
  • Botón de relleno izquierdo: 20px
  • Botón derecho acolchado: 20px

formulario de contacto fijo

formulario de contacto fijo

formulario de contacto fijo

Espaciado

Y agregue algunos valores de relleno personalizados.

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

formulario de contacto fijo

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 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');
});
});

formulario de contacto fijo

Cambiar configuración de sección

Altura

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

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

formulario de contacto fijo

Elemento principal predeterminado

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

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

formulario de contacto fijo

Pase el elemento principal

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

position: fixed;

formulario de contacto fijo

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. Abre la configuración de la página.

formulario de contacto fijo

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;
}

formulario de contacto fijo

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

formulario de contacto fijo

Móvil

formulario de contacto fijo

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 regalos Divi, asegúrese de Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube así que siempre serás una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.