Виджет Фотогалерея используется для добавления сразу нескольких фотографий на страницу. Такая галерея позволит эффектно оформить портфолио, показать фото ваших работ или проектов.
1. Добавление виджета Фотогалерея.
Создайте страницу с типом Новая страница и добавьте виджет Фотогалерея, перетащив его в нужную область страницы.
2. Добавление изображений в фотогалерею.
Для добавления изображений нажмите кнопку Выберите файл и загрузите фото. Вы можете добавлять картинки по одной или же добавить сразу группу фотографий.
Если вы загрузили одно фото, для загрузки второго перейдите в настройки виджета, кликнув на символ шестеренки в правом верхнем углу. В открывшемся окне нажмите кнопку «+». Вы можете добавлять новые фото в начало или конец фотогалереи.
При необходимости перейдите в полноэкранный режим управления изображениями нажав на символ стрелки. Это позволит видеть сразу все добавленные фото, удаление и изменение порядка фото будет более удобным.
3. Настройка фотогалереи.
Для виджета Фотогалерея доступны следующие основные настройки:
- Вид галереи
Во вкладке Оформление выберите вид вашей галереи. Всего доступно шесть видов: Вид лентой, Табличный вид, Грид, Вид горизонтальной лентой, Вид с превью, Вид с одним фото.
- Ширина галереи
Выберите подходящую ширину галереи в %, перетащив бегунок Ширина галереи в нужное положение.
- Склеивание изображений
Эта настройка позволяет разместить несколько изображение в строку - «склеить» изображения. Для склеивания изображений в ряд перейдите в настройки виджета, кликнув по значку шестеренки в правом верхнем углу. Затем нажмите на символ склеивания между фотографиями, которые вы хотите объединить в один ряд. Данная настройка доступна только для галереи Вида лентой.
- Нумерация фотографий
Для галерей Вид лентой, Табличный вид, Грид доступен чекбокс Пронумеровать все фотографии.
У нумерации вы можете изменить цвет, формат шрифта, задать выравнивание.
- Изменение расстояния между фото
Вы можете убрать полностью расстояние между изображениями или подобрать подходящие отступы. Для этого во вкладке Оформление перетащите бегунок Расстояние между изображениями в нужное положение.
Настройка не доступна для галереи с превью и галереи с одним фото.
- Отображение фото на весь экран
Для отображения фото во весь экран перейдите на вкладку Оформление и поставьте галочку в поле Открывать галерею на весь экран по клику на фото. Данная настройка не доступна для галереи Вида горизонтальной лентой.
- Ссылка на изображение
Наведите курсор мышки на область фото и нажмите на иконку, которая появится при наведении. В открывшемся окне вам будет предложен выбор: добавить ссылку на страницу вашего сайта или внешнюю ссылку.
Выбирайте тип ссылки Страница сайта, если переход должен быть на страницу на вашем сайте. Далее в выпадающем списке будет доступен выбор страниц из меню вашего сайта.
Внешняя ссылка может понадобиться, если вы добавляете ссылку на сторонний сайт, на номер телефона, почту. Вы также можете ее использовать и для добавления ссылки между страницами вашего сайта, например, на пост в блоге или товар.
ВАЖНО: если ссылка ведет на сторонний сайт, то указывайте полный адрес ссылки с доменом, например, https://vigbo.com/templates Если переход должен быть на страницу вашего сайта, указывайте в качестве ссылки только адрес страницы без доменного имени, в начале ссылки должен быть символ / Пример: /templates
Данная настройка не доступна, если в галерее активна отметка Открывать галерею на весь экран по клику на фото. Возможность указать ссылку отсутствует для изображений галереи горизонтального вида, галереи с превью и галереи с одним фото.
- Подпись к изображению
Чтобы добавить подписи к изображению, наведите курсор мышки на область фото и кликните на иконку, которая появится при наведении. В открывшемся окне укажите подпись к изображению. Далее для нее вы можете задать цвет, шрифт, размер шрифта, межстрочный интервал, настроить выравнивание.
Подпись будет отображаться на странице галереи под фото. Добавление подписи для изображений не доступно для горизонтального вида галереи, галереи с превью и галереи с одним фото.
- ALT-текст для изображения
В атрибут «ALT» нужно писать текстовый эквивалент того, что изображено на фото. Если по каким-то причинам фото не отображается, посетителю будет видна надпись, описывающая, что изображено на фотографии. Наличие ALT-тегов позволяет увеличить рейтинг страницы в поисковых системах в режиме поиска картинок, то есть улучшить поисковую оптимизацию сайта.
Добавление ALT-тегов для фото доступно для галереи Вида ленты, Грид, галереи Вида горизонтальной лентой.
Помимо основных настроек для каждого вида галереи будут доступны свои индивидуальные настройки: пропорции фото, размер изображений, функции слайдера и фона у фото и т.д. Выбирая нужный вид галереи, вы сможете подобрать для себя оптимальный вариант отображения фотографий на сайте.
Особенности отображения галерей в мобильной версии
Для каждого вида фотогалереи вы можете выбирать вариант, как фото будут отображаться в мобильной версии.
В галерее Вида лентой доступно два варианта отображения: Одно фото в ряд и Несколько фото в ряд.
При выборе первого варианта, фото отображаются друг под другом, по одному снимку в ряду. При выборе второго варианта, фотографии отображаются как на десктоп версии: в одном ряду отображаются все фото, которые были «склеены».
В Табличном виде фотогалереи доступно три варианта отображения: Одно фото в ряд, Два фото в ряд, Три фото в ряд.
Фотографии отображаются в соответствии с выбранными настройками — по одному, два или три фото в одном ряду и с теми же пропорциями, которые были установлены для десктоп версии.
Для галереи вида Грид доступно три варианта отображения: Одно фото в ряд, Два фото в ряд, Три фото в ряд.
Галерея Вида горизонтальной лентой в мобильной версии отображается в виде слайдера (ленты). И можно выбрать два варианта отображения: С отступами до края экрана, Без отступов до края экрана.
Высота галереи при любом из вариантов будет составлять 26% высоты экрана устройства и не зависит от высоты заданной в настройках галереи.
Галерея С превью отображается одинаково на всех разрешениях, но в мобильной версии превью фото располагаются всегда снизу.
В галерее Вида с одним фото изображения отображаются в виде слайдера, как и на десктоп версии. И можно выбрать два варианта отображения: С отступами до края экрана, Без отступов до края экрана.