How To Hide Section In Squarespace: Complete Guide For Fluid Engine And Classic Editor
Hiding a section on your Squarespace website allows you to temporarily or permanently remove content from the live view without losing valuable text, custom code, or design layouts. Depending on your version and specific requirements, you can achieve this by utilizing the built-in visibility toggle, archiving the page, or applying targeted CSS injections.
Pre-Procedure Planning for Squarespace Layout Management
Managing your website layout requires an understanding of how Squarespace handles visibility, rendering, and underlying DOM elements. Before altering your page structure, you must determine whether you need a temporary hide, a device-specific restriction, or a complete structural deletion.
- Essential tools and access requirements: Administrative or Content Editor permissions, a supported desktop browser (Google Chrome, Safari, or Firefox), and an active Squarespace subscription (Fluid Engine or Classic Editor).
- Mandatory prerequisite knowledge: Familiarity with the Squarespace backend interface, basic understanding of block structures, and awareness that hidden sections may still load underlying scripts or CSS assets depending on the method used.
- Estimated duration and scope benchmarks: 2 to 5 minutes per section modification, applicable to both Squarespace 7.1 (Fluid Engine) and Squarespace 7.0 environments.
Step-by-Step Instructions to Hide Sections in Squarespace
Step 1: Access the Pages Panel and Open the Target Page
Log into your Squarespace account and navigate to the Home Menu. Click on the Pages tab to view your site architecture. Locate the specific page containing the section you want to hide, and click on it to open the page preview in the main workspace. Ensure you click the Edit button in the top-left corner of the preview window to enter the active layout editor mode.
Step 2: Locate the Specific Section and Open Section Settings
Scroll through your page layout until you find the exact section you wish to hide. Hover your cursor over the section to trigger the floating action toolbar on the right side. Click the pencil icon or the gear icon labeled Edit Section to open the section configuration overlay panel.
Step 3: Configure Section Visibility and Save Changes
Within the section settings modal, look for the visibility options depending on your version. In Squarespace 7.1, you can toggle visibility settings or remove the section from the page entirely. If you want to retain the section data for future use without deleting it, navigate to the page manager, click the settings gear next to the page name, and move the entire page to the unlinked section if it is a standalone landing page. Click Save in the upper left corner of the editor to push your updates live.
Pro-Tip: If you only want to hide a section on mobile devices or desktop screens without removing it globally, use custom CSS targeting the specific section data-section-id to set display to none based on media queries.
Warning: Deleting a section instead of utilizing visibility workarounds permanently purges all integrated blocks, custom code blocks, and embedded media, making recovery impossible once you save and exit the editor.
New Squarespace Feature: Saved Sections
Squarespace Version Comparison and Visibility Methods
| Method Name | Squarespace Version Compatibility | Impact on Live Site | Data Retention | Technical Difficulty |
|---|---|---|---|---|
| Section Deletion | v7.0 and v7.1 | Removes content instantly | Permanent loss | Beginner |
| Unlinked Page Migration | v7.0 and v7.1 | Hides entire page from navigation | Full retention | Beginner |
| CSS Display None Injection | v7.1 (Fluid Engine) | Hides section visually, loads in DOM | Full retention | Advanced |
| Duplicate and Test Page | v7.0 and v7.1 | Creates staging environment | Full retention | Intermediate |
Common Site Failures and Field Fixes for Hidden Sections
- Root Cause: Custom CSS targeting a section ID breaks after duplicating or rearranging page sections.
- Actionable Fix: Right-click your live page, inspect the page source, locate the updated data-section-id attribute value, and update your Custom CSS panel with the correct alphanumeric identifier.
- Root Cause: A hidden section's background audio or auto-playing video continues to emit sound on the live page.
- Actionable Fix: Never rely solely on visual hiding methods for rich media blocks; manually pause, delete, or mute the underlying media elements inside the block settings before adjusting visibility.
- Root Cause: Mobile layout breaks or leaves massive blank white spaces after hiding desktop-specific elements.
- Actionable Fix: Switch to the mobile preview mode in the top right of the Squarespace editor and manually readjust the vertical stacking and padding of adjacent blocks in the Fluid Engine grid.
Frequently Asked Questions
Can I hide a section on mobile only in Squarespace?
Squarespace does not currently feature a native one-click toggle to hide a specific section exclusively on mobile devices within standard settings. However, you can achieve this by inspecting the section's unique data-section-id and writing a custom CSS media query that targets screen widths below 767px with a display none declaration.
What is the difference between deleting a section and hiding it?
Deleting a section completely erases the layout, text, images, and embedded code blocks from your database once saved. Hiding or moving a section to an unlinked state preserves your content and design assets so you can restore or edit them at a later date without starting from scratch.
Do hidden sections affect my website SEO performance?
Search engine crawlers may still index content that is hidden via certain CSS methods if the HTML remains present in the source code. If you want to ensure search engines completely ignore draft or experimental content, keep those sections on unlinked pages or password-protect the entire directory.
Why can't I find the visibility toggle in my section settings?
The native visibility toggle availability varies depending on your specific template and whether you are using Squarespace 7.0 or the newer 7.1 Fluid Engine architecture. If the toggle is absent, you can use the move-to-unlinked-pages method or duplicate the page into a draft state while you perform edits.
Will hiding a section reduce my page loading speed?
Hiding a section using standard CMS settings generally prevents its visual rendering, but heavy image assets or embedded scripts within hidden blocks may still initiate HTTP requests. Optimize your page speed by compressing all media files and removing unused third-party script blocks entirely rather than just hiding them.
Master your website architecture today by auditing your live layouts and streamlining your user experience with precise section management. Implement these expert workflows now to maintain a polished, professional Squarespace presence.
