- Wix Pro Gallery: настройка дизайна галереи для мобильной версии сайта
Wix Pro Gallery: настройка дизайна галереи для мобильной версии сайта
14 мин.
Оптимизируйте внешний вид галереи Wix Pro Gallery на мобильных устройствах без влияния на компьютерную версию сайта. Это означает, что вы можете настроить дизайн галереи на сайте для смартфонов и планшетов так, чтобы он полностью отличался от компьютерной версии сайта.
Настройка дизайна галереи
Вы можете настроить наложение, тексты, стиль элементов и анимацию прокрутки галереи Wix Pro Gallery в мобильной версии. Доступные параметры настройки зависят от выбранного макета галереи.
Редактор Wix
Редактор Studio
- Перейдите в редактор.
- Нажмите на иконку В мобильный редактор
в верхней части редактора. - Нажмите на элемент Wix Pro Gallery на странице.
- Нажмите Настройки.
- Перейдите на вкладку Дизайн.
- Настройте галерею, используя доступные параметры:
Слой и иконки
Слой располагается поверх изображения и добавляет дополнительный эффект при наведении курсора. Вы можете настроить этот эффект, а также любые значки.
- Нажмите Слой и значки.
- Выберите Сплошной или Частичный слой и настройте его с помощью доступных параметров:
- Сплошной слой: закрывает всю позицию в галерее.
- Градиент: нажмите переключатель, чтобы включить градиент.
- Цвет и прозрачность 1 и 2: нажмите на соответствующий квадрат с цветом, чтобы настроить цвета градиента. Затем перетащите ползунок, чтобы отрегулировать прозрачность цветов.
- Направление градиента: перетащите ползунок, чтобы отрегулировать направление градиентного слоя.
- Цвет значка: нажмите на квадрат с цветом, чтобы изменить цвет значков галереи, которые появляются при наведении.
- Цвет слоя: нажмите на квадрат с цветом, чтобы выбрать цвет. Затем перетащите ползунок, чтобы изменить прозрачность.
- Цвет значка: нажмите на квадрат с цветом и выберите новый цвет для значков галереи.
- Градиент: нажмите переключатель, чтобы включить градиент.
- Частичный слой: закрывает только часть позиции в галерее.
- Единицы измерения: управляйте размером слоя в процентах или пикселях (Pix).
- Размер: перетащите ползунок или введите значение, чтобы выбрать размер.
- Наложение начинается с: выберите место расположения слоя.
- Отступы: перетащите ползунок, чтобы отрегулировать расстояние между границей галереи и слоем.
- Градиент: нажмите переключатель, чтобы включить градиент.
- Цвет и прозрачность 1 и 2: нажмите на соответствующий квадрат с цветом, чтобы настроить цвета градиента. Затем перетащите ползунок, чтобы отрегулировать прозрачность цветов.
- Направление градиента: перетащите ползунок, чтобы отрегулировать направление градиентного наложения.
- Цвет значка: нажмите на квадрат с цветом, чтобы изменить цвет значков галереи, которые появляются при наведении.
- Цвет наложения: нажмите на квадрат с цветом, чтобы выбрать цвет. Затем перетащите ползунок, чтобы изменить прозрачность слоя.
- Цвет значка: нажмите на квадрат с цветом и выберите новый цвет для значков галереи.
- Сплошной слой: закрывает всю позицию в галерее.
- Выберите эффект слоя из доступных вариантов:
- Без эффекта: эффект наложения не применяется.
- Проявление: наложение постепенно появляется при наведении.
- Расширение: наложение расширяется при наведении.
- Сдвиг вверх: наложение сдвигается вверх при наведении.
- Сдвиг вправо: наложение сдвигается вправо при наведении.
Тексты
Вы можете настроить дизайн текста заголовка и описания при условии, что вы выбрали их отображение во вкладке Дизайн. Если вы не видите параметров Текст (шаг 1 ниже), перейдите во вкладку Дизайн, нажмите Текст и установите чекбоксы рядом с пунктами Заголовок и Описание, чтобы они отображались.
Примечание: доступные параметры дизайна текста зависят от выбранного макета.
Примечание: доступные параметры дизайна текста зависят от выбранного макета.
- Нажмите Текст.
- Настройте текст, используя параметры ниже:
- Стиль и цвет заголовка: выберите шрифт и цвет текста заголовка.
- Стиль и цвет шрифта описания: выберите шрифт и цвет текста описания.
- Расположение инфо: выберите отображение информации над, под или поверх позиций галереи.
- Что происходит с текстом при 1-м нажатии?: выберите появление, исчезновение или отсутствие изменений информации при первом нажатии.
- Горизонтальное выравнивание: выберите выравнивание текста по горизонтали: по левому краю, по центру или по правому краю.
- Вертикальное выравнивание: выберите выравнивание текста по вертикали: по левому краю, по центру или по правому краю.
Примечания:
- Если заголовок или описание обрезаются на смартфоне, уменьшите размер шрифта или увеличьте изображения галереи в панели «Макет».
- Настройки горизонтальных и вертикальных отступов текста могут привести к тому, что текст будет обрезан в смартфоне. Эти настройки переносятся с версии для компьютера. Чтобы изменить их, перейдите в версию сайта для компьютера и измените настройки отступов во вкладке «Текст» панели «Дизайн».
- Эффект наведения для заголовков и описаний в галерее Wix Pro Gallery не работает в мобильной версии. Если вы включили этот эффект, посетителям, просматривающим галерею со смартфона, нужно будет нажать один раз, чтобы увидеть текст, и второй раз, чтобы открыть полное изображение или ссылку. Чтобы изображения открывались при первом нажатии, следуйте этим инструкциям.
Стиль элементов
Каждое изображение или видео в галерее — это элемент. Вы можете изменить внешний вид позиций как для обычного режима, так и для режима при наведении.
- Нажмите Вид элемента.
- Настройте обычный вид элемент:
- Ширина и цвет границы: перетащите ползунок, чтобы изменить ширину границы, и нажмите на цветной бокс, чтобы выбрать цвет.
- Радиус угла: перетащите ползунок, чтобы сделать углы более закругленными или квадратными.
Примечание: параметры Ширина и цвет границы и Радиус угла доступны только в том случае, если вы выбрали обрезку превью в настройках макета.
- Тень: нажмите на переключатель, чтобы включить или выключить тень:
- Включено: у позиции галереи есть тень. Настройте прозрачность, цвет, размытие, направление и размер тени.
- Выключено: у позиции галереи нет тени.
- Выберите, что происходит при наведении курсора на элемент в галерее:
- Без эффекта: эффект при наведении не применяется.
- Увеличение: изображение увеличивается при наведении.
- Размытие: изображение размывается при наведении.
- Оттенки серого: изображение становится черно-белым при наведении.
- Уменьшение: изображение уменьшается при наведении.
- Инверсия: цвета изображения инвертируются при наведении.
- Появление цвета: изображение превращается из черно-белого в цветное при наведении.
- Затемнение: изображение становится немного темнее при наведении.
- Выберите, что происходит во время загрузки изображения:
- Размытое изображение: во время загрузки появляется размытая версия изображения.
- Цветная подсказка: во время загрузки изображения появляется цветной текст-подсказка.
Кнопки
Этот раздел появится, если вы выбрали показывать кнопку Показать еще во вкладке Макет.
Здесь можно изменить текст, шрифт, цвет и радиус округления углов кнопки Показать еще.
Здесь можно изменить текст, шрифт, цвет и радиус округления углов кнопки Показать еще.
- Нажмите Кнопки.
- Настройте кнопки, используя параметры ниже:
- Текст кнопки: введите текст, который будет отображаться на кнопке.
- Стиль и цвет шрифта: выберите шрифт и цвет кнопки.
- Цвет и прозрачность кнопки: перетащите ползунок, чтобы изменить цвет и прозрачность кнопки, и нажмите на цветной бокс, чтобы выбрать цвет.
- Ширина и цвет границ: перетащите ползунок, чтобы изменить ширину границ, и нажмите на цветной бокс, чтобы выбрать цвет.
- Радиус углов: перетащите ползунок, чтобы изменить радиус скругления углов.
Анимация прокрутки
Добавьте анимационный эффект, который появляется, когда посетители прокручивают галерею. Вы можете дополнительно настроить выбранную анимацию, добавив стиль перехода и отрегулировав ее продолжительность.
Примечание:
Доступные анимации зависят от выбранного макета галереи.
Добавление анимации прокрутки:
- Нажмите Прокрутка Анимация.
- Выберите, что происходит, когда посетители прокручивают галерею:
- Без эффекта: эффект прокрутки не применяется.
- Появление: изображения постепенно появляются во время прокрутки.
- Оттенки серого: изображение становится черно-белым при прокрутке.
- Сдвиг вверх: изображение сдвигается вверх при прокрутке.
- Расширение: изображение увеличивается при прокрутке.
- Сжатие: изображение уменьшается при прокрутке.
- Уменьшение: масштаб изображения уменьшается при прокрутке.
- Один цвет: к изображениям при прокрутке применяется один цвет.
Настройка анимации:
- Нажмите Настроить анимацию
- Настройте параметры анимации:
- Стиль перехода: нажмите на выпадающий список, чтобы применить эффект движения к элементам галереи. Этот эффект применяется при прокрутке, когда посетители переходят от одного элемента к другому.
- Продолжительность: перетащите ползунок, чтобы настроить длительность анимации.
Режим раскрытия
Этот раздел появляется, если в панели настроек галереи вы выбрали «Открыть в режиме раскрытия» при клике на элемент. Здесь вы можете настроить режим раскрытия галереи в соответствии с дизайном и брендом вашего сайта.
- Нажмите Режим раскрытия.
- Нажмите Настроить режим раскрытия и персонализируйте его, используя следующие параметры:
- Какая информация отображается? Выберите отображение заголовка, описания и/или ссылки.
- Где она появляется? Выберите место для размещения информации:
- Сбоку: информация появляется справа от позиции галереи.
- Снизу: информация появляется под позицией галереи.
- Когда она отображается? Выберите время показа информации:
- Всегда: информация отображается постоянно.
- При нажатии на иконку инфо: информация появляется только тогда, когда посетитель нажимает на иконку «i» в левом верхнем углу режима расширения.
- Разрешить полноэкранный режим: выберите, чтобы позволить посетителям просматривать позиции галереи в полноэкранном режиме.
- Цвет фона: нажмите на квадрат с цветом, чтобы выбрать фон для режима расширения. Выберите из цветов сайта или добавьте свой.
- Цвет иконок: нажмите на квадрат с цветом, чтобы выбрать цвет иконок в режиме расширения. Выберите из цветов сайта или добавьте свой.
- Стиль заголовка:
- Нажмите на выпадающее меню, чтобы настроить шрифт, стиль и размер в окне выбора шрифтов.
- Нажмите на квадрат с цветом, чтобы изменить цвет текста заголовка.
- Стиль описания:
- Нажмите на выпадающее меню, чтобы настроить шрифт, стиль и размер в окне выбора шрифтов.
- Нажмите на квадрат с цветом, чтобы изменить цвет текста описания.
- Выравнивание текста: выберите выравнивание текста: по левому краю, по центру или по правому краю.
Часто задаваемые вопросы
Нажмите на вопрос ниже, чтобы подробнее узнать о настройке дизайна галереи для мобильной версии сайта:
Почему в моей галерее отсутствуют параметры дизайна «Наложение и значки» и «Стиль позиции»?
Параметры дизайна «Наложение и значки» и «Стиль позиции» видны только в макетах «Сетка» (вертикальная ориентация), «Слайдер», «Полоска» и «Секции», если вы выберете На изображении в качестве положения информации во вкладке Текст панели Дизайн.
Как устранить неполадки в работе галереи в смартфоне?
Ознакомьтесь с нашим руководством по устранению неполадок Wix Pro Gallery в смартфоне и узнайте способы решения наиболее распространенных проблем.
Была ли статья полезна?
|