Jump to content

How do I add the Gallery Overlay Text to all of my pages?

Recommended Posts

Site URL: https://hallevandehey.com

The gallery pages on my template come with a built in Gallery Overlay Text. When I add a page description, it automatically shows up at the top of the page. 

You can see this on my site here: https://hallevandehey.com/sonoslive1685587462_ScreenShot2021-01-30at12_00_48PM.thumb.png.01b4ae332f73ffb7a2730213ece95c24.png

I added two pages to my website using the blank page instead of the gallery page. The blank pages don't start with the Galley Overlay Text using the page description and I cannot figure out how to add it. 

You can see this on my site here: https://hallevandehey.com/-0011649840290_ScreenShot2021-01-30at12_00_59PM.thumb.png.b9456d24d1b68aba23de82e7a350b760.png

 

Does anyone know how to fix this? 

 

Link to comment
  • Replies 11
  • Created
  • Last Reply
10 hours ago, HalleVanDeHey said:

Site URL: https://hallevandehey.com

The gallery pages on my template come with a built in Gallery Overlay Text. When I add a page description, it automatically shows up at the top of the page. 

You can see this on my site here: https://hallevandehey.com/sonoslive1685587462_ScreenShot2021-01-30at12_00_48PM.thumb.png.01b4ae332f73ffb7a2730213ece95c24.png

I added two pages to my website using the blank page instead of the gallery page. The blank pages don't start with the Galley Overlay Text using the page description and I cannot figure out how to add it. 

You can see this on my site here: https://hallevandehey.com/-0011649840290_ScreenShot2021-01-30at12_00_59PM.thumb.png.b9456d24d1b68aba23de82e7a350b760.png

 

Does anyone know how to fix this? 

 

In blank page could you add text block instead? the way description show up is based on the template

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
16 hours ago, HalleVanDeHey said:

Okay! I added text intros on both https://hallevandehey.com/-001 and https://hallevandehey.com/mta but I am not finding any way to animate the text like it is on the other pages. 

Screen Shot 2021-01-31 at 10.32.21 AM.png

I made a css trick, tell me if you find it good enough

#block-yui_3_17_2_1_1612109807034_27719 {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    z-index: 99999;
    background: #fff;
  
    -webkit-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -moz-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -ms-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -o-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
}
#block-yui_3_17_2_1_1612109807034_27719 .sqs-block-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  
    z-index: 220;
    -webkit-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -moz-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -ms-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -o-transition: transform 400ms ease, opacity 250ms 100ms ease;
    transition: transform 400ms ease, opacity 250ms 100ms ease;
}
.site-header.hide-header + #mainContent  #block-yui_3_17_2_1_1612109807034_27719 {
   opacity: 0;
    
}
.site-header.hide-header + #mainContent  #block-yui_3_17_2_1_1612109807034_27719 .sqs-block-content {
   opacity: 0;
  -webkit-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -moz-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -ms-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -o-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  transform: translate(-50%,-50%) translate3d(0,-60px,0);
    
}

#block-yui_3_17_2_1_1612109807034_27719 is the unique block id of the text

You can extract it using this extension: Squarespace ID Finder - Chrome Web Store (google.com) and replace it accordingly if you want to apply for other page

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
On 2/1/2021 at 8:55 AM, HalleVanDeHey said:

Thank you so much for taking the time to help me with this!! I think I may be doing something wrong when applying it into the page header code injection on my site. 

Screen Shot 2021-02-01 at 9.53.30 AM.png

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/1/2021 at 3:08 AM, bangank36 said:

I made a css trick, tell me if you find it good enough



#block-yui_3_17_2_1_1612109807034_27719 {
    display: block;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 1;
    z-index: 99999;
    background: #fff;
  
    -webkit-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -moz-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -ms-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    -o-transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
    transition: opacity 300ms 0ms ease, visibility 0ms 0ms linear;
}
#block-yui_3_17_2_1_1612109807034_27719 .sqs-block-content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
  
    z-index: 220;
    -webkit-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -moz-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -ms-transition: transform 400ms ease, opacity 250ms 100ms ease;
    -o-transition: transform 400ms ease, opacity 250ms 100ms ease;
    transition: transform 400ms ease, opacity 250ms 100ms ease;
}
.site-header.hide-header + #mainContent  #block-yui_3_17_2_1_1612109807034_27719 {
   opacity: 0;
    
}
.site-header.hide-header + #mainContent  #block-yui_3_17_2_1_1612109807034_27719 .sqs-block-content {
   opacity: 0;
  -webkit-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -moz-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -ms-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  -o-transform: translate(-50%,-50%) translate3d(0,-60px,0);
  transform: translate(-50%,-50%) translate3d(0,-60px,0);
    
}

#block-yui_3_17_2_1_1612109807034_27719 is the unique block id of the text

You can extract it using this extension: Squarespace ID Finder - Chrome Web Store (google.com) and replace it accordingly if you want to apply for other page

Thank you so much for taking the time to help me with this!! I think I may be doing something wrong when applying it into the page header code injection on my site. 

1386476059_ScreenShot2021-02-01at9_53_30AM.png.afa23cb3f2471981e4ddc485b06669f1.png

Link to comment
5 hours ago, HalleVanDeHey said:

Thank you so much for taking the time to help me with this!! I think I may be doing something wrong when applying it into the page header code injection on my site. 

1386476059_ScreenShot2021-02-01at9_53_30AM.png.afa23cb3f2471981e4ddc485b06669f1.png

put it in Design->Custom Css

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date format)
💫 Animated Buttons (Referral URL)
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment
  • 4 weeks later...
On 2/3/2021 at 8:39 PM, bangank36 said:

put it in Design->Custom Css

Oh wait! I just realized that once you reach the bottom of the page it takes you back to the top. Is there a way for it to stay at the bottom so you can see the tabs again? It should look like this at the bottom of the page.

Screen Shot 2021-03-01 at 9.07.58 PM.png

Link to comment
  • 3 weeks later...
On 3/1/2021 at 9:08 PM, HalleVanDeHey said:

Oh wait! I just realized that once you reach the bottom of the page it takes you back to the top. Is there a way for it to stay at the bottom so you can see the tabs again? It should look like this at the bottom of the page.

Screen Shot 2021-03-01 at 9.07.58 PM.png

Hey! @bangank36 I know you are very busy, but I would love your help with this problem when you have time. Thank you so much for your help.

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.