Слайдер «до и после» — отличный способ продемонстрировать свою работу, будь то фотографии, иллюстрации или даже дизайн сайта. Кроме того, их очень весело делать! В этом руководстве мы покажем вам, как создать слайдер «до и после» в Squarespace.
Мы начнем с создания двух изображений: одного для состояния «до» и одного для состояния «после». Для этого примера мы будем использовать фотографии собаки до и после купания.
Затем мы загрузим наши изображения в блок изображений в Squarespace. После того как изображения загружены, мы нажмем на значок «До/После» на панели инструментов редактора изображений.
Это вызовет панель настроек слайдера «До/После». Здесь мы можем выбрать, каким должен быть слайдер — горизонтальным или вертикальным, а также задать начальную точку слайдера. Для нашего примера мы оставим настройки по умолчанию.
После настройки параметров мы можем нажать «Применить», чтобы закрыть панель и просмотреть наш слайдер. Мы видим, что наш слайдер теперь функционирует!
Чтобы придать тексту стиль, мы просто добавим несколько HTML-тегов вокруг соответствующих слов. Например, чтобы сделать наш заголовок жирным и подчеркнутым, мы добавим следующие теги:
Как сделать слайдер «до и после» в Squarespace?.
И наш конечный результат будет выглядеть следующим образом:
How Do You Make a Before and After Slider in Squarespace?