Cómo hacer un encabezado fijo en WordPress
Antes de entrar en cómo podemos crear un encabezado fijo en WordPress, primero comprendamos qué son y por qué podemos querer usarlos. Los elementos adhesivos, o elementos fijos, son tipos especiales de elementos que siempre permanecen visibles y no cambian de posición cuando el usuario se desplaza hacia arriba o hacia abajo. Estos elementos son accesibles en cualquier momento debido a su posicionamiento, por lo que son muy útiles para menús u otras opciones de navegación.
Desea brindar a sus usuarios tantas opciones convenientes como sea posible, para que su contenido sea fácilmente accesible y para reducir la frustración del usuario. Con los elementos adhesivos, los usuarios pueden cambiar rápidamente de una página de su sitio web a la siguiente y encontrar exactamente lo que necesitan. Toda esta comodidad y facilidad de uso significa que su experiencia de usuario será mucho mejor y tendrá una mayor retención de usuarios.
Ahora, abordaremos uno de los principales tipos de elementos adhesivos, el encabezado adhesivo y una herramienta increíble que puede ayudarnos a crear y personalizar fácilmente estos elementos. La herramienta en cuestión se llama WP Sticky.
Hay muchas formas diferentes de crear encabezados adhesivos además de WP Sticky. Incluso puede crear estos elementos adhesivos utilizando código HTML y CSS puro, pero eso requiere algunos conocimientos técnicos y es un proceso que consume mucho tiempo. Este complemento es una solución mucho más simple al problema y es extremadamente fácil de usar para principiantes.
Antes de que podamos comenzar a usar WP Sticky, primero debemos descargarlo e instalar el complemento. Como este es un proceso muy sencillo, no perderemos tiempo en él. En su lugar, pasemos directamente a crear nuestro primer encabezado fijo.
Lo primero que debemos hacer es ingresar a la sección de complementos en nuestro panel de administración de WordPress; desde allí, seleccione WP Sticky Pro y luego haga clic en Configuración.
Seremos recibidos con estas opciones donde tendremos que seleccionar Agregar nuevo elemento fijo.
Una vez hecho esto, veremos una nueva entrada en la pestaña Your Sticky Elements llamada Sticky Element #1. Felicitaciones, ha creado su primer elemento adhesivo, pero hay mucho más por hacer antes de que tengamos un encabezado adhesivo funcional. Como puede ver, hay algunas categorías de configuración diferentes para nuestro elemento adhesivo.
Veámoslos con más detalle.
Aquí es donde nombraremos nuestro elemento y elegiremos exactamente lo que queremos hacer pegajoso.
En primer lugar, debemos darle un nombre a nuestro elemento fijo; en este caso, será Sticky Header.
A continuación, debemos ubicar y seleccionar un elemento que queremos hacer adhesivo. Hay dos maneras en que podemos lograr esto.
Selector visual
Esta es la opción más cómoda y sencilla. Simplemente vaya a la sección Básico y seleccione la opción Elegir elemento.
Una vez que haga eso, su sitio web se abrirá junto con el menú WP Sticky en la parte superior, lo que indica que ha ingresado al selector visual. Si pasa el puntero sobre algunos de los elementos, notará un rectángulo de línea discontinua amarillenta, que visualiza el área que ha seleccionado. Haga clic en él con el botón izquierdo del ratón, para seleccionarlo.
Esto lo llevará de vuelta a la página de configuración de WP Sticky, donde verá el identificador único del elemento seleccionado. En nuestro caso, se ve algo como esto.
Luego, haga clic en el botón Guardar cambios en la esquina superior derecha y listo.
Escribir el identificador único
Si lo prefiere y está familiarizado con la ID única del elemento que desea hacer fijo, en lugar de seleccionarlo visualmente, simplemente puede escribir su ID única.
Opciones visuales
Una vez que hayamos terminado de nombrar y seleccionar nuestro elemento, es hora de convertirlo en un encabezado y personalizarlo. WP Sticky nos da bastantes opciones para hacerlo.
Como queremos hacer un encabezado, vamos a dejar esta opción en su estado predeterminado, que es Arriba. En caso de que cambie de opinión o cambien los requisitos, también puede seleccionar la opción Inferior.
Espacio entre la parte superior de la página y el elemento adhesivo
A veces, nuestros elementos adhesivos pueden acercarse demasiado a la parte superior de la página. Podemos corregir esto manualmente escribiendo el número de píxeles entre la parte superior de la página y nuestro elemento adhesivo designado.
Por defecto, esta opción no está configurada ya que la mayoría de los elementos se colocarán correctamente de forma automática.
Compruebe la barra de herramientas de administración
Si su sitio web tiene una barra de herramientas de administración especializada, podría obstruir su encabezado fijo. Si ese es el caso, todo lo que necesita hacer es marcar esta opción y el problema se resolverá. WP Sticky reconocerá automáticamente el tamaño de la barra de herramientas y reaccionará en consecuencia.
A veces, desea tener diferentes comportamientos según el dispositivo que utilizan sus visitantes para ver su sitio web. Es posible que no desee tener un encabezado fijo en los dispositivos móviles. WP Sticky le da la opción de seleccionar qué categorías de dispositivos tendrán el comportamiento fijo. En nuestro caso, optaremos por los dispositivos pequeños y medianos.
Otro caso que podría requerir alguna personalización manual es si hay elementos que aparecen sobre su encabezado fijo. Para evitar que esto suceda, deberá aumentar el índice Z de su encabezado fijo.
Si no está seguro de los valores del índice Z de los elementos que se superponen con su encabezado, escriba el valor máximo, 99999, y esto solucionará el problema.
Hay dos configuraciones de efectos que puede usar. Avanzar y deslizarse hacia abajo. Ahora, cuál terminará usando depende completamente de su preferencia personal y del aspecto deseado del sitio web. Experimenta hasta que te decidas.
Otra personalización visual del elemento adhesivo. Dependiendo del resto del sitio web, usando el control deslizante, podemos hacer que el elemento adhesivo sea más o menos transparente.
¿Qué sucede si no desea que ciertas partes de su sitio web tengan el encabezado fijo? Bueno, este control deslizante le permite personalizar el punto de inicio y el punto final donde se mostrará su encabezado fijo en su sitio web a medida que continúa desplazándose.
Color de fondo
¿Qué pasa si nuestro elemento pegajoso no es tan claramente visible? El complemento viene con la opción de resaltarlo dándole un color de fondo. Para hacer esto, haga clic en el botón que se muestra a continuación y elija el color de fondo deseado. Es fácil.
Si desea realizar aún más cambios en su elemento adhesivo que no están cubiertos por las opciones mencionadas anteriormente, hay un campo donde puede agregar personalización a través de CSS. Una cosa importante a tener en cuenta, en este caso, es que no hay necesidad de envolver estilos en selectores. No necesita escribir .classname{color:#FFF;}, en su lugar, todo lo que necesita escribir es color:#FFF;
Dejaremos esto vacío ya que no hay más necesidad de personalizar nuestro encabezado de demostración fijo.
Después de cambiar todas las configuraciones deseadas, no olvide guardar los cambios. Una vez hecho esto, podemos continuar y hacer clic en el botón Preview Sticky en la esquina superior derecha para obtener una vista previa de los cambios que hemos realizado hasta ahora.
En conclusión
WP Sticky es una excelente adición a cualquier sitio web y facilita mucho el trabajo del desarrollador. Tan simple de usar, pero que ofrece opciones de personalización muy detalladas y profundas, este complemento está garantizado para ayudarlo a crear el encabezado adhesivo perfecto para su sitio web. Esta es una gran noticia ya que un encabezado fijo puede aumentar significativamente las conversiones del sitio web.
WP Sticky tiene una versión Pro, que incluye todas las opciones antes mencionadas y cuesta $ 5,99 por mes o $ 39 por una licencia de por vida. También se ofrecen varios planes de precios diferentes para equipos y agencias.
Vallery Henings
Vallery Henings es una redactora y escritora de contenido que se especializa en blogs fantasma, campañas de marketing por correo electrónico y páginas de ventas. También es una amante de los viajes por carretera, las galletas de mantequilla de maní y un perro llamado Mimy.