TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

22

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

Как добавить виджет панели фотографий в 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="#">Read More</a></div> </div> </div>

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

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

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

Виджет 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="#">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="#">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="#">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="#">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="#">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="#">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="#">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="#">Read More</a></div> </div> </div> <!-- Add More Rows Here -->

Источник записи: www.webnots.com
Leave A Reply

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