/

paso 1.

Diseña

/

PASO 2.

CSS Blurb

/

PASO 3.

Id Sección

/

PASO 4.

Código JS

/

PASO 5.

Documentación

PASO 1.

Primero de todo: personalice a tu gusto el diseño de los tabs.

En nuestro caso lo hemos personalizado para crear el tutorial de como hacer un tab menú personalizado paso a paso :)

PASO 2.

Le damos a cada Blurb su propia clase CSS única: “rv_button1 closed” donde rv_button1 es el activador.

Abra el Blurb (los botones de cada uno de los pasos) – vaya a la pestaña Advanced – asígnele una clase CSS: rv_button1 closed – guarde y continúe con la siguiente sección con rv_button2 y así sucesivamente hasta que tenga todos los botones configurados.

PASO 3.

El siguiente paso es darle a sus secciones, filas o módulos una identificación CSS, para que se active al hacer clic en uno de los Blurbs.

Abra su diseño n.1 – en nuestro caso es una sección – luego ve a Advanced y añada al campo de CSS class: revelar1. Una ve hecho, tenemos que realizar lo mismo en las 5 secciones, filas o módulos.

La siguiente sección, fila o módulo obtiene la identificación CSS: revelar2 y la siguiente identificación CSS: revelar3 y así sucesivamente.

PASO 4.

Ahora llegamos a la parte divertida… No os asustéis, hablamos de código pero te lo facilitamos todo.

Añada un módulo de código y en este módulo es donde vamos a poner nuestro JavaScript. Obtenga el código JavaScript (que encontrarás al paso 5): guarda tu diseño y voilá.

*Otra opción para integrar el código JavaScript es ir a Divi – Integration – Add code to the < head > of your blog

Tab menú personalizado Divi theme

PASO 5.

Seguidamente os facilitamos el archivo con el código JavaScript

Archivo código JavaScript Tab menú personalizado

Tab menú personalizado Divi theme