Tutorial Divi: Cómo cambiar el estilo de los menús de tu sitio web
En este video tutorial te vamos a mostrar cómo personalizar, y cambiar el estilo de los menús de tu sitio web, de una manera más elegante…
…OJO: por favor ten presente que este video tutorial está enfocado en el tema Divi, por lo tanto, si utilizas el código de los estilos CSS en un tema/theme diferente, la más seguro es que no te funcionará de la misma forma como te lo mostramos en el video.
Si deseas obtener más información sobre el “Theme Divi”, Clic Aquí para más detalles >>
Por otra parte, la herramienta para obtener los códigos de los colores se llama “ColorPick Eyedropper”.
Aquí te proporcionamos un video tutorial sobre esta herramienta, para que sepas donde obtenerla, y aprendas cómo seleccionar y obtener los códigos de los colores.
–
A continuación, te proporcionamos el código de los “Estilos CSS” que te mostramos en el video.
[php light=”true”] .et_header_style_left #et-top-navigation nav > ul > li > a,
.et_header_style_left .et-fixed-header #et-top-navigation nav > ul > li > a {
padding-bottom: 15px;
}
#top-menu li {
padding-right: 5px;
}
#et-top-navigation {
padding: 20px 0 !important;
}
#top-menu li a {
background: #C1B2AB; /*** CHANGES THE BACKGROUND COLOR ***/
padding: 15px 20px;
border-radius: 3px;
}
#top-menu li a:hover,
#top-menu li li a:hover {
color: #fff !important;
}
#top-menu li a:hover {
background: #559CAD !important; /*** CHANGES THE BACKGROUND COLOR ON HOVER ***/
}
#top-menu li.current-menu-item > a {
background: #edc77b; /*** CHANGES THE BACKGROUND COLOR OF THE CURRENT PAGE LINK ***/
}
#top-menu .menu-item-has-children > a:first-child:after {
content: none;
} [/php]
–
¿Deseas ver los otros códigos de estilos CSS?
Si tu respuesta es Sí, entonces Clic Aquí para ir directamente al artículo de Elegant Themes.
El sitio web de Elegant Themes está en inglés, pero te puedes ayudar a traducirlo con el traductor de Google.
–
Si te pareció que esta información es útil, por favor compártela y déjanos tus comentarios. ¡Gracias!
También te puede interesar
Deja una respuesta
Política de Comentarios de Media Digital Fácil
Media Digital Fácil te informa que los datos de carácter personal que nos proporciones rellenando el presente formulario serán tratados por Media Digital Facil (Media Digital Fácil ) como responsable de esta web.La finalidad de la recogida y tratamiento de los datos personales que te solicitamos es para gestionar los comentarios que realizas en este blog.
Legitimación: Consentimiento del interesado.
- Como usuario e interesado te informo que los datos que me facilitas estarán ubicados en los servidores de Siteground (proveedor de hosting de Media Digital Fácil ) dentro de la UE. Ver política de privacidad de Siteground. (https://www.siteground.es/privacidad.htm).
Podrás ejercer tus derechos de acceso, rectificación, limitación y suprimir los datos en Nuestro Sitio de Soporte así como el derecho a presentar una reclamación ante una autoridad de control.
- Por favor lea nuestra Política de Privacidad antes de dejar tu comentario.
7 Comentarios
Buenos días Pedro,
Ma acabo de suscribir a tu canal y me gusta mucho tus tutoriales y también tu web.
Mi pregunta es acerca del menú que tienes en tu blog y cómo hacerlo.
Lo he intentado pero no lo consigo.
Parece que tu tienes un menu top secundario que luego también queda muy bien en dispositivos móviles,
No sé si influye el hecho de que tienes el encabezado con el logo a la izda y yo lo tengo centrado.
Espero me puedas ayudar con esa cuestión para la we de mi asociación y te doy MIL GRACIAS y un saludo
Hola Pedro y resto de compañeros.lo primero gracias por tan buenos tutoriales y perfectamente explicados. Yo tengo una web con Divi y Quería saber cómo conseguir un menú parecido al tuyo del blog como menú principal, ya que de secundario e introducido una serie de datos que quiero se vean siempre.
El caso es que mi cabecera está en centrado y veo que la tienes con logo a la izda para poder hacer ese menu.Alguna sugerencia de algún tutorial de cómo cambiarlo y que quede igual en dispositivos móviles.
Mil gracias y un saludo
Antes que nada Jesús, aclararte que este blog no esta usando Divi. Dicho esto, tu puedes configurar como quieres que se comporte tu menú desde el “Personalizador de temas” de Divi, concretamente en la sección “Cabecera y Navegación”.
Adicionalmente, dentro de mi Blog al Instante tenemos un corros llamado “Como crear un sitio web corporativo mixto” donde mostramos como crear un menú personalizado.
Un saludo
Pedro
Hola que buena explicación al equipo de Mi blog al instante siempre están ahí cuando uno los necesita.
Quisiera hacer una pregunta yo diseño páginas pero ahora las estoy haciendo por word press en virtud de haber comprado el curso mi blog al instante el cual me ha servido mucho.
Mi pregunta si lo que veo que ustedes hacen con el color de las letras también se le pueden dar un color al fondo de la página en Word Press ya que yo tengo una página de un cliente y esta como quien dice muy clara en color, pues quisiera cambiarla o darle un color más oscuro. La página es bateasindustrialesdeltachira. com.ve
Sabre agradecer por su respuesta. Ya sea mi amigo Pedro o el otro amigo que hablo en el ultimo vídeo. Que Dios les siga Bendiciendo.
Gracias a ti Freddy por tu comentario. En cuanto a tu pregunta, ya te hemos enviado respuesta a través del soporte.
Un saludo
Pedro
Todo esta muy bueno, pero como haga para crear mi pagina viví en Venezuela y no nos da $ para comprar nada
Ysolina, crear una pagina web es realmente económico, y me imagino que en Venezuela podrás compran un nombre de dominio y un servicio de Hosting en tu moneda local, sin necesidad de usar Dolares.
Un saludo
Pedro