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