Las opciones adhesivas integradas de Divi te permiten crear impresionantes efectos visuales en tu página con solo unos pocos clics. Puede aplicar efectos adhesivos a cualquier elemento de su página, pero en este tutorial nos centraremos en cómo agregar un formulario de contacto adhesivo a cualquier página Divi que cree. Para este ejemplo, agregaremos algunas imágenes e información de contacto que se desplazará a medida que el formulario de contacto permanezca en su lugar.
Aquí hay una vista previa de lo que diseñaremos. En dispositivos móviles, no aplicamos un efecto adhesivo.
Lo que necesitas para empezar
Antes de comenzar, instale y active el tema Divi y asegúrese de tener la última versión de Divi en su sitio web.
Ahora, ¡estás listo para comenzar!
Cómo agregar un formulario de contacto adhesivo a su página
Crear una nueva página con un diseño prefabricado
Comencemos usando un diseño prefabricado de la biblioteca Divi. Para este diseño, utilizaremos la página de contacto del paquete de diseño de productos de belleza .
Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.
Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.
Busque y seleccione el diseño de la página de contacto de productos de belleza.
Seleccione Usar este diseño para agregar el diseño a su página.
Ahora estamos listos para construir nuestro diseño.
Modificación del diseño del formulario de contacto fijo
Para este diseño, queremos que el formulario de contacto en la columna de la izquierda (columna 1) permanezca fijo mientras el usuario se desplaza por los otros módulos de contenido en la columna de la derecha (columna 2). Esto nos dará un efecto de desplazamiento dinámico que hará que tu formulario de contacto se destaque. Comencemos modificando nuestra plantilla prefabricada.
Crear una nueva sección
Agregue una nueva sección regular a su página. Luego, inserte una nueva fila con dos columnas. Puede agregar esta sección en cualquier parte de la página, las otras secciones eventualmente se eliminarán a medida que avanzamos en el tutorial.
Abra la Configuración de la sección y cambie el color de fondo para que coincida con el diseño del diseño:
- Fondo: #EEE8E2
Agregar sus módulos pegajosos a la columna 1
Agregue un módulo de formulario de contacto a la columna 1. Si está siguiendo el tutorial o ya tiene un formulario de contacto en su página, simplemente puede arrastrar el módulo de formulario de contacto existente a la columna 1.
Mueva el módulo de texto «Contáctenos» a la parte superior de esta sección. Esto también será pegajoso. Agregue un borde blanco en la Configuración de texto para que coincida con el diseño del diseño:
- Ancho del borde: 20px
- Color del borde: #FFFFFF
El diseño original incluía un relleno adicional entre el texto y el borde, pero omitiremos agregar este relleno ya que corta la parte inferior del formulario de contacto en pantallas más pequeñas.
Agregue sus módulos de desplazamiento a la columna 2
En la columna 2, agregue todos sus módulos de desplazamiento. Para este diseño, mueva los dos módulos de imagen, la información de contacto y la información de ubicación a la columna 2. Una vez que mueva sus módulos a la nueva sección, puede eliminar las secciones vacías restantes.
Consejo profesional: si necesita mover varios módulos a la vez, mantenga presionada la tecla Mayús y seleccione los módulos que desea mover. Utilice la función de mover módulo para mover todos sus módulos al mismo tiempo.
La gran imagen desplazada del diseño del producto de belleza puede causar algunos problemas de desplazamiento horizontal en este diseño, así que cambiemos un par de configuraciones para solucionar esto.
Abra la Configuración de la sección. En Avanzado, navegue hasta Visibilidad, luego actualice la configuración de desbordamiento horizontal y vertical:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
> Ahora su página debería verse así, con su contenido fijo en la columna 1 y su contenido de desplazamiento en la columna 2.
Estamos listos para pasar al último paso: hacer que el formulario de contacto sea pegajoso.
Hacer que el formulario de contacto sea pegajoso
Con nuestro diseño en su lugar, podemos habilitar la configuración adhesiva para nuestro formulario de contacto. Seleccione Configuración de fila, luego seleccione la configuración para la columna 1.
En la pestaña Avanzado, vaya a Efectos de desplazamiento . Aquí es donde agregaremos la configuración pegajosa. El diseño adhesivo de dos columnas no funciona bien en dispositivos móviles, por lo que solo cambiaremos las siguientes opciones para el diseño de escritorio.
- Posición pegajosa: Stick to Top
- Desplazamiento superior pegajoso: 15px
- Establezca el límite pegajoso inferior en la sección.
¡Y eso es! Ahora ha agregado la configuración adhesiva a la columna 1, haciendo que su formulario de contacto y título sean fijos a medida que se desplaza por la página. Debería ver el contenido en la columna 2 desplazándose junto al formulario de contacto.
Resultado final
Ahora echemos un vistazo a nuestro formulario de contacto fijo en acción.
Pensamientos finales
Las configuraciones adhesivas de Divi son una manera fácil de mejorar el aspecto de su formulario de contacto, o cualquier otro elemento de su página. Puede personalizar la configuración adhesiva para cualquier sección, fila o módulo, haciendo que casi cualquier cosa en su sitio web sea adhesiva. Si está interesado en obtener más información sobre lo que puede hacer con las funciones fijas en Divi, consulte nuestros tutoriales para crear un control deslizante de video fijo y crear módulos de seguimiento de redes sociales fijos .
¿Cómo ha implementado las características pegajosas de Divi en su sitio web? ¡Cuéntanos en los comentarios!