We have added some great features that fundamentally change how WP Interactions (now called just Interactions) is used. It’s now way easier to get started and add interactions to your website.
New Interaction Library
If you click on the Interactions button on the top of your Block Editor, you’ll notice that it now opens a brand new Interaction Library popup. Previously, clicking this button would bring up the interaction creator.
This new Interaction Library modal window contains as of this writing, 56 pre-made interactions that you can choose from. Each interaction shows you a short video snippet of what the pre-made interaction looks like. Each interaction is also fully customizable, so you can change images or videos, or add more blocks to them.
If you see any interaction that you would want to add into your page, simply click it to add it into your page. Doing so does two things:
- It adds the necessary blocks included for the interaction, and
- it imports the interaction and opens it in the interaction editor, ready for any customization.
Interaction Library Makes It Easy To Get Started
Our original idea was for Interactions to be a robust interaction builder for creating Interactions via triggers and actions.
However, creating interactions requires some studying on how the system works. It’s not something that everyone might be able to dive in right away after a fresh install of the plugin.
Instead of this, we wanted people to be able to start very quickly within 5 minutes with Interactions. So we came up with the Interaction Library – a collection of interactions that are usable and showcase the different capabilities of Interactions.
Our aim is to keep on expanding the interaction library, adding in different types of interactions and story-telling tools that look great in websites.
Notable Interactions In The Library
There are a lot amazing interactions available in the Interaction Library. Here are a few of our favorites:
Hero 1 – this is the same interaction that can be found in our home page!
Cards 2 – a set of columns that initially appear a bit messy, then tidy up as they scroll to the middle of the screen.
Image 3D Mouse Tilt – The image tilts in 3D to look at your mouse.
Parallax – Everyone just loves a good parallax
How to Use The Interaction Library
As mentioned near the start of the article, to open the Interaction Library, you’ll need to click on the Interactions button on the top of the block editor.
While the Interaction Library is open, hovering your mouse over an interaction gives you 2 buttons: insert and customize. Not all interactions have the customize button.
Clicking on insert would insert right away the interaction into your page, and
Clicking on customize would open up another area containing different options you can change to tweak how the interaction looks and bevaes. When you’re done, you can insert the interaction with your changes.
After inserting the interaction, it should work right away. If you check the preview of your page, you will see them working already. Then you can proceed with changing the design to suite your design.
Import & Export
Aside from the Interaction Library, we’ve also introduced a new import and export functionality.
You can now:
- Import complete interactions,
- Import timeline actions, and
- Export your interactions
To import or export, just look for the import and export buttons and click on them. Doing so will open up a new modal, containing the JSON code that you can copy, or paste to import.
Import Documentation Examples
We have added in Interaction Examples inside the Documentation here: https://docs.wpinteractions.com/collection/656-interaction-examples
These examples contain blocks that you can copy into your page, as well as interaction data that you can import into your website.
Leave a Reply