Hacer que su sitio se destaque entre la multitud a veces es más fácil de decir que de hacer. Afortunadamente, puedes involucrarte en el bricolaje agregando toques creativos de personalización que asegurarán que tu blog se destaca de los demás.

En este tutorial, te mostraré cómo usar el constructor Divi para personalizar tu blog, y en particular el área CSS.

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

Sección de creación de CSS personalizada de WordPress

Lo que esto significa es que cualquier cambio que hagamos 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.

Icono que cambia de color divi

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 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, utilizo el formato de encabezado predeterminado. Si está utilizando otro formato, este tutorial aún debería ser efectivo porque el ID genérico de los "divs" en Divi es el mismo para todos los formatos (# main-header), hasta donde yo sé. Si tiene problemas con otros formatos.

Formato de encabezado Divi

Necesitamos asegurarnos de que los enlaces aparezcan 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 sea de color claro. Opté por el color blanco.

Personalización del menú divi

Estoy usando rgba (255,255,255,0.6) que será el color del enlace y el 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 de "3 líneas" y aparecerá un cuadro de opciones.

Constructor de divi de wordpress

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 al color que desee:

Configuración divi de personalización de color

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

Ahora solo necesita agregar este 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 Divi> Tema general Y agregue sus URL a sus páginas de redes sociales.

Icono de divi social

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

Personalización del menú secundario

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

Elemento de encabezado divi wordpress

¿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ía tener algo parecido a lo siguiente:

Editor de tema divi de código CSS personalizado

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

CSS general

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

Opciones de tema de sección personalizada divi css

.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 le permita personalizar los menús en su blog de WordPress.

[vc_row center_row=”sí”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR TEMA DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/filiales/idevfiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARGAR EL TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]

Otros tutoriales de Divi