 What's up everyone? I'm Jeffrey at Lightbox and I love talking about web design and the business behind it. And one of my favorite areas to design when designing a website is the blogs. There's just something about a clean, nice looking blog post that, well it could be super dope. One of my favorite blogs I feel is one of the best designed blogs out there is Medium. It's just so clean. It's so minimal and easy to read. And one of the parts I love most on this is the sidebar. It's just so subtle and the way it transitions in. It's really smooth and we could actually create the exact same style of sidebar on Elementor. And in this video, that's what I'm going to show you how to do. So we're going to go step by step and I'm going to show you how to build a sticky sidebar that has a smooth transition just like this one right here. So let's go ahead and get started. So let's go ahead and start by going to your dashboard. From here, let me show you that I'm only using two plugins, only Elementor and Elementor Pro. We don't need any additional plugins for this, but you do need the Elementor Pro. If you don't got it yet, there is a link in the description. And let's go make sure that you have some blog posts as well. We want to have just at least one of them. That way we could use it to style things up. If you don't have any blogs yet, it's all good. I didn't have any for this demonstration. So I just use some lorem ipsum some fake text to fill it in and you know just an image off of unsplash. So once you got the blog, at least one of them in there, let's go over to Elementor and then to templates, then navigate to your theme builder. From here, select on add new and then select on single post and go ahead and give this a name. We're going to call this blog post template. And that's exactly what this is. This is going to be a template that's going to be used for all the blogs. Now I am going to be going through this in more detail on a new video I'm putting together. I'm currently in the process of putting a more extensive step by step on building a blog and how to design it with Elementor. So make sure to subscribe so that way you get notified when that comes out. All right, so from here, let's go ahead and start by adding a section and get one with three columns. Now we need to resize these columns. Let's drag this over until the left is at 20%. And then we want the right to go to 20%. And the reason why we're doing this is, well, we don't need a lot of space for the sidebar because we're going to make it minimal and we're going to make it kind of small. That way it's not like really intrusive. All right, let me go ahead and style this up a little bit. All right, now we got to style it up a little bit. We're not going to go too much into the style right here. What we want to do now is just focus on the sidebar. We could style things up later. You could build this out the way you want to build it out. Now to add the sidebar, what we want to do is we want to put an intersection in this left column. So go over here, scroll down, find intersection and drag it into this column. Here, let's go ahead and delete one of the columns because we only want one column right here. So what we're going to do is, and this method that I'm using is we're going to make this entire intersection be the sidebar and this is what is going to show up when we scroll down and this is what's going to stick while we're scrolling up. So let's go ahead and put in your content. Okay, now we got the content in here styled up and see all I did was I added a little title right here, a divider and a sign up form right here. Now you could put whatever you want in here. Only suggestion that I'm going to give is whatever you do put in there, keep it minimal and not too many call to actions in there because you want to distract the user, the reader from the actual content. You want to have at least one call to action like my call to action here would be to sign up for a newsletter, but you don't want to throw too many of them, keep it nice and minimal. Let's go ahead and now add a little bit of spacing here first. We want to remove the padding. And I want to create some padding on the right, just to give space away from the content. I'm going to put 40 pixels right here. All right, now we're almost there. We got our blog layout right here and we got our sidebar. Now the last part that we need to do is we need to add the effects to our sidebar. That way it sticks to the top and it stays hidden, but reappears when the user scrolls. So go over here to your intersection and select on edit intersection, then navigate over here to advance. And from here, we need to add a CSS class. There's just a little tiny bit of CSS. Don't worry, it's very small and I'm going to show you where to copy and paste it. And the CSS will be in the description. So let me go ahead and pull up my class right here. We're going to be using this is called sticky sidebar item. So you copy and paste that right into your CSS classes. All right, from here, let's go over to your motion effects. We need to set up the sticky. So turn that on and then right here underneath sticky, select on top. Now we're going to turn off tablet and mobile because we're actually going to hide the right and left column on tablet and mobile because something like this really is only beneficial and works on desktop mode. So turn those off right there. And now this is very important, we got to make sure we set the effects offset because this is where the magic happens with elementary sticky function. So what this does is we're going to put in the number and this number is going to be the number of pixels. When you scroll up that the effect takes place. So if we put 100 pixels here, when the user scrolls the webpage 100 pixels, then the effects happen. But if we put something bigger like 400, then the user has to scroll up higher. So let's go ahead and put I'm just going to put 300 right now because we want a good little we want a good amount of scroll to happen before the sidebar appears. So I'll put 300. And we're going to select on stay and call them. And this is what's going to get the sidebar to stick. Let's go ahead and update this because now we want to take a look at what it looks like in the front and add a condition. And again, I'm going to be going through another tutorial that's way more in depth. And I'm going to show about all this stuff right here about the conditions and just how the blogs really work for now. Just make sure it's on all singular select save and close. And basically now this template is on all of your blog pages. Let's go ahead and take a look at it in the front. And you can see a sticking so the sticking part is working but is still showing here. So we want it to be hidden. We don't want to see it. So now all we got to do is add our CSS. That's it. So let me pull out our CSS. And it is this little bit right here. Now this is what I'm going to suggest where to put it. There's a few different places to put CSS. You could go here in your widget and place a custom CSS right in there. I personally choose never to put it here because CSS can get lost. I like to keep it all centralized and in one place because if you start adding this in different widgets throughout your website, it becomes challenging trying to find your CSS. So I choose to put mine either in the child theme or I'll put mine in the customized. So for right now I'm going to put mine in the customized and let's just go ahead and paste this here. And there you go. Look at that. It disappeared already. Let's go ahead and close this out and see how it looks. And we see now that it's disappearing and showing but it's way to the top. So let's go back over here. Now we want to push it down. So we want to make sure that it's, you know, lower, lower inside the page. We want spacing between the top and the sidebar. So go back to your intersection, go to advanced. And let's put on padding, uncheck this, unlink it and let's just do the top. And I'm going to do 80 pixels. I feel 80 is a good number. And let's go ahead and take a look again. And that is it. That's how simple it was. And with this, you could add anything in the sidebar, but it just gives such a nice feel to it. Nice little transition. Well, that's it. I hope that this video helped out. And again, I'm going to be putting out a full length tutorial on creating a blog post. I love blogs. They're super and clean and they're very important. If you really want to get that organic traffic coming in, usually with all of our clients, we look at marketing, we look at how can we drive traffic to the website. Of course, you got your Google and Facebook ads, but there's nothing as good as good old fashioned organic traffic that comes from content creation. Alright, I hope you liked this video. I'll be back again soon with more web design and elemental related content. Alright, thank you.