Types of Actions
● GO TO PAGE: Creates a link to another page within your Readz site. ● GO TO EXTERNAL LINK: Creates a link to URL that is not part of your Readz site. ● SHARE: Gives your element the ability to share the page to the reader's social media sites. Facebook, Twitter, Linkedin, Pinterest, Google+, and Email are the options. ● OPEN LIGHTBOX: Will open a lightbox popup. Lightbox popups will darken the background and display your message in a light box that stands out from the background. It also contains a close button that will close the lightbox popup when clicked/tapped. Lightbox popups are useful for when you want readers to focus on the contents of the lightbox and not the rest of the page. ● OPEN TOOLTIP: Similar to a lightbox popup, except the background isn't darkened. Use tooltip popups when the content of the tooltip needs to act as something supplementary to the main page. ● GO FULLSCREEN: Causes the element to take up the full screen on the reader's device. Use this for images or slideshows. ● ANIMATE: Causes your element to move. Examples of available animations include fade-ins, rotates, bouncing, flashing, and shaking. For these animations, you can define how many times you want the animation to loop (Once, infinite, or a custom number). The duration of the animation is how much time should it take for your animation to complete one cycle.
● SET STYLE: On tap/click, or on hover over, you can have your element's style change. First, style how you want your element to look. Save this style in your style templates. More here on how to create style templates. Once your element's style is saved as a style template, give the element the Set Style action. Set the style template you want it to take when the event occurs.
● RESET STYLE: This action should couple with "Set Style" above. When the event is triggered a second time, you can set it so that the element resets back to its original style.
● SHOW ELEMENT: Causes your element to instantly appear after initially being hidden.
● HIDE ELEMENT: This action will hide the element.
● MUTE BACKGROUND VIDEO: For desktop video backgrounds, you can set the element to mute.
● UNMUTE BACKGROUND VIDEO: You can also set an element to act as the unmute desktop video background.
● SCROLL ELEMENT: The page will scroll to the top of the target element.
● EXPAND ELEMENT: Best to set on a box containing elements. When triggered, the box will expand, and if smart-layout is set, it will push down the elements below to make room for the expansion. In the editor, you can set the box to collapse through the action menu, or in the page index. Select the element in the page index, and click on the hide icon until you see a triangle icon. This means the element is currently collapsed. ● COLLAPSE ELEMENT: Opposite of expand element. We recommend you set this on a box element containing other elements. ● TOGGLE COLLAPSE/EXPAND ELEMENT: You can set the expand and collapse option with a 1-click action. This will cause your element to expand and collapse with each click or tap. ● TOGGLE HIDE/SHOW ELEMENT: You can set the hide and show options with a 1-click action. This will cause your element to hide and show with each click or tap. Actions occur when something is "triggered". You have many options to set what that trigger will be.
● GO TO SLIDE: Go to Slide is an action specifically for slideshow elements. Slideshows are a collection of images. You can make a slideshow slide to another image with a mouseover or click using this action. You can customize which image it should slide to, or set a generic next slide or previous slide.
● BUY: The buy action lets you integrate your Shopify store with Readz. Click here to find out more about how to integrate your Shopify store with Readz.
The advanced menu lets you further customize your actions and animations. When you set actions or animations using the simplified menu, you may want to adjust those actions. To do so, access the advanced menu tab. I don't see my actions or animations on my element when I look at the advanced menu! If you had set your trigger element to be a different element, check the actions/animations on that trigger element. There, you'll find the action or animation you created. Actions and animations are actually properties of the trigger element. When setting actions or animations using the simplified menu, the element that receives the action is the one you have selected as the trigger in step 3. With the advanced menu, the element you have selected will act as the trigger and you select which element is affected by it.
Simplified options for actions and animations (click here)
Testing your Actions
The editor now has a play and reload button that allows you to preview your actions right in the editor, so there is no need to go back and forth between the editor and preview link. The gif below shows how clicking the reload button lets you see how the page will look when a visitor visits your site. The keyboard shortcut for playing and pausing the actions is ALT+P.
Action & Animations Advanced Menu
Back to Menu
DELIVER BETTER CONTENT EXPERIENCES
DESIGN THE WAY YOUR BUSINESS GROWS
Powerful, intuitive content creation software for marketers and designers.
TRUSTED BY SOME OF THE WORLD’S SMARTEST COMPANIES