Cómo crear secciones flotantes con la nueva configuración de tamaño y desbordamiento de Divi
Publicado: 2019-05-20El uso de las nuevas opciones de tamaño de Divi que se pueden arrastrar no solo lo ayuda a crear sitios web altamente receptivos, sino que también puede ayudar a crear interacciones únicas. Al jugar con estas opciones, puede personalizar cualquier sitio web que esté creando y personalizar las estructuras de su página para cumplir con las tendencias de diseño actuales.
En este tutorial, específicamente, le mostraremos cómo crear secciones flotantes con Divi. Crearemos una nueva página y permitiremos que se muestren todos los títulos de las secciones, pero cada sección solo se abrirá al pasar el mouse (escritorio) o al hacer clic (móvil). Tan pronto como abra otra sección, la que abrió anteriormente se cerrará automáticamente. Comenzaremos explicando el enfoque general y continuaremos recreando el ejemplo que puede ver a continuación desde cero. ¡Esperamos que este tutorial te anime a crear tus propios diseños de secciones flotantes también!
¡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
Descargue el diseño de las secciones flotantes GRATIS
Para poner sus manos en el diseño de las secciones de desplazamiento libre, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
Acercarse
Antes de sumergirnos en el tutorial real, repasaremos la técnica que se utiliza para crear secciones flotantes. Puede aplicar esta técnica a cualquier tipo de sitio web que esté creando, con cualquier tipo de estilo de diseño.
1. Agrega la primera sección a tu página.
Supongamos que está comenzando un nuevo diseño en una página nueva. Lo primero que deberá hacer es agregarle una nueva sección regular.
2. Agregue una nueva fila que incluya un título de sección.
Luego, puede continuar agregando una nueva fila con un Módulo de texto que incluye el título de su sección. También puede agregar un módulo divisor y algo que indique que la fila se expande al pasar el mouse o tocarla (vea el ejemplo en la vista previa de esta publicación). Es importante mantener el título de la sección separado del resto del contenido de la sección, así que asegúrese de dejar suficiente espacio en blanco entre el título de la sección y lo que venga a continuación.
3. Ajuste el resto del contenido de la sección (agregue tantas filas y módulos como desee)
Los elementos de diseño que siguen a los títulos de las secciones dependen completamente de usted. Puede hacer que la sección sea tan larga o tan corta como desee y hacer uso de cualquier tipo de estilo de diseño.
4. Modifica la altura máxima predeterminada y desplaza el cursor por encima de la sección.
Una vez que haya terminado de ajustar la sección y todos los elementos de diseño que contiene, es hora de crear el efecto de desplazamiento. La altura predeterminada de su sección está destinada a ajustarse solo al título de la sección. Al pasar el mouse, la sección recuperará su tamaño inicial.
5. Ocultar el desbordamiento vertical
Otra parte importante de esta técnica es ocultar el desbordamiento vertical. Una vez que haya establecido una altura máxima predeterminada para su sección que sea más pequeña que la altura inicial de la sección, se creará un desbordamiento. Para asegurarse de que no se muestre el desbordamiento, deberá asegurarse de que esté oculto en la configuración de visibilidad de la sección.
5. Repita los pasos para todas las secciones de la página.
Repita los mismos pasos para todas las secciones de su página para crear una experiencia de usuario obvia que sus visitantes agradecerán.
Suscríbete a nuestro canal de Youtube
¡Empecemos a recrear!
Agregar nueva sección
Color de fondo predeterminado
Ahora que hemos analizado el enfoque de esta publicación, ¡es hora de comenzar a poner las cosas en acción! Agregue una primera sección regular a una página nueva en su sitio web de WordPress y abra la configuración de la sección. Cambie el color de fondo predeterminado de su sección a un color de su elección.
- Color de fondo: # 000000
Colocar el cursor sobre el color de fondo
Cambie este color de fondo al pasar el mouse.
- Color de fondo: #ffffff
Agregar fila n. ° 1
Estructura de la columna
Continúe agregando la primera fila a su sección usando la siguiente estructura de columnas:
Agregar módulo de texto
Agregar contenido H2
A continuación, agregue un módulo de texto a su nueva fila. Agregue una copia H2 junto con el símbolo '▼' que indica que algo vendrá a continuación.
Configuración de texto H2
Vaya a la pestaña de diseño del módulo y cambie la configuración del texto H2.
- Fuente del encabezado 2: Trebuchet
- Peso de fuente del encabezado 2: Ultra Bold
- Alineación del texto del encabezado 2: izquierda
- Color del texto del encabezado 2: # ff0f3b
- Tamaño del texto del encabezado 2: 100 px (escritorio), 80 px (tableta), 60 px (teléfono)
- Encabezado 2 espaciado de letras: -5px
Agregar módulo divisor
Visibilidad
El segundo y último módulo que necesitamos en esta fila es un módulo divisor. Asegúrese de habilitar la opción 'Mostrar divisor' en la configuración de visibilidad.
- Mostrar divisor: Sí
Color
Luego, pase a la pestaña de diseño y cambie el color del divisor.
- Color: # ff0f3b
Dimensionamiento
Modifique también la configuración de tamaño del módulo.
- Peso del divisor: 2px
- Ancho: 14%
Agregar fila n. ° 2
Estructura de la columna
¡A la siguiente fila! Aquí es donde deberá colocar todo el contenido que desea que aparezca después de pasar el mouse (escritorio) o hacer clic (tableta y dispositivo móvil). Estamos usando la siguiente estructura de columnas, pero tenga en cuenta que puede agregar tantas filas y módulos como desee y diseñarlos según sus necesidades:
Agregar módulo de texto a la columna 1
Agregar contenido
Coloque un módulo de texto en la primera columna con algún contenido de su elección.
Configuración de texto
Vaya a la pestaña de diseño del Módulo de texto y cambie la orientación del texto.
- Orientación del texto: justificar
Agregar módulo de texto a la columna 2
Agregar contenido
Agregue un módulo de texto a la segunda columna también con algún contenido de su elección.
Configuración de texto
Nuevamente, cambie la orientación del texto en la configuración de texto del módulo.
- Orientación del texto: justificar
Agregar configuración de tamaño a la sección
Tamaño predeterminado
Una vez que haya completado su sección, es hora de hacer que suceda el efecto de desplazamiento. Abra la configuración de la sección y cambie la altura máxima en diferentes tamaños de pantalla:
- Altura máxima: 300 px (escritorio), 280 px (tableta), 260 px (teléfono)
Tamaño de desplazamiento
Habilite también la opción de desplazamiento en la altura máxima y agregue un valor que sea lo suficientemente alto como para cubrir todos los elementos en diferentes tamaños de pantalla. Este valor asegura que todos sus elementos aparezcan sin exceder el tamaño inicial del contenedor de la sección.
- Altura máxima: 5000px
Desbordamiento vertical
Luego, vaya a la pestaña avanzada de la sección y cambie el desbordamiento vertical. Esto ocultará todo el contenido que exceda el contenedor de la sección.
- Desbordamiento vertical: oculto
Transiciones
Para crear una transición suave, también cambiamos la configuración de las transiciones en la pestaña avanzada.
- Duración de la transición: 800 ms
- Retardo de transición: 500 ms
Clonar toda la sección tantas veces como desee
Una vez que haya terminado de crear la primera sección flotante, puede clonarla tantas veces como desee.
Cambiar títulos de sección
Por supuesto, querrá cambiar los títulos de las secciones de los duplicados.
Cambiar los colores del texto H2
Para crear alguna variación en el diseño, también cambiaremos los colores del texto de los módulos resaltados en la pantalla de impresión a continuación.
- Color del texto del encabezado 2: # c4c4c4
Cambiar los colores del divisor
Junto con los colores divisores que acompañan a los módulos de texto.
- Color: # c4c4c4
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 usar creativamente las nuevas opciones de tamaño arrastrables de Divi para crear interacciones únicas, usando secciones flotantes, en cualquier sitio web que esté creando. Comenzamos explicando el enfoque y continuamos recreando el ejemplo de diseño desde cero. ¡También pudo descargar el archivo JSON de forma gratuita! 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.