Hacer que su sitio se destaque entre la multitud a veces es más fácil decirlo que hacerlo. Afortunadamente, puede tomar el más mínimo detalle creativo para ayudarlo a llevar su sitio a un territorio más exclusivo. En el tutorial de hoy, usaré una de mis características favoritas de Divi : el cuadro de configuración de Divi Builder y, en particular, el cuadro de CSS personalizado dentro de este.
Esta es la zona a la que me refiero:
Lo que esto hace es limitar cualquier CSS que coloques en este pequeño cuadro para que solo se aplique a la página que estás editando. ¡Esa es una característica increíblemente genial y útil! He usado este cuadro CSS en particular de tantas maneras que te sorprendería la cantidad de problemas que resolverá.
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 en la que se encuentre. Como una opción adicional, incluyo cómo hacer que los íconos sociales de tu encabezado también cambien de color.
Primero mostraré cómo lograr el color de fondo para el menú. Luego, por separado, mostraré los pasos para que los íconos sociales coincidan también.
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Primero estoy usando el formato de encabezado predeterminado . Si usa otro formato, este tutorial aún debería funcionar porque la ID de div genérica para esta área en Divi es la misma para todos los formatos (#main-header), hasta donde yo sé. Si tiene problemas con otros formatos, puedo ayudarlo lo mejor que pueda si lo publica en los comentarios.
Luego me aseguraré de que mis enlaces se muestren en segundo plano. Los colores que he elegido, que puede encontrar aquí en Coolors.co si desea usarlos, están en el lado más oscuro, por lo que necesito que el texto de mi enlace sea de un color claro. Yo me quedo con el blanco.
- Estoy usando rgba (255,255,255,0.6) como mi color de enlace y blanco sólido como mi color de enlace activo (simplemente me gusta el efecto visual que da)
A continuación, vaya a la página que desea cambiar primero (debe tener los enlaces del menú configurados). Haga clic en el icono de «3 líneas» y aparecerá un cuadro de opciones
Ahora agregue el siguiente CSS en ese cuadro
|
01
02
03
|
#main-header { background: #474f61;} |
Deberías tener algo similar a esto, no olvides cambiar el código hexadecimal al color que elijas
Haga clic en guardar y actualizar, ¡y eso es todo para la parte del menú principal! Es literalmente una línea de código, ¿qué tan bueno es eso?
Ahora solo necesita agregar este mismo código a todas sus páginas y cambiar el código hexadecimal cada vez.
Para esta parte, vamos a editar el código que ya hemos hecho, además de agregar algo de CSS en todo el sitio, y explicaré por qué algunos CSS deben ir en las páginas individuales y por qué algunos no deberían estar a continuación.
Así que primero asegúrese de haber configurado sus enlaces sociales. Vaya a Opciones de tema Divi> General y agregue sus URL a sus páginas de redes sociales
A continuación, vaya a la configuración de la barra de menú secundaria y establezca los colores de fondo y de texto . Estoy eligiendo blanco como el color del texto porque voy a agregar un fondo de color redondo a cada ícono social para que coincida con mi nuevo color de menú, por lo que el ícono debe aparecer.
Vaya a Encabezado y navegación > Elementos del encabezado y marque la casilla Mostrar iconos sociales
Ahora, ¿recuerdas cómo entramos en cada página y abrimos el cuadro que nos permitía agregar CSS personalizado? Vamos a volver allí y editar lo que escribimos antes. Reemplace lo que tiene allí con el siguiente CSS, O si reconoce lo que es diferente, siéntase libre de simplemente agregar el código del elemento adicional .
|
01
02
03
04
|
#main-header,#top-header .et-social-icon a { background: #474f61;} |
Lo que esto hace es decirle a nuestro sitio que no solo cambie el color de fondo del menú en esta página, sino también el fondo de nuestros íconos sociales. Simplemente estamos agregando otro elemento a la mezcla. Deberías tener algo que se parezca a esto.
Es posible que deba verificar dos veces que los colores hexadecimales sean correctos en cada página.
Por último, algo de CSS en todo el sitio
El siguiente código irá en sus Opciones de tema Divi> Cuadro CSS personalizado general O en su hoja de estilo secundaria .
|
01
02
03
04
05
06
07
08
09
10
11
|
#top-header .et-social-icons li { margin-left: 5px;}#top-header .et-social-icon a { padding: 4px; margin-bottom: 8px; width: 30px; height: 30px; border-radius: 50%; line-height: 24px;} |
Quizás se pregunte por qué esto no se incluyó en el cuadro CSS de la página. La razón es que este trozo particular de código está afectando cada instancia de estos elementos objetivo, por lo que es ineficiente colocar exactamente el mismo código duplicado en varios lugares. El color de fondo, que cambió por página, pero este código no. Es simplemente una mejor práctica para ayudar a mantener el tamaño de su archivo al mínimo.
¡Y eso es!
Después de seguir ambos conjuntos de pasos, terminará con un sitio donde todos los elementos del encabezado cambian de color a medida que avanzamos de una página a otra. Detalle de diseño bastante ingenioso si me preguntas
¡Asegúrese de suscribirse para recibir notificaciones sobre más artículos fáciles de seguir sobre cómo personalizar partes de su sitio Divi!