¿Cómo poner widget fijo parcheado en la barra lateral del tema GeneratePress? – Aprendermarketing.es/

En nuestro artículo anterior, explicamos cómo usar un widget fijo en la barra lateral del sitio de WordPress usando un complemento. Sin embargo, agregar un widget fijo final al tema GeneratePress es muy fácil. No necesita un complemento y un simple código CSS hará el trabajo por usted.

Widget fijo de la barra lateral en GeneratePress

Hay algunas cosas de las que debe asegurarse antes de arreglar el último widget en la barra lateral.

• Ya sea que tenga la barra lateral en el lado derecho o izquierdo.
• El último widget no se superpone en el pie de página.
• Hay mucho espacio en la parte superior cuando el widget comienza a flotar.
• El widget fijo solo funciona en dispositivos de escritorio grandes y está deshabilitado en dispositivos móviles.

Siga uno de los métodos a continuación dependiendo de si desea mostrar el widget anclado en un widget en el sitio o solo en unas pocas páginas.

El último widget se ha corregido en la barra lateral de todo el sitio.

Siga los pasos a continuación si desea mostrar el último widget en la barra lateral anclado en el sitio.

• Inicie sesión en su panel de administración de WordPress y vaya a la sección Apariencia > Personalizar.
• Haga clic en la opción "CSS adicional" que se muestra en la barra lateral izquierda.

• Copie y pegue el siguiente código CSS en el campo CSS adicional.

@media (min-width: 769px) {
.inside-right-sidebar {
   height: 90%;
}
.inside-right-sidebar aside:last-child {
   position: -webkit-sticky;
   position: sticky;
   top: 40px;
}
}

• Haga clic en el botón "Publicar" para guardar los cambios.

Ahora abra cualquier página de su sitio y desplácese por el contenido. Debería ver que el último elemento en la barra lateral flota como un widget fijo y se mueve hacia arriba cuando llega al pie de página. Así es como funciona el código y es posible que deba ajustar los parámetros para su sitio.

• El ancho mínimo de 769 píxeles se usa para mostrar el widget fijo solo en dispositivos de más de 769 píxeles.
• Cambio de clase .inside-right-sidebar a .inside-left-sidebar si usa la barra lateral izquierda de su sitio.
• El espacio en la posición superior está definido por top: 40 px; y puede cambiarlo para ajustar el espacio vacío que aparece en la parte superior del widget flotante. De lo contrario, su widget flotante no tendrá un cuadro debajo del widget anterior o debajo de la barra de menú superior cuando no tenga widgets anteriores.
• Para evitar la superposición con un pie de página, height: 90%; Puede cambiar esto de acuerdo con la altura del diseño del pie de página de su sitio y exactamente dónde desea que deje de flotar el último widget de la barra lateral.

Widget fijo para la barra lateral personalizada creada con Elements

El tema GeneratePress también le permite crear una barra lateral personalizada y anular la barra lateral derecha o izquierda predeterminada de su sitio en la pestaña Apariencia > Elementos. Esto también se recomienda para crear barras laterales personalizadas cuando se usa el complemento GenerateBlocks.

Entonces, si está utilizando una barra lateral personalizada creada con GeneratePress Elements, entonces debe reemplazar .inside-right-sidebar en el código anterior y conecte el bloque contenedor correcto.

• Ve a la sección Apariencia > Elementos y edita tu barra lateral personalizada.
• Seleccione el bloque contenedor de su último widget en la barra lateral y desplácese hacia abajo hasta la parte inferior de los encabezados debajo de la pestaña "Bloque" en el lado derecho.

• Expanda la sección Avanzado y agregue sticky-container nombre de la clase en el campo "Clase(s) CSS adicional(es)".

• Haga clic en el botón Actualizar para publicar sus cambios.
• Ahora vaya a la pestaña "Apariencia> Personalizar> CSS adicional" y agregue el código CSS a continuación.

@media (min-width: 768px) {
.inside-right-sidebar {
   height: 90%;
}
.sticky-container {
   position: -webkit-sticky;
   position: sticky;
   top: 80px;
}
}

• Haga clic en el botón "Publicar" para aplicar sus cambios.

Verifique su página y debería ver el último widget anclado a su barra lateral derecha personalizada cinta. Como se explicó, puede cambiar el código en la barra lateral izquierda y ajustar los parámetros de altura/superior si es necesario. Tenga en cuenta que puede usar varios bloques en un contenedor y rotarlos todos usando esta opción. Esto no es posible cuando se usa la barra lateral del tema con los bloques agregados en la sección Apariencia > Widgets.

Se corrigió el último widget en páginas específicas.

Usar una barra lateral personalizada solo para publicaciones específicas es muy fácil con GeneratePress Elements. Simplemente puede seleccionar "Ubicación" como "Publicación" y seleccionar una publicación específica de la lista en lugar de usar la opción "Todo el sitio". Haga clic en el botón Agregar regla de ubicación para agregar publicaciones adicionales a la lista para mostrar una barra lateral personalizada.

Sin embargo, si no está utilizando Elementos, debe encontrar una manera de agregar el código CSS en el nivel de publicación individual en lugar de agregarlo en la sección de personalización. Puede consultar nuestro artículo sobre cómo agregar CSS a nivel de página en WordPress para obtener más información al respecto. Una vez que se agrega CSS a una publicación específica, el widget de la barra lateral se fijará y flotará solo en esa publicación. Todas las demás publicaciones mostrarán el mismo widget de la barra lateral sin flotar cuando se desplace el contenido.

Importar un sitio de demostración con una barra lateral fija

GeneratePress también ofrece varios sitios de demostración con un widget de barra lateral fijo. Por ejemplo, puedes echa un vistazo a la demostración en el sitio de información donde la barra lateral derecha tiene un widget flotante. Si le gusta este sitio de demostración estilo revista, entonces su mejor opción es simplemente importar esta demostración. Esto creará automáticamente un bloque personalizado con elementos en la barra lateral derecha y agregará un código CSS adhesivo personalizado en el personalizador. Puede ajustar otras secciones del diseño, como el encabezado y el pie de página, para comenzar rápidamente a publicar contenido en su sitio.

Esta es una buena opción al crear un nuevo sitio. Sin embargo, si desea corregir el último widget en la barra lateral de su sitio existente, siga uno de los métodos descritos anteriormente en lugar de importar una demostración.