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

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/sonoslive

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/-001

Does anyone know how to fix this? 

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/sonoslive

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/-001

 

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

Yes, I could do that and it would partially solve the problem. It doesn't seem there is any way to add animation to the text to make it look and feel the same as the gallery pages though.

I'll give it a try so you can see the difference! 

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. 

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. 

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

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. 

Do you still need help?

11 hours ago, tuanphan said:

Do you still need help?

Yes!! I do. I tried inserting the code bangank36 made for me, but it doesn't seem to be working. 

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. 

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. 

put it in Design->Custom Css

On 2/3/2021 at 8:39 PM, bangank36 said:

put it in Design->Custom Css

Oh my goodness it worked!! Thank you so so much for your help. I really appreciate it.

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.

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.

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.