Products

Mockplus Cloud

Design Handoff and Collaboration

Mockplus RP

Interactive Prototyping

Mockplus DT

Free UI Design Tool

Mockplus DS

Manage Design Systems
Downloads
Enterprise
Pricing

Mockplus Cloud

Mockplus RP
Learn

Tutorial

Support articles, user guides

Blog

Learn design for inspiration

Community

Learn from other designers
What's New Learn more >
Resort and Manage All Frames with Just One Click

Mockplus Team  |  Mar 4, 2024
What's New: PRD Version Comparison, Adjusting Content on Size, and More

Mockplus Team  |  Feb 6, 2024
Templates
Start for free
Method 1: Using the Dynamic Panel Method 2: Using the Content Panel Other features
Mockplus RP
Mockplus Cloud Mockplus RP Mockplus DT
Still Need Help? Join our Discord community support@mockplusapp.com
Tutorial / Mockplus RP / Interactions / Content Switching

Content Switching

Content switching effect refers to a design effect that allows users or visitors to switch between different pieces of content within the same area of a screen or user interface, like the slideshows, carousels, clickable tab bar and more.
With Mockplus, creating a content switching effect is easy, thanks to the Dynamic Panel and Content Panel components. (We highly recommend trying out the Dynamic Panel.)
In this tutorial, we'll explore how to create a content switching effect using both the Dynamic Panel and Content Panel components:

Method 1: Using the Dynamic Panel

The Dynamic Panel component is a container where you can put different pieces of content into and switch between them when simulating your web or mobile app prototype. It's ideal for creating a content switching effect within any part of your design.
Here are the detailed steps:
Step 1. Add a Dynamic Panel and place your content
Start by dragging a "Dynamic Panel" component onto the artboard. Double-click it to create one or multiple states. Then, fill all of these states with your content.
Step 2. Delete, resort or manage content states
Under the editing mode of the Dynamic Panel, you can add, delete, resort and manage the states as you need. The sequence in which the states are arranged will determine the order in which they are presented during the preview.

Step 3. Add interactions
To complete your content switching design, set the Dynamic Panel as the interaction target. Choose the "Switch content" command and configure other interaction details.

Now, you have a content switching design that enables users to seamlessly switch switch between different pages or page sections within the same area.

Method 2: Using the Content Panel

The Content Panel component is another container helping to create a content switching effect. In need of using some sub-artboards to create dynamic content, the Content Panel requires you to follow different steps to create a content switching effect:

Let’s go through it step by step:

Step 1: Choose components

First, you need to drag a Content Panel and a Tab Bar onto the artboard. 

Then, create three sub-artboards and add images to each of them separately.

Step 2: Link the Content Panel and the sub-artboards together

Drag the link point of the Content Panel to each of the three sub-artboards separately. 

Step 3: Link the Content Panel and the Tab Bar together

To create separate interactions, double click the Tab Bar and then, one by one, drag the link point of each tab to the Content Panel. Finally, choose the "Switch content" command and select the sub-artboards you want to link to these tabs in the right panel.


Other features

When the Content Panel is selected, pressing "Enter" activates a panel with all relevant sub-artboards listed. Here you can adjust the order of these sub-artboards with drag-and-drop or the up and down arrows. To delete them, just select them and click “Delete” in the upper right corner.

Previous Interaction Settings
Next Mask