Cómo crear secciones flotantes con la nueva configuración de tamaño y desbordamiento de Divi


El uso de las nuevas opciones de tamaño arrastrables de Divi 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 (dispositivo 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

secciones flotantes

Móvil

secciones flotantes

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.

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 debe 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. Modifique la altura máxima predeterminada y coloque el cursor sobre la sección.

Una vez que haya terminado de ajustar la sección y todos los elementos de diseño en ella, 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.

(incrustar) https://www.youtube.com/watch?v=LBN7Fm6lRTM (/ incrustar)

Suscríbete a nuestro canal de Youtube

¡Empecemos a recrear!

Agregar nueva sección

Color de fondo predeterminado

Ahora que hemos revisado 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

secciones flotantes

Colocar el cursor sobre el color de fondo

Cambie este color de fondo al pasar el mouse.

  • Color de fondo: #ffffff

secciones flotantes

Agregar fila n. ° 1

Estructura de columna

Continúe agregando la primera fila a su sección usando la siguiente estructura de columnas:

secciones flotantes

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.

secciones flotantes

secciones flotantes

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 título 2: Trebuchet
  • Peso de fuente del encabezado 2: Ultra Bold
  • Alineación del texto del título 2: izquierda
  • Color de texto del título 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

secciones flotantes

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í

secciones flotantes

Color

Luego, pase a la pestaña de diseño y cambie el color del divisor.

  • Color: # ff0f3b

secciones flotantes

Dimensionamiento

Modifique también la configuración de tamaño del módulo.

  • Peso del divisor: 2px
  • Ancho: 14%

secciones flotantes

Agregar fila n. ° 2

Estructura de 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). Usamos 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:

secciones flotantes

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.

secciones flotantes

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

secciones flotantes

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.

secciones flotantes

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

secciones flotantes

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)

secciones flotantes

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

secciones flotantes

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

secciones flotantes

Transiciones

Para crear una transición fluida, también cambiaremos la configuración de las transiciones en la pestaña avanzada.

  • Duración de la transición: 800ms
  • Retardo de transición: 500 ms

secciones flotantes

Clonar toda la sección tantas veces como desee

Una vez que haya terminado de crear la primera sección de desplazamiento, puede clonarla tantas veces como desee.

secciones flotantes

Cambiar títulos de sección

Por supuesto, querrá cambiar los títulos de las secciones de los duplicados.

secciones flotantes

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

secciones flotantes

Cambiar los colores del divisor

Junto con los colores divisores que acompañan a los módulos de texto.

  • Color: # c4c4c4

secciones flotantes

Avance

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

Escritorio

secciones flotantes

Móvil

secciones flotantes

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 gratis! 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 Suscríbete a nuestro boletín de correo electrónico y Canal de Youtube por lo que siempre será una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.