How to create an Awesome animated off-canvas section with elementor pro

We can be very creative with Elementor popup builder.
In this tutorial we will make an awesome animated off-canvas section with Elementor popup builder.

So go to Templates > popups
and create a new popup

Set the width of the popup to 100vw and set height to 100vh.
Set the horizontal position to left and vertical to center.

Disable the overlay.

Choose a proper Entrance Animation. In my case I am choosing Fade In Left.

Same for the Exit animation. I am choosing Slide Out Left.

Go to style tab and set a transparent background color. we dont need any background for the popup. And also disable the default box shadow for the popup.

Lets set the close button to the top left hand side so that It shows when every content is loaded. For horizontal lets set it to 98% for the close button.

Now add the section for your content. I am choosing 3 columns layout. Set the section width to full width. column gap wider. For height set it to 100vh. Set column Position to Stretch and Vertical Align to Middle.
Now insert your content and design each column.

Now select the first column and go to Advanced > Motion effects and set the entrance animation to “Fade in left”, You can choose other animation as well.
for animation delay lets set it to ‘0’.

Same for the second column. But for now lets set the animation delay to 500.

For last one lets set the animation delay to 1000.

So it will increase by 500 each time.

Save it. We dont need any condition or trigger.

Now add a button in which when user clicks the off canvas will show. Click “Dynamic” just above the link field. Then choose popup. Set ‘Open popup’ from action. And type the name of your popup. When it appears , select it and save.
We are done. Check how beautiful the off canvas section looks !!!

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More