A veces, cuando diseñamos nuestra web personalizada con Divi theme, nos encontramos que estamos limitados con los módulos que nos ofrece la misma plantilla. En ai*, te queremos enseñar que no hace falta más plugins para resolver las necesidades de tu página web. Simplemente con un poco de ingenio podemos conseguir el resultado deseado, el diseño personalizado de tu página web

Te mostramos paso a paso cómo diseñar un tab menú personalizado a tu medida, con el objetivo de poder poner TODO el contenido que te sea necesario

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

Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€ · Consigue tu página web por tan solo 750€

Descubre nuestras últimas publicaciones