Главная Новости

Слайдер с текстом для Вордпресс — плагин Master Slider

Опубликовано: 01.09.2018

Слайдер с текстом для Вордпресс — плагин Master Slider

Слайдерами на сайтах уже сегодня никого не удивишь. Это уже, своего рода, неотъемлемый элемент любого, более или менее приличного сайта. Оно и понятно: слайдер на сайте – хороший способ вывести необходимую графическую и текстовую информацию в удобной, понятной, компактной форме.

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

Для движка Вордпресс плагинов со слайдерами предостаточно. Самый популярный это Meta Slider . Настраивается элементарно, легко разобраться в настройках, внешний вид весьма приличный.

Самый продвинутый и навороченный это Slider Revolution . Там и разнообразные слои, и анимация, и 3D эффекты. Но, за него требуется заплатить. Сумма хоть и небольшая, не больше 20 долларов, но для обычных проектов не совсем подходит. Хотя, в сети легко можно найти расшаренную версию.

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

Вот такое расположение нужно было получить на слайдере

Meta Slider для этих целей не слишком подходил. Большой блок текста в нём смотрится не слишком удачно. Качать крякнутые версии, что-то душа не лежала, вот и решил поискать из возможных вариантов.

Случайно, на глаза попался плагин Master Slider . Вот в нём эта возможность реализовывалась так как надо. Слева картинка, справа текстовый блок нужного размера. Всё прекрасно индексируется, адаптировано для любых устройств. То, что требовалось. Вот про настройку такого слайдера с текстом я и хочу рассказать в этой статье.

Плагин Master Slider распространяется свободно. Большинству хватает облегчённого варианта, кому нет – расширяем возможности в платной версии. Просят за неё 19 долларов, и возможности, действительно впечатляют. Кому интересно, может всё увидеть на сайте плагина.

Мы же будет реализовывать свои задачи на варианте Free.

В админке, в окошко Поиск плагинов вводим Master Slider, выбираем, устанавливаем, активируем.

Слева на панели появляется панелька с надписью Master Slider . Там два пункта:

Settings – где вы можете изменить настройки кеширования и переключиться на подключение Ajax версии. Master Slider вот тут и происходит создание и редактирование наших будущих слайдеров.

Для создания нового слайдера выбираем пункт Create New Slider . Тут вы можете начать создавать слайдер самостоятельно Custom Slider , или выбрать из существующих готовых вариантов.

Я не стал заморачиваться, и выбрал уже готовый вариант слайдера с текстом.

Вариант Slider with Slide info – текст располагается внизу, Slider with Slide info V2 – блок с текстом располагается справа.

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

Нажимаем кнопку Create , на ваш сайт загружаются необходимые изображения и появляется панель управления слайдером.

Панель управление плагином Master Slide

Slider Settings

General Settings

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

Тут же можно выбрать вариант Boxed layout – встраивание слайдера в поле для статьи, или Full-width – слайдер будет на всю ширину странице. Этот вариант не подойдёт для страниц с сайдбарами.

Дальше выбираем возможность настройки высоты и нужную ширину встраиваемой области для слайдера.

Slider Transition

Здесь мы можем настроить эффекты для переходов.

Transition – Normal – смена слайдов без эффектов, Fade – будет применяться эффект затухания. Transition speed – скорость смены слайдов. DirectionHorizontal – горизонтальная смена слайдов, Vertical – вертикальная смена слайдов. Slide space – расстояние между слайдами в px .

Navigation

Здесь настраивается поведение и сортировка слайдов.

Autoplay – включение автоматической смены слайдов. Loop navigation – зацикливание смены слайдов Pause at end slide – остановка после последнего слайда. Pause on hover – остановка смены слайдов при наведении мыши. Random order – смена слайдов в случайном порядке. Start with slide – с какого слайда запускать слайдер.

Дальше есть возможность включить дополнительные возможности смены слайдов.

Touch swipe navigation – включение возможности смены слайдов касанием пальцев (для мобильных устройств). Mouse swipe navigation – можно перетаскивать слайды мышью с зажатой левой клавишей. Use grab mouse cursor – использовать специальный курсор при перетаскивании мышкой. Mouse wheel navigation – возможность колесом мыши менять слайды. Start slider when appears in browser window – старт слайдера сразу после загрузки страницы сайта. Slide preloading – внешний вид заставки, пока слайдер будет загружаться.

Appearance

В этом месте можно настроить внешний вид нашего слайдера.

Skin – выбираем встроенные варианты для стрелочек, кнопок, индикаторов. Align center slider controls – можно выровнять по центру все элементы управления. Slider background settings – здесь можно выбрать цвет и изображение для фона нашего слайдера. Slider custom class name and style – можно добавить свой класс и свои стили для внешнего вида слайдера.

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

Вкладка Slides

Тут возможно управлять всеми слайдами. Очень удобно мышкой перетаскивать изображения для выстраивания изображений в нужном порядке.

Background – можно увидеть изображение, загруженное для данного слайда. Указать необходимое выравнивание, и миниатюру. Slide duration – настраивает время показа слайда.

Video and Link – тут можно указать необходимую ссылку для слайда и то, как эту ссылку открывать. Можно присвоить свой ID, class, link rel, title. Здесь можно загрузить нужный ролик с Youtube или Vimeo.

Slide Info – вот тут то и можно загружать необходимый блок текста к каждому слайду. Ради чего всё это мной и затевалось. Текст можно вставлять в удобном, привычном редакторе от WordPress.

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

Slider Controls

Тут настраиваются все элементы управления нашим слайдером. Плюсиком добавляем нужные элементы, с помощью корзины – убираем.

Настройка кнопок управления в плагине Master Slider

Arrows – стрелки вперёд, назад. Можно включить сворачивание стрелок, если на слайд не наведена мышь. Можно настроить вариант показа стрелок при проигрывании видеоролика. Также можно указать при какой ширине слайдера стрелки не надо показывать.

Slide Info Control Options – вот тут и настраивается блок с текстом.

Можно включить вариант сворачивания блока если мышь не наведена. Можно включить показ блока при проигрывании видеороликов. Можно включить блок с тектом внутри изображения.

Дальше настраивается расположение блока с текстом – вверху, внизу, слева, справа. Настраиваются отступы, ширина и высота.

Можно запретить показывать блок с текстом если ширина окна меньше необходимого размера.

Дальше настраиваются кнопки, временная линия, индикатор загрузки, показ миниатюр. Сложного ничего нет, нет смысла всё это расписывать.

Slider callbacks

Эта вкладка для тех, кто знаком с языком PHP, простым смертным тут делать нечего.

Кнопка Preview – даёт возможность быстро просмотреть все сделанные изменения для слайдера.

Кнопка Save Changes – сохраняет все изменения для слайдера.

Вставить свой слайдер в нужное место в статье или на странице можно двумя способами – либо shortcode, либо с помощью кнопки в визуальном редакторе.

Вот такой плагин для WordPress под названием Master Slider. Удобный, простой, понятный, никаких лишних затрат, ни финансовых, ни умственных делать не придётся. Рекомендую.

Для тех, кто лучше воспринимает визуальную информацию, рекомендую ролик по созданию слайдера с плагином Master Slider:

Делаем слайдер плагином Master Slider (free version)

Всем Удачи и нестандартных творческих решений.

Этот сайт работает на быстром, надёжном, не дорогом хостинге GIGAHOST

rss