Blog

Cambiar el color de los enlaces del menú de Divi

Blog

Cambiar el color de los enlaces del menú de Divi
Change color link hover in Divi
Change color link hover in Divi

Cambiar el color de los enlaces del menú de Divi

Anto Fernandez

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.

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 desde el panel de administración de Divi

CSS para cambiar el color del enlace 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.

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

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

On our shop

En nuestra tienda

Suscribe

The best tricks and tutorials about Divi in your inbox

Apúntate a nuestra lista

Los mejores trucos y tutoriales para Divi en tu email

También te podría gustar:

You may also like

Sección altura completo en Divi

Sección altura completo en Divi

¿Cómo creo una sección que ocupe el alto total de mi pantalla (Full Screen) en Divi? En este post te vamos enseñar cómo crear secciones que ocupen 100% de la altura de tu pantalla. Ideal para crear webs muy visuales, landing con call to action potentes y páginas webs...

Fuente responsive en Divi

Fuente responsive en Divi

¿Fuentes responsive en Divi? ¿Es posible? YES!! Además con cualquier tipografía. Hoy te queremos hablar de fuente responsive en Divi. Vamos a ver cómo podemos adaptarla al tamaño de nuestra pantalla. Tanto si el usuario ve la web desde diferentes dispositivos o reduce...

Texto sobre imagen en Divi

Texto sobre imagen en Divi

Hoy queremos compartir contigo un pequeño truco para mejorar la legibilidad de las imágenes que tienen un texto sobre cualquier imagen en Divi. Este tutorial está en nuestra categoría Divi Basics y está escrito para usuarios que están comenzando con Divi. Aunque te...

Cambiar el orden de las columnas de Divi en móvil

Cambiar el orden de las columnas de Divi en móvil

Divi es un constructor genial con un montón de opciones disponibles que nos va a permitir trabajar en cualquier proyecto web. Pero en ocasiones es necesario utilizar algo de CSS si queremos conseguir el mejor resultado. En el ejemplo de este post vamos a ver como...

0 comentarios

Enviar un comentario

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

Select currency
Euro
$ Dólar de los Estados Unidos (US)

¡Consigue 5€ gratis!

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

 Registrarme