Antes de que pueda agregar un módulo Toggle a su página, primero debe acceder al Divi Builder. Una vez el Tema divi instalado en su Sitio web, notarás un botón Utilice Divi Builder encima del editor de publicaciones cada vez que crea una página nueva. Haga clic en este botón para activar Divi Builder y acceder a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual. También puede hacer clic en el botón Habilitar Visual Builder cuando navegas por tu Sitio web en primer plano si ha iniciado sesión en su panel de WordPress.
Una vez que esté en Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, recuerde agregar una fila a su página primero.
Busque el módulo de alternancia en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir "alternar" y luego presionar enter para buscar y agregar automáticamente el módulo de alternancia. Una vez que se agrega el módulo, será recibido por la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .
Ejemplo de caso de uso: página de preguntas frecuentes
Una página de preguntas frecuentes es uno de los mejores lugares para consolidar información utilizando el módulo Toggle. Permite al usuario identificar rápidamente la pregunta que está buscando sin tener que leer toneladas de texto. Para este ejemplo, le mostraré cómo puede usar el módulo Toggle para diseñar una sección de preguntas frecuentes moderna para su página de preguntas frecuentes en cuestión de minutos.
Con Visual Builder, agregue una nueva sección con una fila de ancho completo (1 columna). Luego agregue un módulo Divisor a la fila. En la pestaña Contenido de la configuración del módulo Divisor, seleccione la opción "Mostrar divisor".
En la pestaña Diseño, ingrese las siguientes opciones:
Color: # 000000 (negro)
Estilo divisor: sólido
Posición del separador:
Divisor centrado verticalmente Peso: 4px
Hauteur: 1
Luego agregue un módulo de alternancia debajo del divisor que acabo de crear en la misma fila. En la configuración del módulo Alternar, actualice lo siguiente:
Pestaña de contenido
Título: [ingrese su título]
Contenido: [ingrese su contenido]
Estado: Cerrar
Color de fondo abierto: #ffffff
Cerrado Alternar el color de fondo: #ffffff
Color de fondo: #ffffff
Pestaña Diseño
Color del icono: # 000000
Abrir el color del texto de alternar: # 000000
Color de texto de alternancia cerrado: # 000000
Título de la fuente: Open Sans, Bold
Tamaño de fuente: 24px
Color del texto del título: # 000000
Fuente del cuerpo: abierto sin
Tamaño de fuente del cuerpo: 18px
Color del texto del cuerpo: # 666666
Altura de la línea del cuerpo: 1.6em
Usa el borde: SÍ
Ancho del borde: 0px
Relleno personalizado: 2px superior, 2px inferior
Después de guardar su configuración para el módulo de alternancia, duplique el módulo divisor que creó y colóquelo debajo del módulo de alternancia. Esto enmarcará el balancín con una línea divisoria superior e inferior. Después de eso, duplique su módulo de alternancia y colóquelo después de la línea de separación inferior. Dado que se trata de un módulo Toggle duplicado, todos los parámetros de diseño se han transferido al nuevo módulo Toggle y todo lo que necesita hacer es actualizar el contenido del nuevo módulo Toggle. Luego continúe con el proceso de duplicar los módulos de División y Módulos de báscula y actualice el contenido de sus básculas hasta que haya completado toda la sección de preguntas frecuentes.
Es todo. Ahora tiene una sección de preguntas frecuentes moderna que utiliza el módulo Alternar para consolidar sus preguntas y respuestas.
Ahora que ha visto el módulo de alternancia en acción, sumérjase en TODAS sus configuraciones en las secciones siguientes. Proporcionamos una descripción detallada de lo que encontrará en cada pestaña de la configuración del módulo y una explicación de lo que hace cada uno.
Los parámetros de contenido del módulo Toggle
La pestaña de contenido del módulo de alternancia está organizada en los siguientes grupos de parámetros (¡que también se alternan!).
textos
Aquí es donde puede agregar el título y alternar el contenido.
Estado
Puede elegir si desea que su botón aparezca abierto o cerrado de forma predeterminada con esta configuración.
contexto
Aquí puede cambiar el color de fondo cuando la palanca está abierta y el color de fondo cuando está cerrada. También puede hacerlos iguales fácilmente configurando la opción de color de fondo. También existe la opción de configurar o cargar una imagen de fondo.
Etiqueta de administrador
De forma predeterminada, su módulo de alternancia aparecerá con una etiqueta que dice "Alternar" en el generador. Admin Tag le permite cambiar esta etiqueta para una fácil identificación.
Los parámetros de diseño del módulo basculante.
Los parámetros de diseño del módulo de alternancia se han agrupado en las siguientes opciones desplegables en la pestaña Diseño.
icono
Aquí es donde puede cambiar el color del icono de alternar.
textos
Aquí puede establecer el color para el texto de alternancia abierto y cerrado.
Texto del título
Aquí puede ajustar la fuente del texto del título, el peso, el tamaño, el color, el espaciado, la altura de la línea y más.
El cuerpo del texto
Aquí puede ajustar la fuente, el peso, el tamaño, el color, el espaciado, la altura de la fila y más.
fronteras
Aquí puede optar por utilizar un borde. Y si elige usar un borde, también puede seleccionar su color, cambiar su ancho y elegir su estilo.
espaciamiento
En el área de espaciado, puede agregar un relleno personalizado en la parte superior, derecha, inferior o izquierda del interruptor. También puede cambiar estos valores para computadoras de escritorio, tabletas o dispositivos móviles.
La configuración avanzada del módulo alterna
En la pestaña Avanzado de su módulo de alternancia, puede agregar una ID única y una clase css. También puede agregar CSS personalizado a varios selectores de CSS predefinidos (y preseleccionados) en el módulo deslizante de video desplegable CSS personalizado. Finalmente, en la lista desplegable de visibilidad, puede ajustar la visibilidad de su módulo en teléfonos, tabletas y computadoras de escritorio.
Eso es todo por este tutorial, espero que le permita utilizar mejor el módulo Divi Toggle.
[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Otros tutoriales de Divi
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin
