Слайдер

Слайдер Temdo — это мощный и простой в управлении инструмент для создания красивых слайдеров для вашего сайта. Основные возможности слайдера:

  • Фоном каждого слайда можно выбрать любое изображение или видео
  • Дополнительное наложенное изображение
  • Анимация при скроллинге
  • Анимация при смене слайдов

Если вам необходимо создать красивый «классический» слайдер (фон, не более двух дополнительных графических слоев, заголовок, подзаголовок, текст и не более двух кнопок на каждом слайде), рекомендуется использовать Temdo Slider, особенно если вам нужны полноэкранные слайдеры и фоновое видео.

В случае, если вам необходимы возможности более тонкой настройки слайдера (неограниченное количество элементов на каждом слайде, визуальный редактор слайдов и т. д., рекомендуется использовать LayerSlider или Revolution Slider, которые также входят в поставку Temdo Framework.

Создание слайдера

Чтобы создать новый слайдер, в левом меню Консоли WordPress выберите пункт Слайдер > Добавить новый слайд:

Тип слайда

Базовый параметр слайда — это тип фона (изображение или видео). В зависимости от выбора этого параметра меняется интерфейс настроек слайда: при выборе видео вместо группы настроек Статический фон появляется группа Анимированный фон.

Фон слайда

Выберите фоновое изображение для слайда. Имейте в виду, что фоновое изображение будет растянуто на полную ширину экрана (с сохранением пропорций). Поэтому рекомендуется использовать изображения разрешения Full HD (1920 x 1080 пикселей). Если вы хотите, чтобы слайдер не занимал весь экран по высоте, нужно установить высоту в настройках слайдера.

Наложенное изображение

Используйте эту опцию для наложения дополнительного изображения с прозрачным или полупрозрачным фоном поверх основного фонового изображения. Наложенное изображение будет размножено по всей поверхности слайда в виде текстуры.

Анимация фона

Включите эту опцию, если вы хотите анимировать фоновое изображение. После включения становятся доступны следующие виды анимации:

  • Увеличение относительно центра (по умолчанию)
  • Увеличение относительно верхнего левого угла
  • Увеличение относительно верхнего правого угла
  • Увеличение относительно нижнего левого угла
  • Увеличение относительно нижнего правого угла

 

Фоновое видео

Слайдер Temdo поддерживает форматы видео webm, mp4 и ogg.

Для использование видео в качестве фона необходимо его сначала загрузить в библиотеку медиафайлов вашего сайта. Для этого в левой панели Консоли WordPress выберите пункт Медиафайлы > Добавить новый. После окончания загрузки видео скопируйте его адрес в буфер обмена и вернитесь к редактированию слайда. Вставьте путь к видеофайлу из буфера обмена в соответствующий раздел настроек слайда. Рекомендуется по возможности использовать видео во всех трех форматах для поддержки максимального количества современных браузеров.

Свойства слайда

В этом разделе задаются основные параметры слайда:

  • Дизайн заголовка: можно выбрать светлый дизайн для использования совместно с темным фоном, или темный дизайн для контрастного отображения заголовка на светлом фоне.
  • Цвет навигации: выберите цвет для стрелок вправо-влево и навигационных точек в нижней части слайдера
  • Скроллинг до раздела: показать стрелку, при нажатии на которую будет происходить прокрутка страницы до указанного места. Введите название якоря, например ‘#contact’
  • Не показывать заголовок: включите эту опцию, если вы не хотите, чтобы на этом слайде отображался заголовок
  • Не показывать тень от заголовка: отключить отображение тени от заголовка этого слайда
  • Анимация графики: выберите один из двух анимационных эффектов для графического элемента слайда
  • Анимация контента: выберите один из двух способов анимации заголовка, подзаголовка, текста и кнопок

 

Настройка стиля контента слайда

Настройки стиля текстового контента слайда (заголовок, подзаголовок и текст) задаются в соответствующих группах настроек:

  • Заголовок слайда
  • Подзаголовок слайда
  • Текст слайда

В каждой из этих групп можно задать шрифт, цвет, размер и другие параметры стиля для каждого из элементов.

Графика и SVG графика

Здесь можно загрузить дополнительный графический элемент (пример графического элемента), а также векторную графику в формате SVG. Для каждого из этих элементов можно задать ссылку, которая будет открываться по клику на элемент.

Кнопки на слайде

В этом разделе можно задать параметры для одной или двух кнопок:

  • Текст на кнопке
  • Ссылка
  • Анимация при наведении
  • Иконка

 

Анимация слайда при скроллинге

В этом разделе можно включать и выключать анимацию при скроллинге всего контента слайда или отдельных элементов слайда. При желании (и умении) можно произвести тонкую настройку анимации с помощью стилей CSS.

Сохранение слайда

Перед сохранением слайда добавьте его в один или несколько слайдеров, включив соответствующие флажки в разделе «Слайдеры». Если у вас еще нет ни одного слайдера, нажмите ссылку + Добавить новый слайдер:

Затем нажмите кнопку «Опубликовать»:

Отображение слайдера на странице

В левом меню Консоли WordPress выберите пункт Слайдер > Слайдеры. Затем скопируйте в буфер обмена шорткод слайдера:

Откройте страницу, на которой вы хотите отобразить слайдер. Для этого в консоли WordPress перейдите в раздел Страницы. Найдите в списке страниц нужную и кликните на ее название. Прокрутите страницу вниз и найдите там раздел «Основное». Скопируйте шорткод слайдера из буфера обмена в поле Шорткод слайдера. Затем нажмите кнопку Обновить: