\u00bfQu\u00e9 es una cabecera adhesiva?<\/h2>\n![\"Una](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/header-section.png\")
Una secci\u00f3n de la cabecera del sitio web de Kotaku.<\/figcaption><\/figure>\nLa parte de la cabecera de tu sitio es algo as\u00ed como el mostrador de informaci\u00f3n de tu sitio. Va a ser algo que la mayor\u00eda de los usuarios ver\u00e1n en primer lugar, y siempre ser\u00e1 un lugar en el que mirar\u00e1n para encontrar algunas piezas clave de informaci\u00f3n, y realizar ciertas acciones:<\/p>\n
\n- Por ejemplo, tu logotipo o el nombre del sitio estar\u00e1n aqu\u00ed, lo que sirve de punto de partida para tus usuarios. En la mayor\u00eda de los casos, podr\u00e1n volver a la p\u00e1gina de inicio haciendo clic en el logotipo.<\/li>\n
- Si tienes cuentas de usuario<\/a> en tu sitio, la cabecera suele ofrecer un enlace para acceder a esas p\u00e1ginas de cuenta y perfil.<\/li>\n
- Aqu\u00ed puede haber una funcionalidad de b\u00fasqueda<\/a>, especialmente si tienes un sitio grande con mucho contenido en diferentes \u00e1reas.<\/li>\n
- Por supuesto, la navegaci\u00f3n de tu sitio<\/a> tambi\u00e9n es una parte integral de la cabecera.<\/li>\n<\/ul>\n
En general, tu cabecera es un punto de contacto para los usuarios. Ver\u00e1s que a menudo es la \u00abbarra\u00bb de los patrones de lectura en forma de F<\/a>, por lo que llama la atenci\u00f3n de tus usuarios a nivel intuitivo.<\/p>\nEs probable que ya sepas lo que es una cabecera adhes\u00edva, incluso en un sentido intuitivo. Es cuando la secci\u00f3n de la cabecera de tu sitio se \u00abpega\u00bb a la parte superior de la pantalla mientras te desplazas. A diferencia de una cabecera est\u00e1tica, que permanece en su sitio y desaparece cuando te desplazas, la cabecera adhesiva es un elemento siempre visible.<\/p>\n
Aunque el enfoque t\u00edpico para una cabecera adhesiva es fijar una versi\u00f3n est\u00e1tica de la misma en la parte superior de la pantalla, hay algunas formas diferentes de hacerla m\u00e1s usable, eficiente en la pantalla y din\u00e1mica. A continuaci\u00f3n, veremos algunos ejemplos del mundo real.<\/p>\n\n
Ejemplos de cabeceras adhesivas en la web<\/h2>\n
Encontrar\u00e1s cabeceras adhesivas por toda la web, y es una buena idea comprobar algunas para ver el alcance de lo que puedes conseguir. Uno de los ejemplos m\u00e1s b\u00e1sicos es el de Hammerhead<\/a>. Este sitio utiliza un \u00abmen\u00fa desplegable\u00bb y una cabecera adhesiva, y es sencillo: Se compromete a mantenerse en la parte superior de la p\u00e1gina en su dise\u00f1o est\u00e1tico:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/hammerhead-site-gif.gif\")
La cabecera adhesiva del sitio Hammerhead.<\/figcaption><\/figure>\nOtra implementaci\u00f3n sencilla es la de Kin<\/a>. Utiliza la t\u00edpica cabecera adhesiva, pero esta vez con unos cuantos elementos de dise\u00f1o geniales.<\/p>\nVer\u00e1s que el contraste cambia en funci\u00f3n de la parte de la web por la que te desplaces, y tambi\u00e9n hay unos bonitos efectos de transici\u00f3n:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kin-site-gif.gif\")
La cabecera adhesiva del sitio web de Kin.<\/figcaption><\/figure>\nNo podemos terminar esta secci\u00f3n sin mencionar la cabecera adhesiva de Kinsta<\/a>. Tambi\u00e9n mantiene las cosas sencillas en lo que respecta a los elementos de la cabecera, pero incluye un bonito toque de usabilidad que ofrece valor al visitante:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/kinsta-site-gif.gif\")
La cabecera adhesiva del sitio web de Kinsta.<\/figcaption><\/figure>\nEsta vez, ver\u00e1s que la cabecera desaparece cuando te desplaces por la p\u00e1gina. Sin embargo, volver\u00e1 a aparecer cuando te desplaces de nuevo hacia arriba – puedes referirte a \u00e9l como un \u00abencabezado parcialmente persistente\u00bb<\/p>\n
La premisa aqu\u00ed es que desplazarse hacia abajo significa que est\u00e1s invirtiendo tu tiempo en la propia p\u00e1gina, por lo que probablemente no necesitar\u00e1s la navegaci\u00f3n, las p\u00e1ginas de inicio de sesi\u00f3n o dirigirte a otra parte. Sin embargo, en el momento en que te desplazas hacia arriba, es m\u00e1s probable que quieras dirigirte a otra p\u00e1gina del sitio. En este caso, la cabecera adhesiva aparecer\u00e1 para salvar el d\u00eda.<\/p>\n
Son estos peque\u00f1os toques de experiencia de usuario (UX) los que hacen que los visitantes quieran volver al sitio. Para tus propios dise\u00f1os de cabecera adhesiva, deber\u00e1s tener en cuenta lo que puedes hacer para crear una UX y una UI que se centren en las necesidades del visitante.<\/p>\n
\u00bfPor qu\u00e9 deber\u00edas utilizar una cabecera adhesiva para tu sitio web?<\/h2>\n
Muchos sitios utilizan cabeceras adhesivas, y hay muchas buenas razones para ello. Pueden ser partes cruciales de la experiencia general de tu sitio y tienen mucha influencia en tu UX y UI.<\/p>\n
Dado que los elementos que incluir\u00e1s en una cabecera son aquellos a los que el usuario siempre querr\u00e1 acceder, tiene sentido tenerlos siempre a la vista. Esto es especialmente cierto para los dispositivos y formatos de pantalla m\u00e1s peque\u00f1os<\/a>.<\/p>\nAunque pueda parecer contradictorio tener una cabecera \u00absiempre activa\u00bb cuando el espacio de la ventana gr\u00e1fica es escaso, se trata de un peque\u00f1o sacrificio. El verdadero beneficio es dar al usuario m\u00f3vil menos razones para desplazarse, algo necesario en los dispositivos m\u00e1s peque\u00f1os. Si puedes proporcionar la navegaci\u00f3n de tu sitio sin necesidad de desplazarse, el usuario podr\u00e1 moverse por tu sitio con mayor facilidad.<\/p>\n
Ventajas e inconvenientes de las cabeceras adhesivas<\/h3>\n
Hemos cubierto algunos de los puntos positivos de las cabeceras adhesivas, as\u00ed que vamos a resumirlos r\u00e1pidamente:<\/p>\n
\n- Puedes ofrecer una navegaci\u00f3n a la que el usuario pueda acceder siempre, lo que ayuda a preservar el patr\u00f3n de lectura natural de tu sitio.<\/li>\n
- Puedes adaptar la cabecera a diferentes necesidades<\/a>, como contrastes, esquemas de color o incluso la intenci\u00f3n del usuario.<\/li>\n
- Existe la oportunidad de ofrecer valor al usuario, tanto para el escritorio como para las pantallas m\u00e1s peque\u00f1as.<\/li>\n<\/ul>\n
Sin embargo, una cabecera adhesiva no es la panacea para aumentar la UX, y hay algunos inconvenientes en su uso:<\/p>\n
\n- Esto lo cubrimos brevemente, pero para pantallas de todos los tama\u00f1os, tendr\u00e1s que asignar espacio a tu cabecera.<\/li>\n
- Una cabecera adhesiva restar\u00e1 naturalmente importancia al resto de tu contenido, porque sus propios elementos desviar\u00e1n la mirada del cuerpo de la p\u00e1gina.<\/li>\n
- Hay m\u00e1s trabajo de desarrollo en una buena cabecera adhesiva porque tienes que implementarla, asegurarte de que funciona en diferentes navegadores y comprobar que no haya errores en las pantallas m\u00e1s peque\u00f1as.<\/li>\n<\/ul>\n
Sin embargo, si piensas en tus elecciones de dise\u00f1o, en las necesidades de los usuarios y en los objetivos del sitio, puedes mitigar o eliminar todos estos inconvenientes, mientras mantienes los puntos buenos. Una forma de hacerlo es mediante los plugins de WordPress.<\/p>\n
3 plugins para ayudarte a crear cabeceras adhesivas<\/h2>\n
En las pr\u00f3ximas secciones, mostraremos algunos de los principales plugins de cabeceras adhesivas para WordPress. M\u00e1s adelante, hablaremos de si este tipo de soluci\u00f3n es adecuada para ti. En cualquier caso, un plugin puede ayudarte a implementar la funcionalidad sin necesidad de c\u00f3digo, lo cual es valioso si tu tema<\/a> no lo incluye.<\/p>\nAdem\u00e1s, puedes aprovechar la experiencia de dise\u00f1o y desarrollo de un experto a trav\u00e9s del plugin. Los desarrolladores tomar\u00e1n algunas de las decisiones t\u00e9cnicas m\u00e1s importantes por ti, y lo envolver\u00e1n en una interfaz de usuario intuitiva y f\u00e1cil de usar.<\/p>\n
1. Men\u00fa adhesivo y cabecera adhesiva<\/h3>\n
El plugin Sticky Menu & Sticky Header<\/a> de Webfactory es una buena primera opci\u00f3n, debido a su gran cantidad de funciones, su \u00fatil flexibilidad y su precio asequible.<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-sticky-header-plugin.png\")
El plugin Sticky Menu & Sticky Header.<\/figcaption><\/figure>\nLa atracci\u00f3n aqu\u00ed es que puedes hacer que cualquier elemento de tu sitio se pegue a la pantalla. Esto puede ser \u00fatil de muchas maneras, pero significa que implementar una cabecera adhesiva es un juego de ni\u00f1os.<\/p>\n
El plugin tambi\u00e9n viene con una serie de potentes opciones que te ayudar\u00e1n a implementar una cabecera adhesiva:<\/p>\n
\n- Puedes establecer el nivel deseado de posicionamiento \u00absuperior\u00bb. Esto significa que puedes a\u00f1adir espacio al \u00e1rea por encima de la cabecera para que se ajuste a tus objetivos de dise\u00f1o.<\/li>\n
- Tambi\u00e9n hay otras opciones de posicionamiento, como utilizar la propiedad CSS z-index<\/a> para dise\u00f1ar tu sitio \u00abde adelante hacia atr\u00e1s\u00bb<\/li>\n
- Puedes habilitar la cabecera adhesiva s\u00f3lo en las p\u00e1ginas que selecciones, lo que puede resultar \u00fatil si tienes p\u00e1ginas de aterrizaje<\/a> u otros contenidos inadecuados.<\/li>\n<\/ul>\n
Sticky Menu & Sticky Header tambi\u00e9n incluye un modo de depuraci\u00f3n, para ayudarte a arreglar cualquier elemento \u00abno adhesivo\u00bb. El modo din\u00e1mico tambi\u00e9n te ayudar\u00e1 a solucionar los problemas de los dise\u00f1os responsivos.<\/p>\n
La mejor noticia es que Sticky Menu & Sticky Header se puede descargar y utilizar gratuitamente. Es m\u00e1s, hay una versi\u00f3n premium<\/a> que elimina m\u00e1s conocimientos t\u00e9cnicos que necesitas.<\/p>\nCon la versi\u00f3n gratuita del plugin, necesitar\u00e1s conocer el selector del elemento para especificarlo en las opciones. Sin embargo, la versi\u00f3n premium (49-199$ al a\u00f1o) ofrece un selector de elementos visual para evitar esto.<\/p>\n
2. Opciones de Twenty Twenty-One<\/h3>\n
Aunque no recomendar\u00edamos un tema por defecto de WordPress para la mayor\u00eda de los sitios centrados en el cliente, tienen suficiente en la bolsa para los blogs y tipos de sitios similares.<\/p>\n
Twenty Twenty-One<\/a> es uno de los temas por defecto m\u00e1s destacados en nuestra opini\u00f3n, pero carece de la funcionalidad de cabecera adhesiva. Si quieres a\u00f1adir esta funci\u00f3n, el plugin Options for Twenty Twenty-One<\/a> podr\u00eda conseguir lo que necesitas.<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/options-twenty-twenty-one.png\")
El plugin Opciones para Twenty Twenty-One.<\/figcaption><\/figure>\nEsta edici\u00f3n del plugin es una de tantas. Cada tema por defecto reciente tiene una versi\u00f3n, pero todav\u00eda no hay una para Twenty Twenty-Two<\/a>. En cualquier caso, la funcionalidad principal del plugin ofrece un mont\u00f3n de extras:<\/p>\n\n- Hay una herramienta de edici\u00f3n completa del sitio (FSE)<\/a>, lista para su despliegue completo.<\/li>\n
- Puedes cambiar el tama\u00f1o de la fuente del cuerpo, eliminar los subrayados de los hiperv\u00ednculos y otras personalizaciones sencillas.<\/li>\n
- Puedes trabajar con los anchos m\u00e1ximos de los contenedores y elementos, sin necesidad de c\u00f3digo.<\/li>\n<\/ul>\n
Hay muchas otras opciones para tu navegaci\u00f3n, contenido, pie de p\u00e1gina y cabecera. Para esta \u00faltima, puedes ocultarla de la vista, hacerla de ancho completo, a\u00f1adir una imagen y un color de fondo<\/a>, y muchas otras alteraciones.<\/p>\nAunque el plugin principal es gratuito<\/a>, necesitas una actualizaci\u00f3n premium (25-50$)<\/a> para acceder a las opciones de la cabecera adhesiva. Esto te permite ajustar la configuraci\u00f3n de las cabeceras para m\u00f3viles y para ordenadores de sobremesa desde el personalizador de WordPress:<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-header-customizer.png\")
El Personalizador de WordPress, mostrando las opciones de cabecera adhesiva.<\/figcaption><\/figure>\nDado el nombre, no deber\u00edas esperar que este plugin funcione con otro tema que no sea Twenty Twenty-One (o el \u00absabor\u00bb que elijas). Sin embargo, si utilizas este tema por defecto y no quieres codificar, ser\u00e1 ideal para ayudarte a a\u00f1adir una cabecera adhesiva a tu sitio.<\/p>\n
3. Barra de notificaciones flotante, men\u00fa adhesivo al desplazarse y cabecera adhesiva para cualquier tema – myStickymenu<\/h3>\n
Este es un plugin que pone las cartas sobre la mesa. El plugin myStickymenu<\/a> de Premio ofrece casi todo lo que querr\u00e1s incluir en tu propia cabecera adhesiva, y contiene una gran cantidad de funcionalidades.<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/mystickymenu-plugin.png\")
El plugin myStickymenu.<\/figcaption><\/figure>\nTiene un n\u00famero asombroso de opiniones positivas en el Directorio de plugins de WordPress<\/a>: 799 opiniones de cinco estrellas con una media de 4,9. Parte de esto se debe al amplio conjunto de funciones que tiene a su disposici\u00f3n:<\/p>\n\n- Ofrece flexibilidad de uso. Por ejemplo, puedes crear una barra de bienvenida, as\u00ed como un men\u00fa adhesivo y una cabecera.<\/li>\n
- El plugin se adapta a la capacidad de respuesta de tu sitio. Esto significa que no necesitar\u00e1s implementar m\u00e1s funcionalidades mediante c\u00f3digo.<\/li>\n
- De hecho, el plugin no necesita que sepas codificar para poder utilizarlo al m\u00e1ximo.<\/li>\n
- El plugin myStickymenu es compatible con varios de los principales plugins constructores de p\u00e1ginas, como Elementor<\/a>, Beaver Builder<\/a>, el editor de bloques nativo<\/a>, el constructor Divi<\/a> y muchos m\u00e1s.<\/li>\n<\/ul>\n
Tambi\u00e9n tienes una serie de opciones de personalizaci\u00f3n para hacer que tu cabecera adhesiva funcione como t\u00fa quieras. Por ejemplo, puedes elegir hacer una cabecera parcialmente persistente, cambiar aspectos sencillos como los colores de fondo, las opciones de tipograf\u00eda y mucho m\u00e1s.<\/p>\n
Adem\u00e1s, debido a las diferentes formas en que puedes presentar tu cabecera adhesiva (como las opciones de men\u00fa y barra de bienvenida), puedes elegir c\u00f3mo se muestran, y d\u00f3nde, en tu sitio.<\/p>\n
Aunque la versi\u00f3n gratuita de myStickymenu podr\u00eda ser suficiente para tus necesidades, tambi\u00e9n hay una versi\u00f3n premium (25-99 $ al a\u00f1o) que ofrece m\u00e1s formas de desactivar tu cabecera adhesiva en funci\u00f3n de determinadas condiciones, temporizadores de cuenta atr\u00e1s, la posibilidad de a\u00f1adir varias barras de bienvenida y algunas opciones m\u00e1s de personalizaci\u00f3n.<\/p>\n
\u00bfC\u00f3mo crear una cabecera adhesiva en WordPress?<\/h2>\n
En el resto de este tutorial, vamos a mostrarte c\u00f3mo crear una cabecera adhesiva en WordPress. Hay un par de enfoques que puedes tomar aqu\u00ed, y cubriremos ambos. Sin embargo, nuestro primer paso te ayudar\u00e1 a tomar esa decisi\u00f3n.<\/p>\n
A partir de ah\u00ed, trabajar\u00e1s en tu propia cabecera adhesiva utilizando el m\u00e9todo que prefieras, y luego aplicar\u00e1s algunos de nuestros consejos para que la tuya sea m\u00e1s eficiente y utilizable en el futuro.<\/p>\n
1. Decide \u00bfc\u00f3mo vas a crear tu cabecera adhesiva?<\/h3>\n
Una de las razones por las que WordPress es tan flexible<\/a> para todo tipo de usuarios se debe a su ecosistema de plugins y a su extensibilidad de c\u00f3digo abierto. Por ello, puedes elegir una soluci\u00f3n est\u00e1ndar o crear la tuya propia<\/p>\nTu primera tarea es decidir si quieres utilizar un plugin o profundizar en el c\u00f3digo para implementar tu cabecera adhesiva. Vamos a desglosar las dos soluciones:<\/p>\n
\n- Plugins.<\/strong> Este va a ser un m\u00e9todo aprobado por WordPress<\/a>, especialmente si no tienes conocimientos t\u00e9cnicos a mano. Te ofrecer\u00e1 flexibilidad, pero estar\u00e1s a merced de lo que el desarrollador considere importante, y de su capacidad de codificaci\u00f3n.<\/li>\n
- Codificaci\u00f3n.<\/strong> Si tienes una visi\u00f3n clara en mente, puede que quieras codificar una cabecera adhesiva para tu sitio. Por supuesto, necesitar\u00e1s conocimientos t\u00e9cnicos<\/a> para llevarlo a cabo (principalmente CSS<\/a>), pero los resultados ser\u00e1n exactamente los que deseas. Sin embargo, tendr\u00e1s m\u00e1s mantenimiento potencial que llevar a cabo, y su \u00e9xito depender\u00e1 de tus propias habilidades para codificar.<\/li>\n<\/ul>\n
Dir\u00edamos que para la mayor\u00eda de los usuarios de WordPress, un plugin ser\u00e1 la soluci\u00f3n ideal para crear una cabecera adhesiva. Va a funcionar bien con la plataforma y es m\u00e1s f\u00e1cil de solucionar si tienes problemas. Sin embargo, en futuros pasos, cubriremos una soluci\u00f3n de codificaci\u00f3n as\u00ed como la opci\u00f3n del plugin.<\/p>\n
2. Elige si vas a modificar tu tema actual o a seleccionar uno dedicado<\/h3>\n
El siguiente aspecto que deber\u00e1s tener en cuenta es si modificas tu tema actual<\/a> o eliges uno que ya tenga la funcionalidad de cabecera adhesiva dentro de su conjunto de caracter\u00edsticas. Esto va a ser importante si tu tema no tiene la funcionalidad para manejar una cabecera adhesiva.<\/p>\nMuchos temas y plugins de construcci\u00f3n de p\u00e1ginas incluyen una opci\u00f3n de cabecera adhesiva, por sus ventajas y para ofrecerte flexibilidad de dise\u00f1o. Ver\u00e1s que algunos de los temas y plugins m\u00e1s grandes y de uso general lo ofrecen de serie, como Elementor<\/a>, Astra<\/a>, Divi, Avada y muchos otros.<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/wordpress-theme-sticky.png\")
La opci\u00f3n de cabecera adhesiva en Elementor.<\/figcaption><\/figure>\nPara tomar esta decisi\u00f3n, deber\u00e1s tener en cuenta algunas cosas sobre tu tema y sitio actuales:<\/p>\n
\n- \u00bfTu sitio tiene ya el aspecto que deseas, o necesita una actualizaci\u00f3n?<\/em><\/li>\n
- \u00bfEs tu tema actual f\u00e1cil de personalizar bajo el cap\u00f3?<\/em> La documentaci\u00f3n del desarrollador deber\u00eda dec\u00edrtelo.<\/li>\n
- \u00bfQuieres una implementaci\u00f3n de cabecera preferida compleja o una m\u00e1s sencilla?<\/em><\/li>\n<\/ul>\n
Seg\u00fan las respuestas que des aqu\u00ed, elegir\u00e1s uno u otro. Si necesitas un nuevo tema, puedes elegir uno que ofrezca la implementaci\u00f3n de cabeceras adhesivas. Sin embargo, si quieres quedarte con tu tema actual, y \u00e9ste a\u00fan no tiene la funcionalidad de cabecera adhesiva, deber\u00e1s arremangarte y seguir uno de los siguientes subpasos.<\/p>\n
2a. Utilizar un plugin con un tema espec\u00edfico<\/h4>\n
Si no tienes experiencia en desarrollo, te recomendamos que elijas un plugin para a\u00f1adir la funcionalidad de cabecera adhesiva a tu sitio. Hay demasiadas variables que debes considerar, construir y mantener. Por el contrario, un plugin ya tendr\u00e1 una base de c\u00f3digo que hace un gui\u00f1o a estos elementos, por lo que ofrecer\u00e1 una opci\u00f3n casi ideal para la mayor\u00eda de las circunstancias.<\/p>\n
Para esta parte del tutorial, vamos a utilizar el plugin myStickymenu, ya que \u00e9ste ofrece un conjunto de funciones completo y rico para la mayor\u00eda de los casos de uso. Sin embargo, el uso general ser\u00e1 el mismo para la mayor\u00eda de los plugins que utilizar\u00e1s.<\/p>\n
Una vez que instales y actives tu plugin<\/a>, tendr\u00e1s que dirigirte a las opciones del tema. Para algunos plugins, esto ser\u00e1 dentro del Personalizador de WordPress; para otros, un panel de administraci\u00f3n dedicado. En este caso, utilizar\u00e1s un panel de administraci\u00f3n personalizado en myStickymenu > Dashboard<\/strong> dentro de WordPress:<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/plugin-admin-panel.png\")
El panel de administraci\u00f3n de myStickymenu dentro de WordPress.<\/figcaption><\/figure>\nSin embargo, la pantalla por defecto muestra la configuraci\u00f3n de la barra de bienvenida, que para este tutorial, no queremos. Por lo tanto, haz clic en el bot\u00f3n de alternancia para desactivar la barra, y haz clic en la pantalla de configuraci\u00f3n del men\u00fa adhesivo<\/strong>:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-menu-settings.png\")
La pantalla de configuraci\u00f3n del men\u00fa Sticky.<\/figcaption><\/figure>\nAunque hay muchas opciones aqu\u00ed, s\u00f3lo necesitas el panel de Clase<\/strong> Adhesiva<\/strong>. Una vez que actives la cabecera adhesiva, introduce la etiqueta HTML correspondiente a tu cabecera en el campo correspondiente que coincide con el men\u00fa desplegable Otra clase o ID<\/strong>:<\/p>\n![\"Cambiando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/sticky-class-dropdown.png\")
Cambiando la etiqueta selectora HTML dentro del plugin myStickymenu.<\/figcaption><\/figure>\nUna vez que guardes los cambios, esto se aplicar\u00e1 a tu sitio. A partir de ah\u00ed, puedes investigar algunas de las funcionalidades de estilo. Por ejemplo, puedes establecer un efecto de transici\u00f3n de desvanecimiento o deslizamiento, establecer el \u00edndice z<\/strong>, trabajar con opacidades, colores y tiempos de transici\u00f3n, junto con toda una serie de otras opciones.<\/p>\n2b. Escribe el c\u00f3digo para crear tu cabecera adhesiva<\/h4>\n
Casi no hace falta decir que esta secci\u00f3n es para los que tienen experiencia en desarrollo. M\u00e1s adelante ver\u00e1s que el c\u00f3digo en s\u00ed es tan sencillo que resulta dif\u00edcil de creer. Sin embargo, dado el trabajo adicional, el mantenimiento y la conservaci\u00f3n general para crear una cabecera adhesiva personalizada, necesitar\u00e1s recurrir tambi\u00e9n a otros aspectos de tu experiencia.<\/p>\n
Sin embargo, antes de empezar, necesitar\u00e1s lo siguiente:<\/p>\n
\n- Un editor de c\u00f3digo decente<\/a>, aunque en este caso (y dependiendo de la implementaci\u00f3n) podr\u00edas utilizar un editor de texto predeterminado del sistema operativo (SO).<\/li>\n
- Necesitar\u00e1s acceso a los archivos de tu sitio<\/a>, de los que deber\u00edas hacer una copia de seguridad<\/a> y luego descargarlos en un entorno de desarrollo local de WordPress<\/a>.<\/li>\n<\/ul>\n
Conviene repetir que no debes trabajar en los archivos de tu sitio en vivo. En su lugar, trabaja en un entorno de staging<\/a> o en una configuraci\u00f3n local<\/a>, y luego sube los archivos a tu servidor activo despu\u00e9s de probar las cosas.<\/p>\nTambi\u00e9n querr\u00e1s usar un tema secundario<\/a> para esto, ya que est\u00e1s haciendo cambios personalizados en tu tema padre. Esto te ayuda a organizar tu c\u00f3digo y a asegurarte de que cualquier cambio (literalmente) se mantiene si el tema recibe una actualizaci\u00f3n.<\/p>\nImplementaci\u00f3n de una cabecera adhesiva mediante c\u00f3digo: Encontrar las etiquetas de cabecera correctas<\/h4>\n
Con todo esto en mente, puedes empezar. El primer trabajo es descubrir las etiquetas HTML adecuadas para tu navegaci\u00f3n. El resultado aqu\u00ed depender\u00e1 del tema que utilices, aunque la etiqueta de cabecera<\/strong> es una apuesta segura para la mayor\u00eda de los casos. La mejor manera de averiguarlo es utilizar las herramientas de desarrollo de tu navegador<\/a> y seleccionar la cabecera:<\/p>\n![\"La](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/inspect-element.png\")
La herramienta de inspecci\u00f3n de elementos muestra el sitio Kinsta y la etiqueta.<\/figcaption><\/figure>\nEs probable que descubras que no es tan sencillo como una etiqueta, as\u00ed que te sugerimos que eches un vistazo a la documentaci\u00f3n de tu tema (o que hables directamente con el desarrollador) para averiguar las etiquetas<\/a> que necesitas si tienes problemas.<\/p>\nImplementaci\u00f3n de una cabecera adhesiva mediante c\u00f3digo: Trabajando con tus hojas de estilo<\/h4>\n
A continuaci\u00f3n, debes crear o abrir un archivo style.css<\/strong> dentro del directorio de tu tema secundario. Esto a\u00f1adir\u00e1 tu CSS al de la instalaci\u00f3n principal, y donde se repitan las etiquetas, lo anular\u00e1.<\/p>\nDentro de este archivo, a\u00f1ade los metadatos t\u00edpicos<\/a> que necesitas para registrar el tema secundario:<\/p>\n![\"Crear](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/style-css-child.png\")
Crear un tema hijo con Onivim2.<\/figcaption><\/figure>\nA continuaci\u00f3n, querr\u00e1s a\u00f1adir c\u00f3digo para habilitar tu cabecera adhesiva. Esto requerir\u00e1 alg\u00fan conocimiento de la herencia CSS, y dependiendo del tema que utilices, podr\u00eda ser una experiencia exasperante.<\/p>\n
Por ejemplo, el tema Twenty Twenty-Two utiliza dos etiquetas de cabecera, y puede ser dif\u00edcil encontrar la mezcla correcta de CSS para que tu c\u00f3digo funcione en el elemento correcto. Esto ocurre incluso con el di\u00e1logo de clase de plantilla dentro del Editor de bloques (si utilizas la funcionalidad FSE<\/a>):<\/p>\n![\"El](\"https:\/\/kinsta.com\/wp-content\/uploads\/2022\/05\/supersticky.png\")
El Inspector de Brave muestra m\u00faltiples etiquetas de cabecera para el tema Twenty Twenty-Two.<\/figcaption><\/figure>\nEn cualquier caso, el c\u00f3digo que necesitas ser\u00e1 el mismo:<\/p>\n
Akhil Arjun<\/a> ofrece una soluci\u00f3n de dos l\u00edneas para esto:<\/p>\n\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nSin embargo, tambi\u00e9n puedes considerar el uso de la propiedad position: fixed<\/strong>, que utiliza unas pocas l\u00edneas m\u00e1s de c\u00f3digo:<\/p>\n\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0; \n\n}\n<\/code><\/pre>\nEsto utiliza z-index<\/strong> para llevar la cabecera a la parte delantera de la pila, y luego un atributo fijo para hacer que permanezca en la parte superior de la pantalla.<\/p>\nTen en cuenta que puede que tengas que a\u00f1adir una nueva clase aqu\u00ed, para aplicar el encabezado fijo. En cualquier caso, esto deber\u00eda implementar los huesos de tu cabecera adhesiva. Una vez que tengas esto claro, querr\u00e1s seguir trabajando en el dise\u00f1o para que funcione con el resto de tu sitio.<\/p>\n
Consejos para que tus cabeceras adhesivas sean m\u00e1s eficaces<\/h2>\n
Una vez que tengas un m\u00e9todo para crear una cabecera adhesiva, querr\u00e1s averiguar c\u00f3mo puedes perfeccionarla. Hay muchas maneras de mejorar el dise\u00f1o b\u00e1sico y asegurarse de que sirve a las necesidades de los visitantes de tu sitio.<\/p>\n
Una buena analog\u00eda para tu propia cabecera adhesiva es asegurarte de que es como un buen \u00e1rbitro deportivo. La mayor parte del tiempo, no sabr\u00e1s que est\u00e1n ah\u00ed. Sin embargo, cuando un jugador o entrenador los necesite, har\u00e1n una llamada y se har\u00e1n presentes.<\/p>\n
Tu cabecera adhesiva debe hacer lo mismo: permanecer en la sombra, o fuera de la mente, hasta que el usuario la necesite. Puedes conseguirlo con unas cuantas reglas generales que (como siempre) puedes elegir romper si el dise\u00f1o lo requiere:<\/p>\n
\n- Mantenlo compacto. <\/strong>El espacio en la pantalla va a ser muy importante, as\u00ed que procura que la cabecera sea peque\u00f1a. Podr\u00edas implementar una soluci\u00f3n en la que tu cabecera se escalara de forma din\u00e1mica, en funci\u00f3n de la zona del sitio en la que aparezca.<\/li>\n
- Utiliza cabeceras y men\u00fas ocultos en pantallas peque\u00f1as.<\/strong> Por extensi\u00f3n, podr\u00edas optar por ocultar un men\u00fa, como en el ejemplo anterior de Hammerhead. Esto ayuda a mantener la cabecera compacta, y enlaza con el siguiente punto.<\/li>\n
- Aseg\u00farate de no introducir distracciones.<\/strong> Cuanto mayor sea el n\u00famero de elementos en pantalla, m\u00e1s competir\u00e1n por la atenci\u00f3n. Si la cabecera pegajosa no necesita mostrar un elemento, elim\u00ednalo: el contenido del cuerpo lo agradecer\u00e1, al igual que tus m\u00e9tricas.<\/li>\n
- Ofrece contraste. <\/strong>Este es un truco del libro de jugadas de las llamadas a la acci\u00f3n (CTA). Si utilizas el contraste para la cabecera adhesiva en su conjunto, y para sus elementos individuales, puedes atraer la mirada hacia donde la necesitas, o empujarla hacia otra parte.<\/li>\n<\/ul>\n
En general, tu cabecera adhesiva s\u00f3lo har\u00e1 lo que necesites, y no m\u00e1s. A veces tendr\u00e1s que mantener las cosas al m\u00ednimo, otras veces lo llenar\u00e1s de enlaces, logotipos y formularios de inscripci\u00f3n<\/a>. En cualquier caso, si tienes en cuenta la UX y la UI, siempre tomar\u00e1s una decisi\u00f3n centrada en el usuario.<\/p>\n\nResumen<\/h2>\n
La usabilidad y la UX de tu sitio web son tan importantes que deber\u00edan ser lo primero, lo segundo y lo tercero en lo que te fijes cuando lo dise\u00f1es y construyas. La navegaci\u00f3n de tu sitio es s\u00f3lo un aspecto de ello, pero tienes que averiguar la mejor manera de hacer que un usuario se mueva por tu sitio sin complicaciones. Una cabecera adhesiva es una buena manera de conseguirlo.<\/p>\n
La parte de la cabecera de tu sitio es algo as\u00ed como el mostrador de informaci\u00f3n de tu sitio. Va a ser algo que la mayor\u00eda de los usuarios ver\u00e1n en primer lugar, y siempre ser\u00e1 un lugar en el que mirar\u00e1n para encontrar algunas piezas clave de informaci\u00f3n, y realizar ciertas acciones:<\/p>\n
- \n
- Por ejemplo, tu logotipo o el nombre del sitio estar\u00e1n aqu\u00ed, lo que sirve de punto de partida para tus usuarios. En la mayor\u00eda de los casos, podr\u00e1n volver a la p\u00e1gina de inicio haciendo clic en el logotipo.<\/li>\n
- Si tienes cuentas de usuario<\/a> en tu sitio, la cabecera suele ofrecer un enlace para acceder a esas p\u00e1ginas de cuenta y perfil.<\/li>\n
- Aqu\u00ed puede haber una funcionalidad de b\u00fasqueda<\/a>, especialmente si tienes un sitio grande con mucho contenido en diferentes \u00e1reas.<\/li>\n
- Por supuesto, la navegaci\u00f3n de tu sitio<\/a> tambi\u00e9n es una parte integral de la cabecera.<\/li>\n<\/ul>\n
En general, tu cabecera es un punto de contacto para los usuarios. Ver\u00e1s que a menudo es la \u00abbarra\u00bb de los patrones de lectura en forma de F<\/a>, por lo que llama la atenci\u00f3n de tus usuarios a nivel intuitivo.<\/p>\n
Es probable que ya sepas lo que es una cabecera adhes\u00edva, incluso en un sentido intuitivo. Es cuando la secci\u00f3n de la cabecera de tu sitio se \u00abpega\u00bb a la parte superior de la pantalla mientras te desplazas. A diferencia de una cabecera est\u00e1tica, que permanece en su sitio y desaparece cuando te desplazas, la cabecera adhesiva es un elemento siempre visible.<\/p>\n
Aunque el enfoque t\u00edpico para una cabecera adhesiva es fijar una versi\u00f3n est\u00e1tica de la misma en la parte superior de la pantalla, hay algunas formas diferentes de hacerla m\u00e1s usable, eficiente en la pantalla y din\u00e1mica. A continuaci\u00f3n, veremos algunos ejemplos del mundo real.<\/p>\n\n
Ejemplos de cabeceras adhesivas en la web<\/h2>\n
Encontrar\u00e1s cabeceras adhesivas por toda la web, y es una buena idea comprobar algunas para ver el alcance de lo que puedes conseguir. Uno de los ejemplos m\u00e1s b\u00e1sicos es el de Hammerhead<\/a>. Este sitio utiliza un \u00abmen\u00fa desplegable\u00bb y una cabecera adhesiva, y es sencillo: Se compromete a mantenerse en la parte superior de la p\u00e1gina en su dise\u00f1o est\u00e1tico:<\/p>\n
La cabecera adhesiva del sitio Hammerhead.<\/figcaption><\/figure>\n Otra implementaci\u00f3n sencilla es la de Kin<\/a>. Utiliza la t\u00edpica cabecera adhesiva, pero esta vez con unos cuantos elementos de dise\u00f1o geniales.<\/p>\n
Ver\u00e1s que el contraste cambia en funci\u00f3n de la parte de la web por la que te desplaces, y tambi\u00e9n hay unos bonitos efectos de transici\u00f3n:<\/p>\n
La cabecera adhesiva del sitio web de Kin.<\/figcaption><\/figure>\n No podemos terminar esta secci\u00f3n sin mencionar la cabecera adhesiva de Kinsta<\/a>. Tambi\u00e9n mantiene las cosas sencillas en lo que respecta a los elementos de la cabecera, pero incluye un bonito toque de usabilidad que ofrece valor al visitante:<\/p>\n
La cabecera adhesiva del sitio web de Kinsta.<\/figcaption><\/figure>\n Esta vez, ver\u00e1s que la cabecera desaparece cuando te desplaces por la p\u00e1gina. Sin embargo, volver\u00e1 a aparecer cuando te desplaces de nuevo hacia arriba – puedes referirte a \u00e9l como un \u00abencabezado parcialmente persistente\u00bb<\/p>\n
La premisa aqu\u00ed es que desplazarse hacia abajo significa que est\u00e1s invirtiendo tu tiempo en la propia p\u00e1gina, por lo que probablemente no necesitar\u00e1s la navegaci\u00f3n, las p\u00e1ginas de inicio de sesi\u00f3n o dirigirte a otra parte. Sin embargo, en el momento en que te desplazas hacia arriba, es m\u00e1s probable que quieras dirigirte a otra p\u00e1gina del sitio. En este caso, la cabecera adhesiva aparecer\u00e1 para salvar el d\u00eda.<\/p>\n
Son estos peque\u00f1os toques de experiencia de usuario (UX) los que hacen que los visitantes quieran volver al sitio. Para tus propios dise\u00f1os de cabecera adhesiva, deber\u00e1s tener en cuenta lo que puedes hacer para crear una UX y una UI que se centren en las necesidades del visitante.<\/p>\n
\u00bfPor qu\u00e9 deber\u00edas utilizar una cabecera adhesiva para tu sitio web?<\/h2>\n
Muchos sitios utilizan cabeceras adhesivas, y hay muchas buenas razones para ello. Pueden ser partes cruciales de la experiencia general de tu sitio y tienen mucha influencia en tu UX y UI.<\/p>\n
Dado que los elementos que incluir\u00e1s en una cabecera son aquellos a los que el usuario siempre querr\u00e1 acceder, tiene sentido tenerlos siempre a la vista. Esto es especialmente cierto para los dispositivos y formatos de pantalla m\u00e1s peque\u00f1os<\/a>.<\/p>\n
Aunque pueda parecer contradictorio tener una cabecera \u00absiempre activa\u00bb cuando el espacio de la ventana gr\u00e1fica es escaso, se trata de un peque\u00f1o sacrificio. El verdadero beneficio es dar al usuario m\u00f3vil menos razones para desplazarse, algo necesario en los dispositivos m\u00e1s peque\u00f1os. Si puedes proporcionar la navegaci\u00f3n de tu sitio sin necesidad de desplazarse, el usuario podr\u00e1 moverse por tu sitio con mayor facilidad.<\/p>\n
Ventajas e inconvenientes de las cabeceras adhesivas<\/h3>\n
Hemos cubierto algunos de los puntos positivos de las cabeceras adhesivas, as\u00ed que vamos a resumirlos r\u00e1pidamente:<\/p>\n
- \n
- Puedes ofrecer una navegaci\u00f3n a la que el usuario pueda acceder siempre, lo que ayuda a preservar el patr\u00f3n de lectura natural de tu sitio.<\/li>\n
- Puedes adaptar la cabecera a diferentes necesidades<\/a>, como contrastes, esquemas de color o incluso la intenci\u00f3n del usuario.<\/li>\n
- Existe la oportunidad de ofrecer valor al usuario, tanto para el escritorio como para las pantallas m\u00e1s peque\u00f1as.<\/li>\n<\/ul>\n
Sin embargo, una cabecera adhesiva no es la panacea para aumentar la UX, y hay algunos inconvenientes en su uso:<\/p>\n
- \n
- Esto lo cubrimos brevemente, pero para pantallas de todos los tama\u00f1os, tendr\u00e1s que asignar espacio a tu cabecera.<\/li>\n
- Una cabecera adhesiva restar\u00e1 naturalmente importancia al resto de tu contenido, porque sus propios elementos desviar\u00e1n la mirada del cuerpo de la p\u00e1gina.<\/li>\n
- Hay m\u00e1s trabajo de desarrollo en una buena cabecera adhesiva porque tienes que implementarla, asegurarte de que funciona en diferentes navegadores y comprobar que no haya errores en las pantallas m\u00e1s peque\u00f1as.<\/li>\n<\/ul>\n
Sin embargo, si piensas en tus elecciones de dise\u00f1o, en las necesidades de los usuarios y en los objetivos del sitio, puedes mitigar o eliminar todos estos inconvenientes, mientras mantienes los puntos buenos. Una forma de hacerlo es mediante los plugins de WordPress.<\/p>\n
3 plugins para ayudarte a crear cabeceras adhesivas<\/h2>\n
En las pr\u00f3ximas secciones, mostraremos algunos de los principales plugins de cabeceras adhesivas para WordPress. M\u00e1s adelante, hablaremos de si este tipo de soluci\u00f3n es adecuada para ti. En cualquier caso, un plugin puede ayudarte a implementar la funcionalidad sin necesidad de c\u00f3digo, lo cual es valioso si tu tema<\/a> no lo incluye.<\/p>\n
Adem\u00e1s, puedes aprovechar la experiencia de dise\u00f1o y desarrollo de un experto a trav\u00e9s del plugin. Los desarrolladores tomar\u00e1n algunas de las decisiones t\u00e9cnicas m\u00e1s importantes por ti, y lo envolver\u00e1n en una interfaz de usuario intuitiva y f\u00e1cil de usar.<\/p>\n
1. Men\u00fa adhesivo y cabecera adhesiva<\/h3>\n
El plugin Sticky Menu & Sticky Header<\/a> de Webfactory es una buena primera opci\u00f3n, debido a su gran cantidad de funciones, su \u00fatil flexibilidad y su precio asequible.<\/p>\n
El plugin Sticky Menu & Sticky Header.<\/figcaption><\/figure>\n La atracci\u00f3n aqu\u00ed es que puedes hacer que cualquier elemento de tu sitio se pegue a la pantalla. Esto puede ser \u00fatil de muchas maneras, pero significa que implementar una cabecera adhesiva es un juego de ni\u00f1os.<\/p>\n
El plugin tambi\u00e9n viene con una serie de potentes opciones que te ayudar\u00e1n a implementar una cabecera adhesiva:<\/p>\n
- \n
- Puedes establecer el nivel deseado de posicionamiento \u00absuperior\u00bb. Esto significa que puedes a\u00f1adir espacio al \u00e1rea por encima de la cabecera para que se ajuste a tus objetivos de dise\u00f1o.<\/li>\n
- Tambi\u00e9n hay otras opciones de posicionamiento, como utilizar la propiedad CSS z-index<\/a> para dise\u00f1ar tu sitio \u00abde adelante hacia atr\u00e1s\u00bb<\/li>\n
- Puedes habilitar la cabecera adhesiva s\u00f3lo en las p\u00e1ginas que selecciones, lo que puede resultar \u00fatil si tienes p\u00e1ginas de aterrizaje<\/a> u otros contenidos inadecuados.<\/li>\n<\/ul>\n
Sticky Menu & Sticky Header tambi\u00e9n incluye un modo de depuraci\u00f3n, para ayudarte a arreglar cualquier elemento \u00abno adhesivo\u00bb. El modo din\u00e1mico tambi\u00e9n te ayudar\u00e1 a solucionar los problemas de los dise\u00f1os responsivos.<\/p>\n
La mejor noticia es que Sticky Menu & Sticky Header se puede descargar y utilizar gratuitamente. Es m\u00e1s, hay una versi\u00f3n premium<\/a> que elimina m\u00e1s conocimientos t\u00e9cnicos que necesitas.<\/p>\n
Con la versi\u00f3n gratuita del plugin, necesitar\u00e1s conocer el selector del elemento para especificarlo en las opciones. Sin embargo, la versi\u00f3n premium (49-199$ al a\u00f1o) ofrece un selector de elementos visual para evitar esto.<\/p>\n
2. Opciones de Twenty Twenty-One<\/h3>\n
Aunque no recomendar\u00edamos un tema por defecto de WordPress para la mayor\u00eda de los sitios centrados en el cliente, tienen suficiente en la bolsa para los blogs y tipos de sitios similares.<\/p>\n
Twenty Twenty-One<\/a> es uno de los temas por defecto m\u00e1s destacados en nuestra opini\u00f3n, pero carece de la funcionalidad de cabecera adhesiva. Si quieres a\u00f1adir esta funci\u00f3n, el plugin Options for Twenty Twenty-One<\/a> podr\u00eda conseguir lo que necesitas.<\/p>\n
El plugin Opciones para Twenty Twenty-One.<\/figcaption><\/figure>\n Esta edici\u00f3n del plugin es una de tantas. Cada tema por defecto reciente tiene una versi\u00f3n, pero todav\u00eda no hay una para Twenty Twenty-Two<\/a>. En cualquier caso, la funcionalidad principal del plugin ofrece un mont\u00f3n de extras:<\/p>\n
- \n
- Hay una herramienta de edici\u00f3n completa del sitio (FSE)<\/a>, lista para su despliegue completo.<\/li>\n
- Puedes cambiar el tama\u00f1o de la fuente del cuerpo, eliminar los subrayados de los hiperv\u00ednculos y otras personalizaciones sencillas.<\/li>\n
- Puedes trabajar con los anchos m\u00e1ximos de los contenedores y elementos, sin necesidad de c\u00f3digo.<\/li>\n<\/ul>\n
Hay muchas otras opciones para tu navegaci\u00f3n, contenido, pie de p\u00e1gina y cabecera. Para esta \u00faltima, puedes ocultarla de la vista, hacerla de ancho completo, a\u00f1adir una imagen y un color de fondo<\/a>, y muchas otras alteraciones.<\/p>\n
Aunque el plugin principal es gratuito<\/a>, necesitas una actualizaci\u00f3n premium (25-50$)<\/a> para acceder a las opciones de la cabecera adhesiva. Esto te permite ajustar la configuraci\u00f3n de las cabeceras para m\u00f3viles y para ordenadores de sobremesa desde el personalizador de WordPress:<\/p>\n
El Personalizador de WordPress, mostrando las opciones de cabecera adhesiva.<\/figcaption><\/figure>\n Dado el nombre, no deber\u00edas esperar que este plugin funcione con otro tema que no sea Twenty Twenty-One (o el \u00absabor\u00bb que elijas). Sin embargo, si utilizas este tema por defecto y no quieres codificar, ser\u00e1 ideal para ayudarte a a\u00f1adir una cabecera adhesiva a tu sitio.<\/p>\n
3. Barra de notificaciones flotante, men\u00fa adhesivo al desplazarse y cabecera adhesiva para cualquier tema – myStickymenu<\/h3>\n
Este es un plugin que pone las cartas sobre la mesa. El plugin myStickymenu<\/a> de Premio ofrece casi todo lo que querr\u00e1s incluir en tu propia cabecera adhesiva, y contiene una gran cantidad de funcionalidades.<\/p>\n
El plugin myStickymenu.<\/figcaption><\/figure>\n Tiene un n\u00famero asombroso de opiniones positivas en el Directorio de plugins de WordPress<\/a>: 799 opiniones de cinco estrellas con una media de 4,9. Parte de esto se debe al amplio conjunto de funciones que tiene a su disposici\u00f3n:<\/p>\n
- \n
- Ofrece flexibilidad de uso. Por ejemplo, puedes crear una barra de bienvenida, as\u00ed como un men\u00fa adhesivo y una cabecera.<\/li>\n
- El plugin se adapta a la capacidad de respuesta de tu sitio. Esto significa que no necesitar\u00e1s implementar m\u00e1s funcionalidades mediante c\u00f3digo.<\/li>\n
- De hecho, el plugin no necesita que sepas codificar para poder utilizarlo al m\u00e1ximo.<\/li>\n
- El plugin myStickymenu es compatible con varios de los principales plugins constructores de p\u00e1ginas, como Elementor<\/a>, Beaver Builder<\/a>, el editor de bloques nativo<\/a>, el constructor Divi<\/a> y muchos m\u00e1s.<\/li>\n<\/ul>\n
Tambi\u00e9n tienes una serie de opciones de personalizaci\u00f3n para hacer que tu cabecera adhesiva funcione como t\u00fa quieras. Por ejemplo, puedes elegir hacer una cabecera parcialmente persistente, cambiar aspectos sencillos como los colores de fondo, las opciones de tipograf\u00eda y mucho m\u00e1s.<\/p>\n
Adem\u00e1s, debido a las diferentes formas en que puedes presentar tu cabecera adhesiva (como las opciones de men\u00fa y barra de bienvenida), puedes elegir c\u00f3mo se muestran, y d\u00f3nde, en tu sitio.<\/p>\n
Aunque la versi\u00f3n gratuita de myStickymenu podr\u00eda ser suficiente para tus necesidades, tambi\u00e9n hay una versi\u00f3n premium (25-99 $ al a\u00f1o) que ofrece m\u00e1s formas de desactivar tu cabecera adhesiva en funci\u00f3n de determinadas condiciones, temporizadores de cuenta atr\u00e1s, la posibilidad de a\u00f1adir varias barras de bienvenida y algunas opciones m\u00e1s de personalizaci\u00f3n.<\/p>\n
\u00bfC\u00f3mo crear una cabecera adhesiva en WordPress?<\/h2>\n
En el resto de este tutorial, vamos a mostrarte c\u00f3mo crear una cabecera adhesiva en WordPress. Hay un par de enfoques que puedes tomar aqu\u00ed, y cubriremos ambos. Sin embargo, nuestro primer paso te ayudar\u00e1 a tomar esa decisi\u00f3n.<\/p>\n
A partir de ah\u00ed, trabajar\u00e1s en tu propia cabecera adhesiva utilizando el m\u00e9todo que prefieras, y luego aplicar\u00e1s algunos de nuestros consejos para que la tuya sea m\u00e1s eficiente y utilizable en el futuro.<\/p>\n
1. Decide \u00bfc\u00f3mo vas a crear tu cabecera adhesiva?<\/h3>\n
Una de las razones por las que WordPress es tan flexible<\/a> para todo tipo de usuarios se debe a su ecosistema de plugins y a su extensibilidad de c\u00f3digo abierto. Por ello, puedes elegir una soluci\u00f3n est\u00e1ndar o crear la tuya propia<\/p>\n
Tu primera tarea es decidir si quieres utilizar un plugin o profundizar en el c\u00f3digo para implementar tu cabecera adhesiva. Vamos a desglosar las dos soluciones:<\/p>\n
- \n
- Plugins.<\/strong> Este va a ser un m\u00e9todo aprobado por WordPress<\/a>, especialmente si no tienes conocimientos t\u00e9cnicos a mano. Te ofrecer\u00e1 flexibilidad, pero estar\u00e1s a merced de lo que el desarrollador considere importante, y de su capacidad de codificaci\u00f3n.<\/li>\n
- Codificaci\u00f3n.<\/strong> Si tienes una visi\u00f3n clara en mente, puede que quieras codificar una cabecera adhesiva para tu sitio. Por supuesto, necesitar\u00e1s conocimientos t\u00e9cnicos<\/a> para llevarlo a cabo (principalmente CSS<\/a>), pero los resultados ser\u00e1n exactamente los que deseas. Sin embargo, tendr\u00e1s m\u00e1s mantenimiento potencial que llevar a cabo, y su \u00e9xito depender\u00e1 de tus propias habilidades para codificar.<\/li>\n<\/ul>\n
Dir\u00edamos que para la mayor\u00eda de los usuarios de WordPress, un plugin ser\u00e1 la soluci\u00f3n ideal para crear una cabecera adhesiva. Va a funcionar bien con la plataforma y es m\u00e1s f\u00e1cil de solucionar si tienes problemas. Sin embargo, en futuros pasos, cubriremos una soluci\u00f3n de codificaci\u00f3n as\u00ed como la opci\u00f3n del plugin.<\/p>\n
2. Elige si vas a modificar tu tema actual o a seleccionar uno dedicado<\/h3>\n
El siguiente aspecto que deber\u00e1s tener en cuenta es si modificas tu tema actual<\/a> o eliges uno que ya tenga la funcionalidad de cabecera adhesiva dentro de su conjunto de caracter\u00edsticas. Esto va a ser importante si tu tema no tiene la funcionalidad para manejar una cabecera adhesiva.<\/p>\n
Muchos temas y plugins de construcci\u00f3n de p\u00e1ginas incluyen una opci\u00f3n de cabecera adhesiva, por sus ventajas y para ofrecerte flexibilidad de dise\u00f1o. Ver\u00e1s que algunos de los temas y plugins m\u00e1s grandes y de uso general lo ofrecen de serie, como Elementor<\/a>, Astra<\/a>, Divi, Avada y muchos otros.<\/p>\n
La opci\u00f3n de cabecera adhesiva en Elementor.<\/figcaption><\/figure>\n Para tomar esta decisi\u00f3n, deber\u00e1s tener en cuenta algunas cosas sobre tu tema y sitio actuales:<\/p>\n
- \n
- \u00bfTu sitio tiene ya el aspecto que deseas, o necesita una actualizaci\u00f3n?<\/em><\/li>\n
- \u00bfEs tu tema actual f\u00e1cil de personalizar bajo el cap\u00f3?<\/em> La documentaci\u00f3n del desarrollador deber\u00eda dec\u00edrtelo.<\/li>\n
- \u00bfQuieres una implementaci\u00f3n de cabecera preferida compleja o una m\u00e1s sencilla?<\/em><\/li>\n<\/ul>\n
Seg\u00fan las respuestas que des aqu\u00ed, elegir\u00e1s uno u otro. Si necesitas un nuevo tema, puedes elegir uno que ofrezca la implementaci\u00f3n de cabeceras adhesivas. Sin embargo, si quieres quedarte con tu tema actual, y \u00e9ste a\u00fan no tiene la funcionalidad de cabecera adhesiva, deber\u00e1s arremangarte y seguir uno de los siguientes subpasos.<\/p>\n
2a. Utilizar un plugin con un tema espec\u00edfico<\/h4>\n
Si no tienes experiencia en desarrollo, te recomendamos que elijas un plugin para a\u00f1adir la funcionalidad de cabecera adhesiva a tu sitio. Hay demasiadas variables que debes considerar, construir y mantener. Por el contrario, un plugin ya tendr\u00e1 una base de c\u00f3digo que hace un gui\u00f1o a estos elementos, por lo que ofrecer\u00e1 una opci\u00f3n casi ideal para la mayor\u00eda de las circunstancias.<\/p>\n
Para esta parte del tutorial, vamos a utilizar el plugin myStickymenu, ya que \u00e9ste ofrece un conjunto de funciones completo y rico para la mayor\u00eda de los casos de uso. Sin embargo, el uso general ser\u00e1 el mismo para la mayor\u00eda de los plugins que utilizar\u00e1s.<\/p>\n
Una vez que instales y actives tu plugin<\/a>, tendr\u00e1s que dirigirte a las opciones del tema. Para algunos plugins, esto ser\u00e1 dentro del Personalizador de WordPress; para otros, un panel de administraci\u00f3n dedicado. En este caso, utilizar\u00e1s un panel de administraci\u00f3n personalizado en myStickymenu > Dashboard<\/strong> dentro de WordPress:<\/p>\n
El panel de administraci\u00f3n de myStickymenu dentro de WordPress.<\/figcaption><\/figure>\n Sin embargo, la pantalla por defecto muestra la configuraci\u00f3n de la barra de bienvenida, que para este tutorial, no queremos. Por lo tanto, haz clic en el bot\u00f3n de alternancia para desactivar la barra, y haz clic en la pantalla de configuraci\u00f3n del men\u00fa adhesivo<\/strong>:<\/p>\n
La pantalla de configuraci\u00f3n del men\u00fa Sticky.<\/figcaption><\/figure>\n Aunque hay muchas opciones aqu\u00ed, s\u00f3lo necesitas el panel de Clase<\/strong> Adhesiva<\/strong>. Una vez que actives la cabecera adhesiva, introduce la etiqueta HTML correspondiente a tu cabecera en el campo correspondiente que coincide con el men\u00fa desplegable Otra clase o ID<\/strong>:<\/p>\n
Cambiando la etiqueta selectora HTML dentro del plugin myStickymenu.<\/figcaption><\/figure>\n Una vez que guardes los cambios, esto se aplicar\u00e1 a tu sitio. A partir de ah\u00ed, puedes investigar algunas de las funcionalidades de estilo. Por ejemplo, puedes establecer un efecto de transici\u00f3n de desvanecimiento o deslizamiento, establecer el \u00edndice z<\/strong>, trabajar con opacidades, colores y tiempos de transici\u00f3n, junto con toda una serie de otras opciones.<\/p>\n
2b. Escribe el c\u00f3digo para crear tu cabecera adhesiva<\/h4>\n
Casi no hace falta decir que esta secci\u00f3n es para los que tienen experiencia en desarrollo. M\u00e1s adelante ver\u00e1s que el c\u00f3digo en s\u00ed es tan sencillo que resulta dif\u00edcil de creer. Sin embargo, dado el trabajo adicional, el mantenimiento y la conservaci\u00f3n general para crear una cabecera adhesiva personalizada, necesitar\u00e1s recurrir tambi\u00e9n a otros aspectos de tu experiencia.<\/p>\n
Sin embargo, antes de empezar, necesitar\u00e1s lo siguiente:<\/p>\n
- \n
- Un editor de c\u00f3digo decente<\/a>, aunque en este caso (y dependiendo de la implementaci\u00f3n) podr\u00edas utilizar un editor de texto predeterminado del sistema operativo (SO).<\/li>\n
- Necesitar\u00e1s acceso a los archivos de tu sitio<\/a>, de los que deber\u00edas hacer una copia de seguridad<\/a> y luego descargarlos en un entorno de desarrollo local de WordPress<\/a>.<\/li>\n<\/ul>\n
Conviene repetir que no debes trabajar en los archivos de tu sitio en vivo. En su lugar, trabaja en un entorno de staging<\/a> o en una configuraci\u00f3n local<\/a>, y luego sube los archivos a tu servidor activo despu\u00e9s de probar las cosas.<\/p>\n
Tambi\u00e9n querr\u00e1s usar un tema secundario<\/a> para esto, ya que est\u00e1s haciendo cambios personalizados en tu tema padre. Esto te ayuda a organizar tu c\u00f3digo y a asegurarte de que cualquier cambio (literalmente) se mantiene si el tema recibe una actualizaci\u00f3n.<\/p>\n
Implementaci\u00f3n de una cabecera adhesiva mediante c\u00f3digo: Encontrar las etiquetas de cabecera correctas<\/h4>\n
Con todo esto en mente, puedes empezar. El primer trabajo es descubrir las etiquetas HTML adecuadas para tu navegaci\u00f3n. El resultado aqu\u00ed depender\u00e1 del tema que utilices, aunque la etiqueta de cabecera<\/strong> es una apuesta segura para la mayor\u00eda de los casos. La mejor manera de averiguarlo es utilizar las herramientas de desarrollo de tu navegador<\/a> y seleccionar la cabecera:<\/p>\n
La herramienta de inspecci\u00f3n de elementos muestra el sitio Kinsta y la etiqueta.<\/figcaption><\/figure>\n Es probable que descubras que no es tan sencillo como una etiqueta, as\u00ed que te sugerimos que eches un vistazo a la documentaci\u00f3n de tu tema (o que hables directamente con el desarrollador) para averiguar las etiquetas<\/a> que necesitas si tienes problemas.<\/p>\n
Implementaci\u00f3n de una cabecera adhesiva mediante c\u00f3digo: Trabajando con tus hojas de estilo<\/h4>\n
A continuaci\u00f3n, debes crear o abrir un archivo style.css<\/strong> dentro del directorio de tu tema secundario. Esto a\u00f1adir\u00e1 tu CSS al de la instalaci\u00f3n principal, y donde se repitan las etiquetas, lo anular\u00e1.<\/p>\n
Dentro de este archivo, a\u00f1ade los metadatos t\u00edpicos<\/a> que necesitas para registrar el tema secundario:<\/p>\n
Crear un tema hijo con Onivim2.<\/figcaption><\/figure>\n A continuaci\u00f3n, querr\u00e1s a\u00f1adir c\u00f3digo para habilitar tu cabecera adhesiva. Esto requerir\u00e1 alg\u00fan conocimiento de la herencia CSS, y dependiendo del tema que utilices, podr\u00eda ser una experiencia exasperante.<\/p>\n
Por ejemplo, el tema Twenty Twenty-Two utiliza dos etiquetas de cabecera, y puede ser dif\u00edcil encontrar la mezcla correcta de CSS para que tu c\u00f3digo funcione en el elemento correcto. Esto ocurre incluso con el di\u00e1logo de clase de plantilla dentro del Editor de bloques (si utilizas la funcionalidad FSE<\/a>):<\/p>\n
El Inspector de Brave muestra m\u00faltiples etiquetas de cabecera para el tema Twenty Twenty-Two.<\/figcaption><\/figure>\n En cualquier caso, el c\u00f3digo que necesitas ser\u00e1 el mismo:<\/p>\n
Akhil Arjun<\/a> ofrece una soluci\u00f3n de dos l\u00edneas para esto:<\/p>\n
\n\u200b\u200bheader {\n\n position: sticky; top: 0;\n\n}\n<\/code><\/pre>\nSin embargo, tambi\u00e9n puedes considerar el uso de la propiedad position: fixed<\/strong>, que utiliza unas pocas l\u00edneas m\u00e1s de c\u00f3digo:<\/p>\n
\nheader {\n\n position: fixed;\n\n z-index: 99;\n\n right: 0;\n\n left: 0; \n\n}\n<\/code><\/pre>\nEsto utiliza z-index<\/strong> para llevar la cabecera a la parte delantera de la pila, y luego un atributo fijo para hacer que permanezca en la parte superior de la pantalla.<\/p>\n
Ten en cuenta que puede que tengas que a\u00f1adir una nueva clase aqu\u00ed, para aplicar el encabezado fijo. En cualquier caso, esto deber\u00eda implementar los huesos de tu cabecera adhesiva. Una vez que tengas esto claro, querr\u00e1s seguir trabajando en el dise\u00f1o para que funcione con el resto de tu sitio.<\/p>\n
Consejos para que tus cabeceras adhesivas sean m\u00e1s eficaces<\/h2>\n
Una vez que tengas un m\u00e9todo para crear una cabecera adhesiva, querr\u00e1s averiguar c\u00f3mo puedes perfeccionarla. Hay muchas maneras de mejorar el dise\u00f1o b\u00e1sico y asegurarse de que sirve a las necesidades de los visitantes de tu sitio.<\/p>\n
Una buena analog\u00eda para tu propia cabecera adhesiva es asegurarte de que es como un buen \u00e1rbitro deportivo. La mayor parte del tiempo, no sabr\u00e1s que est\u00e1n ah\u00ed. Sin embargo, cuando un jugador o entrenador los necesite, har\u00e1n una llamada y se har\u00e1n presentes.<\/p>\n
Tu cabecera adhesiva debe hacer lo mismo: permanecer en la sombra, o fuera de la mente, hasta que el usuario la necesite. Puedes conseguirlo con unas cuantas reglas generales que (como siempre) puedes elegir romper si el dise\u00f1o lo requiere:<\/p>\n
- \n
- Mantenlo compacto. <\/strong>El espacio en la pantalla va a ser muy importante, as\u00ed que procura que la cabecera sea peque\u00f1a. Podr\u00edas implementar una soluci\u00f3n en la que tu cabecera se escalara de forma din\u00e1mica, en funci\u00f3n de la zona del sitio en la que aparezca.<\/li>\n
- Utiliza cabeceras y men\u00fas ocultos en pantallas peque\u00f1as.<\/strong> Por extensi\u00f3n, podr\u00edas optar por ocultar un men\u00fa, como en el ejemplo anterior de Hammerhead. Esto ayuda a mantener la cabecera compacta, y enlaza con el siguiente punto.<\/li>\n
- Aseg\u00farate de no introducir distracciones.<\/strong> Cuanto mayor sea el n\u00famero de elementos en pantalla, m\u00e1s competir\u00e1n por la atenci\u00f3n. Si la cabecera pegajosa no necesita mostrar un elemento, elim\u00ednalo: el contenido del cuerpo lo agradecer\u00e1, al igual que tus m\u00e9tricas.<\/li>\n
- Ofrece contraste. <\/strong>Este es un truco del libro de jugadas de las llamadas a la acci\u00f3n (CTA). Si utilizas el contraste para la cabecera adhesiva en su conjunto, y para sus elementos individuales, puedes atraer la mirada hacia donde la necesitas, o empujarla hacia otra parte.<\/li>\n<\/ul>\n
En general, tu cabecera adhesiva s\u00f3lo har\u00e1 lo que necesites, y no m\u00e1s. A veces tendr\u00e1s que mantener las cosas al m\u00ednimo, otras veces lo llenar\u00e1s de enlaces, logotipos y formularios de inscripci\u00f3n<\/a>. En cualquier caso, si tienes en cuenta la UX y la UI, siempre tomar\u00e1s una decisi\u00f3n centrada en el usuario.<\/p>\n\n
Resumen<\/h2>\n
La usabilidad y la UX de tu sitio web son tan importantes que deber\u00edan ser lo primero, lo segundo y lo tercero en lo que te fijes cuando lo dise\u00f1es y construyas. La navegaci\u00f3n de tu sitio es s\u00f3lo un aspecto de ello, pero tienes que averiguar la mejor manera de hacer que un usuario se mueva por tu sitio sin complicaciones. Una cabecera adhesiva es una buena manera de conseguirlo.<\/p>\n
- Utiliza cabeceras y men\u00fas ocultos en pantallas peque\u00f1as.<\/strong> Por extensi\u00f3n, podr\u00edas optar por ocultar un men\u00fa, como en el ejemplo anterior de Hammerhead. Esto ayuda a mantener la cabecera compacta, y enlaza con el siguiente punto.<\/li>\n
- Necesitar\u00e1s acceso a los archivos de tu sitio<\/a>, de los que deber\u00edas hacer una copia de seguridad<\/a> y luego descargarlos en un entorno de desarrollo local de WordPress<\/a>.<\/li>\n<\/ul>\n
- \u00bfEs tu tema actual f\u00e1cil de personalizar bajo el cap\u00f3?<\/em> La documentaci\u00f3n del desarrollador deber\u00eda dec\u00edrtelo.<\/li>\n
- Codificaci\u00f3n.<\/strong> Si tienes una visi\u00f3n clara en mente, puede que quieras codificar una cabecera adhesiva para tu sitio. Por supuesto, necesitar\u00e1s conocimientos t\u00e9cnicos<\/a> para llevarlo a cabo (principalmente CSS<\/a>), pero los resultados ser\u00e1n exactamente los que deseas. Sin embargo, tendr\u00e1s m\u00e1s mantenimiento potencial que llevar a cabo, y su \u00e9xito depender\u00e1 de tus propias habilidades para codificar.<\/li>\n<\/ul>\n
- Plugins.<\/strong> Este va a ser un m\u00e9todo aprobado por WordPress<\/a>, especialmente si no tienes conocimientos t\u00e9cnicos a mano. Te ofrecer\u00e1 flexibilidad, pero estar\u00e1s a merced de lo que el desarrollador considere importante, y de su capacidad de codificaci\u00f3n.<\/li>\n
- Puedes habilitar la cabecera adhesiva s\u00f3lo en las p\u00e1ginas que selecciones, lo que puede resultar \u00fatil si tienes p\u00e1ginas de aterrizaje<\/a> u otros contenidos inadecuados.<\/li>\n<\/ul>\n
- Existe la oportunidad de ofrecer valor al usuario, tanto para el escritorio como para las pantallas m\u00e1s peque\u00f1as.<\/li>\n<\/ul>\n
- Aqu\u00ed puede haber una funcionalidad de b\u00fasqueda<\/a>, especialmente si tienes un sitio grande con mucho contenido en diferentes \u00e1reas.<\/li>\n