Секретный боец
    БИТВА КОНСТРУКТОРОВ
    LANDING PAGE
    Конструктор слайдеров
    Slider
    Центр обучения Joomla

    То, что нужно знать о слайдерах

    Добрый день, дорогой коллега!
    С вами Александр Куртеев. Мы продолжаем тему заданную, в битве конструкторов. И сегодня у нас факультатив. 
    Мы рассмотрим один из элементов лэндингов, да в целом большинства сайтов, который дает изрядные преимущества и дополнительные возможности.
     

    Слайдеры

    Один из засекреченных бойцов нашей битвы лэндингов - это один из компонентов слайдеров. Слайдеры обладают уникальными возможностями, которых нет больше ни в одном компоненте. Самые мощные конструкторы лэндингов не могут тягаться в возможностях проработки отдельных экранов сайта с помощью слайдеров.
     
    Определение слова слайдер за последние несколько лет расширилось примерно так же, как понимания образа и возможностей автомобиля с первого Форда к сегодняшней тесле и гиперкарам от bugatti и pagani. 
     
    Рассмотрим возможности слайдеров и как они могут пригодиться на лэндинге и на большинстве сайтов.
     
     

    Что дает слайдер?

    1. Пространство. Мы можем уместить на один экран в несколько раз больше информации без потери в качестве восприятия.
    2. Повышение внимания к нужным элементам.
    3. WOW эффект, повышение ценности и красивая упаковка. 
     
    Следует признать, что кроме слайдеров не существует инструментов, которые позволяют в пределах одного экрана гармонично и красиво вместить в несколько раз большее количество информации, чем в статичном содержимом. Есть попапы, но у них другая роль.
     

    Эволюция слайдеров или какими возможностями обладает современный слайдер?

     
    Раньше слайдеры предоставляли возможность вращать картинки с определенным текстом или подхватывать материалы из категорий джумлы.
     
    Современные слайдеры представляют собой мощные конструкторы. Метафорично конструктор лэндингов - это покрасочный цех машин, а конструктор слайдеров - это художественная мастерская по вип покраске мелких деталей.
     

    Возможности современных слайдеров

     
    1. Холст
    Для создания слайдеров нам предоставляется холст на котором мы можем позиционировать элементы в свободном порядке. Как в фотошоп накидываем элементы и размещаем их на холсте. Не нужны отступы и позиционирование элементов, просто перетаскиваем мышкой и оставляем в нужном месте.
     
    2. Слои
    Каждый аддон для слайда (текст, изображение, заголовок, кнопка и прочее) является слоем и имеет свои настройки, возможности появления и взаимодействия.
     
    3. Эффекты
    Большое количество эффектов, которые можно назначить на появление и исчезание каждого слоя. Все виды параллакса как для слайдера целиком, так для слайдов и его слоев. Слои могут появляться, двигаться и исчезать по определенным событиям.
     
    4. Размеры и адаптивность
    Любые размеры: во всю ширину, во всю высоту и разные вариации заполнения пространства фоном, а так же проработка слайдов для мобильных устройств в различных положениях.
     
    5. Детальная настройках всех элементов
    Мы можем настроить любые элементы слайдера и вписать его в свой дизайн.
     
    6. Динамический контент
    В современных слайдерах мы можем выводить почти любой контент, который формируются за пределами слайдера. Например: последние материалы с блога, товары из магазина, статусы и события из социальной сети на нашем сайте, последние комментарии, посты с форума, контент с rss лент и многое другое.
     
    7. Лэндинги
    С помощью слайдеров продвинутого уровня можно делать лэндинги, для этого есть весь необходимый функционал. 
    Испробовав все варианты создания лэндингов я скажу, что слайдеры лучше все-таки использовать для проработки отдельных экранов и они идеально дополняют конструкторы лэндингов.
     
     

    Варианты использования слайдеров

    Слайдеры адаптивны и на разных устройствах будут выглядеть по разному

    1. Блок Hero

    Это главный экран, задача которого захватить внимание. Если нет захвата внимания, пользователь дальше не будет читать. Захватить внимание можно заголовком, красивой графикой, анимацией или сочетанием всех этих инструментов.
     
    Как правило блоки Hero отличаются от прочих слайдеров тем, что находятся на первом экране и занимают всю его ширину или весь экран по высоте и ширине. Кроме этого, если слайдер занимает всю высоту экрана, то смену слайдов можно привязать к прокрутке мыши и будет создаваться ощущение, что листается страница, хотя на самом деле мы листаем слайдер.

    Вариант главной страницы от Sven Prim

    SVEN PRIM
    фотограф
    Slider
     
     

    Вариант блока hero от mersedes-amg.com

    Самый быстрый четырехместный автомобиль на легендарной трассе Nürburgring Nordschleife.

    Рекорд круга 7:25:41

    Расход в комбинированном режиме 11.3 л/100 км | CO2: 257 г/км

    Открыты продажи нового 4-дверного купе
    Mercedes-AMG GT 43
    4Matic+.
    Расход бензина в комбинированном режиме: 9.4 - 9.1 л/100 км | Содержание CO2: 215 - 209 г/км
    previous arrowprevious arrow
    next arrownext arrow
    Slider
     
     
     

    Пример реализации списка товаров в блоке Hero 

    Image is not available
    От 37000 руб.
    Квадракоптер Phantom 3

    Запись видео 1080p, дальность трансляции до 1000 м, скорость полета до 16 м/c. Потрясающий квадракоптер от DJI.

    Image is not available
    От 27000 руб.
    Apple Watch

    Встроенный GPS. Ныряйте на глубину до 50 метров. Новый двух ядерный процессор и дисплей, который в два раз ярче.

    Image is not available
    От 47000 руб.
    Очки виртуальной реальности HTC Vive

    Разрешение 1200*1080 для каждого глаза. Подходит для ПК.

    Квадракоптер
    HTC Vive
    ArrowArrow
    Slider

     

    Еще один пример со списком товаров

    Image is not available
    Image is not available
    Image is not available
    Image is not available
    ХИТ СЕЗОНА
    Весенний букет

    Потрясающий текст, описывающий непревзойденную красоту оформления и тонкий аромат букета.

    Image is not available
    Лучше, чем весной
    Image is not available
    Image is not available
    Image is not available
    Image is not available
    ВРЕМЕННОЕ ПРЕДЛОЖЕНИЕ
    Сезонный букет

    Вряд ли, из цветов в это время года что-то может быть прекрасней, чем этот букет

    Image is not available
    Букет Джульетты
    Image is not available
    Image is not available
    Image is not available
    Image is not available
    СЕЗОННАЯ РАСПРОДАЖА
    Тюльпаны по 100

    Свежие, нежные, ароматные белые тюльпаны по сезонной цене букет за сотню.

    Image is not available
    Потрясающе
    ArrowArrow
    Slider
     
     

    2.  Обычный слайдер с предложениями

    Обычный слайдер может растягивается на всю ширину экрана или на область контента. Как правило в нем выводят различные акции, предложения или новости на которые нужно обратить внимание.

    Слайдер с контентом из журнала Esquire

    Это слайдер выводит динамические материалы из нужных категорий. Работает полностью в автоматическом режиме, как только появляется новый материал он по заданной маске и условиям подставляется в слайдер.
    Популярное
    ХОД ВЕЩЕЙ
    ПАРТНЕРСКИЙ МАТЕРИАЛ
    МОДА
    Самые модные кроссовки сезона - в рентгеновских снимках
    Образ стильного бунтаря от Jacob Cohën
    Привет из девяностых: 12 кожаных курток на зиму
    Правила жизни Паоло
    Сорентино
    ПРАВИЛА ЖИЗНИ РЕЖИССЕРОВ
    1
    Самые влиятельные женщины в российских медиа в 2018 году
    ЖУРНАЛИСТИКА
    2
    Slider

     

    Пример слайдера lamoda.ru с предложением скидок

    Небольшой по размерам слайдера, который рассказывает о скидках и о том, что на улице холодает, пора бы приодеться.
     
    Сегодня +0
    Завтра +3
    ПО ПРОГНОЗУ СНЕГ - ПОРА УТЕПЛЯТЬСЯ
    По 1 ноября: до 10% к скидке по программе лояльности
    previous arrow
    next arrow
    Slider
     

    Слайдер с горячими новостями от ozon.ru

    Довольно простой баннер с рекламой акций обычными картинками с интернет-магазина Ozon.
     
    previous arrow
    next arrow
    Slider
     
     

    3. Карусель товаров, услуг, тренингов

    Слайдер типа карусель используется довольно часто для вывода 
    • товаров в интернет-магазинах по различным критериям (скидки, новые, рекомендации, товары из определенных категорий). Примеры лидеров: ozon.ru, lamoda.ru, wildberries.ru, mvideo.ru, aliexpress и другие). 
    • отзывов (например, яндекс-маркет)
    • материалов из категорий, например, блог, справочник.

    Пример слайдера с товарами 

    Карусель с товарами может вращаться как по набору товаров в строке, по 3 штуки в нашем случае, так и двигаться по товару. При наведении у нас меняется изображение. Кроме этого изображение может меняться автоматически через определенное время, таким образом создается аналог gif изображения с анимацией.
     
    Жакет из Льна Slim Fit
    Костюмы
    5190 ₽
    Рифленый кардиган
    Новые поступления

    1470 ₽

    Непродуваемый жакет
    Куртки

    2370 ₽

    1690 ₽

    Кашемировый джемпер
    Трикотаж

    2950 ₽

    2370 ₽

    Мужик в рубашке
    Рубашки

    1577 ₽

    Блузка с вышивкой
    Блузки

    590 ₽

    previous arrowprevious arrow
    next arrownext arrow
    Slider
     

    Пример карусели материалов

    Материалы подставляются в схему слайда автоматически, по мере появления, из заданной категории.

    2 Мая 2018, автор Мария Сидорова

    Йога: Лучшие способы внедрить йогу в свой отпуск

    Жизненный стиль, Йога, Путешествия

    11 мая 2018, автор Тула Томасинская

    Рецепт: 5 лучших рецептов клубничных завтраков

    рецепты, завтраки, питание

    26 Мая 2018 автор Даша Комарова

    Отдых: На лодке вокруг Чинкве-Терре в Италии

    Отдых, на лодке

    2 июля 2018 автор Лена Баранская

    Советы: Полное руководство о сборах в путешествие

    Советы, Путешествия

    8 июля 2018 автор Тула Томасинская

    Путешествие: Мои любимые места в Сан-Франциско

    Путешествия, Сан-Франциско

    19 июля 2018 автор Даша Комарова

    Привычки: Вы хотите жить счастливой жизнью?

    Habits, Smile

    previous arrow
    next arrow
    Slider
     

    Пример слайдера с тренингами

    Image not available
    Записаться
    Вызов. 100 приседаний
    тренер
    Мак Грегор
    Image not available
    Записаться
    Йога для начинающийх
    Тренер
    Валентина Вохмянина
    Image not available
    Записаться
    Здоровое питание для активного спорта
    Тренер
    Полина Джоли
    Image not available
    Записаться
    5 способов порвать зал
    Тренер
    Таня Блейд
    Image not available
    Записаться
    Становая тяга для ежедневного роста
    Тренер
    Майкл Тайсон
    Image not available
    Записаться
    10 рецептов для укрепления мышц
    Тренер
    Вика Князева
    previous arrow
    next arrow
    Slider
      

    Пример карусели характеристик от BMW

    Решетка радиатора BMW

    Выступающая в роли центрального визуального элемента решетка радиатора BMW подчеркивает элегантность и солидность автомобиля при взгляде спереди.

    [weather location="Бостон, MA"]

    Лазерные фары BMW

    В режиме дальнего света лазерные фары с уникальными Х-образными элементами освещают дорогу на расстояние до 600 метров, что почти вдвое дальше, чем обычные фары. Улучшение видимости в темное время суток значительно повышает уровень безопасности. Синий символ "Х" и надпись "BMW Laserlight" подчеркивают высокий технологи

    22-дюймовые легкосплавные диски

    22” легкосплавные диски Multi-spoke 757 Bicolour Ferric Grey с разноразмерными шинами UHP, Передние диски 9.5J x 22 с шинами UHP275/40 R22 и задние диски 10.5J x 22 с шинами UHP 315/35 R22*

    * Также доступны колеса других размерностей и компоновки.

    Воздуховоды Air Breather

    Воздуховоды Air Breather за арками передних колес с вытянутыми вдоль кузова декоративными накладками выступают в роли визуального акцента, подчеркивающего элегантность и внушительную длину автомобиля.

    Хромированная накладка

    Горизонтальная хромированная вставка между задними фонарями подчеркивает спортивно-элегантный характер автомобиля. Как и у роскошного седана BMW 7 серии, хромированная вставка образует акцентированный контраст с цветом кузова и создает гармоничный переход от мощных боковых панелей к задней части.

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

    Использование

    Слайдеры можно вставить как на лэндинг, вывести модулем или вставить внутрь любой страницы или материала (как сделано в данном блоговом посте).
     
    По слайдерам мы подготовили обзор лучших расширений, он находится в нашей базе знаний.
     
     

    Итог

    Для того, чтобы решить вопрос со слайдерами изображений, контента, вообще любого представления контента: материалы, товары, цитаты, статусы, последние сообщения, события - сейчас достаточно одного расширения. 
     
    Последние два месяца я активно работаю с одним из мощных конструкторов слайдеров smartslider 3. Все слайды, представленные на этой странице сделаны с помощью данного расширения.
     
    Если интересна тема, напишите, выложу вводный курс по данному расширению.
     
      Центр Обучения Joomla!

      "Все, что нужно знать о Joomla в одном месте"

      Joomla Последняя версия
      Joomla! — 3.9.1

      Скачать

      Курс "Как создать свой сервис рассылки на Joomla?"

      Чтобы получить бесплатный доступ введите имя и ваш е-маил. Доступ будет выслан на ваш е-маил адрес.