Не секрет, что грамотное использование различных динамичных эффектов на сайте может существенно повысить его конверсию. По-крайней мере, таким способом вы можете акцентировать внимание посетителя на ту или иную информацию. А уж попадет посетитель в вашу воронку или нет, зависит от того насколько интересно ваше предложение конкретно вашей аудитории.
Пожалуй, самым популярным динамичным элементом в веб-дизайне является слайдер. Сколько б не предрекали ему смерть, слайдер по-прежнему повсеместно используется, и главное - работает. Область его применения очень широка: лендинги, интернет-магазины, промо-сайты, галереи и т.д.
Слайдер - это специальный элемент веб-дизайна, представляющий собой блок определенной ширины чаще всего в шапке веб-страницы. Главная его фишка в изменяющихся в ручном или автоматическом режиме элементах - картинок, текстов и ссылок.
Сегодня существует большое количество самых различных видов слайдеров. Самые популярные, конечно, построенные на базе jQuery. Важно понимать, что существуют т.н. jQuery-плагины и другие библиотеки на . С помощью которых можно программно внедрить и настроить слайдер на любой странице абсолютно любого сайта на любой CMS. А также существуют слайдеров для WordPress. Они дают возможность внедрять слайдеры с помощью визуального интерфейса (безо всякого кода) прямо внутри консоли вашего WordPress. Они просты в использовании, легко настраиваются, не требуют никакой подготовки. Собственно, о таких плагинах и пойдет сегодня речь.
Плагинов на самом деле очень много: платных, бесплатных, простых, сложных. В общем, на любой вкус, под любые цели и задачи. При выборе плагина следует обратить внимание на несколько важных моментов: имеется ли поддержка старых браузеров (каких именно и насколько старых), мобильных устройств (адаптивность), насколько глубокая настройка и кастомизация. Последнее необходимо для того, чтобы слайдер мог гармонично вписаться в дизайн существующего сайта. Не стоит забывать, что любой слайдер - это в первую очередь JS-скрипт. Который может вступить в конфликт с уже работающими на вашем сайте скриптами. Может возникнуть конфликт версий jQuery. Конечно, все это решается, просто нужно быть к этому готовым. То есть помнить, тестировать и проверять.
Итак, поехали.
Пожалуй, один из самых популярных на данный момент слайдеров для WordPress. Позволяет создавать очень эффектные адаптивные и полноэкранные слайдеры. Имеется огромный выбор уникальных эффектов анимации, переходов, загрузчиков и других настроек. Кроме этого, возможно создание своих собственных эффектов анимации. Плагин очень прост в использовании и достаточно легко настраивается. Слайдеры SEO-оптимизированы и прекрасно индексируется поисковиками.
Один из любимых мною плагинов. Как и предыдущий, входит в топы популярных премиум-плагинов WordPress. Позволяет создавать умопомрачительные слайд-шоу с более чем 200 предустановленных 2D и 3D переходов. Благодаря использованию передовых технологий, вся анимация осуществляются максимально гладко и естественно. У плагина простой и удобный в использовании интерфейс управления с поддержкой всех современных технологий. Например, WYSIWYG-конструктор слайдов со множеством различных ползунков настроек, полноценный таймлайн, Google-шрифты, кастомная анимация и многое другое. Все изменения осуществляются и видны в реальном времени. Поддерживается любой контент, в том числе: изображения, HTML, видео YouTube, Vimeo, HTML5-мультимедиа. Все генерируемые слайдеры SEO-оптимизированы и позволяют создать семантическую разметку для лучшей индексации. Естественно, слайдеры полностью адаптивные и готовы к работе на любых разрешениях. LayerSlider поставляется с 13 готовыми скинами и готов к глубочайшей кастомизации.
Потрясающий адаптивный слайдер для WordPress. Превосходное качество всех эффектов слайдера достигается за счет использования аппаратного ускорения компьютера пользователя. Плагин традиционно поддерживает практически все типы контента, имеет множество разнообразных встроенных эффектов и переходов. Слайды настраиваются с помощью привычных слоев.
Название говорит само за себя. RoyalSlider - действительно королевский слайдер для WordPress, разработанный в лучших традициях HTML5 и CSS3. Плагин содержит полный пакет соответствующего функционала и поддержку мобильных устройств. Отличается от аналогов тем, что поддерживается динамическое наполнение слайдов. Например, из Instagram, Flickr, 500px. Также имеется поддержка WooCommerce.
В данной статье я расскажу вам о плагине Meta Slider, который помогает организовать на вашем сайте любое количество слайдшоу с различными спецэффектами. Данный плагин я использовал уже не раз на клиентских сайтах, когда требуется простое бесплатное решение с хорошим функционалом.
Использовать слайдшоу Meta Slider вы можете как на главной странице, так и в любой записи, либо сайдбаре (боковой колонке сайта). Настройки до безобразия просты, а внедрение слайдера на сайт WordPress еще проще.
Внимание! Я выпустил новую тему Romb для ваших статейников и блогов. Максимально быстрая по Google PageSpeed и максимальная оптимизация под SEO.
Стоит заметить : даже если у вас уже в шаблоне установлено слайдшоу на Главной странице, вы можете с легкостью ставить данный плагин и использовать его в любой части сайта, что позволит добавить динамику в отдельные статьи, страницы, либо прорекламировать свой инфопродукт в сайдбаре.
Кликаем по нему и попадаем на страницу, где сверху увидим такое
Нам предлагают создать свое первое слайдшоу, что мы и делаем, кликнув на +.
Если планируете делать несколько различных слайдеров для сайта, то можете кликнуть дважды по их названию и тогда появится возможность ввести свое название.
Теперь настало время загрузить картинки. Советую для каждого отдельного слайдшоу делать изображения одинакового размера по ширине и высоте. В помощь PhotoShop, либо моя любимая программа . Одинаковый размер для одного набора картинок позволит их отображать так, как вы запланировали: без обрезания и искажений.
Нажимаем и добавляем картинки для выбранного слайдшоу. Сам процесс добавления стандартный для сайтов на WordPress. После этого появится вот такое:
Верхняя крайняя слева стрелка указывает на изображение. Если подведете на нее мышку, то в углу миниатюры появится X, который позволит удалить выбранной изображение.
Галка в поле New Window сделает так, что по клику на картинку выбранная ссылка откроется в новом окне. Остальное понятно из скриншота.
Если необходимо поменять очередность картинок, то достаточно навести курсор на миниатюру и "схватить" левой клавишей мыши, после чего перетащить в нужное место.
Справа идет блок настроек визуального оформления и эффектов слайдшоу на сайте. Блок длинный, поэтому будем разбирать по частям.
Чтобы вы не делали в выбранном слайдшоу, необходимо по окончании изменений его сохранить. Для этого используем кнопки Save, либо Save&Preview (сохранить и сразу посмотреть как будет выглядеть).
Под кнопками сохранения можно выбрать на основании какого скрипта должно работать наше слайдшоу. На выбор даются самые популярные. В зависимости от вашего выбора, снизу появится свой дальнейший блок настроек. Для примера остановимся на первом.
Обратите внимание, что ширину (width) и высоту (height) я задал ровно такую, какого размера у меня изображения. Вы ставите свои размеры. Красная стрелка показывает на поле эффекта, с которым будет отрабатывать слайдер на сайте.
В нашей бесплатной версии плагина Meta Slider эффектов не сильно много, но их достаточно, чтобы посетители вашего сайта положительно оценили ваш сайт. Кто хочет, может купить PRO версию Meta Slider за 19$ (ссылку увидите).
D этом блоке мы ставим галку, если нужны стрелки навигации влево и вправо (Arrows), а также можем спрятать нижнюю навигацию (Hidden), либо отображать её в виде точек
Для статьи или Главной удобно оставлять данную навигацию, а вот для рекламы инфопродуктов можно смело прятать.
Далее у нас идет блок Advanced Settings. Здесь мы можем точечно настроить стиль отображения: время задержки, чередование, направление и т.п. Можете смело поэкспериментировать, чтобы найти нужные для себя параметры. Если я начну описывать каждый, то статья будет невероятно длинной.
Мы можем внедрить слайдер на сайт при помощи шорткода, либо функции PHP. Шорткод удобно использовать в статье, а функцию прописывать в файл шаблона. Сами решаете как вам лучше сделать.
Обратите внимание, что в шорткоде и функции есть цифры, которые обозначают номер вашего слайдшоу.
Кто хочет использовать слайдер в сайдбаре, но не включена возможность отработки шорткодов в виджетах, предлагаю вариант решения без плагина.
Одна из главных задач интернет-проекта - максимально удобная навигация. Одним из многочисленных и не самым худшим вариантом улучшить юзабилити сайта WordPress может стать установка слайдера на его страницы. Слайдер можно поместить на главную или любую другую страницу в любое ее место, реализуя, тем самым, в виде красивого слайд-шоу, анонс всех или только избранных материалов, презентацию своих или партнерских продуктов и многое другое, зависит от фантазии и поставленных задач.
Рассмотрим на конкретном примере, как без особого труда и довольно быстро установить слайдер в шапку сайта WordPress.
Рассмотрим реализацию данного проекта на примере шаблона WordPress « Twenty Thirteen», который уже предустановлен по умолчанию в системе.
В нашем случае, устанавливая слайдер в шапке сайта, для начала необходимо скрыть эту самую шапку, вместо которой мы хотим установить наше слайд-шоу. В этом нам поможет функция «просмотр кода элемента » имеющаяся в Google Chrome и в других популярных браузерах. Для вызова функции щелкните правой клавишей мыши по шапке страницы и в открывшемся контекстном меню выберите "Просмотр кода элемента ". Во время наведения курсора компьютерной мыши на код, можно увидеть подсветку элементов, за которые этот код отвечает, и, таким образом, находим необходимые строчки кода.
Сохранив изменения и обновив страницу сайта, видим, что шапка темы исчезла и можно приступать к установке слайдера на ее место.
Воспользуемся функционалом WordPress Content Slide для установки слайдера в «шапке» темы. Для установки и активации Content Slide используйте стандартную функцию WordPress поиска и установки плагинов или скачайте последнюю версию с его страницы по адресу - wordpress.org/plugins/content-slide/ . ВНИМАНИЕ! В настоящее время архив плагина недоступен для скачивания, автору письмо отправил, но тот пока молчит. На моем сервере он присутствует, скачать плагин WordPress content-slide можно по ссылке.
Перед выполнением работ по настройке плагина, необходимо поместить его код вызова в то место, куда хотим установить слайдер. Код находится в файле «README», который в свою очередь "сидит" в папке установленного плагина.
Откройте файл текстовым редактором и из мануала по установке скопируйте сам код.
Чтобы облегчить вам жизнь, привожу этот код ниже:
| & lt; ?php if (function_exists ("wp_content_slider" ) ) { wp_content_slider() ; } & gt; |
< ?php if(function_exists("wp_content_slider")) { wp_content_slider(); } >
Установим код слайдера в шапке сайта WordPress перед закомментированным кодом шапки темы.
Теперь можно приступить к настройке Content Slide.
Гибкость настроек позволяет изменять размер изображения, эффекты анимации, интервал показа слайдов, варианты шрифтов, цвет и прозрачность текста, рамку слайдера и многие другие функции. Рассмотрим назначение каждой опции по порядку.
1 Image width - ширина изображений (в пикселях) height - высота Border width - толщина рамки (если поставить нулевое значение, рамки вообще не будет) Border Color - цвет рамки Font family - шрифт текста описания Text font size - размер шрифта текста Text color - цвет шрифта текста Heading font size - размер шрифта заголовка Heading color - цвет шрифта заголовка Background color - цвет фона
7 Squares per width - пропорции эффектов анимации по ширине Squares per height - пропорции эффектов анимации по высоте Delay between images in ms - время задержки смены изображений в мил.сек. Delay beetwen squares in ms - время задержки панели навигации в мил.сек. O pacity of title and navigation – непрозрачность заголовка и элементов навигации Speed of title appereance in ms – скорость смены заголовка Effect - эффект:
- random - случайный;
- swirl - вихрь;
- rain - дождь;
- straight - перелистывание;
- fade - выцветание.
Mouse Over Pause (Stop Animation on mouseover) - остановить анимацию наведением курсора мыши? Navigation Previous/Next (Previous/Next buttons on image) - кнопки навигации (предыдущий/следующий) Navigation Buttons (Square buttons at bottom) - кнопки навигации быстрого перехода по слайдам Navigation Buttons Color (Square buttons at bottom) - цвет кнопок навигации
Также присутствует возможность выбирать изображения для слайдера и устанавливать их необходимое количество, очередность показа и другое.
16 Display Heading and Text? - выводить заголовок и описание? No. of chars - количество символов в описании Open Images/Links In New Window? - по клику открывать ссылку слайдера в новом окне? Order Images Randomally - показывать изображения в случайном порядке Use custom images? - использовать собственные изображения? Yes, Custom Images - да, собственные изображения Number of custom Images – число собственных изображений CustomImage 1 - первое собственное изображение
- Image 1 SRC - адрес изображения;
- Image 1 Link - ссылка слайда;
- Image 1Heading - заголовок;
- Image 1 Text - описание.
No, Using Posts from a Category - нет, использовать миниатюры постов из выбранных категорий Select a Category - выбрать категорию No. Of posts/images - количество постов/изображений
Ну вот и все, с настройками Content Slide покончено, не забудьте сохранить изменения.
И по завершении проделанной работы, моя главная страница выглядит так:
На картинке эффекта анимации, конечно, не увидеть, но можете быть уверены, эффект потрясающий.
Возможности плагина Content Slide, благодаря его богатому функционалу, позволяют создавать слайд-шоу практически любых размеров и в любой части страницы сайта (для установки слайдера на отдельную страницу или в сайдбар сайта при помощи текстового виджета, вам дополнительно понадобится плагин ) .
Установка слайдера на сайт WordPress позволит наглядно продемонстрировать содержание интернет-ресурса, удерживая посетителей как можно дольше на страницах проекта, или привлечь его внимание к своим или партнерским продуктам, увеличивая продажи. Желаю удачи!
Обновлено: Июнь 18, 2017 автором: Роман Ваховский
Слайдер для WordPress, о котором я вам сейчас расскажу, является самым крутым среди всех слайдеров, что я видел. В нём столько настроек и столько возможностей, что можно реализовать практически любую поставленную цель. Самое главное – он бесплатный. У него есть только один недостаток – он на английском языке. И это не беда.
Плагин Smart Slider 3 позволяет создать слайдер для сайта любой сложности и с любыми элементами. Скачать этот плагин вы можете по ссылке ниже.
Слайдер – это элемент сайта, в котором автоматически или по действию пользователя чередуются изображения. Эти изображения могут быть просто картинками, картинками-ссылками или превью видео. Слайдер помогает продемонстрировать на небольшой площади сайта много информации. Кроме того, это выглядит современно и привлекательно.
После установки на сайт плагина слайдера, и его активации в вашей консоли образуется новый пункт «Smart Slider». Перейдите в него.
Здесь у нас появляется три вкладки:
Давайте создадим слайдер для WordPress и убедимся в возможностях этого плагина. Перейдите во вкладку «Sliders» и нажмите зелёную кнопку «Create slider».
В открывшемся окне дайте имя вашему слайдеру в поле «Slider name». Я напишу там «Мои картинки». Выберите размер в полях «Width» и «Height», определите один из трёх вариантов отображения в «Preset». В принципе, можно оставить всё по умолчанию, если не хотите возиться. В конце нажмите кнопку «Create».
Итак, создаётся слайдер для WordPress и после этого видим страницу с настройками.
Первый блок настроек «Publish slider». Здесь информация о том, как потом опубликовать готовый слайдер. В графе «Shortcode» можно получить шорткод, который можно поместить в запись или на страницу. В графе «Page or Post editor» нам показывают, что в реакторе записей и страниц образовалась новая кнопка, которая позволяет опубликовать слайдер. А в графе «PHP code» можно получить php код для установки слайдера в файлы шаблона.
Два первых способа публикации самые удобные.
Во вкладке «General» настраиваются основные опции: имя (Name), положение на сайте (Align), управление (Controls), анимация (Animation) и прочее.
Вкладка «Size» используется для настройки размеров. Можно определить ширину и высоту (Slider size), отступы (Margin), положение слайдера на экране (Default slide background fill mode), адаптивность (Responsive mode) и другое.
Во вкладке «Autoplay» настраивается автопереключение слайдера.
Вкладка «Other» для более тонких настроек, можно её не трогать.
Идём немного ниже и видим ещё один блок настроек, в котором есть шесть вкладок. Вкладка «Arrows» даёт огромнейшие возможности для настройки стрелок управления слайдера для WordPress.
«Bullets» управляет буллетами. Буллеты – это такие маленькие кружочки у слайдера, которыми можно переключать его.
Вкладка «Autoplay» управляет автозапуском слайдера.
В «Bar» можно включить бар у слайдера. Очень удобно, если нужно показать описание, например.
Вкладка «Thumbnail» управляет миниатюрами картинок слайдера для WordPress.
Итак, если вы уже наигрались с настройками, то давайте уже добавим картинки в наш слайдер для WordPress. Для этого нажмите на стрелочку около зелёной кнопки «Add Image Slider». Откроется меню.
Чтобы добавить изображение в слайдер, нужно нажать на пункт «Add images» в этом меню. Откроется стандартная медиабиблиотека, где нужно выбрать картинку. После выбора картинки, её миниатюра сразу становится видной в слайдере. Если кликнуть на неё, то можно произвести определённые настройки.
Подробно настройки рассказывать не стану. Если коротко, там можно дать изображению имя, описание, присвоить ей ссылку. Но самое замечательное, можно создавать слои с текстом, изображениями, кнопками и накладывать их на загруженную картинку, как в Photoshop.
Для создания слоёв используйте блок, который я показал на скриншоте ниже.
После всех настроек картинки не забудьте нажать «Save».
Если на кнопке добавления слайда нажать теперь пункт «Add video», то можно прикрутить к слайдеру ролик из YouTube или Vimeo. Для этого нужно просто вставить ссылку на видео в поле и нажать «Add Video».
Ролик сразу появляется в списке слайдов и при клике по нему открываются индивидуальные настройки, такие же, как в случае с картинкой.
Добавление слайдера на сайт WordPress - это отличный прием, который помогает показывать больше контента в небольшом пространстве. Обычно это используется для привлечения внимания к актуальным постам или ключевым особенностям веб-сайта.
Слайдеры являются одним из самых популярных видов плагинов на WordPress, и поэтому можно легко потеряться в их разнообразии и количестве. Поэтому мы приходим на помощь с подборкой лучших бесплатных плагинов WordPress для слайдеров картинок, доступных в настоящее время.
Выбирайте один из следующих плагинов в этом списке, чтобы красиво отображать картинки с продуктами и услугами на своем сайте.
Плагин от AlienWP для создания слайдов и демонстрации простых, стильных и гибких слайдеров на вашем сайте. Один из самых популярных бесплатных слайдеров на WordPress с более чем 20,000 активных установок и 150,000 загрузок!
Slider Huge-IT - отличный слайдер на WordPress с множеством приятных характеристик. Нужно просто установить и создать слайдер за несколько минут.
Image Slider - лучший слайдер для ваших постов, страниц, виджетов или боковой панели. Позволяет настраивать слайдер для поиска того, что вам нужно.
Ultimate Slider - простой в использовании слайдер, который позволяет добавлять современный и адаптивный слайдер на любую страницу вашего WordPress сайта, используя простой шорткод.
Создает гибкий, легко конфигурируемый слайдер с различными эффектами для вашего сайта на WordPress.
Эффективный Slider by Supsystic - оптимальное решение для слайд-шоу. Создает слайдеры из изображений, видео и контента с профессиональными слайд-шоу и шаблонами слайдера.
Отличный плагин для слайдера на jQuery с поддержкой сенсорного управления на смартфонах с помощью жестов. Позволяет создавать красивые адаптивные слайдеры и карусели за пару минут.
Ultimate Responsive Image Slider - адаптивный слайдер для WordPress. Вы можете добавлять множество слайдов изображений в один слайдер с помощью различных загрузчиков изображений. Также можно размещать неограниченное количество слайдеров в блог.
Smart Slider 3 имеет все подходящие функции, присущие бесплатным слайдерам. Помимо того, что у Smart Slider есть инструмент для создания YouTube и Vimeo слайдов и формирования слайдов из ваших WordPress постов, он также очень лёгкий в использовании благодаря редактору слайдов с разными уровнями.
Плагин позволяет создавать слайдеры из простых и пользовательских WordPress постов. Он имеет два типа слайдеров: динамический и статический.
Выставляйте последние посты, конкретные категории или подборку постов, используя плагин Smooth Slider.
Этот плагин нацелен на достижение основной цели - создание и управление слайдерами с легкостью. Его задача сделать работу простой, без обучения, и встраиваться в панель управления WordPress, как-будто это родной элемент.
Master Slider - бесплатный эффективный слайдер для изображений и контента с очень гладкой прокруткой. Он поддерживает сенсорную навигацию с жестом прокрутки.
Используя пользовательские типы записей, Soliloquy позволяет создавать бесконечное число WordPress слайдеров с бесконечным количеством изображений в каждом из них всего за несколько щелчков мыши.
Поддерживает режим слайдера и карусели с помощью разных шорткодов. Полностью гибкий и адаптивный, с поддержкой drag and drop.
Возможно, самый популярный плагин для слайдера в WordPress. Создание слайд-шоу с Meta Slider - это быстро и легко. Просто выберите изображение из вашей библиотеки на WordPress, перетащите их на место, установите названия слайдов, ссылки и SEO-поля с одной страницы.
Быстрый и простой способ добавить пару изображений для слайдера внутри страницы WordPress, а также из шаблона. Кроме того, можно добавить адаптивный сенсорный слайдер.
Sangar Slider - это лайт версия премиум слайдера высокого качества для WordPress. С плавной анимацией, многослойными слайдами, техподдержкой, простотой в использовании и гибкостью.
Responsive WordPress Slider от MotoPress - это простое в использовании решение для создания красивых слайдов с удивительными визуальными эффектами. Интуитивно понятный интерфейс drag and drop, прокрутка и оформление поможет вам создавать слайды, не используя код.
WP Featured Content and Slider - легкий в использовании слайдер для WordPress. Отображает избранные материалы, особенности вашего продукта и отображает их через шорткод или шаблон.
