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

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

Создадим сайт на WordPress (Style Kit) с использованием WordPress Layers Framework.

Быстрое создание красивых сайтов на WordPress. Layers Style Kit на реальном примере - Видеоурок
Смотреть урок на YouTube
Все курсы канала WebDesign Master

Результат урока: Смотреть

Материалы урока

  • Layers 2.0 – Source code(zip): Скачать
  • Исходные файлы для прохождения урока: Скачать
  • Перевод документации по 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-кода.

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Фриланс для начинающих

Я - фрилансер! Базовый курс для начинающих

Другие уроки по теме «CMS»

  • Ajax фильтр на MODx Revolution
  • Посадка типовой секции Landing Page на MODx с использованием MIGX (добавляемые поля)
  • Настройка прав доступа для контент-менеджера в MODX Revolution
  • MODX Revolution - Базовый урок
  • Как создать шаблон для WordPress. Грамотная посадка верстки на WordPress (Right Way)

Разделы сайта:

  • Курсы
  • Инструменты
  • Веб-дизайн
  • Вёрстка
  • CMS

Полезные ресурсы:

  • Установка WSL и окружения
  • Настройка окружения без WSL
  • Работа с хостингом от А до Я
  • Настройка VS Code
  • Lazy Load Placeholder
  • Документация Gulp
2024 © WebDesign Master