I don't know if you guys have messed with Squarespace Cover Pages but man they're hard to navigate code-wise. I'm doing a standalone promotional site that only requires a cover page and a video so I'm using the "Premier" cover page. However, for legal reasons I've got to have a footer with copyright info and a link to our privacy statement. My original idea was to use header injection with css ::after to include a full width div but I want the cover page to still take up the full screen and for the user to be able to scroll down to see the footer.
One example I tried to modify was https://answers.squarespace.com/questions/109923/adding-footer-text-on-cover-page-code-injection.html using this code:
<style>
#collection-559df309e4b026e5cd65a4b4
[data-slide-id="559df309e4b026e5cd65a4b5"]
.sqs-slice-group.group-social::after {
content: "some general text";
padding: 5px 0;
margin: 0 auto;
text-align: center;
font-size: 10px;
color: #fff;
}
</style>
I swapped out my collection ID and data-slide-id into this code but it put the "general text" block on top of the play button as well as in the upper-right corner of the screen. I've tried changing elements around to no avail - any help would be appreciated.
Here's what I would do, if I preferred to avoid the use of Javascript. Insert the following HTML into the "Code Injection" header area for the cover page. This will add a div that appears below the main content area, so that the user must scroll down to see it.
<div id="coverFooter">
<a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">© 2016 Your Company, LLC</span>
</div>
<style>
#coverFooter {
position: absolute;
z-index: 1;
top: 100%;
width: 100%;
padding-top: 20px;
padding-bottom: 20px;
background-color: white;
box-sizing: border-box;
text-align: center;
padding-right: 30px;
padding-left: 30px;
/* Use this for right aligned text instead.
text-align: right;
padding-right: 60px;
padding-left: 60px;
*/
}
#coverPP {
white-space: nowrap;
}
#coverCR {
margin-left: 10px;
white-space: nowrap;
}
</style>
Here is a working example, which I will keep online for a week.
You will of course want to modify the href link, the copyright text, and perhaps the CSS rules such as colors and padding values.
Keep in mind that this is injecting the coverFooter div into the top of the body element, though CSS is making it appear at the bottom. This could encourage search engines to index the text inside the div as your page description in SERPS. Be sure to add a "Search Engine Description" under Settings -> Basic in order to help mitigate this, and keep an eye on your page description in SERPS. If this becomes a problem, keep the CSS in the header injection area, but replace the div HTML with Javascript which inserts the div at the bottom of the body element.
Finally, you'll either be linking to a privacy policy on another domain or you'll have to select "Add more pages" and add the privacy-policy page to the "not linked" section.