El uso de las nuevas opciones de tamaño arrastrables de Divi no solo nos ayuda a crear sitios web altamente receptivos, sino que también nos ayuda a crear interacciones únicas. Usando estas opciones puedes personalizar cualquier Sitio web usted crea y personaliza la estructura de sus páginas en función de las tendencias de diseño actuales.
En este tutorial, en particular, le mostraremos cómo crear secciones flotantes con Divi. Crearemos una nueva página y permitiremos la visualización de 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.
¡Vamos!
vista
Antes de sumergirse en el tutorial, echemos un vistazo rápido al resultado.
Etapa de diseño
Antes de sumergirnos en el tutorial, repasaremos la técnica utilizada para crear secciones de rollover. Puedes aplicar esta técnica a cualquier tipo de Sitio web construyes, con cualquier estilo.
1. Agrega la primera sección a tu página
Suponga que comienza un nuevo diseño en una página nueva. Lo primero que debe hacer es agregar una nueva sección regular.
2. Añadir una nueva línea incluyendo un título de sección
Luego puede continuar agregando una nueva línea con un módulo de texto que incluya el título de su sección. También puede agregar un módulo divisor y algo que indique que la línea se expande al pasar el cursor o al tocarla. Es importante separar el título de la sección del resto de la contenido de la sección. Así que asegúrese de dejar suficiente espacio entre el título de la sección y todo lo que sigue.
3. Ajuste el resto del contenido sección
Los elementos de diseño que siguen a los títulos de las secciones dependen completamente de usted. Puede hacer una sección tan larga o tan corta como desee y utilizar cualquier estilo de diseño.
4. Cambie las alturas predeterminadas y pase el cursor sobre la sección
Una vez que haya refinado la sección y todos sus elementos de diseño, es hora de crear el efecto de rollover. La altura predeterminada de su sección está diseñada para coincidir solo con el título de la sección. Al pasar el mouse, la sección volverá a su tamaño inicial.
5. Ocultar desbordamiento vertical
Otra parte importante de esta técnica esconde el desborde vertical. Una vez que establezca una altura máxima predeterminada para su sección que sea menor que la altura de la sección inicial, se crea un desbordamiento. Para asegurarse de que no se muestre el desbordamiento, debe 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 su visitantes Lo apreciaría.
Inicio del diseño!
Añadir una nueva sección
Color de fondo predeterminado
Ahora que hemos seguido el enfoque de esta publicación, ¡es hora de empezar a poner las cosas en acción! Agregue una primera sección normal a una página nueva de su Sitio web WordPress y abre la sección de configuración. Cambie el color de fondo predeterminado de su sección a un color de su elección.
- Color de fondo: # 000000
Vuela sobre el color de fondo.
Cambie este color de fondo que asoma.
- Color de fondo: #ffffff
Agregar fila 1
Estructura de la columna
Continúe agregando la primera línea a su sección utilizando la siguiente estructura de columnas:
Añadir un módulo de texto.
Añadir contenido H2
Agregue un módulo de texto a su próxima línea nueva. Agregue una copia H2 con el símbolo '▼' a medida que se desarrolla la sección.
Configuraciones de texto H2
Vaya a la pestaña Diseño del módulo y cambie la configuración del texto H2.
- Título 2 Fuente: Trebuchet
- Título 2 Peso de fuente: Ultra Bold
- Título 2 Alineación de texto: izquierda
- Título 2 Color del texto: #ff0f3b
- Título 2 Tamaño del texto: píxeles 100 (escritorio), píxeles 80 (tableta), píxeles 60 (teléfono)
- Título 2 Espacio entre letras: -5px
Añadir un módulo de división
visibilidad
El segundo y último módulo que necesitamos en esta fila es un módulo de división. Asegúrese de habilitar la opción "Mostrar separador" en la configuración de visibilidad.
- Mostrar divisor: si
Color
Luego vaya a la pestaña Diseño y cambie el color del separador.
- Color: #ff0f3b
apresto
Cambie también los parámetros de tamaño del módulo.
- Peso del divisor: 2px
- Ancho: 14%
Añade la línea 2
Estructura de la columna
¡Siguiente fila! Aquí es donde necesitarás colocar todos los contenido que desea mostrar después de pasar el cursor (escritorio) o hacer clic (tableta y móvil). Usamos la siguiente estructura de columnas, pero tenga en cuenta que puede agregar tantas filas y módulos como desee y personalizarlos según sus necesidades:
Agregue un módulo de texto a la columna 1
Agregar contenido
Coloque un módulo de texto en la primera columna con el contenido de su elección.
Configuraciones de texto
Vaya a la pestaña Diseño del módulo de texto y cambie la orientación del texto.
- Orientación del texto: Justificar.
Agregue un módulo de texto a la columna 2
Agregar contenido
Agregue también un módulo de texto a la segunda columna con el contenido que elija.
Configuraciones de texto
Nuevamente, cambie la orientación del texto en la configuración de texto del módulo.
- Orientación del texto: Justificar.
Agregue los parámetros de tamaño a la sección
Dimensionamiento predeterminado
Una vez que haya completado su sección, es hora de crear el efecto de desplazamiento. Abra la configuración de la sección y cambie la altura máxima para diferentes tamaños de pantalla:
- Altura máxima: 300px (escritorio), 280px (tableta), 260px (teléfono)
Flotar
También active la opción de desplazamiento sobre la altura máxima y agregue un valor lo suficientemente alto como para cubrir todos los elementos independientemente del tamaño de la 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 Avanzado de la sección y cambie el desbordamiento vertical. Esto ocultará todo el contenido que vaya más allá del contenedor de la sección.
- Desbordamiento vertical: oculto
Transiciones
Para crear una transición suave, también cambiamos la configuración de transición en la pestaña Avanzado.
- Duración de la transición: 800ms
- Tiempo de transición: 500 ms
Clona toda la sección tantas veces como quieras
Una vez que haya creado la primera sección de paso elevado, puede clonarla tantas veces como desee.
Cambiar títulos de sección
Por supuesto, querrás cambiar los títulos de las secciones duplicadas.
Cambia los colores del texto H2.
Para crear variaciones 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 del separador.
Con los colores de separación que acompañan a los módulos de texto.
- Color: #c4c4c4
vista
Ahora que se han completado todos los pasos, echemos un último vistazo al resultado.
Consideraciones finales
En este artículo, 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 cree. Comenzamos explicando el enfoque y continuamos recreando el ejemplo de diseño desde cero. ¡También puede 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.
