Создание слайдера в Smart Slider 3 для WordPress

Создание слайдера в Smart Slider 3 для WordPress

Приветствую вас на сайте Impuls-Web!

В прошлой статье я делала обзор на три лучших плагина для создания слайдеров для сайта на CMS WordPress. Одним из рассмотренных, в данной статье, плагинов был Smart Slider3.

С данной статьей вы можете ознакомиться по этой ссылке: ТОП 3 лучших бесплатных слайдеров для WordPress

Сегодня я хочу более подробно остановить на данном плагине, и показать вам, как можно создать красивый адаптивный слайдер при помощи плагина Smart Slider 3 для вашего сайта.

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

Как сделать интернет-магазин?

Установка Smart Slider 3

Smart Slider 3

Итак, первое, что нам нужно сделать, это, конечно же, скачать и установить плагин:

  1. 1.В административной панели сайта переходим в раздел «Плагины» => «Добавить новый».
  2. 2.В строке поиска вставляем название плагина и, после того как плагин будет найден, устанавливаем и активируем его:
    Установка плагина  Smart Slider 3

Создание проекта в Smart Slider 3 для WordPress

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

  1. 1.В левом боковом меню админки переходим в появившийся раздел «Smart Slider 3»
  2. 2.Перед нами откроется панель управления, где нам сразу же предлагается ознакомиться с видеоинструкцией по работе с данным плагином. Если у вас все в прядке с английским, то вы можете посмотреть данное видео.
    Видеоинструкция Smart Slider 3
  3. 3.Для создания слайдера нам нужно пролистать страницу вниз, где находятся кнопки для начала создания проекта.
    Новый проект Smart Slider 3
  4. 4.Нам нужны первые две кнопки «Новый слайдер» и «Template Library». Можно пойти двумя путями:
    • Нажать на кнопку «Новый слайдер» и приступить к созданию слайдшоу с нуля, задавая свои настройки.
    • Мы можем воспользоваться библиотекой шаблонов (Template Library) и выбрав наиболее подходящую заготовку, создать на ее основе свой проект. Этот вариант намного быстрее и удобнее, и на начальном этапе я предлагаю использовать его.
  5. 5.Кликаем по кнопке «Template Library» и переходим на страницу библиотеки шаблонов:
    Шаблоны слайдеров
  6. 6.Smart Slider 3 имеет очень большое количество очень красивых и оригинальных заготовок слайдеров для различных задач и типов страниц, но к сожалению к использованию в бесплатной версии доступны только несколько, а точнее только первые 8 шаблонов. Как будет выглядеть будущий слайдер, вы можете видеть на миниатюрах шаблонов.
  7. 7.Выбираем понравившийся нам шаблон, и наведя указатель мышки на миниатюру, кликаем по кнопке «Import»
    Выбираем шаблон

Общие настройки слайдера в Smart Slider 3

После того как слайдер будет импортирован, перед нами откроется страница редактирования и настройки.

Страница редактирования слайдра

Следующее, что нам нужно сделать – это скорректировать некоторые основные настройки. Для этого:

  1. 1.Пролистываем страницу вниз до раздела с вкладками. Первая активная вкладка, доступная для редактирования, это вкладка «Опубликовать». Здесь, в первую очередь, для нас важны поле с шорткодом для вставки слайдера на страницу сайта, и поле с php-кодом для вставки слайдера в шаблон страницы:
    Настройки слайдера
  2. 2.Под вкладкой «Опубликовать» имеется дополнительная панель с вкладками:
    1. 1.)На вкладке «Стрелки» вы можете включить/выключить стрелки перелистывания слайдов, выбрать их стиль, а так же настроить их цвет, размер и положение на слайде.
      Настройка стрелок
    2. 2.)На вкладке «Точки» вы так же можете включить или отключить их отображение, и так же настроить их положение и внешний вид
      Настройка пагинации Smart Slider 3
    3. 3.)Вкладка «Автовоспроизведение» позволяет добавить на слайдер кнопку автовоспроизвдения и настроить ее положение.
    4. 4.)На вкладке «Text Bar» вы можете включить полосу с текстовым описанием слайда, и настроить ее положение на слайде.
    5. 5.)Вкладка «Миниатюры» позволяет добавить и настроить полосу с миниатюрами слайдов, для быстрого перемещения между слайдами.
    6. 6.)Последняя и очень важная вкладка «Тени» позволяет добавить одну из 7 доступных теней
      Добавление тени для слайдера Smart Slider 3
  3. 3.На следующей вкладке основных настроек «Основное» вы можете изменить название слайдера, настроить управление, задать миниатюру, выравнивание и положение фона слайдера. В разделе «Настройка анимации» можно выбрать один из 7-ми вариантов анимированной смены слайдов и задать скорость аниманиции.
    Настройка анимации Smart Slider 3
  4. 4.На вкладке «Размер» можно скорректировать размер слайдера и степень заполнения слайдером тела страницы
    Настройка размера слайдера

    В разделе «Адаптивный режим» вы можете включить адаптацию под различные мобильные устройства и задать максимальное разрешение адаптации для книжной и альбомной ориентации:

    Настройка адаптивности Smart Slider 3
  5. 5.На вкладке «Автовоспроизведение» можно включить автоматическую смену слайдов и задать ее скорость.
    включить автовоспроизведение
  6. 6.Smart Slider 3 имеет в своем функционале уникальную и очень полезную функцию оптимизации изображений. Включив эту опцию и задав процент оптимизации вы можете повысить скорость работы слайдера и страницы сайта в целом.
    Оптимизация изображений в Smart Slider 3
  7. 7.На вкладке «Loading» можно задать параметры загрузки и задать предварительно загруженный слайд. Выбранный слайд будет иметь приоритет при загрузке страницы
    Настрйока загрузки
  8. 8.На вкладке «Developer» можно задать js-скрипты, отключить скролл страницы и отменить обтекание слайдера. Последняя опция может помочь при неправильной работе адаптивности.
  9. 9.После того как закончите с настройкой обязательно кликните по кнопке «Сохранить» в правом верхнем углу:
    Кнопка сохранить

Добавление и редактирование слайдов Smart Slider 3

После того, как мы отредактировали общие настройки, мы можем приступить к редактированию слайдов.

  1. 1.На панели управления слайдами наводим указатель мышки на нужный слайд и нажимаем на кнопку «Настройки».
    Настройки слайда
  2. 2.На странице редактирования слайда нам доступны для работы три вкладки «Фон», «Анимация» и «Настройки».
    вкладки с опциями слайда
    1. 1.)На вкладке «Фон» мы можем задать (изменить) фон слайда, его прозрачность и степень заполнения
      Задание фона
    2. 2.)На вкладке «Анимация» можно выбрать эффект появления текущего слайда. Для каждого слайда можно выбрать свою анимацию. Для добавления анимации кликаем по кнопке анимация и выбираем один из 7-ми доступных эффектов.
      Анимация слайда

      Выбираем анимацию и нажимаем на кнопку «Применить»:

      Выбор анимации
    3. 3.)На вкладке «Настройки» мы можем задать название слайда, и описание, которое будет отображаться в строке «Text Bar», если мы ее включим. Так же можно задать миниатюру слайда, ссылку и продолжительность показа текущего слайда:
      Название и описание слайда
  3. 3.Далее мы можем приступить к редактированию слоя с контентом на слайде. Мы можем редактировать текущий слой, который был создан по умолчанию шаблоном, или удалить его и добавить новый слой с такой структурой как нам нужно:
    Редактирование слоев
  4. 4.Для редактирования любого элемента нам нужно кликнуть по нему, и в открывшемся окошке изменить контент, и задать нужные параметры:
    Окно настроек элементов
  5. 5.Окошко редактирования разделено на три вкладки:
    1. 1.)Слой – на этой вкладке можно задать текст и ссылку, которая будет срабатывать при клике по нему.
    2. 2.)Design – вкладка настройки внешнего вида. Здесь можно задать форматирование текста и его отступы.
      Окно редактирования внешнего вида слоя
    3. 3.)Настройка – на этой вкладке можно настроить положение элемента на слое и включить его адаптацию под мобильные устройства.
  6. 6.Слой позиционируется на слайде в соответствии с выбранным шаблоном его расположения. Если вам нужно изменить положение слоя с контентом, то вам нужно отключить привязку слоя. Делается это при помощи переключателя «CONTENT/CANVAS». При включенном «CANVAS» вы можете свободно перемещать слой по слайду. При включенном «CONTENT» можно только менять размер контейнера слоя.
    Позиционирование слоя на слайде
  7. 7.Для добавления новых элементов на слой вы можете воспользоваться панелью инструментов расположенной с левого края. При клике на зеленый плюсик откроется окно, в котором вы можете выбрать нужный для добавления элемент:
    Добавление новых слоев
  8. 8.На вкладке «Structure» вы можете выбрать шаблон расположения элементов на слое
    Задание структуры слоя
  9. 9.После того как вы отредактировали слайд обязательно нажимаем на кнопку «Сохранить».
  10. 10.Далее вы можете редактировать оставшиеся слайды или, если сделанный слайд можно использовать как шаблон, вы можете дублировать его использовать для создания новых слайдов. Для этого кликаем по иконке с тремя точками вверху миниатюры слайда и выбираем пункт «Дублировать»
    Дублирование слайда

Добавление слайдера Smart Slider 3 на страницу сайта

Теперь вы можете добавить созданный слайдер на страницу вашего сайта. Для этого нам понадобится шорткод, который мы получили при создании нового слайда. Его можно посмотреть, перейдя на страницу общих настроек, кликнув на кнопку «Слайдер» в верхней панели управления.

Шорткод слайдера
  1. 1.Далее, как обычно, открываем для редактирования нужную страницу и переходим на вкладку «Текст».
  2. 2.Вставляем скопированный шорткод в нужном месте на странице и жмем на кнопку «Обновить».
    Добавить слайдер на страницу
  3. 3.Открываем страницу для просмотра в браузере и проверяем, что у нас получилось.
Как научиться продвигать сайты?

В этой статье я постаралась как можно подробнее показать вам, как можно при помощи бесплатного плагина Smart Slider 3 создать очень красивый адаптивный слайдер для вашего сайта. Надеюсь, у меня это получилось, и у вас не возникнет трудностей при работе с данным плагином. Если у вас есть что добавить, или я допустила какие-то неточности в описании работы с плагином, обязательно напишите об этом в комментариях.

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

На сегодня у меня все. До встречи в следующих статьях!

С уважением Юлия Гусарь

Подписаться на рассылку

Читайте также:

comments powered by HyperComments

7 комментариев

  1. Спасибо за статью
    Подскажите, почему у меня часть слайдов адаптивная, и нормально отображается на телефоне, а часть — отображается совершенно непредсказуемо криво (то вся картинка в мелком разрешении без текста, то только край картинки виден и пр.)?
    Не делать же по три варианта слайда для каждого устройства — телефон, планшет, комп/ноут?

  2. Спасибо за прекрасные объяснения, но у меня на сайте все еще существует большая проблема со Смарт Слайдером Это размеры изображений. Что только я не делала! Все равно, мои картинки получаются слишком огромными для рамки слайда хотя я картинки делала в пикселях что соответствуют размеру слайда Что делать?

    • Здравствуйте, Lana! Скорее всего Вам нужно смотреть настройки слайдера. Там есть пункт «Размер», возможно у Вас выбрано «В полную ширину».
      Так же посмотрите там размер какой выставлен
      http://prntscr.com/la34a2

  3. Как приспособить размер изображений к размеру слайдов если размеры на Слайдере в пикселях а не в см?

    • Просто в настройках слайдера задаёте размер в пикселях и для изображения при его создании тоже задаёте размер в пикселях.

  4. Добрый день!

    установила smart slider, все настроила, сохранила. Вставила php код в файл темы. Вроде сделала все как полагается.

    в админке WP в настройке темы видно, что слайдер установлен и работает. Но на сайте не отображается. На сайте видна пустая область, но изображения не выводятся. Может, нужны еще какие-то действия? Буду очень признательна за любой совет.

    • Попробуйте вывеси слайдер при помощи шорткода на какой то другой странице, не на главной. Как он себя поведёт.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif