Как добавить виджет панели фотографий в Weebly?

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

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

Единая фотопанель для Weebly

Создание виджета одной панели фотографий

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

Особенности виджета Photo Panel

  • Добавьте как один виджет или в несколько столбцов.
  • Сделано с помощью простого CSS без запроса.
  • Настройте цвет и шрифты по своему усмотрению.
  • Используйте для призыва к действию или виджета на всю страницу, например меню ресторана.
  • Полная адаптация, автоматическая подгонка под ширину мобильных устройств.

Загрузка изображений на сайт Weebly

Первый шаг – загрузить необходимые изображения на ваш сайт Weebly в разделе «Тема> Изменить HTML / CSS> Ресурсы> Загрузить файл (ы)…«. У загруженного изображения будет следующая ссылка:

https://yoursite.com/files/theme/image.jpg

CSS для одной панели фотографий

Сначала мы создаем панель контейнера с бежевым цветом фона. Это цвет, отображаемый в нижней части панели, и вы можете изменить его на любой цвет в соответствии с темой вашего сайта.

/* Photo Panel Container Definition */
.panel_container {
float: left;
border: 1px solid;
border-color: lightgrey;
background-color: beige;
}

Контейнер будет иметь изображение вверху и содержимое внизу. Давайте определим высоту изображения как 200 пикселей вместе с некоторым эффектом наведения.

/* Styles for Image */
.photo{
width:100%; 
height: 200px; 
margin:0; 
}

/* Hover Effect for Image */
.photo:hover{
opacity: 0.8;
color: yellow;
}

Затем мы определяем кнопку призыва к действию с эффектом наведения:

/* Call to Action Button */
.btn {
display: inline-block;
border: 1px solid #969696; 
margin: 15px;
padding: 10px 32px 11px;
font: bold 16px 'Economica', sans-serif;
border-radius: 5px;
color: gray;
}

/* Button Hover Effect */
.btn:hover {
color: grey!important;
border-color: #aaccaa;
background-color: #aaccaa;
}

Последняя часть CSS – определение дополнительных стилей для ссылки, абзаца и заголовка.

/* Link Hover Effect to Overcome Default Effect */
a:hover {
color: grey !important;
}

/* Paragraph Definition */
.para {
font-size: 16px;
font-family: verdana;
padding: 10px;
}

/* Heading Definition */
.heading {
font-size:20px;
font-family: georgia;
margin: 15px 0px 10px 0px;
}

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

Добавить код заголовка на страницу
Добавить код заголовка на страницу
<style>
    
/* Photo Panel Container Definition */
.panel_container {
float: left;
border: 1px solid;
border-color: lightgrey;
background-color: beige;
}

/* Styles for Image */
.photo{
width:100%; 
height: 200px; 
margin:0; 
}

/* Hover Effect for Image */
.photo:hover{
opacity: 0.8;
color: yellow;
}

/* Call to Action Button */
.btn {
display: inline-block;
border: 1px solid #969696; 
margin: 15px;
padding: 10px 32px 11px;
font: bold 16px 'Economica', sans-serif;
border-radius: 5px;
color: gray;
}

/* Button Hover Effect */
.btn:hover {
color: grey!important;
border-color: #aaccaa;
background-color: #aaccaa;
}
    
/* Link Hover Effect to Overcome Default Effect */
a:hover {
color: grey !important;
}

/* Paragraph Definition */
.para {
font-size: 16px;
font-family: verdana;
padding: 10px;
}

/* Heading Definition */
.heading {
font-size:20px;
font-family: georgia;
margin: 15px 0px 10px 0px;
}

</style>

HTML для одной панели фотографий

После добавления CSS добавьте приведенный ниже HTML-код внутри «Код для вставки”Элемент. Не забудьте заменить URL-адрес изображения своим собственным.

<div class="panel_container">
<div>
<img class="photo" src="https://img.webnots.com/2015/10/Weebly-Carbon-Upgrade.gif">
<h3 class="heading">Weebly Carbon Upgrade</h3>
<p class="para">Weebly introduced a third generation upgrade and named it as Carbon...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
</div>

Создание виджета полностраничной панели фотографий

Давайте рассмотрим пример меню ресторана с четырьмя столбцами и несколькими строками пунктов меню. Вышеупомянутый виджет с одной панелью должен быть изменен для размещения панелей в гибком контейнере одинаковой высоты с четырьмя столбцами, такими как c1, c2, c3 и c4, и все остальные стили остаются такими же. Ниже показано, как будет выглядеть виджет, и вы можете просмотреть живую демонстрацию здесь.

Виджет Weebly Photo Panel
Виджет Weebly Photo Panel

Ниже приведен полный CSS-код, который вы можете вставить в раздел «Код заголовка»На странице Weebly:

<style>
    
/* Photo Panel Container Definition */
.photo_panel_container {
display: -webkit-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
margin: 10px 10px 80px 10px;
}

.c1, .c2, .c3, .c4 {
float: left;
border: 1px solid;
border-color: lightgrey;
background-color: beige;
}
    
.c1, .c2, .c3 {
margin-right: 15px;
}

/* Styles for Image */
.photo{
width:100%; 
height: 200px; 
margin:0; 
}

/* Hover Effect for Image */
.photo:hover{
opacity: 0.8;
color: yellow;
}

/* Call to Action Button */
.btn {
display: inline-block;
border: 1px solid #969696; 
margin: 15px;
padding: 10px 32px 11px;
font: bold 16px 'Economica', sans-serif;
border-radius: 5px;
color: gray;
}

/* Button Hover Effect */
.btn:hover {
color: grey!important;
border-color: #aaccaa;
background-color: #aaccaa;
}
    
/* Link Hover Effect to Overcome Default Effect */
a:hover {
color: grey !important;
}

/* Paragraph Definition */
.para {
font-size: 16px;
font-family: verdana;
padding: 10px;
}

/* Heading Definition */
.heading {
font-size:20px;
font-family: georgia;
margin: 15px 0px 10px 0px;
}
    
@media only screen and (max-device-width: 768px) {

.photo_panel_container {
display: block;
}

.c1, .c2, .c3, .c4 {
width: 80% ;
margin:10px;
}
}

</style>

Ниже приведен HTML-код виджета с двумя строками, содержащего восемь панелей. Добавьте приведенный ниже HTML-код внутри “Код для вставки”, Заменив фиктивный URL-адрес содержимого и изображения своими собственными.

<!-- First Row Contains 4 Panels -->
<div class="photo_panel_container">
<div class="c1">
<img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img1.jpg">
<h3 class="heading">Here is a title</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
<div class="c2">
<img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img2.jpg">
<h3 class="heading">Here is a title</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
<div class="c3">
<img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img3.jpg">
<h3 class="heading">Here is a title</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
<div class="c4">
<img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img4.jpg">
<h3 class="heading">Here is a title</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
</div>

<!-- Second Row Contains another 4 Panels -->
<div class="photo_panel_container">
<div class="c1">
<img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img5.jpg">
<h3 class="heading">Here is a title</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
<div class="c2">
<img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img6.jpg">
<h3 class="heading">Here is a title</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
<div class="c3">
<img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img7.jpg">
<h3 class="heading">Here is a title</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
<div class="c4">
<img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img8.jpg">
<h3 class="heading">Here is a title</h3>
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p>
<div class="btn"><a href="https://www.webnots.com/free-photo-panel-widget-for-weebly/#">Read More</a></div>
</div>
</div>
<!-- Add More Rows Here -->

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

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

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