Cómo estructurar tus preguntas frecuentes con pestañas personalizadas en Divi

Cuando está diseñando la página de preguntas frecuentes para su sitio web, es esencial tener en mente la experiencia del usuario. Los visitantes buscan respuestas lo más rápido posible, y la forma en que diseñas tu página tiene una gran influencia en ella. Si la cantidad de preguntas frecuentes es limitada, puede mostrarlas fácilmente una debajo de la otra. Pero, si tiene muchas preguntas que necesitan respuesta, agruparlas podría ser más beneficioso. En el tutorial Divi de hoy , le mostraremos cómo estructurarlos en pestañas personalizadas en las que se puede hacer clic sin necesidad de depender de un complemento de preguntas frecuentes por separado . ¡También podrá descargar el archivo JSON de forma gratuita!

Hagámoslo.

Avance

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

Escritorio

Móvil

Descarga el diseño GRATIS

Para poner sus manos en el diseño gratuito, primero deberá descargarlos 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!

1. Construya la estructura del elemento

Añadir Sección #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: #ffbf2

Espaciado

Pase a la pestaña de diseño de la sección y elimine todo el relleno inferior predeterminado.

  • Relleno inferior: 0px

Borde

A continuación, aplique un borde personalizado.

  • Ancho del borde: 1vw
  • Color del borde: #ffffbf2

Sombra de la caja

Incluye también una sombra de caja.

  • Posición vertical de la sombra del cuadro: 0px
  • Fuerza de propagación de sombra de cuadro: 1px
  • Color de sombra: #000000
  • Posición de la sombra del cuadro: Sombra interior

Índice Z

Y complete la configuración de la sección aumentando el índice z en la pestaña avanzada.

  • Índice Z: 12

Añadir Fila #1

Estructura de la columna

Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Ancho máximo: 1380px

Espaciado

Agregue algunos valores de espaciado personalizados a continuación.

  • Margen superior: 3%
  • Margen inferior: 3%
  • Relleno izquierdo: 1%
  • Relleno derecho: 1%

Agregar módulo de texto a la columna

Agregar contenido H1

Es hora de agregar módulos, comenzando con un módulo de texto que contenga algún contenido H1 de su elección.

Configuración de texto H1

Cambie la configuración de texto H1 del módulo en consecuencia:

  • Fuente del encabezado: Cormorant Garamond
  • Peso de la fuente del encabezado: Negrita
  • Tamaño del texto del encabezado:

    • Escritorio: 60px
    • Tableta: 42px
    • Teléfono: 36px

Agregar módulo divisor a columna

Visibilidad

El siguiente módulo que agregaremos es un módulo divisor. Asegúrese de que la opción «Mostrar divisor» esté habilitada.

  • Mostrar divisor: Sí

Línea

Pase a la pestaña de diseño del módulo y cambie el color de la línea.

  • Color de línea: #000000

Dimensionamiento

Modifique también la configuración de tamaño.

  • Peso del divisor: 2px
  • Ancho máximo: 150 px
  • Altura: 2px

Espaciado

Y complete la configuración del módulo agregando un margen superior a la configuración de espaciado.

  • Margen superior: 4%

Añadir Fila #2

Estructura de la columna

A la siguiente fila. Utilice la siguiente estructura de columnas:

Dimensionamiento

Sin agregar módulos todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 1
  • Ancho máximo: 1380px

Espaciado

Elimine también todo el relleno superior e inferior predeterminado.

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

Agregue el módulo de texto n. ° 1 a la columna

Agregar contenido H3

Agregue un primer módulo de texto a la fila con algún contenido H3 de su elección.

Color de fondo

Agregue un color de fondo blanco.

  • Color de fondo: #ffffff

Configuración de texto H3

Luego, modifique la configuración de texto H3 en consecuencia:

  • Encabezado 3 Fuente: Karla
  • Encabezado 3 Peso de fuente: Negrita
  • Título 3 Estilo de fuente: Mayúsculas
  • Encabezado 3 Alineación de texto: Centro
  • Encabezado 3 Tamaño del texto: 15px
  • Encabezado 3 Espaciado entre letras: 4px

Dimensionamiento

Cambie también el ancho en diferentes tamaños de pantalla.

  • Ancho:

    • Escritorio: 22%
    • Tableta y teléfono: 44%

Espaciado

A continuación, agregue algunos valores de espaciado personalizados.

  • Margen Derecho: 1%
  • Relleno superior: 30px
  • Relleno inferior: 20px
  • Relleno izquierdo: 5%
  • Relleno derecho: 5%

Borde

Agrega un borde.

  • Ancho del borde: 1px

Sombra de la caja

Incluye también una sombra de caja.

  • Posición vertical de la sombra del cuadro: 0px
  • Color de sombra: #fff3dd
  • Posición de la sombra del cuadro: Sombra interior

Elemento principal CSS

Y complete la configuración del módulo asignando una propiedad de visualización personalizada al elemento principal del módulo en la pestaña avanzada. Esto, en combinación con el ancho ajustado, permitirá que varios módulos se muestren uno al lado del otro.

01
display: inline-block;

Clonar módulo de texto 3x

Una vez que haya completado el primer módulo de texto, puede clonarlo tres veces.

Cambiar contenido

Asegúrate de cambiar el contenido en cada uno de los duplicados.

Añadir Sección #2

Espaciado

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

  • Relleno superior: 100px
  • Relleno inferior: 100px

Añadir Fila #1

Estructura de la columna

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

Dimensionamiento

Abra la configuración de la fila, vaya a la pestaña de diseño y cambie la configuración de tamaño de la siguiente manera:

  • Usar ancho de canalón personalizado: Sí
  • Ancho del canalón: 2
  • Ancho máximo: 1380px

Agregue el módulo de alternancia n. ° 1 a la columna

Agregar contenido

Luego, agregue un primer módulo de alternancia a la fila y use algún contenido de su elección.

Configuración de iconos

Pase a la pestaña de diseño del módulo y cambie la configuración del icono.

  • Color del icono: #000000
  • Usar tamaño de icono personalizado: Sí
  • Tamaño de fuente del icono: 24px

Alternar configuración

Modifique la configuración de alternancia también.

  • Abrir alternar color de fondo: #ffffbf2
  • Alternar cerrado Color de fondo: #ffffff

Configuración del texto del título

Luego, aplique algunos estilos personalizados al título.

  • Color del texto del título abierto: #333333
  • Color del texto del título: #333333
  • Título Nivel de encabezado: H4
  • Fuente del título: Cormorant Garamond
  • Peso de la fuente del título: Negrita
  • Tamaño del texto del título:

    • Escritorio: 36px
    • Tableta: 34px
    • Teléfono: 28px

Configuración de texto de título cerrado

También estamos cambiando el color del texto del título cerrado.

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

Configuración del texto del cuerpo

Luego, diseñaremos el cuerpo del texto.

  • Fuente del cuerpo: Karla
  • Tamaño del cuerpo del texto: 17px
  • Altura de la línea del cuerpo: 1,9 em

Espaciado

También agregaremos algunos valores de espaciado de respuesta.

  • Acolchado superior:

    • Escritorio: 2%
    • Tableta: 4%
    • Teléfono: 6%
  • Acolchado inferior:

    • Escritorio: 2%
    • Tableta: 4%
    • Teléfono: 6%
  • Relleno izquierdo: 5%
  • Relleno derecho: 5%

Borde

A continuación, cambiaremos el color del borde.

  • Color del borde: #000000

Alternar contenido CSS

Y completaremos la configuración del módulo agregando una línea de código CSS al área de contenido de alternancia en la pestaña avanzada.

01
margin-top: 30px;

Módulo de alternancia de clones tantas veces como se desee

Una vez que haya completado el primer módulo de alternancia, puede clonarlo tantas veces como desee.

Cambiar contenido

Asegúrese de cambiar todo el contenido duplicado.

Cambiar el estado del módulo de alternancia n.º 1

Luego, abra el primer módulo de alternar nuevamente y cambie el estado a «Abierto».

  • Estado: Abierto

Clonar toda la fila 3x

Ahora que tenemos nuestro primer conjunto de módulos de alternancia, podemos clonar la fila completa tres veces. En total, ahora tendremos 4 filas que contienen módulos de alternancia. Esto coincide con el número de módulos de texto en la segunda fila de la sección #1.

Cambiar contenido

Asegúrese de cambiar el contenido en cada fila duplicada.

Agregar funcionalidad

Agregue ID de CSS consecutivos a los módulos de texto en la fila n.º 2 de la sección n.º 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 n.º 2 de la sección n.º 1, se muestren las preguntas frecuentes correspondientes. Abra cada uno de los Módulos de Texto individualmente y use las siguientes ID de CSS consecutivas:

  • Módulo de texto #1: faq-item-1
  • Módulo de texto #2: faq-item-2
  • Módulo de texto #3: faq-item-3
  • Módulo de texto #4: faq-item-4

Agregue ID de CSS consecutivos a las filas en la sección n.º 2

A continuación, aplicaremos ID de CSS a cada fila que contenga Módulos de alternancia. Estamos siguiendo el mismo orden consecutivo.

  • Primera fila: faq-tab-1
  • Segunda fila: faq-tab-2
  • Tercera fila: faq-tab-3
  • Cuarta Fila: faq-tab-4

Agregar módulo de código a la fila n.º 1 de la sección n.º 1

Para que la funcionalidad funcione, usaremos algunos códigos CSS y JQuery personalizados. Para agregar el código a nuestra página, insertaremos un nuevo módulo de código en la fila n.º 1 de la sección n.º 1, justo debajo del módulo divisor. Asegúrese de agregar etiquetas de estilo y script por adelantado.

Agregar código CSS

Luego, copie y pegue el siguiente código CSS entre las etiquetas de estilo:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
[id*="faq-item"] {
cursor: pointer;
}
 
[id*="faq-tab"]{ 
position: absolute!important;
top: 0px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}
 
 
.active-faq-item {
color: #6b63dd !important;
background-color: #fff;
}
 
.hide-faq-tab{ 
visibility: hidden;
opacity: 0; 
}
 
.show-faq-tab{
visibility: visible !important;
opacity: 1 !important;
z-index: 12;
   
position: relative !important;
left: 0 !important;
transform: translateX(0%) !important;
}
   
.faq-item-active {
background-color: #000 !important;
color: #fff !important;
}
 
.faq-item-active h3{
color: #fff !important;
}

Añadir código JQuery

Y complete el tutorial usando las siguientes líneas de código JQuery entre las etiquetas del script:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
jQuery(document).ready(function($){
 
$('#faq-item-1').addClass('faq-item-active');
$('#faq-tab-1').addClass('show-faq-tab');
$('[id*="faq-tab"]').not('#faq-tab-1').addClass('hide-faq-tab');
  
$('[id*="faq-item"]').click(function() {
  
var selector = $(this).attr('id').replace('item', '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-item-active');
$(this).addClass('faq-item-active');
    
});
});

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 mejorar la experiencia de usuario de su página de preguntas frecuentes. Más específicamente, le mostramos cómo estructurar las preguntas en diferentes pestañas por tipo. Este enfoque lo ayudará a organizar sus preguntas frecuentes, lo que a su vez ayudará a sus visitantes a encontrar respuestas a sus preguntas más rápido. ¡También pudo descargar el archivo JSON de forma gratuita! Si tiene alguna pregunta, 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.

Publicaciones relacionadas:

  1. 10 sitios Divi con interesantes páginas de preguntas frecuentes
  2. Creación de diseños de preguntas frecuentes de columnas únicas con Divi
  3. Cómo mostrar funciones en pestañas flotantes con Divi
  4. ¿Qué es una página de preguntas frecuentes de Dropshipping? (+ Plantilla de preguntas frecuentes para 2022)