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

Як додати віджет фотопанелі у Weebly?

9

Панель фотографій використовується для відображення зображення разом з невеликим описом та посиланням або кнопкою заклику до дії. Це простий спосіб привернути увагу користувачів і направити їх на цільову сторінку. Замість окремої панелі ви також можете використовувати повнопанельні панелі у кількох колонках як меню ресторану або для демонстрації напрямків туристичного агентства. У цій статті ми розповімо, як створити єдиний віджет фотопанелі та використовувати його у кількох стовпцях на своєму веб -сайті Weebly.

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

Як додати віджет фотопанелі у Weebly?

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

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

Одну панель можна використовувати окремо як окремий віджет фотопанелі. Якщо ви хочете використовувати його у стовпці, то одну фотопанель потрібно розмістити уздовж будь -якого іншого елемента, використовуючи елемент " Вставити код " на своєму веб -сайті Weebly. Панель містить зображення, назву, опис та кнопку заклику до дії. Для створення панелі вам знадобляться зображення, CSS та HTML, а фотопанель буде виглядати поряд із незначними відхиленнями на основі вашої теми Weebly.

Особливості віджета панелі фотографій

  • Додати як один віджет або у кілька стовпців.
  • Зроблено з простим CSS без запитів.
  • Налаштуйте колір та шрифти відповідно до ваших потреб.
  • Використовуйте для заклику до дії або віджета на всю сторінку, наприклад, меню ресторану.
  • Повна чутливість, автоматично відповідає ширині мобільних пристроїв.

Завантаження зображень на веб -сайт 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

Нижче наведено повний 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
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі