Divi y su módulo Toggle le permiten mostrar contenido adicional al hacer clic, sin la necesidad adicional de código jQuery. Al igual que el módulo de acordeón, los módulos de alternancia generalmente se usan para compartir contenido agrupado, como preguntas frecuentes. Sin embargo, también puede usarlos para otras cosas, por ejemplo, para estructurar su página. En este tutorial, vamos a utilizar módulos de alternancia de ancho completo para crear un diseño de página sencillo que se comporte al hacer clic. El estilo de diseño que estamos manejando es audaz y limpio. ¡También podrá descargar el archivo JSON de forma gratuita!
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 alternancia de ancho completo en negrita GRATIS
Para poner sus manos en el diseño de alternancia de ancho completo en negrita 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!
Suscríbete a nuestro canal de Youtube
Empecemos a Recrear
Agregar nueva sección
Espaciado
Comience creando una nueva página (o abriendo una existente) y agregándole una sección normal. Lo único que debe hacer en la configuración de la sección es eliminar todo el relleno superior e inferior predeterminado en la configuración de espaciado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y asegúrese de que la fila toque el lado izquierdo y derecho del contenedor de la sección modificando la configuración de tamaño. Este es un paso importante en este tutorial; permite que el Módulo de alternancia, que agregaremos más adelante en este tutorial, se convierta en ancho completo.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
También eliminaremos el relleno superior e inferior predeterminado de la fila. Esto eliminará todo el espacio entre el módulo de alternancia y el contenedor de fila/columna en el que se encuentra.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar módulo de alternar a la columna
Insertar título y contenido
¡Es hora de comenzar a agregar módulos! El único módulo que necesitamos en esta fila es un módulo de alternancia. Usaremos el cuadro de título para agregar un título y colocar todo el contenido que queremos compartir en el cuadro de contenido del cuerpo. Siéntase libre de colocar lo que quiera en el cuadro de contenido; desde texto a imágenes y más.
Estado
Estamos usando un estado de alternancia cerrado, pero siéntete libre de dejarlo abierto también.
- Estado: Cerrar
Configuración de iconos predeterminada
Pase a la pestaña de diseño y cambie la configuración del icono del módulo en consecuencia:
- Color del icono: #570fff
- Usar tamaño de icono personalizado: SÍ
- Tamaño de fuente del icono: 6vw
Configuración del icono de desplazamiento
Modifique el color del icono al pasar el mouse.
- Color del icono: #f2f2f2
Configuración de alternancia predeterminada
Cambie el color de fondo de la palanca cerrada a continuación.
- Alternar cerrado Color de fondo: #ffffff
Configuración de alternancia de desplazamiento
Y cambia el color al pasar el mouse también.
- Alternar cerrado Color de fondo: #000000
Configuración del texto del título
Continúe modificando la configuración del texto del título de la siguiente manera:
- Color del texto del título: #000000
- Título Nivel de encabezado: H2
- Fuente del título: Montserrat
- Alineación del texto del título: Izquierda
- Tamaño del texto del título: 8vw (escritorio), 10vw (tableta y teléfono)
- Espaciado entre letras del título: -1vw (escritorio), -0.5vw (tableta y teléfono)
- Altura de la línea del título: 0,7 em
Configuración predeterminada de texto de título cerrado
Luego, vaya a la configuración del texto del título cerrado y modifique la configuración en consecuencia:
- Fuente de título cerrado: Montserrat
- Tamaño del texto del título cerrado: 18vw (escritorio), 16vw (tableta y teléfono)
- Altura de la línea de título cerrada: 0,8 em
Configuración de texto de título cerrado al pasar el mouse
Cambie el color del texto del título cerrado al pasar el mouse.
- Color del texto del título cerrado: #f4f4f4
Configuración del texto del cuerpo
Pase a la configuración del texto del cuerpo y haga algunos cambios allí también.
- Fuente del cuerpo: Fira Sans
- Peso de la fuente del cuerpo: ligero
- Alineación del cuerpo del texto: Justificar
- Tamaño del texto del cuerpo: 1.2vw (escritorio), 2vw (tableta), 3vw (teléfono)
- Altura de la línea del cuerpo: 2,1 em
Espaciado
Agregue también un relleno superior, inferior e izquierdo personalizado al módulo.
- Acolchado superior: 10vw
- Acolchado inferior: 10vw
- Acolchado izquierdo: 6vw
Borde
Continúe eliminando el borde predeterminado del módulo en la configuración de bordes.
- Ancho del borde: 0px
Alternar contenido CSS
Complete la configuración del módulo Toggle agregando las siguientes líneas de código CSS al escritorio:
|
01
02
03
|
width: 60vw;border-left: 0.2vw solid black;padding: 5vw 5vw 5vw 5vw; |
Modifique el ancho de la línea de código CSS en la tableta y el teléfono:
|
01
|
width: 85vw; |
Clona toda la sección tantas veces como quieras
Una vez que haya completado la primera sección, la fila y el módulo de alternar, puede clonar la sección completa tantas veces como desee; dependiendo de la cantidad de contenido que desee mostrar en su página.
Cambiar contenido
Asegúrese de cambiar todo el contenido de alternar en cada módulo de alternar duplicado.
Cambiar los colores de los iconos
Luego, abra cada módulo de alternar individualmente y cambie el color del icono. Los que hemos usado para este tutorial se mencionan a continuación:
- Color de icono 1: #ff9000
- Color de icono 2: #00ffd4
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 ser creativo con el módulo de alternancia de Divi. Más específicamente; los hicimos de ancho completo y los usamos para mostrar el contenido de diferentes secciones de una manera creativa. Este tutorial muestra que puede usar fácilmente los módulos de Divi fuera de la caja cuando tiene en cuenta los distintos contenedores. ¡También pudo descargar el archivo JSON del tutorial de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en 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.