How to Hide Elements and Sections Using OzSpeed hPanel

Hiding elements or sections on your website can be useful when you want to temporarily remove content, run A/B tests, or display specific content only to certain users or devices. With OzSpeed’s Website Builder, you can easily hide any element or section without permanently deleting it, giving you the flexibility to show or hide content as needed. Here’s how to do it step by step.

---

Step 1: Access the Website Editor #

To start hiding elements or sections, open the page editor in hPanel.

1. Log in to hPanel at ozspeed.com.au.
2. Go to Website Builder > Edit Site.
3. Navigate to the page that contains the element or section you want to hide.

Tip: #

• Use the Preview feature to see the current layout and decide which elements or sections you might want to hide.

---

Step 2: Select the Element or Section #

Click on the element (e.g., Text Block, Image, Button) or the entire section that you want to hide.

How to Select: #

1. Click on the specific element or section to highlight it.
2. Ensure the element or section is outlined, indicating it is selected.

Tip: #

• If you want to hide multiple elements together, consider grouping them first for easier management.

---

Step 3: Hide the Element or Section #

You can hide the selected element or section using the Visibility Settings.

How to Hide: #

1. Click on the Settings Icon (gear icon) of the selected element or section.
2. Go to the Visibility Settings tab.
3. Toggle the Visibility Switch to Off (hidden).
4. Click Save.

Tip: #

• The hidden element will still be visible in the editor but will not appear on the published website.

---

Step 4: Hide Elements for Specific Devices (Optional) #

You can choose to hide elements only on certain devices (e.g., hide an image on mobile but show it on desktop).

How to Set Device-Specific Visibility: #

1. Click on the element to open the Settings Panel.
2. Go to the Responsive Settings tab.
3. Toggle the visibility options for Desktop, Tablet, or Mobile.
4. Click Save.

Tip: #

• Use this feature to optimize your website’s design for different screen sizes and devices.

---

Step 5: Preview the Changes #

Before publishing, preview the page to ensure that the hidden elements or sections do not appear.

How to Preview: #

1. Click Preview in the top toolbar.
2. Check the page on both desktop and mobile views.
3. Verify that the hidden elements or sections are not visible.

Tip: #

• Use an incognito window or clear your browser cache to see the changes as a new visitor would.

---

Step 6: Publish the Changes #

Once you’re satisfied with the hidden elements, publish your updates to make the changes live.

How to Publish: #

1. Click Publish in the top right corner of the editor.
2. Confirm the changes to go live.

Tip: #

• Let your team know about the changes if you’re working collaboratively, especially if the hidden content is part of a temporary update.

---

Step 7: Unhide Elements or Sections #

If you need to display the hidden elements or sections again, you can easily reverse the process.

How to Unhide: #

1. Click on the hidden element or section (it will appear faded in the editor).
2. Go to the Visibility Settings tab.
3. Toggle the Visibility Switch to On (visible).
4. Click Save.

Tip: #

• Use the Undo button in the editor for a quick way to revert changes if needed.

---

Troubleshooting Tips #

1. Element Still Visible After Hiding:
   • Check that the visibility toggle is set to Off in the settings.
   • Clear your website cache in hPanel and your browser cache.
2. Hidden Elements Affecting Layout:
   • Ensure that the hidden elements do not leave large empty spaces. Adjust the surrounding elements or sections if necessary.
   • Use the responsive design settings to hide elements only on specific devices.
3. Unable to Select Hidden Element:
   • Use the Layer Panel or Element Tree in the editor to locate and select hidden elements for easy management.

---

Additional Tips: #

• Use for Seasonal Content: Hide promotional banners or seasonal offers when they are not in use, and easily unhide them when needed.
• Test Changes Before Publishing: Always preview your site after hiding elements to make sure the layout remains consistent.
• Group Elements for Efficiency: If you frequently hide and unhide multiple elements together, group them for easier control.