Haz un menú llamativo en WordPress e impresiona con tu diseño web

¿Quieres realizar un menú llamativo en WordPress con el que impresiones a todos tus visitantes? ¡Te explicamos paso a paso cómo hacerlo!

Dos métodos para realizar un menú llamativo en WordPress

Para resaltar un menú y hacerlo más visual, tenemos dos vías: una para expertos y otra para principiantes.

Los expertos, que dominen las reglas para escribir CSS, pueden optar por emplear selectores avanzados de CSS,  escogiendo el puesto que ocupa con respecto al resto de elementos (el primero, el cuarto o el último) con los pseudo-selectores.

Por su parte, los principiantes tienen la alternativa de utilizar la funcionalidad de WordPress, que posibilita agregar una clase concreta al elemento que queramos destacar.

Se trata de una funcionalidad de WordPress que suele estar oculta en nuestro panel de administración. Para activarla, hemos de acceder al panel de administración y dirigirnos al menú de Apariencia > Menús.

En este apartado, tenemos la posibilidad de crear nuestro menú personalizado de WordPress. Una vez lo tengamos creado, debemos hacer clic en la pestaña “opciones de pantalla”, que se encuentra en la esquina superior derecha, y activar en la sección “mostrar opciones avanzadas del menú”  la casilla “clases CSS”, lo que nos permitirá añadir a cada uno de nuestros elementos del menú una clase distinta y dar un estilo propio a cada página o enlace.

Posteriormente, buscaremos en esta misma página el elemento al que queremos darle un estilo propio. Cuando lo encontremos, hacemos clic en él y veremos cómo se despliega un nuevo cuadro llamado “Clases CSS (opcional)”.

Las clases de CSS que agreguemos han de ir sin el punto delante que después usemos para seleccionarla, y si queremos añadir varias, tenemos que dejar un espacio entre ambas. 

¿Cómo darle estilo al menú?

Tal y como decíamos, con esta funcionalidad podremos cambiar lo colores, el tamaño de las fuentes y hasta modificar la tipografía de nuestro menú, pero para ello debemos alterar el CSS de nuestra página.

Existen diferentes métodos:

-       Emplear el módulo JetPack CSS personalizado y activar el módulo de CSS, teniendo un completo editor CSS del tema a nuestro alcance.

-       Usar el plugin Simple Custom CSS – También muy sencillo. Consiste en instalar Simple Custom CSS y activar el plugin.

-       Crear un Child Theme  – Se basa en cargar una hoja de estilos propia justo después de la hoja de estilos del tema padre.

-       Editar directamente el style.css de tu tema –Sé consciente de que optando por esta vía, tanto si es un tema premium como un tema gratuito, los cambios que realices desaparecerán cuando el tema se actualice. Además, si no tienes conocimiento de CSS, ten mucho cuidado con las puntuaciones y los cierres de reglas, porque podrías provocar que tu hoja de estilos sea ilegible para algunos navegadores.

  Editar el CSS de theme WordPress - Además de los problemas mencionados anteriormente, este método no te dará acceso a todo el CSS en algunos temas.

De esta manera, podrás insertar las características que desees en tu menú y lograr que sea más atractivo para tus usuarios.