Галерея сайта

Pixpa дает вам большой контроль над тем, как отображать изображения в ваших галереях.

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

Наконечник: Параметры стиля галереи на сайте автоматически применяются ко всем новым галереям, которые вы создаете.
См. также: Как переопределить стиль галереи для всего сайта в конкретной галерее?

В этой статье:

Вы можете настроить параметры галереи на всем сайте в разделе «Дизайн» (1).

Оказавшись в разделе «Дизайн», нажмите на вкладку «Галереи» (2).

Кроме того, вы также можете использовать опцию поиска студии.

Enter галереи (1) в строке поиска.
В соответствующих результатах щелкните значок Дизайн – Галереи вариант (2).

Галерея Макет

Макет: Выберите макет, который будет применен к галерее.
Узнайте, как изменить макет галереи.
Ширина : выберите ширину галереи.
- "Полная ширина' будет отображать галерею, покрывая всю ширину, не оставляя поля.
- "В штучной упаковке' отобразит галерею, оставив некоторое количество отступов справа и слева от экрана.
- "Ширина сайта' можно указать в разделе дизайна. Здесь вы можете указать фиксированную ширину.
  Он будет отображать галерею, придерживаясь указанной фиксированной ширины.

Стиль сетки

Шаг сетки: Укажите пространство между изображениями в макетах сетки. (0 – 250 пикселей)
Угловой радиус изображения: Примените радиус границы, чтобы скруглить углы изображения в сетках галереи.

Например , в галерее главной страницы темы Lantern используется сетка с шагом 142 пикселя.

После применения параметра «Скругление углов изображения» вы увидите закругленные края изображений, как в шаблоне Beyond.

Цвета сетки

Базовая непрозрачность: Если в качестве акцентного цвета изображения выбран тип «при наведении курсора», установите базовую непрозрачность сетки здесь.

база: Основной цвет используется для формирования сетки и виден только на мгновение перед загрузкой изображений. У вас есть два варианта основного цвета сетки.
- Выберите цвет: Выберите этот параметр, чтобы задать определенный цвет для основы сетки. Укажите любой цвет и непрозрачность для основы сетки.
- Акцентный цвет: Используйте цвета акцента изображения для основы сетки. Это даст разноцветную сетку, используя акцентные цвета каждого изображения.
Базовая непрозрачность: Если вы выбрали базовый тип в качестве цвета акцента, отсюда установите непрозрачность основы сетки.
Наведите указатель мыши: Это влияет на сетку при наведении курсора на изображение.
- Выберите цвет: Установите цвет при наведении по умолчанию и его непрозрачность, если вы выбрали «Выбрать цвет» для изображений сетки.
- Акцентный цвет: Используйте цвета акцента изображения для основы сетки. Это даст разноцветную сетку, используя акцентные цвета каждого изображения.
Непрозрачность при наведении: Если вы выбрали тип наведения в качестве акцентного цвета, установите здесь непрозрачность основания сетки.

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

Эффект наведения на сетку

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

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

Иконка при наведении

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

Заголовок

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

Граница изображения

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

Когда изображения отображаются в виде сетки, щелчок по изображению открывает его в режиме Lightbox (отображение полного изображения).
Вы можете включить или отключить это отсюда.

Посмотрите, как работает режим «Лайтбокс» :

2. Включить масштабирование

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

3. Показать варианты

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

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

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

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

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

4. Параметры цвета наложения

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

Выберите Пользовательский цвет возможность задать определенный цвет фона для всех изображений, просматриваемых в режиме лайтбокса. Вы можете определить предпочитаемый цвет в Цвет наложения установка. Узнать больше.
Выбирайте Цвет акцента для применения уникального цвета из акцентных тонов каждого изображения. Вы можете настроить это индивидуально для каждого изображения по желанию. Узнать больше.
Если вы выберете опцию Акцентный цвет, вы сможете настроить Непрозрачность (прозрачность) цвета фона.

5. Просмотр изображения

Укажите режим отображения для лайтбокса –

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

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

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

6. Элементы управления

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

Всегда виден (всегда показывать элементы навигации поверх изображений)
Показать при наведении (элементы навигации будут отображаться только при перемещении курсора по экрану)
Скрытый (элементы навигации никогда не будут отображаться).

Например , галерея с постоянно видимыми элементами управления навигацией.

Например , галерея с элементами управления навигацией, отображаемыми при наведении курсора.

Например , галерея со скрытыми элементами управления навигацией.

7. Стиль «Следующий/Предыдущий»

В полноэкранном режиме выберите способ отображения навигационных стрелок.

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

8. Имя файла изображения

Выберите отображение имени файла при просмотре изображения в режиме лайтбокса.

Смотрите в действии:

9. Максимальный размер изображения

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

Авто - Автоматически адаптирует размер изображения в зависимости от разрешения экрана и устройства зрителя. Система интеллектуально выбирает наиболее подходящую версию изображения для обеспечения оптимальной чёткости и производительности.
Фиксированные размеры – 2048 пикселей, 1500 пикселей, 1000 пикселей, 800 пикселей или 500 пикселей. Выбор фиксированного размера означает, что все изображения в лайтбоксе будут отображаться с максимальным разрешением в зависимости от устройства или размера экрана пользователя.

Внимание

Если разрешение загруженного вами исходного изображения меньше выбранного размера, оно будет отображено в исходном разрешении . Оно не будет увеличено или масштабировано.

Настройки слайд-шоу

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

Смотрите слайд-шоу в действии:

Варианты оттенка

Эта функция позволяет использовать акцентный цвет изображений в качестве фона при просмотре изображений в режиме лайтбокса . Это улучшает визуальное восприятие, выравнивая фон с акцентным цветом изображения.

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

Мобильный дисплей

Показать как: Выберите, чтобы показать галерею как Слайдер изображений или в режиме сетки в мобильном представлении.
Столбцы сетки: Выберите из 1 столбец или 2 столбца для отображения сетки в мобильном представлении.
Шаг сетки: Установить водосточный желоб между изображениями в мобильный вид.

Не можете найти то, что ищете?

Свяжитесь с экспертом Pixpa.

Свяжитесь с нами