Как в WordPress показывать фотографии до и после с эффектом слайда

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

Как работает эффект до и после

Обычно люди используют Photoshop для создания изображений до и после. Это одна фотография, которая показывает эффекты до/после, и вы можете добавить ее как статическое изображение на свой веб-сайт.

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

Давайте посмотрим, как легко показать фотографии до и после в WordPress.

Отображение фотографий до и после на странице или в записи

Сначала нужно установить и активировать бесплатный плагин Twenty20 Image Before-After.

После активации необходимо создать или отредактировать страницу/запись, где вы планируете показывать изображение до и после. Теперь нажмите кнопку «Добавить Twenty20» над текстовым редактором.

картинки до и после в вордпресс
картинки до и после в вордпресс
Он откроет Медиа библиотеку WordPress во всплывающем окне. Отсюда нужно выбрать два изображения для слайдера до и после.

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

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

картинки до и после в вордпресс
картинки до и после в вордпресс
После этого нажмите кнопку «Вставить короткий код», чтобы добавить фотографии до и после на страницу/запись.

Отображение фотографий до и после в сайдбаре

Вы также можете использовать виджет изображений Twenty20 для отображения фотографий до и после на боковой панели (в сайдбаре) WordPress. Просто перейдите в раздел «Внешний вид» раздела «Виджеты» в административной панели WordPress, а затем перетяните виджет Twenty20 Slider в область виджета боковой панели.

картинки до и после в вордпресс
картинки до и после в вордпресс

Смотрите также:

Все уроки по WordPress здесь.

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

Теперь посмотрите, как на вашем сайте смотрятся фотографии до и после.

картинки до и после в вордпресс
картинки до и после в вордпресс
Когда пользователи перемещают ползунок по отношению к каждому изображению, другое изображение становится видимым. Пользователи могут перемещать ползунок до упора вправо или влево, чтобы увидеть изображение до и после. По мере того, как пользователи будут перемещаться, метки до и после (before, after) автоматически исчезнут.

картинки до и после в вордпресс
картинки до и после в вордпресс
Этот плагин отлично работает с популярными конструкторами страниц WordPress, такими как Beaver Builder и Elementor.

Источник: hostenko.com/wpcafe

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

%d такие блоггеры, как: