Interactive Slider with 'Show/Hide Elements' Action in Depicter!

Описание: ✅ Subscribe for the latest from Depicter! 📺👉 https://avt.li/depicter-subscribe
✅ Don't forget to hit the bell and give us a thumbs-up! 👍

🌟✨ To download your free Depicter Slider, visit this link: https://depicter.com/download/

📝 Dive deep into the world of interactive sliders with our step-by-step guide on the 'Show/Hide Elements' action type in Depicter Slider. Elevate your design game, add animations, and configure triggers effortlessly. Unlock the true potential of 'Show/Hide Elements' and create captivating, interactive sliders with Depicter. Let's transform your sliders into engaging visual experiences! 📝

🔍 Here is what we'll cover in this video:
0:00 - Intro
0:20 - Importing a Template Slider from Depicter
0:35 - Crafting a Button with Show/Hide Action
3:43 - Displaying Product Prices on Hover


🎥 Video Script:
🌟 Interactive sliders, anyone? Delve into the creative world of ‘Go to URL’ action type in Depicter Slider – it's easier than you think!" Let’s Get Started!

⏲️- 0:20: Head over to your WordPress dashboard. Navigate to Depicter and click on "Add New." Once you're in the Depicter dashboard, select a template and import it!

⏲️- 0:35: We want to add an action to this button, so that when we click it, more details are revealed with an animation.

Hold down the Control key on your keyboard and select the elements you want to hide or show. Right-click and group them. Now, in the "Animations" section on the sidebar, choose an "Animation In." For this example, we'll go with "Reveal In" and "Reveal From Right." Set a cover color, look for "Wait for an Action," and enable it.
The "Wait for an Action" option is designed for situations where you prefer the element not to be visible until a specific action is executed.

Now, let's configure the "Animation Out." We'll opt for a "Fade Out" animation. Apply it, and we're good to go.

Select each individual element you want to hide or show and enable the “wait for an action” option for it. To add the elements to our action, we’d want to know their name, so click on each element and Look for the “element name” in the right sidebar options.

Now, Select this button that you want to give action to, on the right sidebar's "Action" section, choose "Show/Hide Elements" from the action types, and set the trigger to "Click." Hit "Add Action," then click on "Edit" below it.

Remember those element names we noted down? This is where they come in. Click on "Select," and you'll see a list of all elements in your slider. Choose the ones you want the action to affect. Verify the type of action and trigger, close the editor, and preview your slider.

To put it to the test, click on the button, and voila – it works like a charm! The elements reveal with the chosen animation.

Let's take it up a notch. Change the button text, and this time, switch the action to "Toggle Visibility Option." Click to show the element, and click again to hide it. Pretty neat, right?

⏲️- 3:43: We’d like to add an action to this yellow box so that when the mouse moves in, the price is revealed with an animation.
Select the text, head to the right sidebar, and find the "Animation" section. For "Animation In," we're going with "Text Animation In" and then "Words Appear from Right." Now, for "Animation Out," we'll choose "Text Animation Out" with "Words Disappear Randomly." Once you've set your animations, don't forget to enable the "Wait for an Action" option in the animation settings.

Repeat the process for the other text element. After selecting it, review the animation settings, enable "Wait for an Action," and for the "Animation Out," let's go with "Scale In Words."

Create a text to show instead of the price. Click on each element and Look for the “element name” in the right sidebar options. Place the text that you just created and select the area where you want the action to occur – in this case, the yellow rectangle. Go to "Action" in the right sidebar, and choose the "Show/Hide Elements" action type. Set the trigger to "Mouse In" and add the action.

Click on "Edit" for the action to select the elements you want to show with a "Mouse In" and set the delay for 1 second. Now, add a second action with a "Mouse In" trigger. Edit it to include the element you want hidden with a "Mouse In" by setting the action to "Hide."
All set! Click "Preview" to witness the magic. The price text should dynamically appear and disappear based on your mouse movements. Fantastic, isn't it?

Download Depicter today and use its numerous features for free. Thanks for watching the video. 🌟

✅ Explore more about Depicter:
🔗 Website: https://depicter.com
🔗 Facebook:   / depicterapp  
🔗 Subscribe: https://avt.li/depicter-subscribe