Виджет галереи

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

Содержание

Настройки

  1. Тип: Выберите тип галереи, выбирая из Одиночка или Множество. Multiple позволяет создать фильтрующуюся галерею изображений в стиле портфолио.
    1. Если выбрано значение "Несколько", введите название в поле или используйте динамические метки.
  2. Добавить изображения: Выберите несколько изображений из медиатеки для вставки в галерею и введите Название для галереи
    1. Вы также можете использовать опцию динамических тегов для загрузки изображений из вложений изображений в пост, галереи расширенных пользовательских полей или галереи товаров WooCommerce. Это полезно при создании шаблона Single Post или Product в конструкторе тем.
  3. Заказать по: Выберите порядок по умолчанию или случайный порядок
  4. Lazy-Load: Установите значение Да, чтобы использовать Lazy Load для повышения скорости загрузки.
  5. Макет: Выберите из СеткаОправдано, или Каменная кладка.The Сетка основывается на выбранном вами соотношении сторон. Оправдано позволяет задать высоту для каждой строки и подстраивается под разную ширину изображения. Каменная кладка сохраняет одинаковую ширину изображения и подстраивается под разную высоту.
  6. Колонны: Установите, сколько столбцов будет отображаться в каждой строке, от 1 до 24. Недоступно, если Оправдано Макет выбран.
  7. Высота ряда: Установите высоту каждой строки в пикселях. Доступно только в том случае, если Оправдано Макет выбран.
  8. Расстояние между ними: Регулируйте величину промежутка между каждым изображением в ряду.
  9. Ссылка: Установите ссылку для изображений на "Нет", "Медиафайл" или "Пользовательский URL".
  10. Соотношение сторон: Выберите соотношение сторон: 1:1, 3:2, 4:3, 9:16, 16:9 и 21:9. Доступно только для макета "Сетка". 
  11. Разрешение изображения: Установите размер изображения, от миниатюры до полного, или введите пользовательский размер.

Если выбрано значение Тип: Multiple, становятся доступны следующие дополнительные параметры панели фильтрации:

Панель фильтров (доступна только при выборе типа Multiple)
  1. Фильтр "Все": Выберите Да, чтобы включить фильтр "Все", или Нет, чтобы исключить его.
  2. "Все" Ярлык фильтра: Если установлено значение "Да", введите нужную метку или используйте динамические метки. По умолчанию используется значение "Все".
  3. Указатель: Выберите указатель, используемый при наведении курсора на метку каждого фильтра. Выберите один из вариантов: "Нет", "Подчеркивание", "Надчеркивание", "Двойная линия", "Обрамление", "Фон" или "Текст".
  4. Анимация: Установите стиль анимации указателя. Выберите один из вариантов: "Затухание", "Скольжение", "Рост", "Спуск", "Спуск" или "Нет".

Накладка

  1. Фон: Выберите Да, чтобы при наведении курсора на каждое изображение появлялась накладка, или Нет, чтобы накладка не появлялась.
  2. Название: Выберите мета-атрибут, который будет отображаться в качестве заголовка наложения. Выберите один из вариантов: "Заголовок", "Подпись", "Alt", "Описание" или "Нет".
  3. Описание: Выберите мета-атрибут, который будет отображаться в качестве описания наложения. Выберите один из вариантов: "Заголовок", "Подпись", "Alt", "Описание" или "Нет".

Стиль

Изображение

  1. Цвет границы: Выберите цвет границы изображения для состояний Normal и Hover
  2. Ширина границы: Выберите толщину границы только для состояния Normal.
  3. Радиус границы: Управление закруглением угла границы изображения для состояний Normal и Hover.
  4. Фильтры CSS: Установите фильтры CSS, выбрав один из вариантов: размытие, яркость, контрастность и насыщенность для состояний Normal и Hover.
  5. Анимация наведения: Выберите анимацию изображения при наведении, выбрав один из вариантов: "Нет", "Увеличить", "Уменьшить", "Двигаться влево", "Двигаться вправо", "Двигаться вверх" или "Двигаться вниз" для состояний "Обычный" и "Наведенный".
  6. Продолжительность анимации (мс): Установите количество времени, которое занимает анимация, в миллисекундах.

Накладка

  1. Накладка: Выберите тип наложения (классическое или градиентное) для состояний Normal и Hover изображений.
  2. Цвет: Установите цвет наложения или градиентные цвета для обычных и наведенных состояний изображений.
  3. Режим наложения: Выберите один из нескольких эффектов слоя, включая Normal, Multiply, Screen, Overlay и т. д. Просмотр демонстрации режима наложения
  4. Анимация наведения: Выберите анимацию входа или выхода оверлея при наведении. Выберите один из вариантов: "Задвинуть вправо", "Задвинуть влево", "Задвинуть вверх", "Задвинуть вниз", "Увеличить", "Уменьшить" и "Затухание". Если выбрана анимация входа, то в обычном состоянии изображения отображаются с полной непрозрачностью, а при наведении на них накладка закрывает изображение. Если выбрана анимация выхода, накладка закрывает изображение в обычном состоянии и удаляется при наведении.
  5. Продолжительность анимации (мс): Установите количество времени, которое занимает анимация, в миллисекундах.

Содержание

  1. Выравнивание: Выравнивание содержимого по левому, правому или центральному краю
  2. Вертикальное положение: Выравнивание содержимого по верху, середине или низу
  3. Набивка: Настройте отступы содержимого
Название
  1. Цвет: Выберите цвет заголовка
  2. Типография: Установите параметры типографики для заголовка
  3. Расстояние между ними: Задайте величину пробела между заголовком и описанием
Описание
  1. Цвет: Выберите цвет описания
  2. Типография: Установите параметры типографики для описания
  1. Анимация наведения: Выберите анимацию входа, реакции или выхода содержимого при наведении. Для анимации входа выберите один из вариантов: "Сдвинуть вправо", "Сдвинуть влево", "Сдвинуть вверх", "Сдвинуть вниз", "Увеличить", "Уменьшить" и "Затухание". Для анимации реакции выберите один из вариантов: "Расти", "Сжиматься", "Двигаться влево", "Двигаться вправо", "Двигаться вверх" или "Двигаться вниз". Для анимации выхода выберите один из вариантов: "Выдвинуть вправо", "Выдвинуть влево", "Выдвинуть вверх", "Выдвинуть вниз", "Увеличить", "Уменьшить" и "Затухание".
  2. Продолжительность анимации: Установите количество времени, которое занимает анимация, в миллисекундах.
  3. Последовательная анимация: Установите значение Да, чтобы заголовок и описание анимировались последовательно. Установите значение "Нет", чтобы заголовок и описание отображались одновременно.

Фильтр-бар 

Эти дополнительные опции панели фильтрации становятся доступными только в том случае, если Тип: Множество был выбран.

  1. Цвет текста: Выберите цвет текста панели фильтра для состояний Normal, Hover и Active.
  2. Типография: Установите параметры типографики для текста панели фильтра.
  3. Цвет указателя: Выберите цвет указателя панели фильтра. Доступно только в состояниях Hover или Active.
  4. Ширина указателя: Выберите толщину указателя.
  5. Пространство между: Регулирует величину пробела между элементами текста фильтра.
  6. Gap: Регулируйте расстояние между текстом фильтра и изображениями галереи.

Расширенный

Установите дополнительные параметры, применимые к этому виджету


Надписи и заголовки в галерее

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

Редактирование титров/надписей

Чтобы отредактировать надпись и/название:

  1. Нажмите на область выбора изображения в Содержание вкладка...
  1. Чтобы изменить надпись, щелкните область надписи и введите новую надпись в текстовой области.
  1. Чтобы изменить название - щелкните изображение и введите новое название в текстовое поле.
  1. Нажмите Вставить галерею.

0 Комментариев

Оставить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *