- Go to BO > Improve > Element Flow > Theme builder > Sidebar.
- Add a new record, and then open it in the editor.
- You can add anything to the sidebar, add some links to make a side menu, add the product widget to show products in the shopping cart to make it a side cart, etc.
- Click on the gear icon on the black top bar of the editor to adjust the width, change the location, set some display conditions, etc.
- Save and view the sidebar on the front office, no, you can't see it yet (Note a popup can show out). Add a button somewhere to show the sidebar, use the Sidebar button widget to add the button.
- When a sidebar is opened, clicking on its overlay can close the sidebar. Another way is to add a close button to the side by dragging in the Action button widget and setting the action to Close a sidebar/popup.
1. How to open a side bar when a product is added to the cart?
Set the Type to Side cart, a side cart will automatically show out when a product is added to the cart.
2. What's the difference of a sidebar and a popup.
Set a sidebar to locate in the center to make it become a popup.
- A pop-up can show automatically, and you can set rules like, show one once, once a day, once a session, etc.
- If the popup has a newsletter form, then you can set it to show for people who haven't subscribed yet.
3. Use the dynamic tag feature to open a sidebar
Besides using the sidebar button widget, another way is to use the dynamic tag feature. If anything has a link, then it can be used to open/close a sidebar.
Click on the image to open a sidebar
Icon box widget
Clicking on this widget can open a sidebar.
5. How to create a link to open a sidebar?
Check #3 above, Element Flow already has two ways to open a side; this is the 3rd way by creating the link manually.
- The first step is to find out the code of a sidebar, see the first pic below, that's the code of a sidebar.
-
encodeURIComponent(btoa('{"id":"24mMv3FT"}'))Run the JS code anywhere you can run JS code, see the second, it shows how to run the code in Chrome's Developer Tools. Don't forget to alter 24mMv3FT with the code of your sidebar. - Copy the result. Add the result to the end of this text,
#elementor-action%3Aaction%3Dpopup_open%26settings%3D
which makes the URL open a side panel. Like thishref="#elementor-action%3Aaction%3Dpopup_open%26settings%3DeyJpZCI6IjI0bU12M0ZUIn0%3D"
6. How to open a sidebar upward.
- Click on the gear icon on the black top bar of the editor.
- Set the Position to Bottom
- Set a height, like 80vh
