¿Te gustaría crear un formulario de contacto pegajoso en DIVI?
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 crear un formulario de contacto Sticky en cualquier página Divi que crees.
Lea también nuestra guía sobre Cómo crear un encabezado global fijo en DIVI
Para este ejemplo, agregaremos imágenes e información de contacto que se desplazarán como formulario de contacto permanecerá en su lugar.
vista
Aquí hay una vista previa de lo que estaremos diseñando. En dispositivos móviles, no aplicamos un efecto adhesivo.
Cómo agregar un formulario de contacto adhesivo a su página Divi
Crear una nueva página con un diseño predefinido
Comencemos usando un diseño predefinido de la biblioteca Divi. Para este ejemplo, utilizaremos la página de contacto del Paquete de diseño de productos de belleza .
Agrega una nueva página a tu Sitio web y asígnele un título, luego seleccione la opción 'Usar Divi Builder'.
Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione 'Elija el diseño'.
Busca y selecciona el pagina de contacto del diseño 'Producto de belleza'.
Seleccione "Elija el diseño' para agregar el diseño a su página.
Ahora estamos listos para continuar nuestro tutorial.
Cambiar el diseño del formulario de contacto fijo
Para este tutorial, 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 predefinida.
Ver tambien Cómo crear un menú deslizante y push en DIVI
Crear una nueva sección
Añade una nueva sección a tu página.
Luego inserte una nueva fila con dos columnas. Puede agregar esta sección en cualquier parte de la página, otras secciones eventualmente se eliminarán a medida que avancemos en este 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 en la columna 1. Si está siguiendo este tutorial o ya tiene un formulario de contacto en su página, simplemente puede arrastrar el módulo 'Formulario de contacto' existente en la columna 1.
Mover el módulo de texto Contáctanos en la parte superior de esta sección. También será pegajoso. Agregue un borde blanco en la configuración de texto para que coincida con el estilo del diseño:
- Ancho del borde: 20px
- Color del borde: #FFFFFF
El diseño original incluía relleno entre el texto y el borde, pero lo omitiremos porque corta la parte inferior del formulario de contacto en pantallas más pequeñas.
Agregue sus módulos de desplazamiento en la columna 2
En la columna 2, agregue todos sus módulos de desplazamiento. Para nuestro caso, 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 haya movido sus módulos a la nueva sección, puede eliminar las secciones vacías restantes.
Consejo: si necesita mover varios módulos al mismo tiempo, mantenga presionada la tecla 'Mayo' en el teclado y seleccione los módulos que desea mover. Utilice la función de movimiento de módulos para mover todos sus módulos al mismo tiempo.
La gran imagen desplazada del diseño que hemos elegido puede causar problemas de desplazamiento horizontal. Entonces, cambiemos algunas configuraciones para resolver este problema.
Lea también: Cómo crear un encabezado global con formulario de inicio de sesión en DIVI
Configuración de la sección abierta. Por debajo Avanzado, vaya a Visibilidad, luego actualice la configuración de desbordamiento horizontal y vertical:
- Desbordamiento horizontal: oculto
- Desbordamiento vertical: oculto
Su página ahora debería verse así, con su contenido fijo en la columna 1 y su contenido de desplazamiento en la columna 2.
Estamos listos para dar el paso final: 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 configuraciones fijas para nuestro formulario de contacto. Seleccione 'Configuración de fila', luego seleccione la configuración de la columna 1.
En la pestaña Avanzado, navegue hasta 'Efectos de desplazamiento'. Aquí es donde estableceremos los parámetros pegajosos.
- Posición pegajosa: Stick to Top
- Compensación de la parte superior del palo: 15 px
- Límite pegajoso inferior: Línea
¡Y es todo! Ahora ha agregado configuraciones adhesivas a la columna 1, haciendo que su formulario de contacto y título sean fijos a medida que se desplaza hacia abajo en la página. Debería ver el contenido de la columna 2 desplazarse junto al formulario de contacto.
Resultado final
Ahora echemos un vistazo a nuestro formulario de contacto fijo en acción.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Listo ! Eso es todo por este artículo. 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 aplicar configuraciones adhesivas para cualquier sección, fila o módulo, representando casi cualquier cosa en su Sitio web pegajoso.
Si desea obtener más información sobre lo que puede hacer con las funciones adhesivas de Divi, consulte nuestros tutoriales. Por ejemplo, puede consultar nuestro tutorial sobre Cómo agregar un formulario de contacto a un encabezado global.
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
