Estructurar su página con módulos de conmutación de ancho completo en negrita utilizando Div

El módulo de conmutación de la división le permite mostrar contenido adicional de clic sin la necesidad de jquey. Similar al módulo de acordeón, los módulos de conmutación generalmente se utilizan para compartir contenido de grupo, como preguntas frecuentes. Sin embargo, puede usarlos para otras cosas, por ejemplo, para estructurar su página. En este tutorial, utilizaremos módulos de conmutación de ancho completo para crear un diseño de página simple que haga clic. El estilo de diseño que manipulamos es audaz y limpio. ¡Podrá descargar el archivo JSON de forma gratuita! Vamos a eso.
Vista previa antes de arrojar nuestras cabezas en el tutorial, para echar un vistazo rápido al resultado en diferentes tamaños de pantalla. Escritorio

Móvil

Descargue el diseño de toga de anchura completa en negrita para poner su mano en el aspecto de conmutación y el ancho completo, primero debe descargarlo con el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No será “reubicado” y no recibirá correos electrónicos adicionales.
Descargar archivos

Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Suscríbase a nuestro canal de YouTube para comenzar a recrear Agregar una nueva sección de espaciado Comience creando una nueva página (o abriendo una existente) y agregando una sección regular. Lo único que debe hacer en la configuración de la sección es eliminar todos los rellenos predeterminados e inferiores de la configuración de espaciado.
SUS Lingo: 0 PX
Finamiento inferior: 0 PX
Agregue una nueva estructura de columna de fila Continuar agregando una nueva línea utilizando la siguiente estructura de columnas:

Dimensión sin agregar módulos, abra la configuración de la fila y asegúrese de que la fila toque el lado izquierdo y derecho del contenedor de sección cambiando la configuración de tamaño. Este es un paso importante en este tutorial; Permite que el módulo de palanca, que agregaremos más adelante a este tutorial, se vuelva completo.

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Espacio eliminamos el llenado predeterminado e inferior de la fila de la fila. Esto eliminará todo el espacio entre el módulo de conmutación y el contenedor de fila / columna en el que se coloca.

Finamiento inferior: 0 PX
Agregue el módulo de conmutación a la columna Ingrese el título y el contenido es hora de comenzar a agregar módulos. La única forma en que necesitamos en esta fila es un módulo de togle. 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 desee en el cuadro de contenido; De texto a imágenes y más.
Estado usamos un estado de conmutación cerrado, pero no dude en dejarlo abierto y.

Estado: cerrado

Configuración predeterminada para los iconos Vaya a la pestaña Diseño y cambie la configuración del icono del módulo de acuerdo con:
Icono de color: # 570fff


Use el tamaño del icono personalizado: Sí
Icono de tamaño de fuente: 6VW
Coloque el cursor en la configuración del icono Cambie el color del icono al cursor.
Icono de color: # F2F2F2

Configuración de conmutación predeterminada luego cambie el color de fondo oscuro.
Fondo de conmutación oscura: #fffff

Pase el mouse sobre la configuración de conmutación y cambie el color en el flotador.
Fondo de conmutación oscura: # 000000

Configuración de texto de título Continúe cambiando la configuración del título de la siguiente manera:
Color de texto del título: # 000000

Nivel de encabezado de título: H2
Título de la fuente: Montserrat
Alineación del texto del título: Izquierda
Título Tamaño del texto: 8VW (escritorio), 10VW (tableta y teléfono)
Letras de espaciado Título: -1VW (escritorio), -0.5VW (tableta y teléfono)
Altura de la línea de título: 0.7em
Configuración predeterminada para el texto del título Luego, acceda a la configuración del texto del título cerrado y cambie la configuración en consecuencia: Fuente del título cerrado: Montserrat
Título cerrado del tamaño del texto: 18 VW (escritorio), 16VW (tableta y teléfono)

La altura de la línea de título cerrada: 0.8em
Pase con el mouse en la configuración del texto, cambie el color del texto del título cerrado al cursor.
Título del texto del color Dark: # F4F4F4
Configuración del texto del cuerpo Vaya a la configuración del texto del cuerpo y realice algunos cambios allí.

Font Corp: Fira Sans
Peso de la fuente del cuerpo: luz

Alineación del texto del cuerpo: justificar
Tamaño de texto del cuerpo: 1.2VW (escritorio), 2VW (tableta), 3VW (teléfono)
La altura de la línea del cuerpo: 2.1em
Espacio agregue algunas almohadillas personalizadas, inferior e izquierda al modo.
Revestimiento superior: 10 VW
Revestimiento inferior: 10 VW

Junta izquierda: 6VW
El borde continúa eliminando el borde predeterminado del módulo desde la configuración del borde.
Ancho fronterizo: 0 PX
Cambie el contenido de CSS Complete la configuración del módulo de conmutación agregando las siguientes líneas de código CSS al escritorio: Ancho: 60VW;

Border-izquierda: 0.2 VW negro sólido;
Rolado: 5VW 5VW 5VW 5VW; Cambie el ancho de la línea de código CSS en la tableta y el teléfono: Ancho: 85VW;

Clone toda la sección tantas veces como desee después de haber completado la primera sección, fila y modo de conmutación, puede clonar toda la sección tantas veces como desee; Según cuánto contenido desea aparecer en su página.
Cambie el contenido Asegúrese de cambiar todo el contenido de conmutación en cada módulo de conmutación duplicada.
Cambie los colores del icono luego, abra cada módulo de conmutación individual y cambie el color del icono. Los que usé para este tutorial se mencionan a continuación: Color de icono 1: # FF9000

Icono de color 2: # 00ffd4

Vista previa ahora que hemos dado todos los pasos, para echar un vistazo final al resultado en diferentes tamaños de pantalla. Escritorio

Móvil
Pensamientos finales En esta publicación, te mostré cómo ser creativo con el Div Toggle. Más exactamente; Los hice completar el ancho y los usé para mostrar contenido de diferentes secciones de manera creativa. Este tutorial muestra que puede usar fácilmente los módulos de la división fuera de la caja al considerar diferentes contenedores. ¡Puede 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 obtener más información sobre Divi y obtener más regalos de la Divicidad, 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 beneficios de este contenido gratuito.