When designing a responsive website, you might want certain elements to appear only on mobile or tablet views while keeping them hidden on desktop. A common example is the hamburger menu, which is essential on mobile but unnecessary on larger screens.
In CodeDesign.ai, elements cannot be added directly to tablet or mobile views. However, you can strategically show or hide elements based on the device type. Here’s how to do it.
Adding an Element in Desktop View
Since new elements can only be added in the desktop view, follow these steps to begin:
Switch to Desktop View – Ensure you’re in the desktop workspace before adding an element.
Insert an Element – Drag and drop the desired element from the Elements tab. This could be an image, div, or any component you need.
Rename the Element – Giving it a unique name helps in identifying it later. For instance, rename an image as "mobile image" if you plan to display it only on mobile.
Hiding the Element in Desktop View
Once the element is added, you can hide it from the desktop view:
Ensure You Are in Desktop View – This step is crucial before making layout changes.
Select the Element – Click on the element you want to hide.
Open Layout Settings – In the right sidebar, navigate to the Layout Settings panel.
Set “Show on Load” to “Hide” – This hides the element from the desktop view.
At this point, the element is hidden from all views, including mobile and tablet. Next, we need to ensure it appears in the correct views.
Making the Element Visible on Mobile and Tablet
Now that the element is hidden everywhere, follow these steps to make it visible in the views you want:
For Mobile View:
Switch to Mobile View – Navigate to the mobile workspace.
Locate the Element in Layers – Since it’s hidden, it won’t appear on the canvas. Instead, go to the Layers panel and find it by name.
Open Layout Settings – Click the gear icon to access settings.
Set “Show on Load” to “Show” – This makes the element visible in the mobile view.
For Tablet View:
Switch to Tablet View – Navigate to the tablet workspace.
Find the Element in Layers – Use the Layers panel to locate the element.
Open Layout Settings – Click the gear icon.
Set “Show on Load” to “Show” – This ensures visibility in tablet view as well.