Cómo diseñar los menús de navegación de WordPress

¿Desea diseñar sus menús de navegación de WordPress para cambiar sus colores o apariencia? Si bien su tema de WordPress maneja la apariencia de sus menús de navegación, puede personalizarlo fácilmente usando CSS para cumplir con sus requisitos. En este artículo, le mostraremos cómo diseñar los menús de navegación de WordPress en su sitio.


Diseño de menús de navegación en WordPress

Mostraremos dos métodos diferentes. El primer método es para principiantes porque usa un complemento y no requiere ningún conocimiento de código. El segundo método es para usuarios intermedios de bricolaje que prefieren usar código CSS en lugar de un complemento.

Método 1: diseñar menús de navegación de WordPress usando un complemento

Su tema de WordPress usa CSS para diseñar menús de navegación. Muchos principiantes no se sienten cómodos editando archivos de temas o escribiendo código CSS por su cuenta..

Es entonces cuando un complemento de estilo de WordPress es útil. Le ahorra editar archivos de temas o escribir cualquier código.

Lo primero que debes hacer es instalar y activar el complemento CSS Hero. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un complemento de WordPress.

CSS Hero es un complemento premium de WordPress que te permite diseñar tu propio tema de WordPress sin escribir una sola línea de código (no se requiere HTML ni CSS). Vea nuestra revisión de CSS Hero para obtener más información..

Los usuarios de WPBeginner pueden usar este cupón CSS Hero para obtener un 34% de descuento en su compra.

Tras la activación, se le redirigirá para obtener su clave de licencia de CSS Hero. Simplemente siga las instrucciones en pantalla y será redirigido a su sitio en unos pocos clics..

A continuación, debe hacer clic en el botón CSS Hero en la barra de herramientas de administración de WordPress.

Lanzar CSS Hero

CSS Hero ofrece un editor WYSIWYG (lo que ves es lo que obtienes). Al hacer clic en el botón, accederá a su sitio web con una barra de herramientas flotante CSS Hero visible en la pantalla.

Barra de herramientas de CSS Hero

Debes hacer clic en el icono azul en la parte superior para comenzar a editar.

Después de hacer clic en el icono azul, lleve el mouse a su menú de navegación y CSS Hero lo resaltará mostrando los bordes a su alrededor. Cuando hace clic en el menú de navegación resaltado, le mostrará los elementos que puede editar.

Apunte y haga clic para personalizar el menú

En la captura de pantalla anterior, nos muestra el contenedor del menú de navegación superior. Supongamos que queremos cambiar el color de fondo de nuestro menú de navegación. En ese caso, seleccionaremos la navegación superior que afecta a todo nuestro menú.

CSS Hero ahora le mostrará diferentes propiedades que puede editar como texto, fondo, borde, márgenes, relleno, etc..

Propiedades CSS

Puede hacer clic en cualquier propiedad que desee cambiar. CSS Hero te mostrará una interfaz simple donde puedes hacer tus cambios.

Cambiar la apariencia de un elemento

En la captura de pantalla anterior, seleccionamos el fondo y nos mostró una interfaz agradable para seleccionar el color de fondo, el degradado, la imagen y más.

A medida que realice cambios, podrá verlos en vivo en la vista previa del tema.

Vista previa en vivo de sus cambios de CSS

Una vez que esté satisfecho con los cambios, haga clic en el botón Guardar en la barra de herramientas de CSS Hero para guardar los cambios..

Lo mejor de usar este método es que puede deshacer fácilmente cualquier cambio que realice. CSS Hero mantiene un historial completo de todos sus cambios, y puede ir y venir entre esos cambios.

Método 2: diseñar manualmente los menús de navegación de WordPress

Este método requiere que agregue manualmente CSS personalizado y está destinado a usuarios intermedios.

Los menús de navegación de WordPress se muestran en una lista desordenada (lista con viñetas).

Por lo general, si usa la etiqueta de menú predeterminada de WordPress, mostrará una lista sin clases de CSS asociadas..

<?php wp_nav_menu (); ?>

Su lista desordenada tendría el nombre de clase “menú” con cada elemento de la lista que tiene su propia clase CSS.

Esto podría funcionar si solo tiene una ubicación de menú. Sin embargo, la mayoría de los temas tienen múltiples ubicaciones donde puede mostrar menús de navegación.

Usar solo la clase CSS predeterminada puede causar conflictos con los menús en otras ubicaciones.

Es por eso que necesita definir la clase de CSS y la ubicación del menú también. Lo más probable es que su tema de WordPress ya lo esté haciendo al agregar los menús de navegación usando un código como este:

<?php
wp_nav_menu (array (
‘theme_location’ => ‘primario’,
‘menu_class’ => ‘Menú Primaria’,
));
?>

Este código le dice a WordPress que aquí es donde el tema muestra el menú principal. También agrega un menú primario de clase CSS al menú de navegación.

Ahora puede diseñar su menú de navegación usando esta estructura CSS.

// clase contenedor
#header .primary-menu {}

// clase de contenedor primera lista desordenada
#header .primary-menu ul {}

// lista desordenada dentro de una lista desordenada
#header .primary-menu ul ul {}

// cada elemento de navegación
#header .primary-menu li {}

// cada elemento de navegación ancla
#header .primary-menu li a {}

// lista desordenada si hay elementos desplegables
#header .primary-menu li ul {}

// cada elemento de navegación desplegable
#header .primary-menu li li {}

// cada ancla desplegable del elemento de navegación
#header .primary-menu li li a {}

Deberá reemplazar #header con la clase CSS del contenedor utilizada por su menú de navegación.

Esta estructura lo ayudará a cambiar completamente la apariencia de su menú de navegación.

Sin embargo, hay otras clases CSS generadas por WordPress que se agregan automáticamente a cada menú y elemento de menú. Estas clases le permiten personalizar aún más su menú de navegación.

// Clase para la página actual
.current_page_item {}

// Clase para la categoría actual
.gato-actual {}

// Clase para cualquier otro elemento del menú actual
.elemento-menú-actual {}

// Clase para una categoría
.menu-item-type-taxonomy {}

// Clase para tipos de publicación
.menu-item-type-post_type {}

// Clase para cualquier enlace personalizado
.menu-item-type-custom {}

// Clase para el enlace de inicio
.menu-item-home {}

WordPress también le permite agregar sus propias clases CSS personalizadas a elementos de menú individuales.

Puede usar esta función para diseñar elementos de menú, como agregar iconos de imagen con sus menús o simplemente cambiando los colores para resaltar un elemento de menú.

Dirigirse a Apariencia »Menús página en su administrador de WordPress y haga clic en el botón Opciones de pantalla.

Habilitar la opción de clases CSS para elementos de menú individuales

Una vez que haya marcado esa casilla, verá que se agrega un campo adicional cuando vaya a editar cada elemento de menú individual.

Agregar una clase CSS personalizada a un elemento de menú en WordPress

Ahora puede usar esta clase CSS en su hoja de estilo para agregar su CSS personalizado. Solo afectará el elemento del menú con la clase CSS que agregó.

Ejemplos de estilos de menús de navegación en WordPress

Los diferentes temas de WordPress pueden usar diferentes opciones de estilo, clases CSS e incluso JavaScript para crear menús de navegación. Esto le brinda muchas opciones para cambiar esos estilos y personalizar sus menús de navegación para cumplir con sus propios requisitos.

La herramienta de inspección en su navegador web será su mejor amigo cuando se trata de averiguar qué clases de CSS cambiar. Si no lo ha usado antes, eche un vistazo a nuestra guía sobre cómo usar la herramienta de inspección para personalizar los temas de WordPress.

Básicamente, solo necesita apuntar el cursor al elemento que desea modificar, hacer clic con el botón derecho y luego seleccionar Inspeccionar herramienta en el menú del navegador.

Usando la herramienta de inspección para buscar clases de CSS para modificar

Dicho esto, echemos un vistazo a algunos ejemplos de la vida real de estilos de menús de navegación en WordPress.

1. Cómo cambiar el color de fuente en los menús de navegación de WordPress

Aquí está el ejemplo de CSS personalizado que puede agregar a su tema para cambiar el color de fuente de los menús de navegación.

# top-menu li.menu-item a {
color: # ff0000;
}

En este ejemplo, el menú superior # es la ID asignada a la lista desordenada que muestra nuestro menú de navegación. Tendrá que usar la herramienta de inspección para encontrar la identificación utilizada por su tema.

Cambiar el color de fuente de los menús de navegación de WordPress

2. Cómo cambiar el color de fondo de la barra de menú de navegación

Primero, deberá encontrar el ID de CSS o la clase utilizada por su tema para el contenedor que rodea el menú de navegación.

Encontrar la clase CSS para el contenedor del menú de navegación

Después de eso, puede usar el siguiente CSS personalizado para cambiar el color de fondo de la barra del menú de navegación.

.navigation-top {
color de fondo: # 000;
}

Así es como se veía en nuestro sitio web de demostración.

Cambiar el color de fondo de la barra del menú de navegación

3. Cómo cambiar el color de fondo de un solo elemento del menú

Es posible que haya notado que muchos sitios web usan un color de fondo diferente para los enlaces más importantes en su menú de navegación. Este enlace podría ser un botón de inicio de sesión, registro, contacto o compra. Al darle un color diferente, hace que el enlace sea más notable.

Para lograr esto, agregaremos una clase CSS personalizada al elemento del menú que queremos resaltar con un color de fondo diferente.

Dirigirse a Apariencia »Menús y haga clic en el botón Opciones de pantalla en la esquina superior derecha de la pantalla. Aparecerá un menú desplegable donde debe marcar la casilla junto a la opción “Clases CSS”.

Habilitar la opción de clases CSS para elementos de menú individuales

Después de eso, debe desplazarse hacia abajo hasta el elemento del menú que desea modificar y hacer clic para expandirlo. Notarás una nueva opción para agregar tu clase CSS personalizada.

Agregar clase css personalizada a un elemento del menú

Ahora puede usar esta clase CSS para diseñar ese elemento de menú en particular de manera diferente.

.Contáctenos {
color de fondo: # ff0099;
radio de borde: 5px;
}

Así es como se veía en nuestro sitio de prueba.

Cambiar el color de fondo de un único elemento de menú en los menús de navegación de WordPress

4. Agregar efectos de desplazamiento a los menús de navegación de WordPress

¿Desea que los elementos de su menú cambien de color al pasar el mouse? Este truco CSS particular hace que sus menús de navegación se vean más interactivos.

Simplemente agregue el siguiente CSS personalizado a su tema.

# top-menu li.menu-item a: hover {
color de fondo: #fff;
color: # 666;
radio de borde: 5px;
}

En este ejemplo, # top-menu es la ID de CSS utilizada por su tema para la lista de menú de navegación desordenada.

Así es como se veía esto en nuestro sitio de prueba.

Efecto del mouseover en los menús de navegación de WordPress

5. Crear menús de navegación flotantes fijos en WordPress

Normalmente, los menús de navegación aparecen en la parte superior y desaparecen a medida que el usuario se desplaza hacia abajo. Los menús de navegación flotantes permanecen en la parte superior a medida que el usuario se desplaza hacia abajo.

Puede agregar el siguiente código CSS a su tema para que sus menús de navegación sean adhesivos.

#menu principal {
fondo: # 2194af;
altura: 60px;
índice z: 170;
margen: 0 automático;
borde inferior: 1px sólido #dadada;
ancho: 100%;
posición: fija;
arriba: 0;
izquierda: 0;
derecha: 0;
alineación de texto: derecha;
acolchado derecho: 30px
}

Simplemente reemplace # top-menu con la ID de CSS de su menú de navegación.

Así es como se veía en nuestra demostración:

Menú de navegación fijo

Para obtener instrucciones más detalladas y un método alternativo, consulte nuestra guía sobre cómo crear un menú de navegación flotante en WordPress.

6. Crear menús de navegación transparentes en WordPress

Muchos sitios web utilizan imágenes de fondo de pantalla grande o completa con sus botones de llamada a la acción. El uso de menús transparentes hace que su navegación se mezcle con la imagen. Esto hace que los usuarios tengan más probabilidades de centrarse en su llamado a la acción..

Simplemente agregue el siguiente CSS de muestra a su tema para que sus menús de navegación sean transparentes.

#sitio de navegacion {
color de fondo: transparente;
}

Así es como se veía en nuestro sitio de demostración.

Menús de navegación transparentes en WordPress

Dependiendo de su tema, es posible que deba ajustar la posición de la imagen del encabezado para que cubra el área detrás de sus menús transparentes.

Esperamos que este artículo te haya ayudado a aprender cómo diseñar los menús de navegación de WordPress. Es posible que también desee ver nuestra guía sobre cómo agregar un menú de WordPress receptivo listo para dispositivos móviles.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map