Web5X Блог

Блог о создании сайта, конструкторе сайтов

Web5X Блог

Блог о создании сайта, конструкторе сайтов

Поиск по блогу

Галерея — виджет Elementor

Обновлено: 08.03.2018
2 комментариев
заставка - галерея изображений в конструкторе сайта

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

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

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

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

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

галерея изображений в конструкторе сайта

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

 

Содержимое

- Галерея

  • Изображения - выбор изображений для добавления в галерею.
  • Размер изображения - выбор размера изображения из предложенных темой или установки произвольного размера.
  • Колонки - количество изображений в одной строке галереи.
  • Ссылка на - выбор цели для ссылки, т.е  выбор ссылки которая будет установлена на изображение. Возможно выбрать между ссылкой на медифайл или стандартной страницей вложения.
  • Лайтбокс - возможно выключить лайтбокс при необходимости.
  • Порядок - сортировка галереи (по умолчанию т.е как задано в библиотеки медифайлов или случайный.)

Стили

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

- Подпись
При наличии подписи возможно ее скрыть или оставить отображаемой. Для изменения доступно такие свойства как выравнивание текста, цвет текста и ее типографика (шрифты, размер шрифта итд.)

 

Список всех виджетов Elementor вы можете посмотреть на странице Виджеты

 

Остались вопросы?
Листай ниже или клик по ссылке выше. Там можно задать вопрос или почитать комментарии других.
Написать комментарий

2 комментариев

  • A

    День добрый. Site Settings — Lightbox
    Так же в редактировании виджета, под полем Lightbox есть подсказка Manage your site’s lightbox settings in the Lightbox panel. При нажатии на ссылку откроются настройки.

    Но они там перемудрили… и напутали стили, в итоге улетело все в право и стало кашей. Поэтому лучше добавить стили вручную , типа
    .elementor-slideshow__header { display: unset !important; }

  • Добрый день. Интересует как управлять навигацией в галереи «лайтбокс» (всплывающее изображение при клике). То есть кнопка переслать, увеличить, счетчик, крестик…

    Буду очень благодарен за ответ

    Ссылки на сайт нет так как я только делаю сайт на пк

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