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:
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.
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.
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.
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.
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:
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.
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.
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ía tener algo parecido a lo siguiente:
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.
.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
- 5 sitios web para su uso restaurante temático Divi
- Cómo agregar texto en un producto Divi WooCommerce
- Cómo cambiar el color del menú entre páginas Divi
- Cómo personalizar las cuadrículas de un blog con Divi
- Cómo utilizar la función de editor Divi en WordPress
- Cómo crear un control deslizante Divi a pantalla completa
- Cómo cambiar el color de los menús entre páginas Divi
- Características que probablemente no conozcas sobre Divi
- Cómo usar Divi Builder en WordPress
- Cómo usar el módulo de desplazamiento de video Divi
- Cómo usar el módulo Divi Builder Flip
- Cómo agregar un módulo testimonial en Divi Builder
- Cómo usar el módulo de texto Divi
- Cómo crear un control deslizante en Divi
- Cómo editar un rol de usuario Divi
- Cómo usar el módulo de Divi Social Media
- Cómo usar el módulo de tienda en el tema WordPress Divi
- Cómo usar el módulo de la barra lateral Divi
- Cómo usar el Módulo Divi Price Table
- Cómo usar el módulo de título de las publicaciones de Divi
- Cómo agregar un módulo de video de Divi
- Cómo usar el módulo de navegación del artículo
- Cómo usar el módulo de búsqueda Divi
- Cómo usar el módulo Divi wallet
- Cómo usar el módulo de persona en Divi Builder
- Cómo usar el módulo de billetera con filtro Divi
- Cómo usar el módulo deslizante de ancho completo
- Cómo usar el Módulo de imagen Divi Builder
- Cómo utilizar el módulo de navegación de ancho completo de Divi Builder
- Cómo usar el módulo de la galería de imágenes
- Cómo utilizar el módulo de tarjeta de ancho completo de Divi Builder
- Cómo utilizar el módulo de cartera de ancho completo de Divi
- Cómo usar el módulo de encabezado de ancho completo Divi
- Cómo usar el módulo Divi Counter
- Cómo usar el control deslizante de artículos en Divi Builder
- Cómo usar el módulo Divi Email Optin
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
Hola,
¿Cómo se cambia 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 presenta mis diferentes secciones) a través de la interfaz de personalización 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,
Hola Germain,
¿Quiere que sea blanco en todas las páginas o solo en algunas?