May 9, 2020

Фича 13. Как сделать эффект до/после?

Всем привет! Пока я готовлю большой урок по интернет-магазину покажу вам один интересный блок. Мы пока что ни разу не притрагивались к разделу "Галерея", а там есть на что посмотреть.

Ловите урок по эффекту "До/После". Эффектно, максимально просто и полезно. Изучайте. Делаем в 3 шага.

Шаг 1. Выбираем блок

Нет, это даже не Zero. Открываем все блоки, идём в раздел "Галерея" и добавляем блок GL09 - Сравнение картинок до и после.

Шаг 2. Основные настройки блока.

Открываем основные параметры блока.

Ширина блока в колонках - я сделаю 8, можете сделать больше/меньше. Мы это уже проходили.

Цвет: цвет самого переключателя. Я оставляю белым. Зависит от изображений, которые вы сравниваете.

Цвет фона блока: ну и общий цвет фона. Тут всё понятно.

Шаг 3. Настройки контента

Здесь загружаем два файла фото, которые будут сравниваться. Эффектнее всего будет выглядеть сравнение статических изображений (объекты одинаковой формы и размера).

Загружать стоит картинки одинаковых размеров. Например 1200пх на 600пх оба.

Описание: я его не пишу. Это небольшой текст в углу окна. Скрин ниже.

Вот и всё. Блок поставили. Всё просто.
Понадобится однозначно.

Всем успехов!