In this GenerateBlocks tutorial, you will learn how to create a sticky sidebar using GenerateBlocks.
Some premium WordPress themes like GeneratePress, do not come with a sticky sidebar feature. That is when you need GenerateBlocks for creating sticky sidebar.
To create sticky sidebar using GenerateBlocks, we are going to use GP Premium and the GenerateBlocks free version.
Overview of steps to create GenerateBlocks Sticky Sidebar
- Create a new GeneratePress Elements block
- Choose Element type as Content Template
- Drop a GenerateBlocks Container Block and apply padding on all 4 sides
- In the container block, add a GenerateBlocks Grid Block of 2 columns with 70:30 ratio
- In the first container of the grid block (post container), insert GeneratePress Dynamic Content and choose Post Content.
- In the second container of the grid block (sidebar container), insert another Container Block and add your content to it
- Apply CSS class to outer container of sidebar and another CSS class to inner container of sidebar
- Write CSS codes for inner container and outer container in Additional CSS section.
Now let us see all the steps in detail with screenshots.
Create Sticky Sidebar Using GenerateBlocks
Time needed: 15 minutes
We are going to use a new content template which will already contain a GeneratePress Page Hero section accommodating blog post featured image and blog post meta elements.
- Create a GeneratePress Elements Block
To create a GeneratePress Block Element, go to your WordPress dashboard, hover your mouse on Appearance and click on Elements.
Then click on Add New Element, and select Block Element.
- Choose Element Type as Content Template
Once the Element editor opens, go to Element settings on the right-hand side. My default post container layout is 1300 pixels. So, I will set Editor Width as 1290 pixels. Choose Element Type as Content Template. Leave the Tag Name to article, and default settings that apply to All Posts.
- Create a main post layout
Insert the main Container Block that holds a two column grid.
One for post content and another for sidebar. Give appropriate padding on all 4 sides.
Main Container Block Padding
Top: 60 pixels
Right: 18 pixels
Bottom: 60 pixels
Left: 18 pixels
- Add a two column Grid Block with 70:30 ratio
Now, you need to add a GenerateBlocks Grid Block of two columns. Make sure the first container in the grid block is 70% and the second container from the grid bock is 30%.
Also, give 30 pixels horizontal gap between both the containers in the grid block.
- Add GeneratePress Dynamic Content Block
Add GeneratePress Dynamic Content Block to the first container. Choose Dynamic Content type as Post Content.
This will dynamically pull your post content and fit it into the fist container, which we have set for content.
- Verify Dynamic Post Content
After you have chosen Post Content, verify dynamic post content in the first container.
Note:- Now we will start implementing all the steps for sticky sidebar in the next container. - Add Another Container Block in the Sidebar Container
For sticky sidebar using GenerateBlocks, you need to have an outer container as well as an inner container.
This is how your list view should look like.
Note:- I have labelled the containers as outer and inner.
The inner container will contain sticky widgets that stick onto the outer container. Making sticky sidebar on scroll using GenerateBlocks. - Add Sidebar Content to Inner Container
It is time to add content to the inner container. You can add things like Featured Posts, Author Box, a Call-to-Action to join your community, Email Optin, etc.
Note 1:- Featured Posts Headline Block is an H3 tag and all the post title Headline Blocks are H4 tags.
Note 2:- For the sake of this article, I haven’t applied GenerateBlocks Dynamic Data with Post Title link to all the posts. - Add CSS Class to Outer Container
Click on the outer container. Now on the right-hand side, go to Advanced, and then add a CSS class under the Additional CSS field.
I have added a class ‘sticky-container-outer’
This container will hold all the sticky widgets into it. - Add CSS Class to Inner Container
Add another CSS class. But this time, to the inner container.
Remember, the inner container contains all the content that needs to stick.
- Add Sticky Sidebar CSS Codes to Additional CSS
Go to the GeneratePress theme customizer and click on Additional CSS. Add sticky Sidebar CSS codes for outer container CSS class and inner container CSS class.
Those were all the steps for creating sticky sidebar using GenerateBlocks.
Let me share the CSS codes with you.
GenerateBlocks Sticky Sidebar CSS
.sticky-container-outer > .gb-inside-container
{
height: 100%;
}
.sticky-container-inner
{
position: sticky;
position: -webkit-sticky;
top: 65px;
}
You can further design your sticky sidebar using CSS properties.
The free version of GenerateBlocks is enough to create a basic sticky sidebar. You do not need to download a dedicated sticky sidebar plugin.
Similarly, there is no need for any JavaScript or jQuery, you can also add table of contents as a sticky sidebar widget.
If you have GenerateBlocks Pro, you can easily add effects like box shadows, transitions, etc. directly to the entire container block and individually to every Headline block.
FAQs
GenerateBlocks is lightweight WordPress block plugin. Currently, GenerateBlocks comes with 6 main blocks that help you design anything on your website.
The easiest way to create sticky floating sidebar widget in WordPress is by using the free version of GenerateBlocks.
You can style your sticky sidebar by using CSS, if you are using the free version of GenerateBlocks. But, if you have the pro version, styling a GenerateBlocks sidebar can be done by few simple clicks.
