Blog

Cambiar el color de los enlaces del menú de Divi

Blog

Cambiar el color de los enlaces del menú de Divi

Cambiar el color de los enlaces del menú de Divi

Todos sabemos que Divi es un tema de WordPress muy potente y versátil. Con un montón de opciones de personalización. Pero en muchas ocasiones es necesario usar CSS para ciertos detalles importantes. Esto ocurre por ejemplo con los enlaces del menú. Podemos cambiar el color del texto, tamaño de letras, separación de los enlaces, etc… Pero por increíble que parezca, Divi no permite cambiar el color de un enlace cuando nos ponemos encima de éste. Hoy te enseñamos como cambiar el color de los enlaces del menú de Divi, ¡sigue leyendo!

Es más, Divi aplica siempre una opacidad del 70% y… ¡Eso huele a plantilla! Personalmente es un detalle que no me gusta y que en Destaca Imagen corregimos en todas las webs y temas que creamos.

Te dejamos algunos pequeños códigos CSS que podrás aplicar en tus proyectos.

Cambiar el color de los enlaces con las opciones de Divi

Cambiar el color de los enlaces del menú de Divi desde panel de adminstracion

CSS para Cambiar el color de los enlaces del menú de Divi cuando nos ponemos encima:

Aquí tienes paso a paso como editar el color de un link del menu de Divi. ( Hover )

  1. Entra en tu WordPress y ve a “Divi” / “Divi personlizador de tema”
  2. Navega a “CSS adicional” y pega el código que encontrarás debajo.
  3. Una vez lo hayas pegado haz click en publicar para guardar los cambios
Cambiar en color de un enlace cuando nos ponemos encima
#top-menu-nav>ul>li>a:hover{
	color:red;
	opacity:1;
}

El resultado:

Enlace cambiado de color con CSS en Divi - WordPress

Cambiar sólo el color de un enlace

Es posible que nos interese cambiar solamente el color de un enlace para destacar una sección de nuestra web. Para ello lo primero que vamos a hacer será activar una opción adicional a nuestro menú. Sigue estos pasos:

  1. Ve a “Apariencia” / “Menús” y selecciona el menú que quieras editar.
  2. Haz click sobre “Opciones de pantalla” (Encontrarás esta opción en la esquina superior izquierda de la pantalla) y activa “CSS Classes”.
Activar las opciones de clases en un menu de WordPress

3. Añade una clase a tu menú y haz click en guardar.

Añadir una clase a un enlace de Divi

4. Ve a “Divi” / “Divi personalizador de temas” / “CSS adicional” y añade este código. Es importante que en el código incluyas la misma clase que hemos añadido en el paso anterior:

#top-menu .my-shop a{
	color:purple 
}

/* Editar el color cuando me pongo encima*/
#top-menu .my-shop a:hover{
	color:brown 
}


Cambiar el color de fondo para un enlace de los submenús de Divi

Por defecto, Divi aplica un fondo gris a los enlaces de los submenús. Podemos cambiarlo o eliminarlo con CSS.

Color gris por defecto de un submenu de Divi
#top-menu li li a:hover{
	background:yellow; /* puedes escribir transparent para hacerlo transparente */

}

El resultado:

Como cambiar el color de fonde de un submenu

En conclusión, Divi es genial y nos permite hacer casi de todo, pero conocer CSS nos hace más libres y nos permitirá crear páginas web mejores y más personalizadas. Descubre todos nuestros plugins y plantillas para Divi

¿Te gusta este contenido? Suscríbete a nuestro newsletter y sé el primero en recibir los nuevos contenidos.

Cambiar el color de los enlaces del menú de Divi | Destaca expertos en Divi Themes

About Destaca Imagen

CHEMA & ANTO

We are brothers. As a designer and developer, we have decided have to join forces  to create plugins and themes for WordPress.

 

¡Apuntate a nuestra lista!

Los mejores trucos y tutoriales para Divi y WordPress en tu bandeja de entrada

Join our list!

The best tricks and tutorials about Divi in your inbox

También te podría gustar:

You may also like

Cómo añadir un enlace de YouTube en el footer de Divi (paso a paso)

Cómo añadir un enlace de YouTube en el footer de Divi (paso a paso)

¿Tienes un canal de YouTube y quieres darle más visibilidad desde tu web? Si usas el tema Divi, puedes añadir fácilmente un enlace a tu canal o a un vídeo específico en el pie de página (footer). En esta guía te mostramos paso a paso cómo añadir un enlace de YouTube...

Mejores plantillas web para fotógrafos en 2025

Mejores plantillas web para fotógrafos en 2025

Hoy en día, tener una web profesional no es opcional para los fotógrafos: es una necesidad. En un entorno digital donde la imagen lo es todo, tu sitio web es el primer contacto que muchos clientes tendrán contigo. Por eso, la forma en la que presentas tu portafolio...

Cómo cambiar los créditos del footer en Divi

Cómo cambiar los créditos del footer en Divi

Cuando diseñamos una web con Divi, queremos que cada detalle refleje nuestra marca, incluso el pie de página. Sin embargo, por defecto, Divi incluye unos créditos como “Diseñado por Elegant Themes | Powered by WordPress” que, aunque correctos, no siempre encajan con...

Cómo Crear y Personalizar una Login Page con Divi

Cómo Crear y Personalizar una Login Page con Divi

Crear una login page con Divi personalizada es una de las formas más eficaces de reforzar el branding de un sitio web WordPress. Si utilizas el tema Divi y estás de suerte: no solo puedes diseñarla visualmente con el constructor, sino que también tienes a tu...

Plantillas blog Divi, descubre nuestro pack de plantillas

Plantillas blog Divi, descubre nuestro pack de plantillas

Si estás buscando la mejor manera de diseñar un blog profesional, optimizado y atractivo en WordPress, el pack de plantillas blog Divi es la solución perfecta. Este pack ha sido desarrollado para aprovechar todas las ventajas del constructor visual de Elegant Themes,...

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¡Consigue 5€ gratis!

Regístrate y obtén un cupón descuento.

 Registrarme
Select currency
Euro
Resumen de privacidad

Esta web utiliza cookies para que podamos ofrecerte la mejor experiencia de usuario posible. La información de las cookies se almacena en tu navegador y realiza funciones tales como reconocerte cuando vuelves a nuestra web o ayudar a nuestro equipo a comprender qué secciones de la web encuentras más interesantes y útiles.

Más información sobre nuestra política de cookies