Добавьте простой нижний колонтитул в шаблон титульной страницы Squarespace Premier

Я не знаю, ребята, запутались ли вы с титульными страницами Squarespace, но, чувак, в них сложно ориентироваться с точки зрения кода. Я делаю отдельный рекламный сайт, для которого требуется только титульная страница и видео, поэтому я использую титульную страницу «Премьер». Однако по юридическим причинам у меня должен быть нижний колонтитул с информацией об авторских правах и ссылкой на наше заявление о конфиденциальности. Моя первоначальная идея состояла в том, чтобы использовать инъекцию заголовка с помощью 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>

Я заменил свой идентификатор коллекции и идентификатор слайда данных в этот код, но он поместил блок «общий текст» поверх кнопки воспроизведения, а также в правом верхнем углу экрана. Я пытался менять элементы безрезультатно - буду признателен за любую помощь.


person Evan Lemmons    schedule 11.07.2016    source источник


Ответы (1)


Вот что бы я сделал, если бы предпочел избежать использования Javascript. Вставьте следующий HTML-код в область заголовка «Внедрение кода» для титульной страницы. Это добавит 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>

Вот рабочий пример, который я буду хранить в сети неделю.

Вы, конечно, захотите изменить ссылку href, текст об авторских правах и, возможно, правила CSS, такие как цвета и значения отступов.

Имейте в виду, что это вставляет div coverFooter в верхнюю часть элемента body, хотя CSS заставляет его отображаться внизу. Это может побудить поисковые системы индексировать текст внутри div как описание вашей страницы в SERPS. Обязательно добавьте «Описание поисковой системы» в разделе «Настройки» -> «Основные», чтобы смягчить это, и следите за описанием своей страницы в SERPS. Если это становится проблемой, оставьте CSS в области вставки заголовка, но замените HTML-элемент div на Javascript, который вставит div в нижнюю часть элемента body.

Наконец, вы либо будете ссылаться на политику конфиденциальности в другом домене, либо вам придется выбрать «Добавить больше страниц» и добавить страницу политики конфиденциальности в раздел «не связанные».

person Brandon    schedule 11.07.2016
comment
Полностью работает и ничего себе - спасибо за самый быстрый и самый подробный ответ, который я когда-либо получал на SO! - person Evan Lemmons; 11.07.2016