Создадим сайт на WordPress (Style Kit) с использованием WordPress Layers Framework.
Результат урока: Смотреть
Материалы урока
- Скачать Layers 2.0 – Source code(zip) с GitHub
- Исходные файлы для прохождения урока: Скачать
- Перевод документации по WordPress Layers: Читать
- layers-style-kit-demo readme.txt на GitHub
- Рекомендую использовать пипетку Instant Eyedropper
Код для плавного скролла при клике по ссылке с хэшем (в меню):
jQuery(function($) {
$('a[href^="#"]').live('click', function(event) {
event.preventDefault();
var target_offset = $(this.hash).offset() ? $(this.hash).offset().top : 0;
//change this number to create the additional off set
var customoffset = 40;
$('html, body').animate({scrollTop: target_offset - customoffset}, 500);
});
}(jQuery));
Внимание! С официального сайта Layers рекомендую скачивать только в том случае, если вы хотите использовать связку Layers + Elementor.
Шаги установки Layers 2.0 могут отличаться от первой версии. Просто оставляйте дефолтные значения, нажимая "Вперед". Интерфейс второй версии может немного отличаться, но там все интуитивно понятно.
Цвет текста в каждом слайдере можно указать белый как для заголовка, так и для подзаголовка, если у вас цвет текста слайдов по умолчанию черный. Никаких глобальный изменений в работе Layers нет, кроме того, что появился удобный кодовый редактор для кастомного CSS-кода.
