Не секрет, что грамотное использование различных динамичных эффектов на сайте может существенно повысить его конверсию. По-крайней мере, таким способом вы можете акцентировать внимание посетителя на ту или иную информацию. А уж попадет посетитель в вашу воронку или нет, зависит от того насколько интересно ваше предложение конкретно вашей аудитории.
Пожалуй, самым популярным динамичным элементом в веб-дизайне является слайдер. Сколько б не предрекали ему смерть, слайдер по-прежнему повсеместно используется, и главное - работает. Область его применения очень широка: лендинги, интернет-магазины, промо-сайты, галереи и т.д.
Слайдер - это специальный элемент веб-дизайна, представляющий собой блок определенной ширины чаще всего в шапке веб-страницы. Главная его фишка в изменяющихся в ручном или автоматическом режиме элементах - картинок, текстов и ссылок.
Сегодня существует большое количество самых различных видов слайдеров. Самые популярные, конечно, построенные на базе jQuery. Важно понимать, что существуют т.н. jQuery-плагины и другие библиотеки на . С помощью которых можно программно внедрить и настроить слайдер на любой странице абсолютно любого сайта на любой CMS. А также существуют слайдеров для WordPress. Они дают возможность внедрять слайдеры с помощью визуального интерфейса (безо всякого кода) прямо внутри консоли вашего WordPress. Они просты в использовании, легко настраиваются, не требуют никакой подготовки. Собственно, о таких плагинах и пойдет сегодня речь.
Плагинов на самом деле очень много: платных, бесплатных, простых, сложных. В общем, на любой вкус, под любые цели и задачи. При выборе плагина следует обратить внимание на несколько важных моментов: имеется ли поддержка старых браузеров (каких именно и насколько старых), мобильных устройств (адаптивность), насколько глубокая настройка и кастомизация. Последнее необходимо для того, чтобы слайдер мог гармонично вписаться в дизайн существующего сайта. Не стоит забывать, что любой слайдер - это в первую очередь JS-скрипт. Который может вступить в конфликт с уже работающими на вашем сайте скриптами. Может возникнуть конфликт версий jQuery. Конечно, все это решается, просто нужно быть к этому готовым. То есть помнить, тестировать и проверять.
Итак, поехали.
1. Slider Revolution Responsive WordPress Plugin
Пожалуй, один из самых популярных на данный момент слайдеров для WordPress. Позволяет создавать очень эффектные адаптивные и полноэкранные слайдеры. Имеется огромный выбор уникальных эффектов анимации, переходов, загрузчиков и других настроек. Кроме этого, возможно создание своих собственных эффектов анимации. Плагин очень прост в использовании и достаточно легко настраивается. Слайдеры SEO-оптимизированы и прекрасно индексируется поисковиками.
2. LayerSlider Responsive WordPress Slider Plugin
Один из любимых мною плагинов. Как и предыдущий, входит в топы популярных премиум-плагинов WordPress. Позволяет создавать умопомрачительные слайд-шоу с более чем 200 предустановленных 2D и 3D переходов. Благодаря использованию передовых технологий, вся анимация осуществляются максимально гладко и естественно. У плагина простой и удобный в использовании интерфейс управления с поддержкой всех современных технологий. Например, WYSIWYG-конструктор слайдов со множеством различных ползунков настроек, полноценный таймлайн, Google-шрифты, кастомная анимация и многое другое. Все изменения осуществляются и видны в реальном времени. Поддерживается любой контент, в том числе: изображения, HTML, видео YouTube, Vimeo, HTML5-мультимедиа. Все генерируемые слайдеры SEO-оптимизированы и позволяют создать семантическую разметку для лучшей индексации. Естественно, слайдеры полностью адаптивные и готовы к работе на любых разрешениях. LayerSlider поставляется с 13 готовыми скинами и готов к глубочайшей кастомизации.
3. Master Slider - WordPress Responsive Touch Slider
Потрясающий адаптивный слайдер для WordPress. Превосходное качество всех эффектов слайдера достигается за счет использования аппаратного ускорения компьютера пользователя. Плагин традиционно поддерживает практически все типы контента, имеет множество разнообразных встроенных эффектов и переходов. Слайды настраиваются с помощью привычных слоев.
4. RoyalSlider - Touch Content Slider for WordPress
Название говорит само за себя. RoyalSlider - действительно королевский слайдер для WordPress, разработанный в лучших традициях HTML5 и CSS3. Плагин содержит полный пакет соответствующего функционала и поддержку мобильных устройств. Отличается от аналогов тем, что поддерживается динамическое наполнение слайдов. Например, из Instagram, Flickr, 500px. Также имеется поддержка WooCommerce.
В данной статье я расскажу вам о плагине Meta Slider, который помогает организовать на вашем сайте любое количество слайдшоу с различными спецэффектами. Данный плагин я использовал уже не раз на клиентских сайтах, когда требуется простое бесплатное решение с хорошим функционалом.
Использовать слайдшоу Meta Slider вы можете как на главной странице, так и в любой записи, либо сайдбаре (боковой колонке сайта). Настройки до безобразия просты, а внедрение слайдера на сайт WordPress еще проще.
Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.
Стоит заметить : даже если у вас уже в шаблоне установлено слайдшоу на Главной странице, вы можете с легкостью ставить данный плагин и использовать его в любой части сайта, что позволит добавить динамику в отдельные статьи, страницы, либо прорекламировать свой инфопродукт в сайдбаре.
Шаг 1: создаем первое слайдшоу
Кликаем по нему и попадаем на страницу, где сверху увидим такое
Нам предлагают создать свое первое слайдшоу, что мы и делаем, кликнув на +.
Если планируете делать несколько различных слайдеров для сайта, то можете кликнуть дважды по их названию и тогда появится возможность ввести свое название.
Шаг 2: загружаем картинки в слайдер
Теперь настало время загрузить картинки. Советую для каждого отдельного слайдшоу делать изображения одинакового размера по ширине и высоте. В помощь PhotoShop, либо моя любимая программа . Одинаковый размер для одного набора картинок позволит их отображать так, как вы запланировали: без обрезания и искажений.
Нажимаем и добавляем картинки для выбранного слайдшоу. Сам процесс добавления стандартный для сайтов на WordPress. После этого появится вот такое:
Верхняя крайняя слева стрелка указывает на изображение. Если подведете на нее мышку, то в углу миниатюры появится X, который позволит удалить выбранной изображение.
Галка в поле New Window сделает так, что по клику на картинку выбранная ссылка откроется в новом окне. Остальное понятно из скриншота.
Если необходимо поменять очередность картинок, то достаточно навести курсор на миниатюру и "схватить" левой клавишей мыши, после чего перетащить в нужное место.
Шаг 3: настройка эффектов для слайдера
Справа идет блок настроек визуального оформления и эффектов слайдшоу на сайте. Блок длинный, поэтому будем разбирать по частям.
Чтобы вы не делали в выбранном слайдшоу, необходимо по окончании изменений его сохранить. Для этого используем кнопки Save, либо Save&Preview (сохранить и сразу посмотреть как будет выглядеть).
Под кнопками сохранения можно выбрать на основании какого скрипта должно работать наше слайдшоу. На выбор даются самые популярные. В зависимости от вашего выбора, снизу появится свой дальнейший блок настроек. Для примера остановимся на первом.
Обратите внимание, что ширину (width) и высоту (height) я задал ровно такую, какого размера у меня изображения. Вы ставите свои размеры. Красная стрелка показывает на поле эффекта, с которым будет отрабатывать слайдер на сайте.
В нашей бесплатной версии плагина Meta Slider эффектов не сильно много, но их достаточно, чтобы посетители вашего сайта положительно оценили ваш сайт. Кто хочет, может купить PRO версию Meta Slider за 19$ (ссылку увидите).
D этом блоке мы ставим галку, если нужны стрелки навигации влево и вправо (Arrows), а также можем спрятать нижнюю навигацию (Hidden), либо отображать её в виде точек
Для статьи или Главной удобно оставлять данную навигацию, а вот для рекламы инфопродуктов можно смело прятать.
Далее у нас идет блок Advanced Settings. Здесь мы можем точечно настроить стиль отображения: время задержки, чередование, направление и т.п. Можете смело поэкспериментировать, чтобы найти нужные для себя параметры. Если я начну описывать каждый, то статья будет невероятно длинной.
Шаг 4: внедряем созданный слайдер на сайт
Мы можем внедрить слайдер на сайт при помощи шорткода, либо функции PHP. Шорткод удобно использовать в статье, а функцию прописывать в файл шаблона. Сами решаете как вам лучше сделать.
Обратите внимание, что в шорткоде и функции есть цифры, которые обозначают номер вашего слайдшоу.
Включаем шорткоды в стандартном виджете сайдбара Text
Кто хочет использовать слайдер в сайдбаре, но не включена возможность отработки шорткодов в виджетах, предлагаю вариант решения без плагина.
Про слайдеры мы уже писали не раз и потребность в качественных подобных скриптах только растет. Сегодня у нас подборка наиболее актуальных плагинов — слайдеров на конец текущего года. Впрочем, вариантов сейчас очень много и возможно у вас уже есть свои приоритеты. И это совершенно нормально. Мы же предлагаем обратить ваше внимание на следующих фаворитов.
Какие вообще требования можно предъявить к современному слайдеру? Начнем с того, что слайдер должен быть отзывчивым и прекрасно работать и на смартфонах, и на планшетах. А продолжат этот список требований следующие обязательные функции:
- Плавные анимационные переходы
- Параллакс слои
- Стильные шрифты и кнопки
Плюс множество других функций, позволяющие владельцу сайта произвести невероятное визуальное впечатление на посетителей. Короче, приступим к обзору, не торопясь 🙂
Nivo Slider
Nivo Slider – это премиум плагин, который предоставляет практически все функции, необходимые для создания невероятных эффектов. Несмотря на то, что этот плагин немного дороже остальных расширений, которые здесь представлены (стоимость лицензии для одного сайта начинается от $29), он стоит того, чтоб в него инвестировать. Интуитивный интерфейс позволяет с легкостью создавать слайдеры и добавлять их на сайт, используя шорткоды.
Планин имеет огромное количество эффектов перехода, и это позволяет создавать красивое обрамление для ваших фото, которое привлечет внимание посетителей. Кроме того, вы можете с легкостью управлять отображением картинок, используя богатый диапазон доступных типов слайдеров. Также вы можете автоматически подрезать картинки, сохраняя огромное количество времени при редактировании картинок.
И наконец, Nivo Slider – плагин очень легкий, за счет чего он практически не влияет на скорость загрузки страниц. Перейти
Slider Revolution
Slider Revolution – один из самых популярных слайдер-плагинов на рынке. Он позволяет создавать стильные, широкоформатные, отзывчивые слайдеры. Вы можете вставить слайдер на сайт, и он будет выглядеть отлично на экране любого девайса.
Также есть анимационные циклы, позволяющие избежать застывания слайдера, если посетитель на некоторое время задержатся на домашней странице.
Параллакс-слои Slider Revolution – это что-то фантастическое, а редактор таймлайна слайдов отображает интуитивный вариант того, как ваши картинки будут показаны в слайдере. Кроме того, плагин предоставляет drag-and-drop-редактор, который позволяет начинающим веб-мастерам создавать профессионально выглядящие слайдеры. У этого плагина есть все, начиная от многоязычной поддержки и заканчивая поддержкой полноэкранных видео YouTube и Vimeo. Перейти
Этот плагин, ну, очень премиальный. Самая дешевая лицензия стоит $19, а стоимость самой дорогой лицензии может достичь $249 в зависимости от того, сколько сайтов она обслуживает. Если вы не можете начать работу с бесплатным слайдер-плагином, из-за того, что у него непонятный интерфейс, то этот вариант как раз для вас. Плагин отзывчивый и может экспортировать созданные ранее слайдеры.
Строительный интерфейс очень просто в использовании и, кажется, он не замедляет фронтенд и никогда не лагает. Самая его уникальная функция заключается в том, что он позволяет расположить слайдер где угодно на сайте. Перейти
Cyclone Slider 2
Cyclone Slider 2 –это бесплатный плагин, включающий drag and drop-интерфейс, который могут использовать даже начинающие дизайнеры. Система отзывчивых слайдов, работает так, что каждый независимый слайдер и является уникальным и выдает шаблоны, помогая дизайнерам каждый раз создавать нечто новое. Эффекты перехода можно настраивать для отдельных слайдов, так что можно включить свою анимацию для каждого сегмента.
Благодаря возможности отображать неограниченное количество слайдеров в любом месте сайта Cyclone Slider 2 может составить достойную конкуренцию премиальным опциям. Также радует, что плагин поддерживает видео, цитаты и кастомный HTML. Перейти
SlideDeck
SlideDeck существует в двух версиях: платной и бесплатной, и бесплатная версия предлагает большинство тех инструментов, которые обычно используются обычным веб-дизайнером. Например, легкая версия позволяет создать слайдеры, которые можно просматривать на экранах всех девайсов. Вы можете использовать в слайдах и видео, и картинки, а процесс разработки слайдеров интуитивно понятен.
Это простой и доступный плагин, подходящий всем тем, кто хочет связать сайт с такими платформами, как YouTube, Flickr и Pinterest. Перейти
EasyRotator
Плагин EasyRotator – еще один бесплатный инструмент для создания слайдеров, и главное его преимущество – это простота. Просто загрузите видео и фото, кликните пару кнопок и любуйтесь стильным слайдером, появившемся на вашем сайте.
Плагин идет с 45 гибкими шаблонами, которые позволяют работать с ним человеку с любым уровнем подготовки. Благодаря поддержке SEO этот слайдер работает хорошо на любом сайте. Перейти
Slider Pro
Slider Pro стоит $29, но ваши деньги точно не пропадут зря. Элегантный дизайн, инструменты быстрого создания слайдов и отзывчивость – все есть. Вы можете связать плагин с вашим аккаунтом в Flickr, чтоб выдергивать контент оттуда и использовать его на вашем сайте. Touch-swipe-возможности пригодятся пользователям iPad’ов и планшетов, а анимированные уровни помогут вам привлечь внимание пользователей, чтоб продать им больше всего или приманить их к нужному контенту. Перейти
LayerSlider
Плагин LayerSlider стоит $20 и предлагает полный набор функций, но слайдеры – это не все, что он способен вам дать. Вы также cможете добавлять галереи картинок и слайдшоу, предлагая идеальный мультимедиа опыт.
LayerSlider предлагает более 200 2D и 3D переходов, и вы можете создать собственные переходы с помощью редактора слайдов. Мощный drag-and-drop-редактор укомплектован плагином для просмотра отзывов в режиме реального времени. Также вы сможете экспортировать, импортировать и передвигать компоненты в режиме реального времени.
Вы можете генерировать динамичные слайдеры, связанные с вашими WordPress- записями и страницами. Также вы можете перенаправлять посетителей на самый интересный контент, делая это без особых усилий. Вы можете выбирать более чем из 13-ти обложек, тем самым создавая собственный уникальный брендинг.
Кроме того, нельзя не сказать, что слайдер SEO-дружественный, и это позволяет вам быть на шаг впереди тех, кто не умеет оптимизировать свои слайдеры. Перейти
Easing Slider
Easing Slider – это еще один бесплатный WordPress-плагин. Данное расширение радует полной отзывчивостью и возможностью загрузить в один слайдер огромное количество изображений. Простой в использовании интерфейс включает визуальный редактор для кастомизации базовых стилевых элементов. Экшены и фильтры тоже имеют место быть, и вы всегда можете расширить функционал слайдера, используя доступные расширения. Перейти
Smooth Slider
Разработчики Smooth Slider уверяют, что могут вставить на ваш сайт потрясающий слайдер со ссылками на самый свежей контент или рекомендуемые записи всего за 50 секунд. И эти разговоры похожи на правду. Интерфейс очень прост в использовании, а само решение крайне отзывчивое.
Создаваемые слайдшоу оптимизированы для поисковых систем и дают вашему сайту приток трафика. Панель настроек дает полный контроль над тем, как выглядят ваши слайдеры во фронтенде. Этот бесплатный плагин идет с 6 эффектами перехода, и это больше, чем предлагают некоторые менее популярные и не указанные здесь премиум плагины.
Чтоб работать с этим плагином на уровне профессионала, вам не нужно знание кода. Слайды можно перемещать или удалять в один клик – просто воспользуйтесь панелью управления слайдерами. Перейти
Заключение
Идеальный слайдер всегда выгодно показывает то, что предлагает ваша компания и привлекает внимание пользователей к вашему самому важному контенту. Вы можете разместить в слайдере ссылку на запись в блоге или даже использовать определенный слайд, чтоб перенаправить пользователей на сезонные предложения, доступные в вашем интернет-магазине.
Слайдеров, сегодня хочу представить несколько плагинов, на которые эти исходники можно накрутить. Плюс, небольшое описание каждому плагину, чтобы не качать «кота в мешке». Лишний раз проверять, что умеет плагин и его работоспособность никому не нравится, верно? Скажу сразу — все слайдеры в формате плагинов для WordPress, поэтому проблем с установкой и настройкой быть не должно.
Coin Slider
Один из лучших, на мой взгляд, по возможности настройки и одновременной простоте, но проигрывает Nivo, который ниже. Позволяет установить размер картинки из админки, не углубляясь в дебри кода. Добавляется изменением шаблона. Превьюшек нет, что печально.
Nivo Slider
Поистине король слайдеров. Честно говоря, не очень рекомендую пользоваться именно плагином для WordPress по причине того, что он давненько не обновлялся, в отличии от скрипта. А последняя версия для WordPress — платная. Ну или как вариант — приспособить новый скрипт к старой оболочке плагина, но тут нужны знания посерьёзнее. 16 вариантов смены картинки, поддержка тем, превью, отличная и валидная верстка, богатые настройки. Я пока не встречал скрипта, который бы уделал Nivo.
Content Slider от SlideDeck
Еще один весьма навороченный слайдер, но теперь это слайдер контента. Очень богатые настройки, интеграция в редактор постов, несколько тем в комплекте. Есть возможность вставить разные слайдеры в каждый пост. Есть Pro версия, которая может ещё кучу всяких клёвых штук, но цена в 99$ за слайдер меня очень и очень смущает.
Meteor Slides
Этот кандидат попроще, но и у него есть своя фишка. Во-первых, он умеет встраиваться по шорткоду, это удобно. Во-вторых, он умеет создавать несколько слайдшоу, которые можно использовать в разных местах. В-третьих, он умеет встраиваться в сайдбар виджетом. И там крутить картинки. По моему, достаточно круто. И да, поддержка русского в комплекте
Slideshow Gallery
Этот слайдер тоже умеет дружить с редактором постов WordPress, тоже может встраиваться шорткодом и у него есть превью картинок. Поддержка локализации, с помощью po/mo
файлов. Плюс, для больших картинок поддерживается лайтбокс, то есть увеличение картинки по клику.
TN3 Gallery
Неплохой плагин, с превью картинок, хорошей версткой и прочими вкусностями. Но у него есть отличная черта — он поддерживает , что на данный момент достаточно редкая штука. Но есть и минус, даже два, чтобы скачать нужно зарегистрироваться и нет версии для WordPress. Только вариант скрипта, но возможности слайдера стоят того, чтобы немного потрудиться над установкой.
WordPress Content Slide
Что сказать про этот плагин? Он маленький, полностью настраиваемый внешне, неплохие настройки из админки. И он работает.
ISlidex
Очень неплохой слайдер с поддержкой нескольких тем. Авторы обещают SEO-верстку, автоматическую обрезку и кэширование изображений, кроссбраузерность вплоть до IE7 и поддержку WordPress 3.x. Также умеет встраиваться в виджет, что существенно повышает его ценность.
24.01.2013 — добавлю еще один плагин, с которым пришлось столкнуться. Он оставил самые приятные впечатления, несмотря на то, что он платный.
Он сможет показать вам все, что вы захотите. Больше 10 шаблонов вывода в комплекте, собственное API, поддержка мобильных устройств и куча других вкусностей. Поверьте — на сегодняшний день это лучший слайдер. И стоит всего 12$ , конечно же, все последующие версии бесплатны. Да, как заявляет разработчик — этот плагин единственный, кто поддерживает в полном объёме IE10, который установлен в Win8.
В этой статье я расскажу про слайдер на WordPress, который отличается простой в использовании, однако при этом не обделён функциями и возможностями. Речь пойдёт о дополнении Meta Slider.
Вот какие достоинства в нём следует выделить:
- Плагин прост в настройке.
- Интерфейс на русском языке.
- Есть возможность настроить атрибуты Title и Alt для изображений слайдов.
- Можно назначить ссылки каждому слайду.
- Имеется четыре готовых дизайна.
- Есть несколько эффектов переходов.
- Слайдер получается адаптивным.
Как сделать слайдер на WordPress с помощью Meta Slider
После активации плагина в консоли появится новый пункт «Meta Slider». Перейдите в него и нажмите на кнопку с иконкой плюса, чтобы создать новый слайдер.
Наведя мышь на вкладку с названием слайдера, вы можете изменить его наименование. А нажав на кнопку «Добавить слайд», вы можете добавить изображения в слайдер.
Каждый добавленный слайд имеет настройки из трёх вкладок.
- Основное. Здесь задаётся описание для картинки и при необходимости ссылка для неё. Можно сделать, чтобы ссылка открывалась в новой вкладке.
- СЕО. Здесь можно задать Title и Alt для картинки, что положительно скажется на SEO-оптимизации слайдера для WordPress.
- Обрезать. Опции обрезки картинки.
В боковой колонке справа слайдер на WordPress имеет опции для настройки.
- Кнопка «Просмотр» позволяет взглянуть на слайдер до публикации.
- Кнопка «Сохранить» сохраняет внесённые изменения.
- Четыре кнопки ниже позволяют выбрать дизайн для слайдера.
- Ширина. Задаёт ширину слайдера в пикселях.
- Высота. Задаёт высоту слайдера в пикселях.
- Эффект. Можно выбрать эффект перехода. В бесплатной версии список немного ограничен.
- Дизайн. Можно дополнительно выбрать дизайн для слайдера. В бесплатной версии ограниченно.
- Стрелочки. Включает или выключает стрелки для переключения слайдера.
- Навигация. Включает или выключает точки под слайдером.
Немного ниже есть ещё один блок настроек, который можно развернуть – это «Расширенные настройки».
Здесь собраны различные опции, среди которых есть выравнивание, отступы, настройка скорости показа, анимации и многое другое. Не стану подробно останавливаться.
