Как показать изображения до и после с помощью эффекта слайдера в WordPress

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

Ждать! Что такое слайдер изображения до и после?

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

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

Если вы пользователь WordPress и задаетесь вопросом, как использовать его на своем веб-сайте, то вы попали в нужное место. В этой статье я расскажу, как вы можете добавлять изображения до и после с эффектом слайдера на свой сайт.

Итак, без лишних слов, приступим.

Подпишитесь на наш канал Youtube

Как добавить слайдер изображения до и после

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

Однако в этой статье мы будем использовать плагин Twenty20 Image Before After. Позже я также упомяну некоторые популярные бесплатные и платные альтернативы.

Установить Twenty20 Image Before After Plugin

Twenty20 - это бесплатный плагин, доступный в репозитории плагинов WordPress. Он позволяет добавлять слайдеры изображений до и после в ваши сообщения, страницы и боковую панель. Он также поддерживает популярные конструкторы страниц, такие как Elementor и WPBakery.

Чтобы установить этот плагин, перейдите в Plugins -> Add New и найдите Twenty20 Image Before-After. Как только вы найдете плагин, просто установите и активируйте его:

Добавьте изображение до и после в свой пост или страницу

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

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

Редактор Гутенберга

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

Давайте посмотрим на пример шорткода:

[двадцать20 img1 = ”3442 ″ img2 =” 3442 ″ направление = ”горизонтальное” смещение = ”0,4 ″ align =” none ”width =” 100% ”before =” Before ”after =” After ”hover =” false ”]

Позвольте мне объяснить каждый из параметров:

• img1 - Здесь вы должны добавить идентификатор изображения (не URL-адрес изображения) первого изображения.
• img2 - Добавьте идентификатор (а не URL-адрес изображения) второго изображения.
• Направление - это позволяет вам решить, хотите ли вы, чтобы ползунок был в горизонтальном или вертикальном направлении. Таким образом, значение будет либо горизонтальным, либо вертикальным.
• смещение - значение смещения должно быть от 0,1 до 1.
• align - определяет выравнивание изображения до и после. Значение может быть нулевым, левым или правым.
• width - ширина изображения может быть в процентах или пикселях.
• before - здесь вы можете добавить подпись к предыдущему изображению.
• after - добавить подпись к изображению после.
• hover - этот параметр определяет, хотите ли вы перемещать ползунок при движении мыши. Принимает истинное или ложное значение.

Не знаете, как найти ID изображения? Перейдите в Медиа -> Библиотека на левой боковой панели панели инструментов WordPress и щелкните изображение. Теперь проверьте адресную строку своего веб-браузера:

В приведенном выше примере вы можете увидеть item = 50 в URL-адресе. Итак, 50 - это идентификатор этого конкретного изображения.

Хорошо! Теперь, когда вы знаете, как использовать шорткод Twenty20, создайте (или отредактируйте) сообщение или страницу, на которой вы хотите добавить слайдер изображения до и после. А затем добавьте новый блок и найдите виджет шорткода:

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

Вот и все. Теперь вы можете предварительно просмотреть сообщение (или страницу) и проверить, правильно ли он работает.

Классический редактор

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

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

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

Вы также можете внести изменения в этот шорткод позже - просто следуйте примеру в разделе редактора Gutenberg.

Добавьте изображение до и после на свою боковую панель

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

Перейдите в Внешний вид -> Виджеты. Теперь найдите виджет Twenty20 и перетащите его в область боковой панели. Настройки этого виджета аналогичны настройкам в предыдущем разделе - только у вас есть две дополнительные кнопки для выбора (или загрузки) изображений до и после.

Как только вы закончите, сохраните настройки виджета, а затем проверьте свой сайт. Просто, не правда ли?

Некоторые альтернативные плагины

Хотя мне нравится плагин Twenty20, потому что он простой и бесплатный, вы можете предпочесть что-нибудь другое. Поэтому я решил поделиться некоторыми бесплатными и платными альтернативами этому плагину:

1. Изображения до и после для Divi

Если вы являетесь пользователем Divi, лучше всего подойдет плагин Before + After Images для Divi. Он легкий, отзывчивый и поддерживает отложенную загрузку. Он создает новый модуль, который помогает вам добавлять изображения до и после на ваш сайт. Этот бесплатный плагин будет работать с плагином Divi Builder, темой Divi и другими темами от Elegant Themes.

Цена - Бесплатно | Больше информации

2. Многоцелевой слайдер до и после

Многоцелевой слайдер Before After Slider - это премиум-плагин с поддержкой касания и смахивания. Он поставляется с простой в использовании панелью администратора, которая помогает вам настроить каждый слайдер изображений в соответствии с вашими потребностями и не требует использования шорткодов. Вы можете создавать неограниченное количество изображений до и после и использовать их в сообщениях, на страницах и на боковой панели.

Цена - 18 долларов | Больше информации

3. Smart Before After Viewer

Smart Before After Viewer - это полностью отзывчивый и удобный для сенсорного управления плагин премиум-класса. Он позволяет добавлять собственные тексты меток на изображения до и после. И вы можете без проблем изменить положение и цвет этикеток. Этот плагин также позволяет добавлять несколько изображений на одну страницу.

Цена - 18 долларов | Больше информации

Сноска

Ползунок изображения до и после - отличный способ показать различия между двумя идентичными изображениями. И вы можете использовать такие ползунки на своем сайте WordPress, следуя этому руководству.

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

Лучшее изображение через __ / shutterstock.com