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

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

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

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

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

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

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

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

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

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

1. 1.В левом боковом меню админки переходим в появившийся раздел «Smart Slider 3»
2. 2.Перед нами откроется панель управления, где нам сразу же предлагается ознакомиться с видеоинструкцией по работе с данным плагином. Если у вас все в прядке с английским, то вы можете посмотреть данное видео.
   
3. 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.)На вкладке «Точки» вы так же можете включить или отключить их отображение, и так же настроить их положение и внешний вид
      
   3. 3.)Вкладка «Автовоспроизведение» позволяет добавить на слайдер кнопку автовоспроизвдения и настроить ее положение.
   4. 4.)На вкладке «Text Bar» вы можете включить полосу с текстовым описанием слайда, и настроить ее положение на слайде.
   5. 5.)Вкладка «Миниатюры» позволяет добавить и настроить полосу с миниатюрами слайдов, для быстрого перемещения между слайдами.
   6. 6.)Последняя и очень важная вкладка «Тени» позволяет добавить одну из 7 доступных теней
      
3. 3.На следующей вкладке основных настроек «Основное» вы можете изменить название слайдера, настроить управление, задать миниатюру, выравнивание и положение фона слайдера. В разделе «Настройка анимации» можно выбрать один из 7-ми вариантов анимированной смены слайдов и задать скорость аниманиции.
   
4. 4.На вкладке «Размер» можно скорректировать размер слайдера и степень заполнения слайдером тела страницы
   

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

   
5. 5.На вкладке «Автовоспроизведение» можно включить автоматическую смену слайдов и задать ее скорость.
   
6. 6.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 создать очень красивый адаптивный слайдер для вашего сайта. Надеюсь, у меня это получилось, и у вас не возникнет трудностей при работе с данным плагином. Если у вас есть что добавить, или я допустила какие-то неточности в описании работы с плагином, обязательно напишите об этом в комментариях.

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

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

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