El uso de Divi y sus nuevas opciones de tamaño arrastrables no solo lo ayudan a crear sitios web altamente receptivos, sino que también pueden 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 desde cero el ejemplo que puede ver a continuación. ¡Esperamos que este tutorial lo aliente a crear sus propios diseños de sección flotante también!
¡Hagámoslo!
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 secciones de desplazamiento gratuito, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
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 al tocar (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 viene 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 totalmente de usted. Puede hacer que la sección sea tan larga o tan corta como desee y utilizar cualquier tipo de estilo de diseño.
4. Modifique la altura máxima predeterminada y flotante 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 el desbordamiento no se muestre, 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 apreciará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
Color de fondo flotante
Cambie este color de fondo al pasar el mouse.
- Color de fondo: #ffffff
Añadir Fila #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
Agregue un módulo de texto a su nueva fila a continuación. Agregue algo de copia H2 junto con el símbolo ‘▼’ que indica que algo vendrá después.
Configuración de texto H2
Pase a la pestaña de diseño del módulo y cambie la configuración de texto H2.
- Encabezado 2 Fuente: Trebuchet
- Encabezado 2 Peso de fuente: Ultra negrita
- Encabezado 2 Alineación de texto: Izquierda
- Título 2 Color del texto: #ff0f3b
- Título 2 Tamaño del texto: 100 px (escritorio), 80 px (tableta), 60 px (teléfono)
- Encabezado 2 Espaciado entre 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, vaya 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%
Añadir Fila #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 utilizando 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 flotante
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 se muestren 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 fluida, también estamos cambiando la configuración de las transiciones en la pestaña avanzada.
- Duración de la transición: 800ms
- Retraso de transición: 500ms
Clona toda la sección tantas veces como quieras
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 colores de 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.
- Título 2 Color del texto: #c4c4c4
Cambiar los colores de los divisores
Junto con los colores divisorios 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 arrastrable 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.