How to Hide an Element/Section in Hostinger Website Builder

Hey everyone, welcome to Ben’s Experience! In this tutorial, I’ll show you how to hide an element or a section in Hostinger Website Builder. This feature is particularly useful when you want different content to appear on mobile devices versus desktops. Follow these steps to make your site more dynamic and responsive.

Step 1: Enter the Website Builder

First, log in to your Hostinger account and navigate to your website builder dashboard.

Step 2: Select the Section or Element to Hide

Once inside the website builder, click on the section or element you want to hide. This could be anything from a photo section to a text box.

Step 3: Click on the Hide/Show Option

With the element selected, look for the ‘Hide/Show’ option. Clicking this will allow you to enable or disable the section for mobile, desktop, or both.

Tip: Customize Mobile and Desktop Versions Separately

A handy tip I discovered just before making this video is that you can edit both the mobile and desktop versions of your website separately. For example, I duplicated a big photo section. The first version includes a product search bar, and the second version has a large text with a description and a button. By using the Hide/Show option, I made the search bar visible only on the desktop version and hid it on mobile. Conversely, the large text and button are only visible on mobile. This way, you can tailor your content to fit the viewing device perfectly.

Step 4: Preview Your Work

After setting your visibility preferences, preview your website. Check both the desktop and mobile versions to ensure everything appears as intended. For instance, on my desktop preview, I see the big photo with the button, and on the mobile preview, I only see the product search bar.

Hiding Individual Elements

To hide an individual element, the process is similar. Click on the element, select ‘Hide/Show,’ and choose the devices you want it to be visible on. For example, I hid my Instagram feed on mobile while keeping it visible on the desktop version.

Conclusion

And that’s how you hide a section or an element in Hostinger Website Builder! This simple yet powerful feature can greatly enhance your site’s usability and appearance across different devices.

Special Offer: Free Online Video Courses

Before you go, I have something special for you. I’m offering two free online video courses: one on Hostinger hosting and WordPress management, and the other on using Hostinger Website Builder to create basic websites or online shops. You can access both courses for free by clicking the link in the description.

If you found this tutorial helpful, please give it a thumbs up and subscribe to my channel for more tips and tutorials. If you have any questions, leave a comment below!

Happy building!

🔔 Subscribe for more tips just like this: https://www.youtube.com/@bensexperience?sub_confirmation=1