Быстрое создание красивых сайтов на WordPress. Layers Style Kit на реальном примере

Создадим сайт на 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-кода.