Как создать раскрытие нижнего колонтитула с помощью Divi
Опубликовано: 2017-07-28В сегодняшнем руководстве по Divi мы покажем вам, как достичь определенного эффекта, о котором вы, вероятно, никогда не думали интегрировать в свой собственный или клиентский веб-сайт. Точнее; мы собираемся показать вам, как создать раскрытие нижнего колонтитула. Раскрытие нижнего колонтитула в основном ждет, пока вы не окажетесь в конце страницы, и показывает нижний колонтитул в соответствии с тем, как вы прокручиваете. После того, как вы прокрутите страницу до конца, нижний колонтитул будет показан в исходном виде.
Добавление раскрытия нижнего колонтитула на ваш веб-сайт может внести дополнительные небольшие штрихи в нижний колонтитул вашего веб-сайта. Это также последнее, что люди увидят, пролистывая любую страницу вашего сайта. Чтобы показать вам, что именно мы подразумеваем под раскрытием нижнего колонтитула, давайте посмотрим на конечный результат:
Вы можете видеть, что, помимо раскрытия нижнего колонтитула, мы также добавили небольшую тень к основному контенту нашего веб-сайта. Таким образом, мы создали своего рода перспективу между основным контентом и нижним колонтитулом.
Как создать раскрытие нижнего колонтитула с помощью Divi
Подпишитесь на наш канал Youtube
Добавьте необходимый код CSS
Чтобы добиться результата, показывающего нижний колонтитул, нам, прежде всего, понадобятся несколько строк кода CSS. Поскольку есть разные способы добавить код CSS на ваш сайт Divi, мы покажем вам все три из них. Во-первых, мы покажем вам, как добавить код в параметры темы. Во-вторых, мы добавим код через настройщик тем. При добавлении кода одним из двух методов отображение нижнего колонтитула сразу же применяется ко всему веб-сайту. С другой стороны, если вы хотите, чтобы код применялся конкретно к одной странице, вы также можете это сделать. Показав вам, как добавить код на страницу, над которой вы работаете, вы можете создать этот эффект исключительно для одной страницы.
Две основные вещи, которые нам понадобятся в нашем коде, - это z-index и нижняя граница поля для основного содержимого. Чтобы убедиться, что нижний колонтитул подходит идеально, нам нужно знать высоту нижнего колонтитула. Обычно используемый нижний колонтитул имеет значение 53 пикселя. Но, возможно, вы изменили высоту в соответствии со своими потребностями. После того, как мы покажем вам, как добавить стандартный нижний колонтитул, мы также покажем вам, как подогнать его под высоту любого нижнего колонтитула.
Добавьте необходимый код CSS с помощью параметров темы
Первый способ, которым мы покажем вам, как добавить код CSS, - это через параметры темы Divi. Это наиболее часто используемый метод добавления любого дополнительного кода CSS на ваш сайт. Добавив код CSS в эту область, вы сразу же примените его ко всему веб-сайту.
Чтобы добавить код, перейдите в панель управления WordPress> Divi> Параметры темы> и скопируйте и вставьте следующие строки кода CSS в поле Custom CSS внизу вкладки:
#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
После того, как вы добавили код, перейдите на свой веб-сайт и посмотрите, как нижний колонтитул выполняет свою работу.
Добавьте необходимый код CSS с помощью настройщика темы
Еще один способ добавить код CSS на ваш сайт Divi - через настройщик тем. Добавление кода через настройщик темы или параметры темы - то же самое. Как только вы удалите код в параметрах темы, он будет удален и в настройщике темы, и наоборот. Одним из преимуществ добавления кода через настройщик тем является то, что вы можете видеть все, что происходит в режиме реального времени. Таким образом, дополнительные настройки, которые вы вносите в код, сразу же дадут вам четкое представление о конечном результате, который вы получите.
Чтобы добавить код в настройщик тем, перейдите в панель управления WordPress> Внешний вид> Настройка> Прокрутите вниз до «Дополнительный CSS»> и добавьте следующие строки кода CSS:
#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
Добавьте необходимый CSS-код только на одну страницу
Последний способ добавить нижний колонтитул, раскрывающий строки кода CSS, - это добавить его, в частности, на одну страницу. Это может быть интересно, если вы хотите, например, придать дополнительную ценность страницам с менее интерактивным контентом. Добавляя раскрытие нижнего колонтитула, вы каким-то образом все равно сделаете страницу немного более интерактивной и сосредоточите внимание на контенте, который предоставляется в нижнем колонтитуле, например, на значках социальных сетей.
Чтобы добавить код CSS, в частности, на одну страницу, откройте эту конкретную страницу. В правом верхнем углу Divi Builder на этой странице вы увидите следующий значок.
Щелкните значок и вставьте следующие строки кода в поле Custom CSS:
#main-content {
margin-bottom: 53px;
z-index: 2;
}
#main-footer {
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
После того, как вы сохранили настройки, вы увидите, что нижний колонтитул появляется именно на этой странице.
Изменить высоту нижнего колонтитула
Теперь метод, который мы объяснили выше, учитывается только для стандартного нижнего колонтитула. Если вы имеете дело с другой высотой, код не будет выполнять свою работу должным образом. Мы учли это и покажем вам, как сделать так, чтобы нижний колонтитул открывался и для других высот.
В любой момент вы можете выбрать высоту, которую хотите назначить нижнему колонтитулу. Мы должны установить высоту для двух идентификаторов CSS: основного нижнего колонтитула и нижнего колонтитула. Отрегулировав высоту в этих двух местах, нижний колонтитул поместится на место. Конечно, как только вы это сделаете, вам также нужно будет изменить нижнюю границу поля вашего основного контента. Например, если вам нужен нижний колонтитул высотой 60 пикселей, вам потребуются следующие строки кода:
#main-content {
margin-bottom: 60px;
z-index: 2;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}
Вы можете видеть, что есть три места, где нам нужно значение 60 пикселей. Если у вас есть другое значение высоты, которое вы хотите присвоить нижнему колонтитулу, убедитесь, что вы изменили его во всех трех местах; основное содержание, нижний колонтитул и нижний колонтитул.
Добавить тень блока CSS
Еще одна вещь, которую вы можете сделать, чтобы добавить немного перспективы и взаимодействия к своему веб-сайту, - это добавить тень блока к основному контенту. Нижний колонтитул уже показывает, что он как бы расположен «под» основным контентом. Как только вы добавите тень блока, вы это подчеркнете. При наличии тени иллюзорное расстояние по высоте между основным контентом и нижним колонтитулом будет казаться больше.
Чтобы добавить тень блока к раскрытию нижнего колонтитула, используйте следующие строки кода:
#main-content {
margin-bottom: 60px;
z-index: 2;
-webkit-box-shadow: 1px 1px 10px 1px black;
-moz-box-shadow: 1px 1px 10px 1px black;
box-shadow: 1px 1px 10px 1px black;
}
#main-footer {
height: 60px;
width: 100%;
position: fixed;
left: 0;
bottom: 0;
z-index: -1;
}
#footer-bottom {
height: 60px;
}
Вот и все! Ваш нижний колонтитул теперь должен работать нормально.
Последние мысли
В сегодняшнем посте мы показали вам, как можно создать эффект раскрытия нижнего колонтитула на своем веб-сайте. Убедитесь, что вы используете предоставленный пользовательский код CSS для создания эффекта и убедитесь, что он соответствует высоте вашего нижнего колонтитула. Если вы хотите придать ему дополнительную перспективу, мы рекомендуем добавить тень блока к основному контенту, как показано на шаге выше. Если у вас есть вопросы или предложения; обязательно оставьте комментарий в разделе комментариев ниже!
Обязательно подпишитесь на нашу рассылку по электронной почте и канал на YouTube, чтобы не пропустить важное объявление, полезный совет или бесплатную поддержку Divi!
Лучшее изображение Демья / shutterstock.com