Wordpress
Cómo resaltar un elemento de menú con CSS
Cómo ocultar el título de las entradas y las páginas en el Tema Astra
Cómo eliminar el precio de los productos WooCommerce de los resultados de google
Como activar la pantalla completa del editor de Bloques de WordPress
Porque no es una buena idea realizar demasiadas personalizaciones en los sitios de sus clientes
Como hacer que los campos de pago obligatorios u opcionales con WooCommerce
Cómo eliminar JavaScript para responder a comentarios en WordPress si no lo necesita
Desea vincular automaticamente la descripcion a las diferentes pestañas
A veces querrás resaltar un elemento particular de un menú en tu sitio web , ya sea mostrándolo con un color de fondo diferente, otro color de texto, etc.
Lo haremos aplicando algo de CSS a ese elemento de menú , y esta vez lo haré con el tema Astra activo, ya que es el tema de WordPress más descargado, pero la técnica es válida para cualquier tema de WordPress.
Mostrar Propiedades De Menú Avanzadas
Antes de empezar lo primero es asegurarnos que las propiedades avanzadas se mostrarán en los menús , porque por defecto no están todas activas en WordPress.
Para ello iremos al personalizador ( Apariencia > Personalizar ) y, en el apartado de menú, pulsamos sobre el icono de engranaje de la parte superior derecha para visualizarlos.
Una vez que tengamos las propiedades avanzadas que podemos mostrar activaremos, al menos, las clases CSS, que es lo que vamos a utilizar.
Agrega Una Clase Personalizada Al Menú Que Queremos Resaltar
Una vez activada la propiedad avanzada de las clases CSS en los menús podemos editar nuestro menú y, al desplegar el elemento que queremos resaltar, veremos que existe un cuadro llamado “ Clases CSS ”.
Una vez identificados agregaremos una nueva clase , a la que llamaremos menú resaltado , y publicaremos los cambios.
Crea Estilos De Clase CSS Personalizados
Tenemos que crear esta clase que hemos definido, aplicando estilos a nuestro gusto.
Para ello, sin salir del personalizador, nos dirigimos al apartado de “ CSS adicional ”.
Allí podemos aplicar estilo a nuestro menú resaltado. Un ejemplo sería este:
.highlighted-menu
{
background: #d3d3d3;
border-radius: 35px;
padding: 0px 20px;
line-height: 50px;
}
Lenguaje de código: CSS ( css )
Eso se aplicaría inmediatamente en la vista previa como vimos anteriormente .
Otro ejemplo sería así:
.highlighted-menu {
color: #ffffff;
background: transparent;
border-color: #1172c4;
border-style: solid;
border-width: 2px;
border-radius: 50px;
padding: 0px 10px;
transition: all 0.2s linear;
line-height:45px;
}
.destacar-menu a {
color:#1172c4
}
.destacar-menu:hover {
color: #ffffff;
background: #1172c4;
border-color: #1172c4;
}
li.destacar-menu:hover a {
color:#ffffff;
}º
.destacar-menu:active {
border-radius: 22px;
}
Lenguaje de código: CSS ( css )
Aquí hemos aplicado varios estilos diferentes. Al mover el cursor sobre el menú, cuando está activo, inactivo y en lugar de un color de fondo, hemos agregado un trazo.
Gracias por visitar este sitio, espero que te haya gustado y vuelvas proximamente, compartela en las redes sociales, gracias
Fecha actualización el 2021-02-16. Fecha publicación el 2021-02-16. Categoría: wordpress Autor: Oscar olg Mapa del sitio Fuente: wphelp