Как добавить галерею изображений на сайт Weebly?

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

Параметры галереи для Weebly

Добавить галерею на сайт Weebly можно одним из следующих способов.

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

1. Использование элемента галереи Weebly по умолчанию

Войдите в свою учетную запись Weebly и перейдите в редактор. Элемент галереи Weebly доступен на вкладке «Сборка» и классифицируется в группе элементов «Базовые».

Элемент галереи Weebly

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

Добавление галереи в Weebly

Для элемента галереи доступны два варианта настройки: первый — на уровне отдельного изображения, второй — на уровне элемента галереи. Щелкните по отдельному изображению, чтобы добавить подпись и ссылку.

Вариант изображения для галереи

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

Параметры элемента галереи Weebly

Отрегулируйте количество столбцов в вашей галерее.
Отрегулируйте расстояние между верхним и нижним полями.
Параметр Caption позволяет вам задать, как должно выглядеть изображение при щелчке. Вы можете просто выбрать параметр lightbox или также выбрать отображение миниатюр. Вы также можете включить параметр «Display Caption on Hover», чтобы отображать подпись при наведении мыши на изображения.
Расширенные параметры позволяют вам задать интервал между изображениями, границу и соотношение сторон изображения.

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

Пример галереи Weebly

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

2. Использование элемента Section

Вышеуказанный метод создаст галерею с простым белым фоном. Вы можете использовать элемент «Section» для создания полноразмерного элемента и добавить галерею внутрь. Таким образом, вы можете добавить изображение, цвет или даже видеофон (если вы профессиональный пользователь) к изображениям вашей галереи.

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

Создание эффекта галереи на элементе раздела

Галерея с эффектом параллакс-прокрутки на фоновом изображении придаст вашему сайту великолепный вид.

3. Пользовательский виджет галереи Weebly

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

Сначала перейдите на вкладку «Страницы» в редакторе Weebly и выберите страницу, на которую вы хотите добавить галерею. Перейдите в «Настройки SEO» и вставьте следующий код CSS в поле «Код заголовка».

.обертка {
ширина: 100%;
выравнивание текста: по центру;
}
.галерея {
дисплей: встроенный-блочный;;
положение: относительное;
ширина: 200 пикселей;
высота: 200 пикселей;
отступ: 0;
поле: 10 пикселей;
граница: сплошная 10px #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
тень-блока: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.галерея img {
ширина: 200 пикселей;
высота: 200 пикселей;
}
.подпись {
положение: относительное;
дисплей: строчно-блочный;
ширина: 200 пикселей;
высота: 200 пикселей;
z-индекс: 10;
}
.подпись::перед {
содержимое: attr(data-title);
положение: абсолютное;
вверху: 0;
слева: 0;
ширина: 200 пикселей;
высота: 0;
размер шрифта: 24px;
фон: #ffffff;
переполнение: скрыто;
-webkit-transition: все 0,3 с. задержка;
-moz-transition: все 0,3 с замедления;
-ms-transition: все 0,3 с замедление;
-o-transition: все 0,3 с плавность;
переход: все 0,3 с замедление;
}
.подпись::после {
содержимое: attr(описание-данных);
положение: абсолютное;
низ: -0;
слева: 0;
ширина: 200 пикселей;
высота: 0;
размер шрифта: 1.1em;
начертание шрифта: 400;
высота строки: 1,4em;
цвет: #fff;
фон: #222;
переполнение: скрыто;
-webkit-transition: все 0,3 с. задержка;
-moz-transition: все 0,3 с замедления;
-ms-transition: все 0,3 с замедление;
-o-transition: все 0,3 с плавность;
переход: все 0,3 с замедление;
}
.caption:hover::before {
высота: 100 пикселей;
отступ сверху:10px;
}
.caption:hover::after {
внизу: 0;
высота: 100 пикселей;
отступ сверху:10px;
}