Avisos
Vaciar todo

Menú interactivo  

Página 1 / 2
 
ALBERTO
 ALBERTO
Honorable Member

Necesito realizar un trabajo en el que tengo que incorporar un menú como el que adjunto...no se como hacer esto con Divi...me imagino que se puede hacer con algún plugin...

 

url: https://compostpmt.cbl.upc.edu/ca

 

Captura de pantalla 2021 06 23 a las 11.38.38

Contenido solo visible a usuarios registrados

Citar
Respondido : 23/06/2021 4:04 pm
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Alberto, 

Puedes verificar si puedes añadir la opción con el módulo de pestañas de Divi, para ello debes ubicar el módulo pestaña y añadirlo en tu sitio web

Screenshot   2021 06 23T111753.112

Una vez la añades verás que se añaden las pestañas de forma horizontal, para modificar su visualización de al apartado  Avanzado -> CSS Personalizar -> Elemento principal y añadir el siguiente código 

display: flex;
flex-direction: row;

Screenshot   2021 06 23T112130.246

Luego ajusta el ancho de la pestaña en el mismo apartado Avanzado -> CSS Personalizar -> Pestañas por ejemplo de la siguiente forma

width: 100%
Screenshot   2021 06 23T112356.975

Guarda los cambios y verifica si con esta opción logras añadir lo que deseas, otra alternativa es usar algún plugin como por ejemplo

-> https://es.wordpress.org/plugins/responsive-horizontal-vertical-and-accordion-tabs/

Un Saludo 

 

 

ResponderCitar
Respondido : 23/06/2021 4:26 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

ALBERTO
 ALBERTO
Honorable Member

@karen

SI, estoy trabajando el módulo pestañas...he intentado hacer más ancho la columna de la izquierda tal y como puedes ver en el adjunto....sólo lo consigo hacer más ancho ampliando la separación de las letras del texto....como hacer más ancha esta columna con css?

 

Url: https://proyectocircular.humus-spain.com/ menu-intercativo/

Captura de pantalla 2021 06 24 a las 15.46.04
Captura de pantalla 2021 06 24 a las 15.45.19
ResponderCitar
Respondido : 24/06/2021 2:56 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Alberto,

En este caso mas que definir un ancho definido a las opciones de la tabla o ampliarla por medio de letter spacing podrias aplicar son paddings a los lados de la siguiente forma

.et_pb_tabs_controls li {
padding: 0px 20px;
}

Saludos!

ResponderCitar
Respondido : 24/06/2021 3:14 pm

Cursos Gratuitos WordPress

ALBERTO
 ALBERTO
Honorable Member

Vale...he estado trabajando con css...me falta lo que te adjunto...

Captura de pantalla 2021 06 24 a las 19.15.47
ResponderCitar
Respondido : 24/06/2021 6:17 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Alberto,

Prueba agregando o modificando lo siguiente:

.et_pb_tabs_0.et_pb_tabs .et_pb_tabs_controls li {
margin-bottom: 10px; /*margen separador hacia abajo entre botones*/
border-radius: 21px; /*estilos previos de borde para todos los botones*/
border-color: brown;
border-width: 2px;
}

Saludos

ResponderCitar
Respondido : 24/06/2021 6:25 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

ALBERTO
 ALBERTO
Honorable Member

@bruno-vichetti

Ok

Cada vez que hago clic sobre la pestaña...la caja del texto se contrae o estira...mira el mini-video que te adjunto...he probado a poner with: 100% en el css...no solo en pestaña, si no en pestaña activa también ion...

Captura de pantalla 2021 06 25 a las 18.28.10

 

ResponderCitar
Respondido : 25/06/2021 5:36 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Que tal Alberto,

No veo ningún video adjunto, ahora bien revisando el sitio https://proyectocircular.humus-spain.com/menu-intercativo/ pude fijarme que el ancho de la tabla esta muy angosto, esto es apropósito?

Muéstranos mas que deseas lograr y con gusto lo revisamos, aparte te comparto el siguiente material que puede ser de ayuda https://diviextended.com/how-to-create-divi-vertical-tabs/

Saludos

ResponderCitar
Respondido : 25/06/2021 5:46 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

ALBERTO
 ALBERTO
Honorable Member

@bruno-vichetti

Si como has podido ver la caja del texto se ensancha o acorta...no se a que te refieres con angosto..

ResponderCitar
Respondido : 25/06/2021 5:48 pm
ALBERTO
 ALBERTO
Honorable Member

Por otra parte, he instalado el plugin que me recomendaba Karen...pero no tiene la casilla para introducir el texto...he estado visualizando el video y es bien fácil...pero no aparece el box para poner el texto...

Captura de pantalla 2021 06 25 a las 19.06.10
ResponderCitar
Respondido : 25/06/2021 6:08 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Alberto,

Te dejo captura sobre a que me refiero

tabla

Pudiste ver el material que te compartí? seguro sera de ayuda para estilizar tu tabla

Saludos 

ResponderCitar
Respondido : 25/06/2021 6:12 pm
ALBERTO
 ALBERTO
Honorable Member

mira...lo he ensanchado para que veas que lo sigo haciendo...

 

 

ResponderCitar
Respondido : 25/06/2021 6:16 pm

Cursos Gratuitos WordPress

ALBERTO
 ALBERTO
Honorable Member

También he puesto el css que me enviaste...

ResponderCitar
Respondido : 25/06/2021 6:18 pm
Bruno
 Bruno
Soporte CMS Webempresa Moderator

Hola Alberto,

Vale he visto mejora pero veo problemas, verifica bien como estas utilizando los estilos, la version mobile esta descuadrada por completo.

Con respecto a que los botones cambian de ancho dependiendo del contenido la solución en desktop es aplicar un ancho definido en pixeles ya que en 100% el ancho es variable según el contenido

Puedes probar lo siguiente

.et_pb_tabs_0.et_pb_tabs .et_pb_tab {
width: 500px;
}

Recuerda validar los estilos, si vas a usar el material que te recien comparti debes revisar que no discrepe con estilos antes aplicados

Saludos

ResponderCitar
Respondido : 25/06/2021 6:26 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

ALBERTO
 ALBERTO
Honorable Member

nada ...sigue desplazándose...

 

ResponderCitar
Respondido : 25/06/2021 6:36 pm
Página 1 / 2