Cómo hacer una barra lateral pegajosa en WordPress con un complemento

Publicado: 2020-12-27

"Esta publicación contiene enlaces de afiliados; esto significa que ganamos comisiones si compra a través de los enlaces de esta página"

notas adhesivas en una pared con bombilla

Si es un lector habitual de este blog, o incluso si esta es su primera visita, es posible que haya notado algunos elementos adhesivos en la barra lateral del blog.

Uno de los cuales es el formulario de suscripción al boletín.

A veces, lo reemplazo con otros elementos importantes que quiero mostrar. Como durante las ofertas del viernes negro. Tenía la categoría de publicación de blog del viernes negro pegada en la barra lateral.

Puede hacer que cualquier elemento de su blog sea fijo, independientemente de lo que sea. Podría ser el menú de navegación del blog, los elementos de la barra lateral, el menú de pie de página, los widgets flotantes, etc.

El objetivo principal es hacerlo visible en todo momento a los usuarios de tu blog.

Ya sea que se desplacen hacia arriba o hacia abajo, el elemento adhesivo permanece en su posición y visible en todo momento. Esto ayuda a atraer más atención al elemento fijo, mejorar la tasa de conversión, aumentar las interacciones, etc.

Pero primero, especialmente para los principiantes, definamos qué es la barra lateral adhesiva. ¿Y por qué necesitas hacer un elemento de tu blog pegajoso en la barra lateral?

¿Qué es Sticky Sidebar en WordPress?

Una barra lateral adhesiva en WordPress o una barra lateral fija es un elemento de la barra lateral que permanece visible o permanece en una posición mientras los usuarios se desplazan hacia arriba y hacia abajo por las páginas web del sitio web.

Conduce a mejorar la tasa de participación de la llamada a la acción, impulsar la conversión y mejorar la experiencia general del usuario.

Por ejemplo, una barra lateral adhesiva garantiza que los usuarios tengan acceso rápido a sus mensajes importantes.

En lugar de desplazarse hacia atrás hasta la parte superior para hacer clic en el menú de la barra lateral deseado, los usuarios pueden ubicar rápidamente el elemento de la barra lateral y hacer clic en lo que realmente importa sin desplazarse hacia arriba en la página.

¿Por qué debería implementar Sticky SideBar en su blog?

He mencionado un poco los beneficios de implementar una barra lateral adhesiva en su sitio web en la sección anterior. Pero vale la pena ir un poco más abajo aquí.

Como alguien que ha tenido experiencia práctica con la barra lateral pegajosa en su blog, puedo contarles más de sus beneficios a partir de mi propia experiencia.

Primero, cualquier elemento que hagas pegajoso en tu blog, ese elemento permanece visible en todo momento para cualquier persona que visite tu sitio web.

Con esto, estás atrayendo más atención a ese elemento en particular. Por lo tanto, debe priorizar lo que necesita para hacer pegajoso.

Además, cuando los usuarios visitan su sitio web, desea asegurarse de que tengan acceso rápido a su información/páginas/contenido más importante, etc. Puede lograr esto al hacer que esos elementos importantes queden fijos en la página.

Esto ayuda a mejorar la participación de los usuarios, aumentar la tasa de conversión, aumentar la conciencia, etc.

Sin embargo, no recomiendo hacer demasiados elementos pegajosos en la misma ubicación del sitio web. Por ejemplo, en la barra lateral, la recomendación máxima debe ser de dos elementos fijos.

Si tiene demasiados elementos fijos que compiten por la atención en el mismo lugar, no obtendrá una mejor tasa de conversión para su mensaje más importante.

Solo tengo el cuadro de búsqueda y el formulario de suscripción al boletín del blog pegados en la barra lateral de este blog.

El formulario de suscripción al boletín del blog es el elemento más importante de la barra lateral. Como puede ver, me aseguro de que recibe la atención general en ese lugar.

Esto se debe a que la creación de una lista de correo electrónico está en la parte superior de la lista de prioridades.

Cómo hacer una barra lateral adhesiva con un complemento de WordPress

Una de las ventajas de WordPress sobre otras plataformas de blogs es la capacidad de habilitar rápidamente la funcionalidad de blog deseada sin saber cómo codificar.

Independientemente de la función que desee agregar a su blog de WordPress, siempre hay un complemento para ello. Solo necesita instalar, activar y habilitar/configurar los ajustes.

Eso es lo que convierte a WordPress en el sistema de gestión de contenido líder en el mundo actual. Una gran comunidad de desarrolladores lo respalda.

Los complementos de WordPress hacen que sea muy fácil hacer que cualquier elemento sea pegajoso en tu blog. No se requieren conocimientos de codificación. Solo necesita instalar y activar.

Sin embargo, encontrar el complemento de WordPress adecuado para la tarea podría ser una experiencia de búsqueda tediosa. Podría pasar horas buscando el complemento adecuado.

Entonces, lo que pretendo hacer aquí es ahorrarte las conjeturas.

Hay muchos complementos de WordPress Sticky Sidebar hoy en día, pero he descubierto que el complemento de WordPress My StickySidebar es bastante fácil de usar y configurar.

El complemento de WordPress My StickySidebar facilita la configuración de su elemento de barra lateral adhesiva en minutos. Puede crear un widget de barra lateral flotante adhesivo en WordPress con el complemento My Sticky Sidebar.

Hace que el proceso sea sencillo, incluso para principiantes.

Instalación del complemento My StickySidebar

Lo primero que debe hacer para configurar su elemento fijo de la barra lateral es instalar el complemento. Después de eso, lo activas...

Aquí está el enlace a MyStickySidebar en el repositorio de plugins de WordPress.org. Descargue el complemento de WordPress.org o de su área de administración de WordPress.

Después de la instalación y activación, debe abrir la página de configuración para configurar el complemento.

Mi página de configuración del complemento Sticky Sidebar WordPress

Hay dos clases de elementos CSS o ID que deberá encontrar.

El elemento de la barra lateral que desea hacer fijo y la clase o id de los elementos del contenedor que se encuentran en el elemento de la barra lateral.

En el campo Id. o clase CSS de los elementos de la barra lateral, deberá ingresar la clase o el Id. del elemento de la barra lateral que desea que sea fijo.

Si elige buscar en el código fuente de la página para encontrar la clase o ID del elemento CSS de la barra lateral, podría ser tedioso. Puede encontrarlo a través del código fuente de la página, pero se necesitan algunas habilidades técnicas para buscar la identificación de la clase a través de la página de origen.

Sin embargo, puede aprender cómo encontrar la clase o identificación de CSS en esta publicación.

Una vez que localice la clase o identificación de CSS, debe ingresar el valor en el campo, como se muestra en la imagen de arriba.

Luego, desplácese hacia abajo en la página para hacer clic en el botón Guardar.

Ajustes adicionales

Es posible que desee buscar en otras configuraciones, como la parte superior e inferior del margen de la página. Aquí puede definir el margen superior e inferior en Pixel.

Además, puede configurar la regla para que se deshabilite si el ancho de la pantalla del usuario es menor que un píxel xxx.

Página de configuración del complemento de WordPress My Sticky Sidebar 2

Agregar estilo CSS personalizado

Si está utilizando la versión paga de MyStickySidebar, puede editar el CSS, agregar o crear un CSS personalizado por completo.

Estas características adicionales son útiles si eres bueno codificando y sabes lo que estás haciendo.

Existe la opción de deshabilitar MyStickySidebar en las páginas seleccionadas. Esto es en caso de que no quieras la barra lateral pegajosa en ciertas páginas.

Recuerde siempre presionar el botón Guardar en la parte inferior de la página después de realizar cualquier cambio en la configuración predeterminada.

Página de configuración del complemento de WordPress My Sticky Sidebar 3

Conclusión…

Hay muchas razones por las que puede querer hacer que un elemento (s) sea fijo en la barra lateral. Sea lo que sea, asegúrate de no interrumpir la experiencia del usuario en tu blog.

Si se hace correctamente, una barra lateral pegajosa debería mejorar la experiencia del usuario y traer su mensaje importante al frente y al centro de la vista de su audiencia.

My Sticky Sidebar es uno de los mejores complementos gratuitos de WordPress Sticky que puede usar para lograr su objetivo.