Создайте красивое визуальное оформление мобильного сайта — улучшите изображения, перенесенные из компьютерной версии, а также настройте изображения, которые вы добавляете из мобильного редактора.
Настройка изображений, перенесенных из компьютерной версии, ограничена — вы можете настроить параметры изображения, обрезать изображение и добавить забавную анимацию. У вас есть полный контроль над настройкой изображений, добавленных из мобильного редактора: добавьте фильтры и рамки, настройте, что происходит при клике по изображению, и добавьте ссылки.
Содержание:
- Фото, перенесенные из компьютерной версии
- Фото, добавленные из мобильного редактора
Изображения, перенесенные из компьютерной версии
Изображения, которые вы добавляете в компьютерную версию сайта, автоматически переносятся на мобильный сайт. Вы можете настроить параметры изображения, обрезать его и добавить анимацию, чтобы фото отличалось от версии для компьютера.
Чтобы настроить изображения, перенесенные из компьютерной версии:
- Нажмите на изображение в мобильном редакторе.
- В зависимости от того, что вы хотите настроить, сделайте следующее:
Изменение настроек изображения
Настройте, как посетители взаимодействуют с изображениями, а также что происходит при изменении размера изображений на разных мобильных устройствах.
Чтобы изменить настройки изображения:
- В мобильной версии нажмите на изображение.
- Нажмите на значок Настройки
. - Отредактируйте следующие параметры:
- Поведение фото: решите, как ваши посетители будут взаимодействовать с изображениями.
- При нажатии фото:
- Ничего не происходит: изображение не кликабельно, при нажатии на него ничего не происходит.
- Открывается ссылка: изображение действует как кнопка и может быть связано со страницей, якорем на вашем сайте, внешним URL-адресом и т. д.
- Открывается в окне: изображение открывается во всплывающем окне.
- Изменение размера: решите, что происходит при изменении размера изображения.
- Сохранить пропорции: изображение и форма сохраняют исходные пропорции при изменении размера.
- Автозаполнение: изображение автоматически настраивается, чтобы заполнить пространство на устройстве посетителя.
Покажите новую версию изображения в мобильной версии, обрезав изображение вручную или используя кадрирование.
Чтобы кадрировать изображение вручную:
- В мобильной версии нажмите на изображение.
- Нажмите значок Кадрировать
. - Перетащите ползунок, чтобы увеличить или уменьшить изображение.
- Переместите изображение, чтобы отобразить нужную часть.
- Нажмите Сохранить.
Чтобы кадрировать изображение с помощью фигуры:
- В мобильной версии нажмите на изображение.
- Нажмите значок Кадрировать .
- Перетащите ползунок, чтобы увеличить или уменьшить изображение.
- Нажмите значок Кадрировать
и выберите фигуру. - Нажмите Сохранить.
Добавление анимации изображения
Добавьте к изображению на мобильном устройстве забавную анимацию, чтобы оживить сайт.
Чтобы добавить анимацию:
- В мобильной версии нажмите на изображение.
- Нажмите значок Анимация
. - Выберите анимацию, которую вы хотите применить.
- Нажмите Настроить, чтобы настроить анимацию.
Изображения, добавленные из мобильного редактора
Выберите из множества типов изображений, какое фото вы хотите добавить на сайт прямо из мобильного редактора. Изображения, добавленные в мобильном редакторе, полностью настраиваются. Отрегулируйте настройки изображения и дизайн, добавьте фильтры, кадрируйте и добавьте анимацию.
Какие типы изображений доступны?
- Мои загрузки: загрузите собственные файлы изображений для использования на сайте.
- Коллекции изображений: выберите из сотен стоковых изображений и иллюстраций, доступных на Wix, Shutterstock и Unsplash.
- Мои фото в соцсетях: подключите свои аккаунты соцсетей для отображения изображений с таких платформ, как Facebook и Instagram.
Чтобы добавить и настроить изображения только для мобильных устройств:
- Нажмите значок Добавить в мобильный сайт
слева. - Выберите Фото.
- Выберите тип изображения, которое вы хотите добавить.
- Нажмите на изображение, которое вы хотите загрузить, и нажмите Добавить на страницу.
- В зависимости от того, что вы хотите настроить, сделайте следующее:
Изменение настроек изображения
Уточните, что происходит при нажатии на изображение, добавьте всплывающую подсказку и/или Alt-текст, чтобы помочь поисковикам прочитать ваше изображение. Вы также можете выбрать, что происходит с изображениями при изменении их размера.
Чтобы настроить действие при нажатии на изображение:
- Нажмите на изображение.
- Нажмите значок Настроить .
- Нажмите на раскрывающееся меню При нажатии фото и выберите один из вариантов:
- Ничего не происходит: при нажатии на изображение ничего не происходит.
- Открывается ссылка: изображение действует как кнопка и может быть связано со страницей, положением или якорем на вашем сайте, внешним URL-адресом, документом или адресом эл. почты.
- Открывается в окне: изображение открывается во всплывающем окне.
- Фото можно увеличить: курсор становится увеличительным стеклом, когда посетитель наводит курсор на изображение. Нажатие на изображение увеличивает его.
Чтобы добавить Alt-текст к изображению:
- Нажмите на изображение.
- Нажмите значок Настроить .
- Введите текст в поле Опишите картинку поисковикам .
Чтобы добавить всплывающую подсказку к изображению:
- Нажмите на изображение.
- Нажмите значок Настроить .
- Введите текст в поле Есть всплывающая подсказка?
Чтобы изменить размер изображений:
- Нажмите на изображение.
- Нажмите значок Настроить .
- Нажмите на соответствующий переключатель, чтобы выбрать, что происходит с изображениями при изменении их размера.
- Сохранить пропорции: изображение и форма сохраняют исходные пропорции при изменении размера.
- Автозаполнение: изображение автоматически подстраивается под доступное пространство.
Примечание: Автозаполнение можно включить только после включения Сохранение пропорций.
Добавьте дизайн рамки изображения
Измените дизайн изображения и настройте внешний вид рамки на мобильном сайте.
Чтобы настроить дизайн рамки изображения:
- Нажмите на изображение.
- Нажмите значок Дизайн
. - Выберите готовый дизайн или нажмите Настроить дизайн.
- Настройте изображение:
- Прозрачность и цвет: выберите цвет и прозрачность изображения.
- Граница: настройте дизайн границ изображения.
- Уголки: закруглите углы изображения.
- Тень: создайте тень для изображения.
Покажите новую версию изображения в мобильной версии, обрезав изображение вручную или используя кадрирование.
Чтобы кадрировать изображение:
- Нажмите на изображение.
- Нажмите значок Кадрировать .
- Перетащите ползунок, чтобы увеличить или уменьшить изображение.
- Переместите изображение, чтобы отобразить нужную часть.
- Нажмите Сохранить.
Чтобы кадрировать изображение с помощью фигуры:
- В мобильной версии нажмите на изображение.
- Нажмите значок Кадрировать .
- Перетащите ползунок, чтобы увеличить или уменьшить изображение.
- Нажмите значок Кадрировать
и выберите фигуру. - Нажмите Сохранить.
Добавление фильтров и анимации
Измените изображение, применив один из наших фильтров, и добавьте классную анимацию, чтобы оживить мобильный сайт.
Чтобы добавить фильтр:
- Нажмите на изображение.
- Нажмите значок Фильтры
. - Нажмите на любой фильтр, чтобы добавить его к изображению.
Чтобы добавить анимацию:
- В мобильной версии нажмите на изображение.
- Нажмите значок Анимация .
- Выберите анимацию, которую вы хотите применить.
- Нажмите Настроить, чтобы настроить анимацию.
Добавление ссылки к изображению
Добавьте ссылки к изображениям, чтобы стимулировать взаимодействие посетителей с сайтом.
Чтобы добавить ссылку к изображению:
- Нажмите на значок ссылки
. - Выберите тип ссылки и введите сведения о ссылке.
- Нажмите Готово.
Подробнее о типах ссылок, которые можно добавить к изображению.
при нажатии на них.
