Al diseñar su sitio web con temas de bloques de WordPress, es posible que haya notado que la navegación principal de su sitio tiene opciones de estilo limitadas. Por ejemplo, cuando hace clic en el enlace de una página en su navegación principal para visitar una página en su sitio web, el enlace de la página activa no cambia de color dentro de la navegación principal. En otras palabras, no hay ninguna indicación para el usuario sobre en qué página se encuentra actualmente.

Una buena experiencia de usuario indica que los visitantes del sitio siempre deben tener algún tipo de indicación sobre dónde se encuentran en su sitio; esto ayuda a evitar que se pierdan.

En este tutorial, le mostraré cómo personalizar rápidamente la navegación de su sitio en temas de bloques de WordPress para mostrar un color personalizado para la página activa. Usaré el tema Twenty Twenty Four para esta demostración.

Paso 1: navega al editor de bloques

Desde su Panel de WordPress, vaya a Apariencia>Editor (flecha roja en la foto de arriba). Esto lo llevará al Editor del sitio.

Haga clic en el área de contenido principal a la derecha del menú. Esto lo llevará al interior del Editor de bloques.

Paso 2: agregar CSS personalizado

A continuación, haga clic en el icono "Estilos" en la esquina superior derecha del Editor de bloques.

Haga clic en el ícono "Más" (el ícono vertical de tres puntos), luego haga clic en "CSS adicional".

Pegue el siguiente código CSS en el cuadro de texto "CSS adicional":

.current-menu-item {
  color: #e23f1b;
}

Reemplace el valor entre el símbolo "#" y el ";" símbolo con el código hexadecimal para cualquier color que desee usar (puede obtener valores de código hexadecimal de color dentro de WordPress editando cualquier cosa que tenga un valor de color o usando una herramienta de color como HueMenta or Coolors).

Haga clic en el botón "Guardar" en la parte superior del Editor de bloques, luego haga clic en "Guardar" nuevamente.

Paso 3: Ver página

Una vez guardados los cambios, ahora puede hacer clic en el icono "Ver página" para obtener una vista previa de su sitio con el nuevo color para la página activa en su navegación principal.

Solucionando Problemas

Si el código anterior no funcionó para usted, es posible que esté usando un tema que usa diferentes clases para los elementos activos del menú, o puede que esté usando enlaces personalizados en su bloque de navegación en lugar de enlaces de páginas.

Temas que no son de bloqueo o temas de bloques de terceros

Para resolver el problema anterior, tendrá que usar la herramienta "inspeccionar" en su navegador y averiguar qué clase se usa para los enlaces de páginas activas en su navegación principal (también puede intentar buscar en Google "¿Qué clase usa el tema ____ para los enlaces activos?"). enlaces de páginas en la navegación principal”).

Para este último problema, simplemente cambie sus enlaces personalizados a enlaces de páginas dentro del Editor del sitio. Para hacer esto desde el Editor de bloques, haga clic en el logotipo en la esquina superior izquierda del editor (será el logotipo de WordPress o el logotipo de su sitio).

Luego, haga clic en "Navegación". Haga clic en el icono "Editar" junto al nombre del menú principal de su sitio.

Haga clic en el menú de navegación para editarlo. Luego, haga clic en "Ir al bloque de navegación principal" en la barra lateral de configuración del bloque si no está allí de forma predeterminada.

Debajo del encabezado "Menú" en la barra lateral de Configuración de bloque, verá una lista de todas las páginas que se encuentran en su navegación principal. Si tiene alguna página del sitio en la navegación que aparece como un enlace personalizado (como la entrada inferior en la foto de ejemplo), tendrá que eliminar la entrada y volver a agregarla como una página (si es posible).

Para hacer esto, haga clic en el ícono "Opciones" al lado de la entrada, luego haga clic en "Eliminar ____". A continuación, haga clic en el icono “+” en la parte inferior de la lista de páginas.

A continuación, haga clic en "Enlace de página" y luego busque la página que desea agregar. Una vez que haya agregado la página, haga clic en "Guardar" y haga clic en "Guardar" nuevamente. El problema debería resolverse.