Настройка дизайна галереи Wix Art Store | Центр Поддержки

Настройка дизайна галереи Wix Art Store

7 мин. чтения

Важно

Wix Art Store в настоящее время доступен не всем пользователям. С октября 2022 года добавить Wix Art Store на сайт больше нельзя. В качестве альтернативы вы можете добавить на свой сайт Wix Stores и подключить его к Printful, чтобы продавать свои товары.

Вы можете настроить дизайн галереи Wix Art Store как для обычного режима, так и для режима при наведении курсора (вид, который клиент видит при наведении курсора на галерею).

Чтобы настроить дизайн:

Нажмите на галерею Wix Pro Gallery в редакторе.
Нажмите Настроить.
Перейдите во вкладку Дизайн.
Настройте дизайн галереи, используя следующие параметры:

Слой и значки

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

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

Тексты

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

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

Кнопки

Настройте кнопки «Купить» и «Показать еще».

Нажмите Кнопки и настройте следующее:

Кнопка «Купить»: нажмите на переключатель, чтобы включить или отключить кнопку «Купить».
- Включено: под изображением отображается кнопка «Купить». Настройте кнопку:
  - Текст кнопки: отредактируйте текст, который отображается на кнопке «Купить».
  - Стиль и цвет шрифта: нажмите на раскрывающееся меню, чтобы выбрать шрифт, и нажмите на палитру, чтобы изменить цвет текста кнопки.
  - Прозрачность и цвет кнопки: перетащите ползунок, чтобы изменить прозрачность, и нажмите на палитру, чтобы изменить цвет кнопки.
  - Ширина и цвет границы: перетащите ползунок, чтобы изменить ширину, и нажмите на палитру, чтобы изменить цвет границы.
  - Закругление: перетащите ползунок, чтобы изменить радиус углов кнопки (чем больше радиус, тем округлее кнопка).
  - Выравнивание по горизонтали: выберите выравнивание кнопки по горизонтали по левому краю, центру или правому краю.
  - Выравнивание по вертикали: выберите выравнивание кнопки по левому краю, центру или правому краю.
- Отключено: кнопка «Купить» не отображается.
Кнопка «Показать еще»: настройте кнопку «Показать еще», которая появляется под галереей:
Примечание: этот раздел появится, если вы выбрали отображение кнопки Показать еще на вкладке Макет.
- Текст кнопки: отредактируйте текст, который отображается на кнопке «Показать еще».
- Стиль и цвет шрифта: нажмите на раскрывающееся меню, чтобы выбрать шрифт, и нажмите на палитру, чтобы изменить цвет текста кнопки.
- Прозрачность и цвет кнопки: перетащите ползунок, чтобы изменить прозрачность, и нажмите на палитру, чтобы изменить цвет кнопки.
- Ширина и цвет границы: перетащите ползунок, чтобы изменить ширину, и нажмите на палитру, чтобы изменить цвет границы.
- Закругление: перетащите ползунок, чтобы изменить радиус закругления углов. Чем больше радиус, тем округлее будут углы.

Вид элемента

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

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

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

Настроить раскрытие

Настройте всплывающее окно, которое открывается, когда посетители нажимают на изображение.

Нажмите Режим раскрытия и настройте следующее:

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

Совет

По умолчанию превью, которое вы видите в редакторе, это превью при наведении курсора. Нажмите Завершить просмотр при наведении, чтобы отключить этот вид. Нажмите Вид при наведении, чтобы снова просмотреть превью при наведении курсора.