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

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

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

Добавить галерею изображений в Weebly, используя элемент галереи по умолчанию

Элемент галереи Weebly доступен на вкладке «Сборка» и отнесен к группе элементов «Базовая».

Элемент Weebly Gallery

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Использование элемента раздела

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

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

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

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

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

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

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

Ниже приводится полный код CSS и HTML, который вы можете встроить с помощью элемента «Код для вставки». Рекомендуется вставить CSS (между тегами стиля) в раздел «Код заголовка» страницы и встроить HTML-код с помощью элемента «Вставить код».

<style>
.wrapper {
width: 100%;
text-align: center;
}
.galery {
display: inline-block;;
position: relative;
width: 200px;
height: 200px;
padding: 0;
margin: 10px;
border: solid 10px #fff;
-webkit-box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.25);
}
.galery img {
width: 200px;
height: 200px;
}
.caption {
position: relative;
display: inline-block;
width: 200px;
height: 200px;
z-index: 10;
}
.caption::before {
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 0;
font-size: 24px;
background: #ffffff;
overflow: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.caption::after {
content: attr(data-description);
position: absolute;
bottom: -0;
left: 0;
width: 200px;
height: 0;
font-size: 1.1em;
font-weight: 400;
line-height: 1.4em;
color: #fff;
background: #222;
overflow: hidden;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
.caption:hover::before {
height: 100px;
padding-top:10px;
}
.caption:hover::after {
bottom: 0;
height: 100px;
padding-top:10px;
}
</style> 

<ul class="wrapper">
<li class="galery">
<a class="caption" href="https://www.webnots.com/how-to-add-image-gallery-in-weebly-site/#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="https://www.webnots.com/how-to-add-image-gallery-in-weebly-site/#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="https://www.webnots.com/how-to-add-image-gallery-in-weebly-site/#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
</ul>
<ul class="wrapper">
<li class="galery">
<a class="caption" href="https://www.webnots.com/how-to-add-image-gallery-in-weebly-site/#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="https://www.webnots.com/how-to-add-image-gallery-in-weebly-site/#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
<li class="galery">
<a class="caption" href="https://www.webnots.com/how-to-add-image-gallery-in-weebly-site/#" data-title="Here is a Title" data-description="Here is your short description">
<img src="https://img.webnots.com/2016/01/sample-image.jpg">
</a>
</li>
</ul>

Настройка виджета галереи

Этот виджет использует 3 столбца и изменяет размер изображений до 200 на 200 пикселей. Вы можете изменить размер оболочки и изображения, чтобы настроить столбцы и разместить изображения внутри. Убедитесь, что высота изображения для эффекта наведения составляет 50% – мы использовали 100 пикселей, поскольку высота изображения составляет 200 пикселей. Отдельное изображение может быть связано с любой веб-страницей, мы использовали # для всех атрибутов «href», замените # на требуемый целевой URL.

Узнайте больше о создании страницы портфолио с помощью элемента галереи. Также, если вы ищете виджет фильтрации изображений, ознакомьтесь со статьей о виджетах фильтрации изображений с 3 столбцами для Weebly.

Похожие записи

Добавить комментарий

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