Editor X: Редактирование и настройка фото

7 мин. чтения
Editor X переходит на Wix Studio, нашу новую платформу для агентств и фрилансеров.Подробнее о Wix Studio
Добавив фото, вы можете использовать широкий набор параметров для его настройки и редактирования. Отрегулируйте размеры фото, кадрируйте их и устанавливайте основной фокус, чтобы нужные области отображались всегда, независимо от размера экрана.
Вы также можете изменить поведение прокрутки, редактировать изображения с помощью Фотостудии и добавлять водяные знаки для защиты авторских прав. 
Содержание:

Настройка размера фото

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

Чтобы настроить размер фото:

  1. Нажмите на фото в редакторе.
  2. Нажмите значок панели инспектора вверху справа.
  3. Выберите вариант в разделе Размер:
    • Закрепленный: установите ширину и высоту элемента в пикселях.
    • Гибкий: используйте относительные единицы измерения (% или Авто), чтобы задать ширину и высоту элемента.
      Совет: установите флажок Сохранять пропорции, чтобы автоматически настроить высоту в соответствии с шириной.
Примечание:
Невозможно изменить размер фото, которое растянуто в ячейку сетки, контейнер или секцию. Высота и ширина растянутого фото установлены на auto, поэтому его размер автоматически изменяется в соответствии с размерами родительского элемента.

Растягивание фото по размеру секции, контейнера или ячейки сетки

Используя инструмент растягивания, вы можете настроить фото по размеру секции, контейнера или ячейки сетки на сайте. Растягивание изображения означает, что оно автоматически подстраивается под размеры родительского элемента, поэтому вам не нужно беспокоиться о настройке размера вручную.

Чтобы добавить и растянуть фото:

  1. Нажмите Добавить в верхней части панели редактора.
  2. Нажмите Медиа.
  3. Перетащите изображение в секцию.
  4. Нажмите значок Растянуть в правом верхнем углу фото, чтобы заполнить все пространство.
Совет:
При растягивании фото на всю секцию сначала загружается цвет фона, а затем фото. В большинстве случаев фото загружается достаточно быстро, и вы вообще не видите цвет, но некоторые посетители могут увидеть цвет. Поэтому важно установить цвет фона секции, даже если он не всегда виден.
Совет:
Вы можете установить фото в качестве фона секции из панели инспектора, добавив наложения цвета и/или шаблона.

Настройка режима отображения фото

В Editor X у каждого изображения есть ограничительная рамка, которая работает как адаптивный контейнер. Она отображается в виде синих линий по сторонам изображения. Вы можете выбрать, каким образом фото будет отображаться в ограничительной рамке (например, заполнить или подогнать).

Чтобы выбрать режим отображения изображения:

  1. Нажмите на изображение в редакторе. 
  2. Нажмите на значок Настроить
  3. Выберите вариант из раскрывающегося списка Режим отображения:
Работа с экранами разных размеров:
Режим отображения, который вы выбираете для своего изображения, применяется ко всем размерам экрана. 

Кадрирование фото

В Editor X вы можете выбрать способ обрезки изображения для каждого размера экрана. Это позволяет настроить сайт в соответствии с вашими требованиями и создать идеальный интерфейс на всех устройствах.

Чтобы кадрировать фото:

  1. Выберите экран, для которого вы хотите настроить фото.
  2. Нажмите на фото в редакторе.
  3. Нажмите значок Кадрировать .
  4. Настройте кадрирование в соответствии со своими потребностями.
  5. Нажмите Сохранить.

Настройка основного фокуса

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

Чтобы установить фокус фото:

  1. Выберите экран, для которого вы хотите настроить фото.
  2. Нажмите на фото в редакторе.
  3. Нажмите на значок Основной фокус .
  4. Выберите область фото, которая будет оставаться видимой при изменении размера.
Совет:
Когда обнаруживается доминантное лицо, мы автоматически устанавливаем его в качестве фокуса фото. Однако вы можете изменить или настроить фокус при необходимости.

Выбор поведения при прокрутке

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

Чтобы выбрать эффект прокрутки для фото:

  1. Нажмите на фото в редакторе.
  2. Нажмите на значок Настроить .
  3. Нажмите на раскрывающийся список Поведение прокрутки и выберите вариант:
    • Нет: на фото нет эффекта прокрутки.
    • Параллакс: фото перемещается к другим элементам с разной скоростью, создавая трехмерный эффект.
    • Раскрытие: фото открывается, когда вы прокручиваете сайт вниз.
Фото увеличено при параллаксе?
При выборе поведения прокрутки «Параллакс» вы, скорее всего, увидите в редакторе увеличенный вариант изображения. Это не значит, что посетители увидят то же самое на опубликованном сайте. Чтобы увидеть, как эффект отображается на самом деле, просмотрите сайт в режиме предпросмотра.
Совет:
Оставьте фото на экране, когда посетители прокручивают страницу вверх и вниз, установив расположение прилипание или закрепление.

Редактирование фото в Фотостудии Wix

Используйте Фотостудию Wix, чтобы создавать красивые фото, не покидая Editor X. Фотостудия позволяет настраивать фото, которые вы уже загрузили, и сохраняет недавно отредактированную версию в медиаменеджере.
Различные варианты редактирования, такие как фильтры, поворот и наложения, позволяют создать впечатляющее изображение, чтобы выделить ваш сайт и заинтересовать посетителей.

Чтобы отредактировать фото:

  1. Нажмите на фото в редакторе.
  2. Нажмите на значок Настроить .
  3. Нажмите Настроить.
  4. (В Фотостудии) Отредактируйте фото, используя доступные параметры.
  5. Нажмите Сохранить.
Вы находитесь в медиаменеджере?
Вы также можете отредактировать фото прямо из медиаменеджера, нажав Редактировать под миниатюрой изображения.
Примечание:
Фотостудия Wix вносит изменения в источник фото, тогда как изменения, сделанные на холсте (в дизайне фото или кадрировании), вносят изменения для каждого размера экрана.

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

Чтобы добавить водяной знак к фото:

  1. Нажмите на фото в редакторе.
  2. Нажмите на значок Настроить .
  3. Нажмите Настроить.
  4. (В Фотостудии) Нажмите Текст в разделе Добавить элемент.
  5. Просмотрите стили текста и нажмите понравившийся, чтобы добавить его к фото.
  6. Введите текст водяного знака.
  7. (Необязательно) Нажмите Дизайн, чтобы настроить текст.
  8. Нажмите Сохранить.

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

|