Back to top

Affiliate Link: Interested In a Useful Tables For Amazon Products and More? Check Out:

Amalinks Pro

Convert Acabado Sidebar Into Widgets And Implement TOC

Featured Tiles
As an Amazon Associate we earn from qualifying purchases made on our website. If you make a purchase through links from this website, we may get a small share of the sale from Amazon and other similar affiliate programs. You can read our complete legal information for more details.

As I have been working on the table of contents fixed widget for Acabado posts I have come to realize the limiting factors of the blocks being established. I have worked to remove and re-organize containers which will allow you to decide what order to put these into.

If you want an About Us and Legal container I’ll show you how to easily recreate them as a sidebar widget setup which allows you to organize your sidebar to make most efficient use of the space.

First we need to remove the blocks that exist on the sidebar to make the sidebar widget area be available first as a normal sidebar traditionally is.

Below is the Custom CSS to remove the sidebar.

.about-wrapper {
    display: none;
}

Next we will want to remove the legal sidebar section which will move our standard widget area to the top where it should be and allow us space for a table of contents.

.legal-info-container {
    display: none;
}

Now we want to balance the top of the bar to the top of the screen. This moves the widget sidebar down to be more in alignment with the text.

aside#secondary {
    padding-top: 45px;
}

Installing Plugins

We will need 3 plugins to make this example functional. This will be Elementor or Jetpack (Free Plugin which enabled JQuery), Q2W3, and Easy Table of Contents.

Downloading Plugins

Install the plugin called [ Q2W3 Fixed Widget ] which will provide you the ability to make a sticky widget in your sidebar.

Install [ Code Snippets ] To Run Jquery Fix

Install [ Easy Table of Contents ] which provides a nice layout with the ability to drop a shortcode into our sidebar widget.

Creating Your Table Of Contents

  1. Go to [ Appearance ]
  2. Select [ Widgets ]
  3. Add a [ Sidebar Widget ] To Your [ Sidebar ]
    • Title: [ Table of Contents ]
  4. Check the [ Fixed Widget ] Checkbox

Add this Custom CSS To Align the Header for the TOC

.ez-toc-title {
    text-align: center;
}

/* Change to match your background */
.ez-toc-widget-container.counter-hierarchy.counter-decimal {
    background-color: white;
}

.ez-toc-widget-container {
    background-color: white;
    padding: 10px 0px 30px 0px;
    margin-top: -10px;
}

Now to create your About and Legal Information you can add a sidebar widget [ Text Widget ] and the title field will be [ About Us ] and [ Legal Information ].

All I did was add media for my image and center the image along with adding my old text back in. You can mark them fixed if you want them to stay on screen, if not that is why you added a shortcode above to give your Table of Contents a white background so the other sections would scroll under and past, PSST… Ad a fixed ad down after your about and legal (fixed and it will stick too!)

If you want a link to your About You as a button like I did you can add the below HTML into the About Us Text at the location where you want the button to exist.

<div class="about-button button-wrapper"><a class="button" href="https://acabadotheme.com/about">About Us</a></div>

Play around and you will find many ways to manage your sidebar now using this manner of a build. Please give me a comment on the next setup you would love to see.

About Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals! Read More About Me...

My Posts | Website

Josh Koop

Hey Everyone! I hope that the short article you read today has taken you from a place of frustration to a place of excited anticipation for your visitors! Please let me know of anything you need for Acabado that can help you achieve your goals! Read More About Me...

Leave a Reply

Your email address will not be published. Required fields are marked *

Recent Content