Components | Flipimage

The Flippable Image component lets you create an interactive image that, when pressed, rotated, and can display text, audio, or video.

It is a component that you can add inside screens, popups and columns.

This is a complex component consisting of flippable Items inside.

And the flippable items consist, in turn, of an image and the content that will be displayed when rotating (a text, a video, an audio...).

The component and its items have specific properties. To configure it correctly, we need to select each item. You can do this from the crumb path or from the "Structure" tab.

Setup process

1. Select the Flipping component and access its properties. There you can:

Give him a degree.
Select a view
- Standard view.
- Custom view. This view allows you to configure and customize component colors and other additional elements.
Choose the style of the component (edged or borderless).
Modify the width and alignment.
Indicate whether the component influences the completeness of the unit's objectives.

Remember that if you choose the "Custom" View, new properties will be activated that will allow you to:

Choose a background color or background image for the component.
Display the title on the back of the flippable card.

2. Select the Flipping Item item and access its properties. Here you can:

Set the rotation style of the image (vertical, horizontal...).
Determine the width you will occupy on the screen.
Modify the color of the icon associated with the component. By default, it assumes the primary color of the unit.
Decide whether or not to display the icon associated with the component.

If you have chosen the "Custom" View,you can additionally :

Display a border and set the color of that border.
Set a background color for the flippable image cover and an opacity. This will be useful if we have added an image in transparent png format in this component.
Set a background image for the cover and its type, that is, how it will behave (if repeated, if not repeated).
Set a background color for the back of the flippable image and an opacity.
Set a background image for the back and its type (if repeated or not).

3. Tap on the flipping Item image and, in its properties, definewhich image will be displayed. Remember: if the image is smaller than the available space, it will look its size, it will not be re-scaled. It will only be reduced if it is larger than the available space.

Additionally, you can add credits and/or a footer within the image.

4. Finally, select the Flipping Item again, and on the Add tab you can decide which items will appear when the image rotates: texts, audios or videos. Add the items you deem necessary and configure them. Remember that if the content is very broad, an internal scroll will be generated within the component.

Thus, you can configure interactive elements like this: