Статьи по теме: Заполнение сайта

Фотография до/после

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


  1. Создайте страницу с типом Новая страница и добавьте виджет Фотография до/после, перетащив его в нужную область.


screen-67.png


  1. Добавьте фотографии.


Нажмите на кнопку Выберите файл и загрузите первое изображение.


screen-73.png


Точно так же добавьте второе изображение во вторую часть виджета.


screen-74.png


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


  1. Настройте внешний вид виджета.


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


screen-75.png


Здесь вы можете:


  • Настроить ширину виджета в процентах или пикселях.
  • Задать выравнивание.


screen-55.png


  • Выбрать расположение разделительной линии: горизонтальное или вертикальное и задать для нее цвет.


screen-56.png


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


screen-57.png


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


screen-58.png


  1. Также в настройках виджета можно заменить фотографии и добавить для каждого изображения ALT-теги.


screen-76.png


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

Последнее изменение: 24/03/2026

Была ли эта статья полезна?

Поделиться отзывом

Отменить

Спасибо!