Sticky sidebar para las entradas del blog con Elementor

Me apetecía ordenar cada entrada del blog por subtemas y ofrecer la posibilidad de navegarlos mediante anclas que estuviesen siempre visibles al hacer scroll dentro del contenido de un post.

Creando el Sticky Sidebar

Empezaremos creando el sticky sidebar. Trabajaremos sobre la plantilla de Elementor que muestra cada entrada del blog. Para acceder a ella o crear una nueva nos iremos a la opción de menú Plantillas > Theme Builder desde la barra lateral del administrador de Wordpress.

A continuación veremos las partes del sitio donde escogeremos la opción de Single Post que nos desplegará las plantillas Single de los Custom Post Type que tengamos creados. Trabajaremos sobre las CPT por defecto, es decir, las de Post o entradas del blog.

Abriremos la edición de la plantilla de Single Post desde el enlace Editar.

Una vez dentro de la página de edición de nuestra plantilla nos situaremos sobre el botón de Edición de Columna de la Sección que contiene el contenido de nuestra entrada. Es un pequeño recuadro gris que aparecerá en la parte superior izquierda de la sección al situar el ratón sobre la misma.

Haciendo clic con el botón derecho se desplegará un menú desde el cual seleccionaremos la opción Añadir nueva columna.

Para trabajar cómodamente abriremos el panel Navigator donde veremos todas las partes de la plantilla en desplegables.

Es posible que éste panel ya se haya abierto por defecto en la parte derecha de la ventana pero si no es así lo abriremos haciendo clic en el icono de capas superpuestas situada en la parte inferior de la barra de herramientas de Elementor.

Desplegaremos la primer Sección donde ahora deberíamos tener dos columnas.

Podemos renombrar estas columnas como Contenido y Barra lateral.

Crearemos una nueva sección dentro del Sidebar que será el elemento que permanecerá fijo cuando hagamos scroll.

En el panel de edición de la sección desplegaremos las opciones de Efectos de movimiento.

En la opción Sticky seleccionaremos del desplegable la opción Top.

En mi caso he optado por no aplicar el efecto Sticky en dispositivos móviles y para ello he eliminado la opción Mobile dentro de Sticky on.

El valor de Offset también es algo variable, en mi caso no puedo dejarlo a 0 con la parte superior de la ventana ya que al encabezado también se le aplica sticky y necesito que el efecto sticky del sidebar no se apliqué hasta que no supere el alto y una cierta distancia con el encabezado. A mi me funciona con 100 píxeles pero a vosotros tal vez os vaya mejor otra medida.

Activaremos la opción para que esta sección interior permanezca dentro de la columna Sidebar de manera que cuando terminemos de leer el contenido de la entrada nuestra sección sticky no siga permaneciendo fija si seguimos haciendo scroll hasta el final de la ventana. 

Creando la Tabla de contenidos

Ahora toca crear el menú con los subtemas anclados al contenido y lo haremos incluyendo un widget de Elementor que encontraremos en la sección Single.

Una vez dentro de la edición de la tabla de contenidos podremos escoger entre varias opciones.

Para mi blog he hecho pocos cambios, he modificado el título, los espaciados, he ocultado el borde y por lo general he dejado las opciones por defecto. Lo más importante es la selección de los niveles de títulos que se incluirán. En mi caso he dejado solamente el título de nivel 3 o H3.