Как создавать динамические слайды с помощью Smart Slider 3 в OceanWP?

Добавление слайдера на ваш веб-сайт может быть хорошим выбором, потому что это производит первое впечатление на ваших посетителей. Но после того, как вы решили, что хотите добавить слайдеры на свою страницу WordPress, как узнать, какой из них выбрать? Вы можете использовать его свободно? Просто ли управлять? Можете ли вы легко разместить его на своем сайте?

Ответ на все ваши вопросы: да, это возможно, Smart Slider 3 может делать все это: он абсолютно бесплатный, удобный для пользователя и хорошо работает с вашей темой OceanWP.

В этом уроке я покажу вам, как вы можете импортировать демонстрационный слайдер, создать свой собственный Smart Slider и как вы можете создать слайдер Dynamic Post с помощью темы OceanWP.

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

Вы можете легко установить Smart Slider 3, выбрав «Плагины» → « Добавить новый ». Найдите Smart Slider 3, и после этого вы сможете его установить.

Другой вариант заключается в том, что вы можете напрямую загрузить его с веб-сайта Smart Slider 3, а затем загрузить его.

После этого вы можете активировать Smart Slider 3:

Как я могу создать свой первый слайд?

Импорт демонстрационного слайдера — это здорово, но я хотел бы показать вам, как вы можете сделать свой собственный слайдер. Я покажу вам, как я создаю первый слайд полноразмерного слайдера.

Сначала я выбираю параметр « Новый ползунок » на панели инструментов, а затем выбираю режим полной ширины во всплывающем окне.

Я установил размер слайдера 1200x600px, а затем создал свой слайдер.

После этого я добавляю пустой слайд, у которого цвет фона линейный градиент, поэтому я устанавливаю его в настройках слайда → вкладка фон .

Для создания слайда я буду использовать 2 разных режима редактирования. Одним из них является режим контента, который работает как конструктор страниц, и вы можете быстро создавать свои слайды, и он имеет отличное отзывчивое поведение. Другой режим редактирования — это режим Canvas , в котором вы можете перетаскивать свои слои куда угодно, но вы должны позаботиться о расположении и отзывчивости.

На оригинальном слайдере видно, что слева контент: заголовок, текст и 2 кнопки, а в правой части картинка ноутбука и на этой картинке слой видео YouTube. Это изображение и видео будут установлены в режиме холста, потому что в этом режиме вы можете поместить слой выше или ниже другого слоя.

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

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

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

Теперь содержимое готово.

Мне осталось всего 2 шага: я поместил изображение с ноутбука и слой видео с YouTube в режиме холста на слайд. Я просто перетаскиваю его в правую сторону и корректирую их.

Я думаю, что эта комбинация ноутбук + видео не так важна для появления в мобильных устройствах, поэтому я отключаю мобильный вид.

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

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

Как я могу сделать слайдер живых сообщений на моей домашней странице?

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

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

Я покажу вам пример, как вы можете установить его.

После того, как я импортировал полноразмерный шаблон WordPress Post Slider, я добавлю новый динамический слайд, где я выберу параметр «Опубликовать по фильтру».

Я выбираю категорию и упорядочиваю ее по дате публикации. Я установил 3 слайда, поэтому последние 3 сообщения появятся в моем слайдере в выбранной категории.

Затем я сохраняю его и могу настроить ползунок своего поста.

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

Шаг 1. Скопируйте образец слайда

Шаг 2. Вставьте его в динамический слайд.

Шаг 3 : Измените фоновое изображение на избранное, и оно будет меняться динамически.

И вы получаете тему и фон для слайда динамики:

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

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

После того, как вы сделали слайдер для динамических постов, вам нужно вставить его в тему OceanWP.

Как я могу импортировать готовый слайдер?

После того, как вы активировали Smart Slider 3, вы можете перейти в меню Smart Slider 3, и там вы увидите панель инструментов. Вы можете добавить новый слайдер или выбрать шаблон из библиотеки шаблонов здесь. Если вы хотите быстро создать слайдер, самый простой способ — импортировать демонстрационный слайдер.

В Smart Slider 3 есть бесплатные демонстрационные слайдеры, которые вы можете легко добавить на свою страницу.

В библиотеке шаблонов вы можете выбрать ползунок, который вы хотели бы использовать, просто нажмите кнопку «Импорт», и тема будет загружена на вашу панель инструментов, и вы сможете ее настроить.

Использование демонстрационных слайдов

После того как вы добавили новый слайдер или импортировали его из шаблонов, вы можете добавить в свой слайдер дополнительные слайды. Просто нажмите кнопку « Добавить слайд ».

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

Вы также можете использовать демонстрационные слайды на своем слайдере, есть много готовых шаблонов, которые вы можете настроить. Нажмите на опцию « Библиотека » и выберите шаблон, который вы собираетесь использовать.

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

Как я могу вставить слайдер в свою тему OceanWP?

Вставить Smart Slider 3 в вашу тему OceanWP очень просто:

Вы можете использовать шорткод слайдера и легко скопировать и вставить его в сообщение или на страницу.

Или с плагином OceanWP Extra в настройках OceanWP вы можете поместить ползунок до/после верхней панели, заголовка, заголовка или нижнего колонтитула.

И есть еще один вариант, вы можете настроить его с помощью Elementor или других конструкторов страниц, используя виджет Smart Slider 3.

Как сделать собственный заголовок с помощью Smart Slider 3?

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

Просто перейдите на панель тем → вкладка « Моя библиотека » и нажмите « Добавить новую ». (Для панели тем вам нужен плагин Ocean Extra, поэтому вы должны добавить и активировать этот рекомендуемый плагин.) Если вы используете конструктор страниц Elementor, выберите шаблон Elementor Canvas в атрибутах публикации, и после этого вы можете добавить свой слайдер в свою тему.

Когда вы будете готовы с настройками, перейдите в меню «Внешний вид» → «Настроить» → «Заголовок» → «Общие » и выберите свой собственный заголовок . И теперь у вас есть собственный пользовательский заголовок.

Без построителя страниц вы также можете создать шаблон на панели тем, используя шорткод.

Эксклюзивное предложение

Установка Smart Slider 3 на веб-сайт WordPress с темой OceanWP дает вам доступ к набору мощных инструментов для создания пользовательского контента для вашего веб-сайта. Теперь вы можете получить скидку 30% при покупке Smart Slider 3 Pro, если воспользуетесь купоном SMARTSLIDEROCEANWP30 при оформлении заказа.

Предложение является эксклюзивным, и код купона доступен только в течение ограниченного времени. Он начинается 10 июля 2018 г. и заканчивается 17 июля 2018 г., так что скорее хватайте свою копию Smart Slider 3 Pro!

Последние мысли

Слайдеры можно использовать по-разному, вам следует решить, что вы хотите получить. А функций много, о чем я не писал. В версии Pro создание слайдера более увлекательно из-за анимации, новых слоев, эффектов параллакса, эффектов разделения формы и множества динамических генераторов, таких как Facebook или Instagram, с помощью которых вы можете оживить свой сайт.