Saltar al contenido principal

Cómo cambiar el color de los menús entre las páginas de Divi

Divi: el tema de WordPress más fácil de usar

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Hacer que su sitio se destaque entre la multitud es a veces más fácil decirlo que hacerlo. Afortunadamente, puede dedicarse a jugar al pequeño bricolaje agregando toques de personalización creativos que harán que su blog destaque entre los demás.

En este tutorial, le mostraré cómo usar el generador Divi para personalizar su blog, especialmente el área CSS.

Esta es la región de la que estoy hablando:

Lo que esto significa es que los cambios que apliquemos aquí solo serán efectivos en la página que estamos editando. ¡Es una característica increíblemente interesante y útil!

Aquí está el resultado final que tendremos al final de este tutorial. El color de fondo del menú de navegación cambia según la página que está visitando. Como una opción adicional, notará que los íconos también cambian de color.

Primero mostraré cómo aplicar el color de fondo en el menú. Luego, por separado, te mostraré cómo hacer coincidir los íconos sociales.

Si no ha leído nuestro tutorial sobre presentación del tema WordPress Divi, Te invito a hacerlo

Vamos a empezar!

Aplicar colores a los menús

Primero, uso el formato de encabezado predeterminado. Si usa otro formato, este tutorial debería seguir siendo efectivo porque el ID Divi genérico "divs" es el mismo para todos los formatos (# main-header), hasta donde yo sé. Si tiene problemas con otros formatos.

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 600.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Tenemos que asegurarnos de que los enlaces estén en la parte inferior. Los colores que elegí, que encontrará en Coolors.co si quiere usarlos, están en el lado más oscuro, así que tengo que hacer que el enlace de texto tenga un color claro. Opté por el color blanco.

Yo uso rgba (255,255,255,0.6) que será el color del enlace y blanco oscuro como el color del enlace activo (para el efecto visual deseado)

Luego vaya a la página en la que desea aplicar el primer cambio (debería ver los enlaces del menú en su lugar). Haga clic en el icono en "Líneas 3" y aparecerá un cuadro de opciones.

Ahora, agregue el siguiente CSS en este cuadro:

# Mano-header {background: #474f61; }

Deberías tener algo similar a esto, no olvides cambiar el código hexadecimal del color que elijas:

Haga clic en " Guardar y actualizar Y esto se aplicará al menú principal, todo en una línea de código.

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Ahora solo necesita agregar el mismo código para todas sus páginas y cambiar el código hexadecimal cada vez.

Iconos de red social (opcional)

Para esta parte, vamos a modificar el código que ya hemos hecho, luego agregamos un código en el nivel de CSS del sitio, y explicaré por qué se debe agregar algún CSS en las páginas individuales y por qué algunos no deberían 'estar.

Entonces, primero debes asegurarte de haber configurado tus enlaces sociales. Vaya a " Opciones de Divi> Tema general Y agrega tus URL a tus páginas de redes sociales.

Luego vaya a su configuración en la barra de menú secundario y configure los colores de fondo y el texto. Elijo "blanco" como el color del texto porque voy a agregar un fondo de color redondo a cada icono social para que coincida con el nuevo color del menú, de modo que el ícono pueda aparecer.

Ir a " Encabezado y navegación> Elementos del encabezado Y marque la casilla Mostrar iconos sociales ».

¿Recuerdas cómo procedimos a agregar CSS en cada página? Volveremos y editaremos lo que escribimos antes. Reemplace lo que tiene allí con el siguiente CSS, o si reconoce lo que es diferente, simplemente puede agregar el código adicional.

# Mano-cabecera, # .y top-header-sociales-icono {background: #474f61; }

Este código permitirá que nuestro sitio no solo cambie el color de fondo del menú en esta página, sino también el fondo de nuestros íconos sociales. Acabamos de agregar otro elemento a la mezcla. Deberías tener algo que se parece a esto:

Es posible que deba verificar que los colores hexadecimales sean correctos en cada página.

General CSS

El siguiente código estará en tu " Opción de tema> caja de CSS O en el archivo de estilo del tema secundario.

.y li {margin-left-iconos # Top-header-sociales: 5px; } # .y top-header-sociales-icono {padding: 4px; margin-bottom: 8px; anchura: 30px; altura: 30px; frontera de radio: 50%; line-height: 24px; }

Es posible que se pregunte por qué esto no está yendo tan bien en el cuadro CSS de la página. La razón es que esta pieza de código en particular afecta a todos los elementos seleccionados, por lo que es ineficiente colocar exactamente el mismo código en varios lugares. Solo el color de fondo cambia por página, pero este código no cambia por página. Es una buena práctica evitar agregar peso a su sitio.

Eso es todo por este tutorial, espero que te permita personalizar los menús en tu blog de WordPress.

Otros tutoriales de Divi

Este artículo contiene los comentarios 2
  1. Hola,

    ¿Cómo cambias el color del texto en el encabezado principal? Al tener un fondo transparente (en mi encabezado principal), el color de fuente que elegí (en mi encabezado principal, que muestra mis diferentes temas) a través de la interfaz de personalización de divi es negro. Sin embargo, me gustaría que fuera blanco en algunas páginas porque la foto de abajo es demasiado oscura.

    Comentarios faire?

    Merci par avance,

Dejar un comentario

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

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Temas geniales de WordPress que encontré en
¡Y hay más temas y modelos 50 000 para elegir!

Volver arriba
35 acciones
cuota26
Tweet2
Siguiente 7
WhatsApp