Wix Pro Gallery: дизайн галереи

7 мин. чтения

Сделайте свою галерею заметной на сайте, добавив некоторые настройки дизайна. Вы можете придать своей галерее профессиональный вид, настроив макет, цвета, шрифты и многое другое.

Чтобы настроить дизайн галереи Pro Gallery:

Нажмите на галерею Wix Pro Gallery в редакторе.
Нажмите Настроить.
Перейдите во вкладку Дизайн.
Выберите что необходимо настроить.

Слой и значки

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

Нажмите Слой и значки.
Выберите сплошной или частичный слой и настройте его, используя доступные параметры:
- Сплошной слой: слой покрывает весь элемент галереи.
  - Градиент: нажмите на переключатель, чтобы включить наложение градиента.
    - Цвет 1 и Цвет 2: нажмите на соответствующее цветовое поле, чтобы настроить цвета градиента. Затем перетащите ползунок, чтобы настроить прозрачность цветов.
    - Направление градиента: перетащите ползунок, чтобы настроить направление слоя градиента.
    - Цвет значка: нажмите на поле цвета, чтобы изменить цвет значков галереи, которые появляются при наведении курсора.
  - Наложение цвета: нажмите на поле цвета, чтобы выбрать цвет. Затем перетащите ползунок, чтобы изменить прозрачность слоя цвета.
  - Цвет значка: нажмите на поле цвета и выберите новый цвет для значков галереи.
- Частичный слой: слой покрывает только часть элемента галереи.
  - Задавать размер как: управление размером слоя в процентах или пикселях.
  - Размер: перетащите ползунок или введите значение, чтобы выбрать размер слоя.
  - Начало слоя: выберите, где будет располагаться слой.
  - Отступы: перетащите ползунок, чтобы настроить расстояние между границей галереи и наложением.
  - Градиент: нажмите на переключатель, чтобы включить наложение градиента.
    - Цвет 1 и Цвет 2: нажмите на соответствующее цветовое поле, чтобы настроить цвета градиента. Затем перетащите ползунок, чтобы настроить прозрачность цветов.
    - Направление градиента: перетащите ползунок, чтобы настроить направление слоя градиента.
    - Цвет значка: нажмите на поле цвета, чтобы изменить цвет значков галереи, которые появляются при наведении курсора.
  - Наложение цвета: нажмите на поле цвета, чтобы выбрать цвет. Затем перетащите ползунок, чтобы изменить прозрачность слоя цвета.
  - Цвет значка: нажмите на поле цвета и выберите новый цвет для значков галереи.
Выберите эффект наложения из доступных вариантов:
- Без эффекта: слой остается статичным.
- Появление: слой постепенно появляется при наведении курсора.
- Увеличение: слой расширяется при наведении курсора.
- Взлет: слой появляется снизу при наведении курсора.
- Вправо: слой появляется слева при наведении курсора.

Тексты

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

Нажмите Текст.
Настройте текст, используя следующие параметры:
- Информация для отображения: установите флажок рядом с информацией, которую вы хотите отобразить (название, описание, счетчик слайд-шоу).
  Примечание: параметр Счетчик слайдов доступен в макете Слайд-шоу, если вы включили автоматическое отображение слайдов.
- Стиль и цвет названия: выберите шрифт и цвет текста названия.
- Стиль и цвет описания: выберите шрифт и цвет текста описания.
- Выравнивание по горизонтали: выберите выравнивание горизонтального текста по левому краю, по центру или по правому краю.
- Выравнивание по вертикали: выберите выравнивание вертикального текста по левому краю, по центру или по правому краю.
- Вертикальные поля текста: перетащите ползунок, чтобы изменить расстояние между вертикальным текстом и границей.
- Горизонтальные поля текста: перетащите ползунок, чтобы изменить расстояние между горизонтальным текстом и границей.

Вид элемента

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

Нажмите Вид элемента.
Настройте обычный вид элемента в разделе Стиль элемента:
- Ширина и цвет границы: перетащите ползунок, чтобы изменить ширину границы, и нажмите на палитру, чтобы выбрать цвет.
- Закругление: перетащите ползунок, чтобы сделать углы более круглыми или квадратными.
  Примечание: параметры Ширина и цвет границы и Закругление углов доступны только в том случае, если вы выбрали обрезку миниатюр в настройках макета и применяются только к основному изображению (не миниатюрам).
- Тень: нажмите переключатель, чтобы включить или отключить тень:
  - Включено: вокруг элемента будет отображаться тень. Настройте прозрачность, цвет, размытие, направление тени и размер тени.
  - Отключено: тень вокруг объекта отображаться не будет.
Выберите, что происходит, когда посетитель наводит курсор мыши на элемент галереи:
- Без эффекта: нет анимации при наведении курсора.
- Изменять масштаб: при наведении курсора происходит увеличение изображения.
- Размытие: изображение размывается при наведении курсора.
- Ч/б: при наведении курсора изображение становится черно-белым.
- Сжатие: при наведении курсора изображение уменьшается.
- Инверсия: при наведении курсора цвет изображения инвертируется.
- Цвет: при наведении курсора изображение превращается из черно-белого в цветное.
- Darken: при наведении курсора изображение становится немного темнее.
Выберите, что происходит во время загрузки изображения:
- Размытое изображение: при загрузке появляется размытая версия изображения.
- Цветной заполнитель: пока загружается изображение, вместо него отображается цвет.

Эффекты прокрутки

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

Примечания:

Доступные анимации зависят от выбранного макета галереи.
Настройка анимации доступна только в макетах с горизонтальной прокруткой.

Добавление анимации прокрутки:

Нажмите Эффект прокрутки.
Выберите, что происходит, когда посетители прокручивают галерею:
- Без эффекта: нет анимации при прокрутке.
- Проявление: во время прокрутки изображения постепенно появляются.
- Ч/б: при прокрутке изображение становится черно-белым.
- Взлет: при прокрутке изображение скользит вверх.
- Раскрытие: изображение при прокрутке становится больше.
- Сжатие: при прокрутке изображение уменьшается.
- Уменьшение: при прокрутке изображение уменьшается.
- Один цвет: при прокрутке изображения окрашиваются в один цвет.

Настройка анимации:

Нажмите Настроить анимацию
Настройте параметры анимации:
- Стиль перехода: нажмите на выпадающий список, чтобы применить эффект движения к элементам галереи. Этот эффект применяется при прокрутке, когда посетители переходят от одного элемента к другому.
- Продолжительность: перетащите ползунок, чтобы настроить продолжительность анимации.

Кнопки

Стрелки навигации

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

Нажмите Стрелки навигации.
Нажмите на переключатель, чтобы включить стрелки в галерее.
Настройте стрелки, используя следующие параметры:
- Стиль стрелки: нажмите, чтобы выбрать дизайн стрелки, или нажмите значок Добавить , чтобы загрузить свой.
- Фон стрелки: нажмите на выпадающий список, чтобы выбрать тень, бокс или без фона.
  - Тень: добавляет небольшую тень вокруг стрелки.
  - Бокс: добавляет рамку вокруг стрелки. Нажмите на поле цвета, чтобы изменить цвет поля, и перетащите соответствующие ползунки, чтобы настроить его прозрачность и закругление углов.
  - Нет: к стрелке не добавляется фон.
- Размер стрелки: перетащите ползунок, чтобы увеличить или уменьшить размер стрелок навигации.
- Цвет стрелки: нажмите на палитру, чтобы выбрать цвет стрелки навигации. Выберите цвет из списка цветов сайта или свой собственный.
- Положение стрелки: установите соответствующий флажок, чтобы отобразить стрелки навигации в галерее или за ее пределами. Примечание: отображение стрелок навигации в галерее может перекрывать часть элементов галереи.
- Центрировать стрелки: выберите, чтобы центрировать стрелки по обе стороны от самой галереи, ее изображений или текста.
- Горизонтальные отступы: перетащите ползунок, чтобы настроить расстояние между стрелками и границей галереи.

Режим увеличения

Этот раздел появляется, если вы выбрали «Открыть в режиме раскрытия» в панели настроек Pro Gallery, когда пользователь нажимает на элемент галереи. Здесь вы можете настроить режим раскрытия галереи в соответствии с дизайном и брендом вашего сайта.

Нажмите Режим раскрытия.
Нажмите Настроить режим раскрытия и настройте режим раскрытия галереи, используя следующие параметры:
- Какую информацию показывать? Выберите, чтобы показать заголовок, описание и/или ссылку.
- Где показывать?Выберите, где вы хотите разместить информацию:
  - Сбоку: информация отображается справа от элемента галереи.
  - Внизу: информация отображается под элементом галереи.
- Когда показывать?Выберите, когда отображается информация:
  - Всегда: информация отображается всегда.
  - При нажатии на значок информации: информация появляется только тогда, когда посетитель нажимает на значок информации в верхнем левом углу режима раскрытия.
- Разрешить полноэкранный режим: дайте посетителям возможность просматривать элементы галереи в полноэкранном режиме.
- Цвет фона: нажмите на поле цвета, чтобы выбрать цвет фона для режима раскрытия. Выберите цвета сайта или добавьте цвет.
- Цвет значка: нажмите на поле цвета, чтобы выбрать цвет значков в режиме раскрытия. Выберите цвета сайта или добавьте цвет.
- Стиль заголовка:
  - Нажмите на выпадающее меню, чтобы настроить шрифт, стиль и размер с помощью средства выбора шрифта.
  - Нажмите на поле цвета, чтобы изменить цвет текста заголовка.
- Стиль описания:
  - Нажмите на выпадающее меню, чтобы настроить шрифт, стиль и размер с помощью средства выбора шрифта.
  - Нажмите на поле цвета, чтобы изменить цвет текста описания.
- Выравнивание текста: выберите выравнивание текста: слева, по центру или справа.

Совет:

Вы можете скрыть стрелки навигации в галерее с помощью горизонтальной прокрутки.

Чтобы настроить дизайн галереи Pro Gallery:

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