Organizar Preguntas Frecuentes en Pestañas con Divi

• Cómo Instalar Divi. En esta guía te explico paso a paso cómo instalar Divi en WordPress y activar la licencia.
• Módulo Texto. Vamos a usar el módulo de texto de Divi para crear las pestañas de la página de preguntas frecuentes.
• Módulo Conmutador. Vamos a utilizar este módulo para mostrar las distintas preguntas frecuentes que contendrá la página.
• Módulo Código. Lo vamos a necesitar para insertar en la página el código que permite cambiar entre grupos de preguntas.

¿Cómo Organizar Preguntas Frecuentes en Pestañas con Divi y WordPress?

En esta guía te muestro cómo organizar con Divi y WordPress una página de preguntas frecuentes según categorías temáticas.

Vamos a organizar las preguntas en pestañas temáticas, de manera que al hacer clic en una pestaña se muestran solo el grupo de preguntas relacionadas con ese tema.

Y además vamos a usar el Módulo Conmutador para mostrar las preguntas de una forma más clara.

Cómo hacer preguntas frecuentes con pestañas paso a paso

Te recomiendo ver el video ya que ahí muestro cómo organizar la página de preguntas frecuentes en pestañas con Divi y WordPress en detalle y paso a paso.

Paso 1 – Configurar la Sección y el Título

Reducimos el relleno inferior de la sección predeterminada y le asignamos un color de fondo y un borde inferior de 1px para que sirva de base a las pestañas.

Luego insertamos una fila con estructura de 1 columna para colocar el título con un módulo te texto. Recomiendo usar el contenido dinámico en vez de escribir directamente el título por si en algún momento deciden cambiar el título a la página.

Paso 2 – Crear las pestañas

Insertamos una segunda fila, en este caso con estructura de 4 columnas (o tantas columnas como pestañas quieras agregar).

Dentro de cada columna insertamos un módulo de texto. Este será el que conformará a la pestaña propiamente dicha.

Es importante asignar a cada uno de estos módulos de texto el siguiente ID. Es necesario repetir este ID en cada módulo de texto de pestaña cambiando el número de forma consecutiva.

ID y CLASE CSS:

• ID CSS: faq-item-1

Paso 3 – Crear grupos de preguntas

Para las preguntas añadimos una segunda sección y luego una fila con estructura de 1 columna por cada grupo de preguntas (o pestaña).

A cada una de estas filas tenemos que añadirle el ID siguiente. Es necesario repetir este ID en cada fila de grupo de preguntas cambiando el número de forma consecutiva.

ID y CLASE CSS:

• ID CSS: faq-tab-1

Luego, dentro de cada fila, insertamos módulos Conmutador para cada una de las preguntas.

Paso 4 – Código para que funcione

Por último insertamos un módulo de código en cualquier lugar de la página y pegamos el siguiente código CSS:

<style>

[id*="faq-item"] {
cursor: pointer;
}

[id*="faq-tab"]{
position: absolute;
top: 0px;
bottom: auto;
left: 50%;
right: auto;
transform: translateX(-50%);
}

.active-faq-item {
color: #6b63dd ;
background-color: #fff;
}

.hide-faq-tab{
visibility: hidden;
opacity: 0;
}

.show-faq-tab{
visibility: visible ;
opacity: 1 ;
z-index: 12;

position: relative ;
left: 0 ;
transform: translateX(0%) ;
}

.faq-item-active {
background-color: #000 ;
color: #fff ;
}

.faq-item-active h3{
color: #fff ;
}

</style>

Y justo debajo, en el mismo módulo de código, pegamos el siguiente código JQuery:

<script>

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');

});
});

</script>

Solo te queda guardar e ir a probar cómo quedó terminada tu página de preguntas frecuentes organizada en pestañas.

Dejame debajo un comentario contándome que te pareció esta posibilidad de Divi y ayudame compartiéndolo para que más personas puedan aprender todo lo que se puede hacer con Divi.