Greenshift WordPress
Free Download

Sliding popup with memory

How to import code

If link is going to Gist.Github, then visit it, click on Raw button and copy code

Then, simply paste it in your editor. In some cases, if you see code instead of blocks, you need to switch to code view (top right 3dots and select to use code view), paste code in code view and switch back to visual view.

If link is going to library, then you can import and find this element in Experimental/Fancy section of library

Wait two seconds…

Popup Sliding with Memory
This popup will use Interaction layers and cookies. A popup will check if the user has the specific cookie. If not, then it’s sliding Up after a specific period. Users can click on the button that will set cookie and hide banner. All parameters are configurable

Simple effect which shows you how flexible the Interaction panel features. So, this popup has the next logic. It opened automatically after 2 seconds, if the user clicks on the button, a popup will not show up again but after some period of time, a cookie will be cleaned and he will see the popup again

To do this popup, I added a Container with text. You can add the design of the container inside panels, but it’s important to add Position Fixed inside Class. This is because we want to edit popup inside the admin area and the class system has the option to enable styles only for the frontend side (click on the filter icon for this)

So, I created class cookbanner and added it as local class to container. Then added fixed position, size and 100% shifting to hide it

Find more about classes in the Learning Center

Now. on button, I need to add interaction layer with On Click trigger and two actions

  1. Save cookie
  2. Remove active class
Find more about Interactions in the Learning Center

Here is important to add proper storage time. Because by default it’s in seconds, so you need to have big value if you want to save as 30 days. (86400*30)

And last thing – I add interaction layer with On load for container and Action “add class”. But i need also to choose Condition where i check first if user has cookie (which is added by button click)

«
»