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

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]

Hacer que su sitio se destaque entre la multitud a veces es más fácil decirlo que hacerlo. Afortunadamente, puedes jugar el pequeño bricolaje agregando toques creativos de personalización que harán que tu blog se destaque de 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 cualquier cambio que apliquemos aquí solo será efectivo 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 que cambia según la página que está visitando. Como opción adicional, notará que los iconos 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 que los íconos sociales encajen.

Si aún no ha leído nuestro tutorial sobre Presentación del tema WordPress DiviTe 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 aún debería ser efectivo porque la ID genérica "divs" de Divi es la misma para todos los formatos (# main-header), que yo sepa. Si tienes problemas con otros formatos.

Cree fácilmente su sitio web con Elementor

Elementor le permite crear fácilmente cualquier diseño de sitio web con un aspecto profesional. Deja de pagar caro por lo que puedes hacer tú mismo. [Gratis]

Tenemos que asegurarnos de que los enlaces estén en la parte inferior. Los colores que elegí, que encontrarás en Coolors.co si quieres 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.

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ía tener algo similar a esto, no olvide cambiar el código hexadecimal del color de su elección:

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

¿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]

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

Iconos de redes sociales (opcional)

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

Así que primero debes asegurarte de haber configurado tus enlaces sociales. Vaya a " Opciones de Divi> Tema general Y agregue sus URL a sus páginas de redes sociales.

Luego, vaya a su configuración en la barra de submenú 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 icono pueda aparecer.

Ir a " Encabezado y navegación> Elementos del encabezado Y marque la casilla " Mostrar íconos 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 parecido a esto:

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

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. [Recomendado]

CSS general

El siguiente código estará en su " Opción de tema> cuadro CSS O en el archivo de estilo del tema hijo.

.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; }

Puede que se pregunte por qué esto no es así en el cuadro CSS de la página. La razón es que este fragmento 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 cambia el color de fondo 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 3
  1. Hola,

    Gracias por todos tus tutoriales.
    ¿Sabes si podemos poner el submenú divi (segundo nivel debajo del menú desplegable) en ancho de relleno? que ocupa todo el ancho de la página

  2. 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.

Volver arriba
22 acciones
cuota13
Tweet2
Siguiente 7