La navegación y los headers adhesivos solían ser un detalle estilístico y muchas de las principales marcas de hoy los usan. Encontrarás navegación fija en Sony, Facebook, Google+, Adidas, Nike, CNN y muchos otros sitios Web, y todos se ven modernos. Pero a la vez de tener un aspecto elegante, hay muchos beneficios de agregar un plugin de encabezado fijo a su sitio web de WordPress:
- Easier navigation
- Best mark
- More page views per visit
- Bounce rate más baja
At the same time there are some downsides to having fixed navigation on your website, because it introduces more clutter and gives users the ability to navigate faster, so it is not good to have it on your landing pages. Many websites don't need it, but they often implement it just to be cool.
Si lo decide e implementa, consulte sus datos de Google analytics para ver si su plugin de encabezado fijo realmente mejora sus métricas clave de rendimiento. Los encabezados fijos pueden ayudar a la usabilidad web y al SEO, de esta manera solo verifique si es adecuado para su sitio. Tener algo tan importante en su sitio web que no mejora la experiencia del Username y se interpone en el camino del target de su sitio web puede ser un gran problema.
There are many tutorials to help you do the fixed navigation yourself. If you don't want to waste time coding and designing your sticky navigation, you can try installing a WordPress theme that has a sticky header built in. Total WordPress theme It features sticky navigation (which is super customizable by the way), but if your current theme doesn't support sticky headers, keep reading. I'm going to cover the best sticky header plugin options for WordPress, both free and premium.
When it comes to extending the functionality of your website, there are multiple options and they all come in the form of free or premium (paid) plugins. The free options are pretty good, but usually a premium fixed header plugin will come with a lot of features that you can't get for free. This includes options that allow you to control each segment of your header or even replace it, as well as premium support and updates. For something as important as the WordPress header, I think it is worth taking a look at it.
1. Menú fijo (o cualquier cosa) en el plugin Scroll Free WordPress
Sticky Menu (o Anything) on Scroll es su respuesta si desea que cualquier elemento de su página web be pegajoso. El plugin de forma general se usa para arreglar el menú en la parte de arriba de la página, pero al mismo tiempo puede usarlo para hacer un encabezado adhesivo.
Aunque funciona bastante bien en la mayoría de las situaciones, no es una solución sencilla ya que necesita que uses un poco de codificación. Pero si eres de los que no le importa lidiar con CSS, sigue leyendo. Las características incluyen:
- Make any element on your page sticky as soon as it reaches the top
- The element must have a unique name, class or id
- Option to add space between fixed header and top of page
- Specify minimum and maximum screen sizes for the sticky function
- It does not affect the administrator toolbar at the top of the page
A pesar de todo, un inconveniente es que, en algunos casos, el encabezado no cambia de tamaño para adaptarse al tamaño del browser. A parte de esto, le posibilita activar algunos estilos de los items solo cuando están pegajosos.
With this plugin, at the same time you can make other items sticky: call to action boxes, logos or even promotional banners. But since it requires users to manually choose the correct selector for the page element to be corrected, it may not be everyone's favorite. At a time, this plugin works to make only one item sticky at a time.
2. Mega Main Menu WordPress Premium Plugin
The Mega Main Menu is one of the main menu plugins on the market. Not only does it offer options for mega menus, drop down menus, cell phone optimization, translation support, and tons of customizations, but it also includes a super useful sticky option.
Once you install and activate the plugin, just use the easy options under Appearance> Mega Main Menu to configure it. There you will find options for:
- Enabling a sticky menu
- Determine Adhesive Scroll Displacement
- Custom fonts, colors and icons
- Foldable lists
- RTL and translation ready
- Hide / show items in scrolling
- Códigos cortos y widgets easy to use
The options of this fixed header plugin are easy to use, so it shouldn't be long before you have a fixed navigation and branding on your website.
3. Simple sticky header in WordPress plugin without scrolling
Agregue un encabezado adhesivo simple a cualquier tema de WordPress con el encabezado adhesivo simple gratuito en Scroll. Este plugin de encabezado adhesivo ofrece una configuración rápida con opciones fáciles para su Logo, colores, un «botón de siguiente publicación», menús desplegables y más. Este plugin gratuito te posibilita controlar muchas cosas, como:
- Custom logo
- Integrated color options
- Link option «Next entry»
- Drop-down menu on cell phone
- Custom offset distance menu visibility
- Incorporation with WordPress Live Customizer
That last feature comes in handy as you can preview sticky header edits live as you make them. Then post your changes to quickly update your website.
4. Complemento de WordPress de Awesome Header Premium
Awesome Header is a "professional" fixed header plugin. What you will find interesting here is that it can not only serve as your sticky navigation, but you can replace your entire WordPress header with it.
You just need to replace your existing header markup with a little function and your WordPress header will be replaced by Awesome Header. From there, you can modify anything you can imagine. There is everything you find in the free version and some:
- Ability to replace the entire WordPress header
- 3 levels of navigation
- 100% receptive
- Mejor SEO con Breadcrumb Microdata
- Soporte de WooCommerce y bbPress para Breadcrumbs
- Unlimited color options
- Background image or pattern
- Sub menu (3 vertical dots)
- Fixed navigation
- 3 types of search (underline, simple search field, and slide below header)
- Filling of menu items (left / right); at the same time for sticky header
- Menu item background
- Font sizes for all items
- Transparency for menus and submenus
- The social menu with Genericons prepares you for the retina
- Navigation labels
If you are a developer and want to have even more control over your header areas, you can, as Awesome Header is very extensible using its many Filter & Action Hooks.
5. WordPress Premium Hero Mega Menu Plugin
It features a completely flexible and customizable layout, packed with options for just a couple of its header functions. Hero Mega Menu is very easy to use as it uses a drag and drop interface to create a custom menu layout. And the structure builder works just like normal WordPress menus: just nest items to create dropdown menus and edit them to create mega menus. At the same time it has:
- Transparency options
- 60 color presets
- Responsive design
- Support for maps, images, lists, posts and text
- Custom backgrounds
- 270 ElegantThemes icons
- Cell phone navigation
- Sticky menu (anyway!)
Y puedes hacer mucho más. El plugin al mismo tiempo admite CSS personalizado, incluye opciones de diseño de ancho fijo y completo, opciones de sombras y esquinas redondeadas, varias animaciones, compatibilidad con fuentes de Google and more.
6. Free WordPress plugin myStickymenu
myStickymenu is a lean plugin that simply does what it sets out to do: add a sticky function to an element on your web pages. Responsive and supports multiple languages. The main features include:
- Flexible and customizable
- You will be able to add custom CSS code to design your fixed header
- You can set values to fix the header depending on how far down the user scrolls
- Header can be full width or any limit you specify
myStickymenu is simple and mostly works out of the box. Even when designed with the Twenty Thirteen theme in mind, it works quite well for most other themes, although it may require a certain amount of custom CSS to style the header the way you want it.
7. WordPress QuadMenu Premium Plugin
QuadMenu is an easy-to-use custom menu generator with a drag-and-drop interface. You can use the built-in items for a mega menu design, icons, social links, shopping cart, widgets, and more to create the perfect menu for your website. At the same time, the plugin includes a fixed menu in the scrolling option, which makes navigation even more user-friendly for your readers. Other amazing features include:
- Drag and drop menu builder
- Custom logo
- Unlimited menu style themes
- Horizontal or vertical layout
- Sticky in scrolling
- Mega menu compatible
- Custom fonts
- Visual Composer compatible
Otra característica única que distingue a QuadMenu de los demás son las capacidades de desarrollo. Es una excelente opción para desarrolladores de temas o autónomos que trabajan en sitios de clientes personalizados, ya que hay funciones integradas para archivos .less, opciones personalizadas, filters, estilos y más.
8. Fixed and Fixed Header Free WordPress Plugin
Fixed and Sticky Header does a good job of making your header or menu sticky, and making it visible on your website at all times. You will need to specify the header class or id in the plugin settings. You can at the same time:
- Choose header background color
- Choose the text color for the header
- Set the offset distance that the header should get sticky
9. Fixed header in Scroll Premium plugin for WordPress
The Sticky Header in Scroll for WordPress is a simple plugin to add a sticky header that offers tons of customization options. Installation is easy and you will have a fixed header in no time. It's peppered with helpful options including:
- Point and click customization to match the header to any theme
- Smoothly responsive, adjusting to any screen size
- Includes an alternative slim design
- Includes custom button label for dropdown menu, optionally hide menu
- Upload logo image or show text, optionally hide logo
- Úselo para mostrar el título de la publicación o los botones para compartir o la próxima publicación en las publicaciones del Blog
- Disable adhesion on mobiles, if desired
- Live customizer addition to help you preview changes
Apart from that, this lightweight plugin can at the same time hide the header of your existing theme. At the same time, you can set the offset distance at which the header will get sticky and change the colors, background color, background image, opacity, and more. One-stop shop solution to add a catchy touch to your headline.
10. Premium Site Content Navigator Plugin for WordPress
Si crea muchas páginas de destino o contents extenso (como guías o estudios detallados), el navegador de contenido del sitio es un plugin útil que quizás desee verificar. Con este plugin, puede habilitar una navegación fija en cualquiera de sus publicaciones, páginas y / o tipos de publicaciones personalizadas. Luego, use las opciones para configurar el final de la barra, la superposición, los selectores CSS de sección (encabezados, divs, etc.), información sobre herramientas, visibilidad y más.
- Sticky menu
- Customizable progress bar
- Determine page sections
- Advanced settings
- Tool Information
- Custom font and CSS options
- Options per post
- Sidebar widget
conclusion
Veremos más y más sitios que adoptan encabezados fijos y navegación fija, pero si no se hace correctamente, estos items fijos del sitio web pueden distraer y contribuir a bajas tasas de conversion. La navegación pegajosa puede ser demasiado grande para algunas pantallas, por lo que debe asegurarse de que no ocupe demasiado espacio en las pantallas de los dispositivos móviles.
The branding and navigation of your website should contribute to the pleasant feeling of browsing and should be easily accessible.
Sticky headlines should never compete with your content for attention.
Considere experimentar con encabezados fijos, supervise su traffic, conversiones y comportamiento del usuario utilizando plataformas analíticas. Si se configuran correctamente, los plugins de WordPress de encabezado fijo pueden brindarle más clientes que regresan, usuarios más satisfechos y, en última instancia, más conversiones.
