Cómo estructurar sus preguntas frecuentes con las pestañas personalizadas del Div

Al diseñar la página con preguntas frecuentes para su sitio, es esencial mantener la experiencia del usuario en la parte superior de la mente. Los visitantes buscan respuestas lo antes posible, y la forma en que diseña su página tiene una gran influencia. Si las preguntas frecuentes son limitadas como una suma, puede presentarlas fácilmente entre sí. Pero si tiene muchas preguntas que requieren respuesta, su agrupación podría ser más beneficiosa. En el tutorial de la división de hoy, le mostraremos cómo estructurarlos en pestañas personalizadas en las que se puede hacer clic. ¡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 aspecto gratuito para poner su mano en el aspecto gratuito, primero deberá descargarlos usando 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!
1. Construya la estructura del elemento Agregar sección no. 1 Color de fondo Comience agregando una nueva sección a la página en la que está trabajando. Abra la configuración de la sección y aplique un color de fondo.
Color de fondo: # FFFBF2
Interruptor de espacio a la pestaña de diseño de sección y elimine todo el predeterminado a continuación.

Finamiento inferior: 0 PX
Frontera luego aplique una frontera personalizada.

Ancho fronterizo: 1VW
Color del borde: # FFFBF2
La sombra de la caja también incluye un tono de caja.

Box Shadow Posición vertical: 0px
Poder de extender la sombra de la caja: 1 PX
Color de la sombra: # 000000
Box Shadow Position: Inner Shadow
El índice z y completar la configuración de la sección aumentando el índice z en la pestaña avanzada.

IND ÍNDICE: 12
Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva línea a la sección utilizando la siguiente estructura de columna:

Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí
El ancho de la canaleta: 1
Ancho máximo: 1380 PX
El espacio agregue algunos valores de espaciado personalizados.

Margen inferior: 3%
ENLIZACIÓN IZQUIERDA: 1%
Junta derecha: 1%
Agregue un módulo de texto a la columna Agregar el contenido H1 es el momento de agregar módulos, comenzando con un módulo de texto que contiene un contenido H1.
Configuración de texto H1 Cambie la configuración de texto H1 del módulo en consecuencia:

Fuente del título: Cormoran Garamond

Título Fuente de peso: Bold
Encabezado de texto de tamaño:
Escritorio: 60 PX
Tableta: 42 PX
Teléfono: 36 PX
Agregue el módulo Divisor a la visibilidad de la columna El siguiente modo que agregaremos es un módulo divisor. Asegúrese de que la opción “Show Divider” esté activada.
Divisor del espectáculo: si

La línea va a la pestaña Diseño del módulo y cambia el color de la línea.
Color de línea: # 000000

Dimensión Modifique la configuración de tamaño.
Peso del divisor: 2 PX

Ancho máximo: 150 PX
Altura: 2 PX
Espacio y complete la configuración del módulo agregando un margen superior a la configuración de espaciado.
Margen superior: 4%

Agregue la fila # 2 La estructura de la columna pasamos la siguiente fila. Use la siguiente estructura de columna:
Dimensión sin agregar módulos, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:

Use el ancho personalizado de la canaleta: sí

El ancho de la canaleta: 1
Ancho máximo: 1380 PX
El espacio elimina y todos los rellenos predeterminados, arriba e inferior.
SUS Lingo: 0 PX

Finamiento inferior: 0 PX
Agregue el módulo de texto no. 1 En la columna, agregue el contenido H3, agregue un primer módulo de texto en una fila con un contenido H3 de su elección.
El color de fondo agrega un color de fondo blanco.

Color de fondo: #ffffff

Configuración de texto H3 Luego cambie la configuración de texto H3 En consecuencia: 3 Fuentes: Karla
Título 3 Fuente de peso: Bold

Título 3 Estilo de fuente: mayúscula
Título 3 Alineación de texto: Centro
Rúbrica 3 Dimensión de texto: 15 PX
Rúbrica 3 Espaciación de litros: 4 PX
Dimensión modifica y ancho en diferentes tamaños de pantalla.
Ancho:
Escritorio: 22%

Tableta y teléfono: 44%
Espacio entonces, agregue algunos valores de espaciado personalizados.
Margen derecho: 1%
Revestimiento superior: 30 px

Finamiento inferior: 20 PX
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Borde agregue un borde.
Ancho fronterizo: 1 PX
La sombra de la caja también incluye un tono de caja.

Box Shadow Posición vertical: 0px
Color de la sombra: # FFF3DD

Box Shadow Position: Inner Shadow
El elemento CSS principal y complete la configuración del módulo atribuyendo una propiedad de visualización personalizada al módulo en la pestaña avanzada. Esto, en combinación con el ancho ajustado, permitirá que aparezcan más módulos uno al lado del otro.
Pantalla: bloque en línea;
La forma de clonar el texto 3x Después de haber completado el primer módulo de texto, puede clonar tres veces.

Cambie el contenido para asegurarse de cambiar el contenido de cada uno de los duplicados.

Agregue el espacio de la Sección 2 Agregue otra sección justo debajo de la anterior, abra la configuración de la sección y aplique un relleno superior e inferior.

Revestimiento superior: 100 px

Finamiento inferior: 100 PX

Agregue la estructura de la columna de la fila # 1 Continuar agregando una nueva fila utilizando la siguiente estructura de columna:
Dimensión Abra la configuración de la fila, acceda a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:
Use el ancho personalizado de la canaleta: el daño de la canaleta: 2

Ancho máximo: 1380 PX

Agregue los módulos de alternar # 1 al contenido de agregue columna y luego, agregue un módulo de conmutación en una fila y use un contenido de su elección.
Icono de configuración Vaya a la pestaña Diseño del módulo y cambie la configuración del icono.
Icono de color: # 000000
Use el tamaño del icono personalizado: Sí

Icono de tamaño de fuente: 24 PX

Cambie a la configuración modificada y la configuración de conmutación.
Abra para cambiar el color del fondo: # fffbf2
Fondo de conmutación oscura: #fffff
Configuración de texto de título luego aplique algunos estilos de título personalizados.

Texto en color ABIERTO Título: # 333333
Color de texto del título: # 333333
Nivel de encabezado del título: H4

Título de la fuente: Cormoran Garamond
Título Fuente de peso: Bold
Título del texto Tamaño:
Escritorio: 36 PX
Tableta: 34 PX
Teléfono: 28 PX
Configuración Título del texto Cerrado Cambiamos el color del texto del título cerrado.
Título del texto del color Dark: # 333333
Configuración del texto del cuerpo entonces, estilizaremos el texto del cuerpo.
Font Corp: Karla

Tamaño del texto del cuerpo: 17 PX
La altura de la línea del cuerpo: 1.9em

Espacio agregaremos algunos valores de espaciado receptivos.
Revestimiento superior:
Escritorio: 2%
Tableta: 4%

Teléfono: 6%
Levante inferior:
Escritorio: 2%
Tableta: 4%
Teléfono: 6%
ENLIZACIÓN IZQUIERDA: 5%
Revestimiento derecho: 5%
Border entonces, cambiaremos el color del borde.
Color del borde: # 000000
Cambie el contenido de CSS y completaremos la configuración del módulo agregando una línea de código CSS a la zona de contenido de conmutación en la pestaña avanzada. margen-top: 30px;
Clone El módulo de conmutación tantas veces como desee después de haber completado el primer módulo de conmutación, puede clonarlo tantas veces.

Cambie la condición del módulo de conmutación # 1 luego, abra el primer módulo de conmutación nuevamente y cambie la condición en “Apertura”.
Estado: abierto

Clon toda la fila 3x Ahora que tenemos nuestro primer conjunto de módulos de palanca, podemos clonar toda la fila tres veces. En total, ahora tendremos 4 filas que contienen módulos de conmutación. Esto corresponde al número de módulos de texto en la segunda fila de la sección # 1.

Cambie el contenido para asegurarse de cambiar el contenido de cada duplicado.

Agregar funcionalidad Agregar códigos CSS consecutivos a los módulos de texto en la fila no. 2 de la sección no. 1 Ahora que tenemos todos los elementos en su lugar, es hora de aplicar la funcionalidad. Nos aseguraremos de que una vez que se haga clic en un módulo de texto en la fila # 2 de la sección # 1, se muestran los interruptores de preguntas frecuentes apropiadas. Abra cada uno de los módulos de texto individualmente y use las siguientes IDS CSS consecutivas:

Modo de texto # 1: Preguntas frecuentes-Weitem-1
Módulo de texto # 2: Preguntas frecuentes-ritem-2

Módulo de texto # 3: FAQ-Pritem-3

Módulo de texto # 4: Preguntas frecuentes-ritem-4

Agregue IDS CSS consecutivos en la sección # 2, luego aplicaremos códigos CSS a cada fila que contenga módulos de conmutación. Seguimos el mismo orden consecutivo.
Primera fila: Pregunta frecuente-tab-1
Segunda fila: preguntas frecuentes-tab-2
Tercera fila: preguntas frecuentes-tab-3
Cuarta fila: preguntas frecuentes-tab-4

Agregue el módulo de código a su vez no. 1 de la sección no. 1 Para que la funcionalidad funcione, utilizaremos algunos códigos personalizados CSS y JQUEY. Para agregar el código a nuestra página, insertaremos un nuevo módulo de código en la fila # 1 de la sección # 1, incluso en el módulo divisor. Asegúrese de agregar etiquetas y script de estilo anticipado. Coloque el código CSS y luego, copie el siguiente código CSS entre etiquetas de estilo: [id*= “faq-wetem”] {
Cursor: puntero;
}
[id*= “faq-tab”] {
Posición: ¡Absoluto! Importante;

Arriba: 0px;


Abajo: auto;
Izquierda: 50%;
Derecha: Auto;
Transform: traduceX (-50%);
}
.Active-Faq-Weitem {
Color: #6B63DD! IMPORTANTE;
Color de fondo: #fff;
}
. Cadera-faq-tab {
Visibilidad: oculto;
Opacidad: 0;
}
.Show-faq-tab {
Visibilidad: ¡Visible! Importante;
Opacidad: 1! IMPORTANTE;
Índice Z: 12;
Posición: relativo! Importante;
Izquierda: 0! IMPORTANTE;
Transform: traduceX (0%)! IMPORTANTE;
}
.faq-weite-activo {
Color de fondo: #000! IMPORTANTE;
Color: #fff! IMPORTANTE;
}
.faq-weite-activo H3 {
Color: #fff! IMPORTANTE;
}
Agregue el código JQuey y complete el tutorial utilizando las siguientes filas de jquey entre etiquetas de script: jQuery (docum) .redy (function ($) {
ps
$ (‘#Faq-tab-1’). AddClass (‘show-faq-tab’);
$ (‘[id*= “faq-tab”]’). no (‘#faq-tab-1’). addClass (‘hide-faq-tab’);
$ (‘[id*= “faq-oisted”]’). Click (function () {
lima selector = $ (this) .attr (‘id’). reemplazar (‘elemento’, ‘tab’);

var $ faqselect = $ (‘#’ + selector);
$ (‘[id*= “faq-tab”]’). removeClass (‘show-faq-tab’);
$ (‘[id*= “faq-tab”]’). addClass (‘hide-faq-tab’);
$ faqselect.addclass (‘show-faq-tab’);
$ (‘[id*= “faq -item”]’). RemoveClass (‘faq-weite-actual’);
});
});
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, le mostré cómo mejorar su experiencia de usar la página con preguntas frecuentes. Específicamente, le mostré cómo estructurar las preguntas en diferentes pestañas del tipo. Este enfoque lo ayudará a organizar sus preguntas frecuentes, lo que, a su vez, ayudará a los visitantes a encontrar respuestas a sus preguntas más rápido. ¡Podrías descargar el archivo JSON gratis! Si tiene alguna pregunta, 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.