El Módulo de alternar de Divi le permite 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 las preguntas frecuentes. Sin embargo, también puede usarlos para otras cosas, por ejemplo, para estructurar su página. En este tutorial, utilizaremos 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.

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

palanca de ancho completo

Móvil

palanca de ancho completo

Comencemos a recrear

Agregar nueva sección

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 superiores e inferiores predeterminados en la configuración de espaciado.

  • Relleno superior: 0px
  • Relleno inferior: 0px

palanca de ancho completo

Agregar nueva fila

Estructura de columna

Continúe agregando una nueva fila utilizando la siguiente estructura de columnas:

palanca de ancho completo

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

palanca de ancho completo

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

palanca de ancho completo

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; de texto a imágenes y más.

palanca de ancho completo

Estado

Estamos utilizando un estado de alternancia cerrado, pero también puede dejarlo abierto.

  • Estado: Cerrar

palanca de ancho completo

Configuración de icono predeterminada

Pase a la pestaña de diseño y cambie la configuración de iconos del módulo en consecuencia:

  • Color del icono: # 570fff
  • Usar tamaño de icono personalizado: Sí
  • Tamaño de fuente del icono: 6vw

palanca de ancho completo

Configuración del icono de desplazamiento

Modifique el color del icono al pasar el mouse.

  • Color del icono: # f2f2f2

palanca de ancho completo

Configuración de alternancia predeterminada

Cambie el color de fondo de alternar cerrado a continuación.

  • Color de fondo de alternar cerrado: #ffffff

palanca de ancho completo

Configuración de alternar el desplazamiento

Y cambie el color al pasar el mouse también.

  • Color de fondo de palanca cerrada: # 000000

palanca de ancho completo

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
  • Nivel de título del título: 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 de título: -1vw (escritorio), -0.5vw (tableta y teléfono)
  • Altura de la línea de título: 0.7em

palanca de ancho completo

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:

  • Título cerrado Fuente: 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.8em

palanca de ancho completo

Pase el mouse sobre la configuración del texto del título cerrado

Cambie el color del texto del título cerrado al pasar el mouse.

  • Color del texto del título cerrado: # f4f4f4

palanca de ancho completo

Configuración de texto del cuerpo

Pase a la configuración del texto del cuerpo y realice algunos cambios allí también.

  • Fuente del cuerpo: Fira Sans
  • Peso de la fuente del cuerpo: ligero
  • Alineación del texto del cuerpo: justificar
  • Tamaño del texto del cuerpo: 1.2vw (escritorio), 2vw (tableta), 3vw (teléfono)
  • Altura de la línea del cuerpo: 2.1em

palanca de ancho completo

Espaciado

Agregue también un relleno personalizado superior, inferior e izquierdo al módulo.

  • Relleno superior: 10vw
  • Relleno inferior: 10vw
  • Relleno izquierdo: 6vw

palanca de ancho completo

Frontera

Continúe eliminando el borde predeterminado del módulo en la configuración del borde.

  • Ancho del borde: 0px

palanca de ancho completo

Alternar CSS de contenido

Complete la configuración del Módulo de alternancia agregando las siguientes líneas de código CSS al escritorio:

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:

width: 85vw;

palanca de ancho completo

Clone toda la sección tantas veces como desee

Una vez que haya completado la primera sección, fila y Módulo de alternancia, puede clonar toda la sección tantas veces como desee; dependiendo de cuánto contenido quieras mostrar en tu página.

palanca de ancho completo

Cambiar contenido

Asegúrese de cambiar todo el contenido de alternar en cada módulo de alternar duplicado.

palanca de ancho completo

Cambiar colores de iconos

Luego, abra cada Módulo de alternancia individualmente y cambie el color del icono. Los que hemos usado para este tutorial se mencionan a continuación:

  • Color del icono 1: # ff9000
  • Color del icono 2: # 00ffd4

palanca de ancho completo

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Consigue la plantilla Divi

Más de 800 diseños de sitios web prefabricados vienen empaquetados dentro de Divi de forma gratuita.

You have Successfully Subscribed!