¡Aprenda a crear un menú fijo para la navegación principal de su sitio web de WordPress! Los menús fijos ayudan a mejorar la experiencia del usuario al hacer que el menú de su sitio web esté más disponible para los visitantes del sitio. Además, puede ayudar a mejorar el aspecto general de su sitio. ¡Entremos en ello!

Índice del contenido

1. Navegue hasta el Editor del sitio

El primer paso en este proceso es navegar hasta el "Editor del sitio" dentro del área de administración de WordPress. El Editor del sitio está disponible para “Bloquear temas” en WordPress, suponiendo que esté utilizando la versión 5.9 o posterior de WordPress.

Para navegar al Editor del sitio, vaya a Apariencia> Editor (flecha roja en la imagen de arriba) desde la navegación principal en el área de administración de WP.

Haga clic en el área de contenido principal en el lado derecho de la pantalla (delineada en azul claro y indicada por la flecha azul en la imagen de arriba). Esto lo llevará al Editor de bloques dentro del Editor del sitio.

En el lado derecho, debajo de la pestaña "Página", verá una fila denominada "Plantilla" (delineada en azul en la imagen de arriba). Haga clic en el nombre/enlace de la plantilla (flecha roja). Luego, haga clic en "Editar plantilla" (flecha verde; a veces "Editar plantilla" es un pequeño enlace de texto azul debajo del menú desplegable que muestra el nombre de su plantilla).

2. Edite su plantilla

Ahora estará dentro del Editor de plantillas de la página de inicio de su sitio web. (Si no tiene una página de inicio configurada para su sitio, puede consultar este tutorial sobre cómo configurar una página de inicio estática para su sitio web de WordPress).

En la parte superior de la plantilla se encuentra la navegación principal de su página, también llamada "encabezado" de su página web. Cuando pasas el mouse sobre este elemento, verás un cuadro violeta que lo delinea (flecha roja en la imagen de arriba). Esto indica que este elemento es un “patrón sincronizado” lo que significa que hacer un cambio en una instancia del patrón aplicará los cambios en todas las instancias en todo el sitio. Haga clic en esta área para seleccionar el patrón sincronizado del encabezado.

Si este es el elemento de encabezado principal de su sitio, ahora debería ver que el patrón sincronizado está etiquetado como "Encabezado" en la barra de herramientas del bloque.

3. Agregue su encabezado a un grupo

Dentro de la barra de herramientas del bloque para el patrón de encabezado seleccionado, haga clic en el icono "Opciones" (flecha roja en la imagen de arriba) y seleccione "Grupo" (flecha verde). Esto anidará el patrón sincronizado en un bloque de grupo.

Notarás que la barra de herramientas de bloqueo ahora tiene el ícono de bloque de grupo (flecha azul en la imagen de arriba) y el contorno alrededor del área de navegación principal ahora es azul en lugar de morado (flecha roja).

Tenga en cuenta que esto puede cambiar el ancho de su menú de navegación principal. Para ajustar el ancho, coloque el mouse sobre el patrón sincronizado del encabezado y haga clic para seleccionarlo (flecha roja).

En la barra de herramientas del bloque para el patrón sincronizado del encabezado, haga clic en el icono "Alinear" (flecha verde) y cámbielo nuevamente al ancho deseado (flecha azul; en mi caso, seleccioné "Ancho ancho").

Para volver al bloque de grupo, haga clic en el icono "Seleccionar grupo" en la barra de herramientas del bloque de encabezado (flecha rosa).

WordPress simplificado: curso sobre cómo crear sitios web potentes por Davies Media Design

4. Configure el grupo como "Adhesivo"

Con el grupo seleccionado, navegue hasta la pestaña "Bloquear" debajo de la barra lateral de Configuración en el lado derecho de la pantalla (flecha roja en la imagen de arriba).

Haga clic en el elemento del menú denominado "Posición" (flecha verde). Ahora verá un menú desplegable con la etiqueta "Predeterminado" (flecha rosa). Haga clic en el menú desplegable y seleccione la opción "Adhesivo" (flecha azul).

Navegue hasta la parte superior del editor y haga clic en el botón "Guardar" (flecha roja), luego haga clic en "Guardar" nuevamente. ¡Ahora tendrá un menú de navegación principal para su sitio web de WordPress!

5. Diseñe el menú fijo

Puede personalizar/diseñar muchos elementos del nuevo menú fijo, pero para este tutorial simplemente agregaré un fondo detrás del bloque de grupo para garantizar que el menú abarque todo el ancho de la página web.

Para hacer esto, con el bloque Grupo seleccionado, navegaré a la pestaña "Estilos" de la barra lateral de Configuración (flecha roja en la imagen de arriba).

En "Color", haré clic en la opción "Fondo" (flecha azul), luego seleccionaré la muestra blanca para establecer el color de fondo en blanco (flecha verde).

Una vez más haré clic en "Guardar" dos veces para guardar los cambios.

Tenga en cuenta que siempre puede ajustar el ancho, el alto o el espacio del encabezado de su sitio web en la sección "Dimensiones" utilizando los controles deslizantes "Relleno" y "Margen".

Puede obtener una vista previa de su sitio haciendo clic en el ícono del dispositivo (flecha roja), luego haga clic en "Ver sitio" (flecha verde).

¡Puede desplazarse por su sitio web y ver cómo el menú de navegación fijo permanece en su lugar en la parte superior (flecha verde)!

Una vez que haya terminado de editar su menú fijo, haga clic en el botón "Atrás" en la parte superior del editor (flecha roja). Esto lo regresará a su página web dentro del Editor lateral.

Para volver al área de administración de WP, simplemente haga clic en el logotipo en la esquina superior izquierda.

¡Eso es todo por este tutorial! Si lo disfrutaste, puedes aprende WordPress con mi curso en profundidad en Udemy. O puedes consultar otros gratuitos Vídeotutoriales de WordPress y Artículos de ayuda de WordPress en mi sitio web

Boletín informativo por correo electrónico de aplicaciones creativas gratuitas de Davies Media Design

Suscríbase al boletín de DMD

¡Regístrese para recibir nuevos tutoriales, actualizaciones de cursos y las últimas noticias sobre sus aplicaciones creativas gratuitas favoritas!

¡Te has suscripto satisfactoriamente!

El pin en Pinterest