Swaps
How to add and style swaps.
What Are Swaps?
Swap parts allow you to toggle the visibility of two elements, by clicking on them. This means that when you click on one element, it is hidden, and the other element is displayed, and vice versa. This functionality is useful for creating interactive and dynamic user interfaces.
Location in the Parts Library: Base Parts > Actions > Swap
There are also Swaps in Page Sections, including:
Page Sections > Testimonials,
Page Sections > Meet the Team,
Page Sections > FAQs, and
Page Sections > Contacts.
Why Are Swaps Useful?
Swaps can be used in a variety of ways and for different purposes. They :
Swaps make it easy to show and hide content without needing to navigate away from the current page or load new content.
Give users control over the interface, allowing them to interact with elements based on their needs.
Help manage limited screen space by displaying only the most relevant content at a time.
Simplify interfaces by reducing clutter, swaps can make complex interfaces simpler and more intuitive.
Adding and Formatting the Swap
Choose your preferred Swap from the Parts Library, select the part where you’d like to add your swap, and click ‘+ add to page’.
The Swap (parent) houses two key parts (children):
Swap Off - the visible content shown before the swap is clicked.
Swap On - the content that is revealed when the swap is clicked.
The Swap Off and Swap On parts are versatile and contain whatever content you like. For example, they can be simple parts only containing an icon or an image, or they can be more complex containing parts such as rows, columns, cards, and a variety of other content.
Here is an example showing the hierarchy of parts in a swap. Switching from the 'Swap Off' to the 'Swap On' was done using 'Command+Click' (Mac). The same would be achieved using 'Control+Click' (Windows):
Editing the Swap Part
Like many other parts, size, borders, shadow, opacity, colors, and spacing can be applied using the property editor on the right, once the swap has been selected.
You can choose the 'Effect' of the Swap using the property editor. You can either rotate or flip the swap:
Make sure you have selected the Swap part (the parent) in order to apply the Effect. Selecting 'Default' means that no effect is applied. Here is an example showing the Rotate Effect on the left, and the Flip Effect on the right:
Editing the Contents of Swaps - 'Swap Off' and 'Swap On'
Let's start with editing the 'Swap Off' part. This is the part that is visible before the swap has been activated to reveal the 'Swap On' part.
Click on the part - you will automatically be editing content that is contained within the 'Swap Off'. (If you're unsure you are in the 'Swap Off', then navigate to the parent to make sure you're in the right place). Edit as you normally would - to edit the text, go to Text > Value set, and replace the text with your own.
If there is an icon, then go to Icon > Value set, and replace the icon with your preferred icon. Format the icon as needed.
Continue to edit as necessary for other content parts. This includes adding any parts from the parts library. For example, you can add rows, columns, cards, images, buttons, you name it!
To edit the contents of the 'Swap On' part (the part that is revealed when clicked), use 'Command+Click' (Mac) or 'Control+Click' (Windows) on the part to open the contents. That will open the content area, and you can go ahead and edit the text, or add any other content you'd like to the area.
Making the Swap 'Active'
By checking the 'Active' checkbox in the property editing panel, you will make the swap part active. That means that only the 'Swap On' part will be visible. The user will not be able to toggle between on and off.
Related Information
Last updated
Was this helpful?