Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Is it possible to Hide an Entire Section from my Homepage and Unhide for later use?


scholarsayze

Question

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/

Hello, Is it possible to completely hide a section from both Desktop, mobile and tablet - basically so it is hidden from all devices?

When I design certain sections on my homepage, I often feel like I could keep this design for later, without deleting it and starting the work all over again.

I don't think Squarespace has a feature you can just toggle sections on/off?

My site url = https://bluebird-porcupine-yzdg.squarespace.com/

My Pword = bluebird

Best,

Faiz

Link to comment

25 answers to this question

Recommended Posts

  • 0
body:not(.sqs-edit-mode) section[data-section-id="5f8fea6196d2c93c2a238f81"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section[data-section-id="5f8fea6196d2c93c2a238f81"] {opacity: 0.5 !important;}

 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
26 minutes ago, scholarsayze said:

Site URL: https://bluebird-porcupine-yzdg.squarespace.com/

Hello, Is it possible to completely hide a section from both Desktop, mobile and tablet - basically so it is hidden from all devices?

When I design certain sections on my homepage, I often feel like I could keep this design for later, without deleting it and starting the work all over again.

I don't think Squarespace has a feature you can just toggle sections on/off?

My site url = https://bluebird-porcupine-yzdg.squarespace.com/

My Pword = bluebird

Best,

Faiz

You can hide it temporary by finding section id

Squarespace ID Finder - Chrome Web Store (google.com)

Copy the id and replace in this snippet, it helps hide the section on the page but leave it on edit mode

body:not(.sqs-edit-mode) section-id-found {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode section-id-found {
  opacity: 0.5 !important;
}

image.thumb.png.dd0b5b47e46868d5c2b5dd7a3da5276d.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

Thank you so much Bangank36. Thanks for the ID Finder!!

I copied the code and added the first section ID to test but I'm not sure I have done this correctly, please can you double check:

 

body:not(.sqs-edit-mode) 5f8fea6196d2c93c2a238f81 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode 5f8fea6196d2c93c2a238f81 {opacity: 0.5 !important;}

 

Thank you

Link to comment
  • 0
7 minutes ago, scholarsayze said:

Thank you so much Bangank36. Thanks for the ID Finder!!

I copied the code and added the first section ID to test but I'm not sure I have done this correctly, please can you double check:

 

body:not(.sqs-edit-mode) 5f8fea6196d2c93c2a238f81 {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
body.sqs-edit-mode 5f8fea6196d2c93c2a238f81 {opacity: 0.5 !important;}

 

Thank you

Copy the whole content

image.png.75a0c0f3e8598912deab61462a5311bc.png

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0
1 hour ago, scholarsayze said:

Hello, is it possible to have a similar code to hide a section either:

  1. on desktop
  2. on mobile/tablet

But still available for edit mode. Two separate codes would be great.

I find that one design works better on Desktop than Mobile/Tablet and vice-versa.

Many thanks.

Best,

Faiz

I assume you got the correct id from the previous instruction


/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section-id-found {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}
/* Hide the section on desktop */
@media only screen and (min-width: 768px) {
    body:not(.sqs-edit-mode) section-id-found {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

You will need to get 2 sections id and replace accordingly in section-id-found, they will also show on edit mode

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

Thank you so much! So do I add the full ID code copied like this:

section[data-section-id="5fe32430ede60b2fac33f917"]

So the code should be like this to hide on mobile?

/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5fe32430ede60b2fac33f917"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}
Link to comment
  • 0
1 hour ago, scholarsayze said:

Thank you so much! So do I add the full ID code copied like this:

section[data-section-id="5fe32430ede60b2fac33f917"]

So the code should be like this to hide on mobile?


/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5fe32430ede60b2fac33f917"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

Yes

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Portfolio hover Replace Link Style
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
  • 0

Thank you for confirming,

I tried the code for my first section (under my homepage header) and it didn't seem to work - am I missing something out?

/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5f8fea6196d2c93c2a238f81"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

 

Many thanks.

Link to comment
  • 0
On 12/23/2020 at 11:27 PM, scholarsayze said:

Thank you for confirming,

I tried the code for my first section (under my homepage header) and it didn't seem to work - am I missing something out?

/* Hide the section on mobile */
@media only screen and (max-width: 768px) {
    body:not(.sqs-edit-mode) section[data-section-id="5f8fea6196d2c93c2a238f81"] {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
}

 

Many thanks.

Have you solved this yet?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

Yes I couldn't get it to work but I had to make a slight adjustment here's the code to hide on mobile from 768px to 991px:

/* HIDES HEADER SECTION 1 FROM MOBILE BUT LEAVES IN EDIT MODE*/

@media only screen and (max-width: 991px) {

    body:not(.sqs-edit-mode) section[data-section-id="5fe9eb34ba5cdf3765c10016"] {

      display: none !important;

      visibility: hidden !important;

      opacity: 0 !important;

    }

body.sqs-edit-mode section[data-section-id="5fe9eb34ba5cdf3765c10016"] {opacity: 0.5 !important;}

}

 

/*HIDES HEADER SECTION 2 FROM DESKTOP BUT LEAVES IN EDIT MODE*/

@media only screen and (min-width: 768px) {

    body:not(.sqs-edit-mode) section[data-section-id="5fe9e4d44d160f63a675dc59"] {

      display: none !important;

      visibility: hidden !important;

      opacity: 0 !important;

    }

body.sqs-edit-mode section[data-section-id="5fe9e4d44d160f63a675dc59"] {opacity: 0.5 !important;}

}

 

I believe this works perfectly well now thank you all.

Link to comment
  • 0

Thanks for this question - this is exactly the function I'm looking for on my own site (though I'd like to be able to hide sections not on the homepage, but within a password-protected page for members).  However, pasting the code above  (using ID Finder) to hide a section (but keep it visible while editing) doesn't seem to work.

I wonder if I'm correctly inserting code. Just to be clear, this should be embedded within the section I want to hide?

Many thanks.

Link to comment
  • 0
21 hours ago, roottherapymaine said:

Thanks for this question - this is exactly the function I'm looking for on my own site (though I'd like to be able to hide sections not on the homepage, but within a password-protected page for members).  However, pasting the code above  (using ID Finder) to hide a section (but keep it visible while editing) doesn't seem to work.

I wonder if I'm correctly inserting code. Just to be clear, this should be embedded within the section I want to hide?

Many thanks.

Can you share link to homepage?

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care - Learn CSS - Custom Popup - Testimonial Slider

I'm Tuan, blogger/owner of a free library for children in Vietnam. Helping the community is a hobby. Contact me via email.

Link to comment
  • 0

@roottherapymaine

So it sounds like the code is working, kind of, but the issue is that it also hides the section when you are trying to edit?

If that is the case proceed the selector with the following.

body:not( .sqs-edit-mode ) 

You'll want a space after the closing parenthesis in most cases.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 0

Thanks @creedon - not quite; the issue is that nothing seems to happen other than that the code itself appears once the page is saved (that is, visible to the public). I wonder if I'm entering the code incorrectly; I've been selecting a "code" block within the section I wish to hide (to no avail...)

Link to comment
  • 0

Hi @creedon - Finally returning to this query. It seems that on a personal plan I'm not able to paste any code in the general page settings. I've tried to paste code within the body of the section I'd like to hide, but - as you can see - the code itself is visible, with no other effect.

Here is the test page I created: https://www.roottherapymaine.com/copy-writing-awake-copy

Grateful for any insight you might have, though wonder if this is an issue with my plan level.

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...