Cómo crear menús de navegación para WordPress

¿Desea crear sus menús de navegación de WordPress para cambiar sus colores o apariencia? Si bien el tema de WordPress se ocupa de la apariencia de los menús de navegación, puede personalizarlo fácilmente utilizando CSS para satisfacer sus necesidades. En este artículo, le mostraremos cómo crear menús de navegación de WordPress en su sitio web.

Diseño del menú de navegación de WordPress

Le 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 el código CSS en lugar de un complemento.

Método 1: Diseñe los menús de navegación de WordPress usando un complemento

Su tema de WordPress usa CSS para crear menús de navegación. A muchos principiantes no les gusta editar archivos de temas o escribir código CSS por su cuenta.

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

Lo primero que debe 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 le permite crear su 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 más información.

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

Después de la activación, se lo redireccionará para obtener su clave de licencia de CSS Hero. Simplemente siga las instrucciones en pantalla y será redirigido a su sitio web con solo 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.

Iniciar 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, mueva el mouse al 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, muestra los elementos que puede editar.

Apunte y haga clic para personalizar el menú

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

CSS Hero ahora 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 artículo

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

A medida que realiza cambios, puede verlos en vivo en la vista previa del tema.

Vista previa en vivo de sus cambios de CSS

Cuando 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 los cambios realizados. 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).

En general, si usa la etiqueta de menú estándar de WordPress, mostrará una lista sin clases CSS asociadas.

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

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

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

Es por eso que necesita definir la clase CSS y la ubicación del menú también. Su tema de WordPress probablemente ya esté haciendo esto al agregar menús de navegación usando un código como este:

Publicaciones relacionadas

Botón volver arriba