How To Create Vertical Sticky Grid Lines with Elementor?

You are currently viewing How To Create Vertical Sticky Grid Lines with Elementor?

Vertical sticky grid lines are a great way to make your page stand out. They give the page a professional, finished look without adding any extra effort.

vertical grid line

When you have lots of elements on a website, your website may look clumsy. Using vertical sticky grid lines can help you make an outstanding design.

Elementor has an easy way to create vertical sticky grid lines Using Custom CSS. Let’s take a look at how it works

How to Create Vertical Sticky Grid Lines in Elementor

Step 1: Go to the page you need to add the vertical grid lines and Edit it with elementor.

Step 2: Click on any of the sections. And click on the Advanced tab.

elementor 3

Step 3: Click on “Custom CSS” and paste the following CSS code into the text box.

body::after {
content: "";
position: fixed;
width: 100vw;
height: 100vh;
left: 0;
top: 0;
z-index: 9999999;
background-size: 12.5% 100%;
background-repeat: repeat-x;
background-image: linear-gradient(to right, rgba(127, 17, 224, 1) 0.5px, transparent 0.1px);
pointer-events: none

Your vertical sticky grid lines will now appear across your design!

Screenshot 55

If you know a little custom CSS, you can make an awesome design using the above code.

You can use this same method to create horizontal sticky grid lines as well!

Why add a vertical sticky grid line?

Vertical sticky grid lines help organize your content and make it easier for the user to navigate. For example, if you have a long piece of content that needs several headings and subheadings, adding the gridlines in the background will help separate all of this information easily.

There are many uses for vertical sticky grid lines in Elementor. And the best part is that it’s simple to use.

If you have a 12-column grid for your design, vertical sticky grid lines can be used as a way to help break up these sections into an even more functional design for your website.

Since there are 12 columns in each section of a 12-column grid, each section can be broken down further. If you have 12 columns, create 4 separate 3 column sections to help better organize your website content.

To learn more about Elementor, click here.

If you need any help editing your Elementor page, our team is happy to help! Just reach out and we’ll get right back to you.


Elementor is a great WordPress page builder that allows you to create beautiful websites with ease. It also comes with a bunch of features to make your experience better, such as custom CSS and the ability to add elements like sticky grid lines.

Elementor’s custom CSS allows you to add any code snippet on your page without having to touch a single line of code. That means you won’t have to worry about breaking anything when you’re making changes!

How do you like this? Let us know in the comments below!

Leave a Reply