Blog de TemplateMonster

Tutorial: Cómo dejar el menú fijo en WordPress

Los menús fijos se consideran los más útiles entre todos los elementos fijos de la interfaz de usuario en el sitio web de WordPress. La idea detrás del menú fijo es bastante sencilla: cuando se desplaza hacia abajo, el menú se quedará en el mismo lugar justo ante los ojos del usuario. ¿Cómo dejar el menú fijo en WordPress?

Bueno, primero deberías saber que lo puedes fijar en tres ubicaciones:

Pues, ¿por qué crear un menú fijo es una buena idea?


Guía paso a paso: Cómo dejar el menú fijo en WordPress

Como ya has entendido, el menú fijo es un menú que no cambia su posición en la página mientras te desplazas hacia abajo. Así que, en cualquier momento mientras te desplazas puedes ver el panel de navegación. Este menú puede incluir el nombre o el logotipo de tu sitio web, o cualquier otra cosa que quieras que se muestre en la barra. Es importante mencionar que necesitarás el complemento myStickymenu para crear un menú fijo en tu sitio web. Puedes descargarlo desde el directorio de plugins de WordPress. Bien, entonces, comencemos.

  1. Ve al Panel de WordPress > Apariencia > Menús.
  2. Haz clic en el enlace "crea un nuevo menú". Ingresa, por ejemplo, "Menú fijo" en el campo apropiado y haz clic en el botón "Crear menú".
  3. Establece "Mostrar ubicación" como principal y luego guarda los cambios.
  4. Añade elementos a tu menú a través de la Estructura del menú y guarda los ajustes.
  5. Para habilitar la función de menú fijo, aprieta F12 o abre las herramientas de desarrollador en tu navegador. Busca y selecciona el contenedor en el que se coloca tu menú de navegación. Haz clic en él y encuentra una clase CSS. Por ejemplo, una cabecera de sitio.
  6. Cópialo y vuelve a Panel > Ajustes > myStickymenu.
  7. Encuentra la opción "Clase fija" y pega la clase CSS copiada. Debería verse como .site-header. El punto es crucial porque señala las clases CSS. Ahora, guarda los cambios, ve a la página y actualízala para asegurarte de que los cambios se hayan aplicado.

Pues, ya sabes cómo dejar el menú fijo en WordPress. ¿No te parece que crear un menú fijo no es tan desafiante como puede parecer a primera vista?


LISTA DE LOS 5 MEJORES TEMAS DE WORDPRESS

EPSILONIC

La plantilla WordPress Epsilonic es una buena opción para los propietarios de sitios web empresariales y corporativos. Además del diseño elegante y atractivo, también te proporciona una gama completa de herramientas web útiles. Por medio del slider de ancho completo ubicado en la parte superior del tema, podrás agregar un toque más personal al sitio. El diseño 100% responsivo garantiza que tu sitio web se adapte fácilmente a cualquier dispositivo moderno (incluso a tabletas y teléfonos inteligentes). De hecho, el tema cuenta con un montón de características adicionales útiles:

 

  • Páginas para cualquier propósito: Página de inicio, Acerca de nosotros, Qué hacemos, Nuestros proyectos, Nuestro blog y Contactos.
  • Elementor Page Builder permite hacer personalizaciones sin tocar el código, gracias a la funcionalidad de arrastrar y soltar.
  • El enfoque "Primero el móvil" asegura que el sitio web se vea perfecto en ambas pantallas pequeñas y grandes.
  • Una gran cantidad de imágenes de alta resolución disponibles de forma gratuita.
  • El complemento JetElements.
  • La documentación detallada y el soporte eficiente que te ayudarán a resolver rápidamente cualquiera de los problemas.
  • Una serie de opciones de optimización SEO que llevarán tu sitio web a la cima de los resultados de búsqueda.
  • El complemento Ecwid que permite construir una tienda en línea directamente en el sitio.
  • El desplazamiento de Parallax crea una ilusión de profundidad en los entornos 2D de tu página web.
  • Una opción de búsqueda en vivo, etc.


CREATIVE

Conoce esta plantilla WP minimalista para sitios de arte y fotografía. Gracias a su diseño limpio, los usuarios pueden fijarse fácilmente en tu contenido. Mientras tanto, las fotos HD de ancho completo harán que el sitio se vea muy impresionante. Además, la plantilla también cuenta con múltiples bloques de contenido separados por bordes, una tipografía masiva, un surtido de bloques de texto transparentes, una impresionante galería con un efecto de desplazamiento y muchas más características útiles que hemos reunido en la siguiente lista:

 

  • Su diseño responsivo hace que tu sitio se adapte rápidamente a cualquier dispositivo que el usuario tenga a mano.
  • Está basado en Cherry Framework 4, incluye la opción Bootstrap, cuenta con múltiples códigos cortos y widgets.
  • MotoPress Slider junto con Cherry Simple Slider te permiten crear diapositivas de textos, imágenes y videos, y animarlas con diferentes efectos de transición.
  • MotoPress Editor con una interfaz de arrastrar y soltar que hace que el proceso de personalización sea más rápido y sencillo.
  • Un formulario de contacto que permite a tus clientes mantenerse en contacto contigo.
  • Opciones de redes sociales y un sistema de comentarios.
  • Integración de un reproductor de audio y video, y muchas más.


HOUSTON

Si ofreces servicios comerciales en línea y deseas que tu sitio web se destaque entre la multitud, prueba este tema ultra moderno con un diseño conceptual en blanco y negro. Lo suficiente espacio en blanco, animaciones llamativas e iconos minimalistas harán que tu recurso web parezca realmente interactivo. Mientras tanto, los contadores integrados te ayudarán a atraer más atención a las estadísticas que se presentan profesionalmente. Siéntete libre de desactivar todas las opciones inútiles para evitar cualquier tipo de distracción. Entre otras características importantes del tema son:

 

  • Su diseño está optimizado para pantallas Retina, lo que hace que el tema funcione y se vea perfectamente, incluso en las pantallas con alta densidad de píxeles.
  • Integra la animación de paralaje.
  • El complemento Mega Menu que te permite administrar categorías y subcategorías con diversos contenidos.
  • Se basa en Cherry Framework 4.
  • MotoPress Slider y Editor en un solo paquete.
  • WPML que facilita la creación de un sitio WP multilingüe.
  • La integración de Mapas de Google que ayudan a tus clientes a encontrar la ruta más corta a tu oficina.
  • Botón Arriba.
  • El paquete de Ecwid que te permite vender productos y servicios directamente en tu sitio web.


APARTMENTS

Éste es un tema de WordPress en blanco y negro que se desarrolló específicamente para sitios web de agencias inmobiliarias. Su diseño adaptable y optimizado para pantallas Retina se adapta a todos los dispositivos modernos, incluyendo los dispositivos de Apple con las pantallas de alta densidad de píxeles. La plantilla se basa en Cherry Framework 4 y cuenta con la opción Bootstrap, así como con numerosos códigos cortos y widgets. Por medio del editor MotoPress incorporado con una interfaz de arrastrar y soltar, puedes administrar los elementos de la página en el modo visual. El proceso de personalización tampoco requiere los conocimientos de codificación. Mientras tanto, MotoPress Slider se puede usar junto con Cherry Simple Slider, y crear diapositivas de alta clase con textos, imágenes y videos. El resto de las características más importantes se enumeran a continuación:

 

  • El menú fijo que permanece ante los ojos de los usuarios todo el tiempo mientras se desplazan por la página. No tienen que volver atrás para luego llegar a otra página.
  • Optimizado para widgets. Esto significa que te permite insertar contenido estático y dinámico en un espacio específico del tema. La lista de widgets incluye categorías de entradas, nubes de etiquetas, navegación, búsqueda y otros.
  • Un formulario de contacto que permite a tus clientes a ponerse en contacto contigo, solicitar alguna información adicional sobre los servicios que ofreces y enviarte comentarios sobre tu trabajo.
  • Compatible con todos los navegadores.
  • La documentación detallada del tema te guía a través de cada paso de instalación de la plantilla y su uso en tus proyectos futuros.
  • Galería clasificable, etc.


SUPREME

Supreme es una plantilla WP minimalista y elegante para sitios y blogs dedicados a la moda. Integra el desplazamiento de Parallax que crea la ilusión de profundidad en los entornos 2D de tu sitio web y anima a los usuarios a quedarse por más tiempo en tu recurso y leer más información. Para que la navegación por el sitio sea aún mejor, usa el mega menú integrado que te ayuda a insertar numerosos enlaces, textos e imágenes en un solo panel. Entre otras características útiles, nos gustaría mencionar las siguientes:

 

  • El diseño web adaptable que hace que la página se ajuste rápidamente a cualquier dispositivo moderno.
  • El video de fondo que mejora la experiencia visual de una manera creativa.
  • MotoPress Slider y Editor.
  • Cherry Framework, Bootstrap, múltiples widgets.
  • Más de 80 códigos cortos útiles y muchas más.

Fuente: "How to Create a Sticky Menu on WordPress" por Mariana