向 Squarespace 封面模板添加一个简单的页脚 "Premier"

Question

我不知道你们是否搞砸了 Squarespace Cover Pages，但伙计，它们很难导航 code-wise。我正在做一个只需要封面和视频的独立宣传网站，所以我使用 "Premier" 封面。但是，出于法律原因，我必须在页脚中添加版权信息，并在我们的隐私声明中添加 link。我最初的想法是使用 header 注入和 css ::after 来包含一个完整的宽度 div 但我希望封面仍然占据全屏并且用户可以可以向下滚动查看页脚。

我尝试修改的一个示例是 https://answers.squarespace.com/questions/109923/adding-footer-text-on-cover-page-code-injection.html 使用此代码：

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

我将我的 collection ID 和 data-slide-id 换成了这段代码，但它把 "general text" 块放在了播放按钮的顶部以及 upper-right屏幕的一角。我试过改变周围的元素无济于事 - 任何帮助将不胜感激。

Answer 1

如果我不想使用 Javascript，我会这样做。将以下 HTML 插入封面的 "Code Injection" header 区域。这将添加一个显示在主要内容区域下方的 div，因此用户必须向下滚动才能看到它。

<div id="coverFooter">
    <a id="coverPP" href="/privacy-policy/">Privacy Policy</a> <span id="coverCR">&copy; 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，我会保持在线一周

您当然会想要修改 href link、版权文本，也许还有 CSS 规则，例如颜色和填充值。

请记住，这是将 coverFooter div 注入到 body 元素的顶部，尽管 CSS 使其出现在底部。这可能会鼓励搜索引擎将 div 中的文本编入索引，作为您在 SERPS 中的页面描述。请务必在“设置”->“基本”下添加一个 "Search Engine Description" 以帮助缓解这种情况，并留意您在 SERPS 中的页面描述。如果这成为一个问题，请将 CSS 保留在 header 注入区域，但将 div HTML 替换为 Javascript 以插入 div在 body 元素的底部。

最后，您要么 link 访问另一个域的隐私政策，要么必须 select "Add more pages" 并添加 privacy-policy 页面到 "not linked" 部分。

向 Squarespace 封面模板添加一个简单的页脚 "Premier"

Add a simple footer to Squarespace Cover Page template "Premier"

css

footer

squarespace