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

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

3

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

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

Особливості панелі значків

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

Створення панелі значків – це двоетапний процес – спочатку визначте CSS, а потім додайте HTML.

Визначення стилів для віджета панелі значків

Крок 1 – Визначення стовпців та контейнера панелей

Давайте створимо віджет з чотирма стовпцями c1, c2, c3 та c4, що мають однакову висоту в контейнері під назвою panel_container.

/* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; }

Ми використовуємо атрибут flex, щоб фіксувати висоту батьківського контейнера незалежно від індивідуальної висоти чотирьох дочірніх стовпців всередині. Ми використали 20% ширини для кожного стовпця, щоб відповідати ширині теми Weebly; Ви можете спробувати налаштувати ширину відповідно до вашої теми та кількості дійсно потрібних стовпців.

Примітка: Усі сучасні браузери підтримують атрибут гнучкості CSS. Однак старі браузери, такі як Internet Explorer, цього не підтримують.

Крок 2 – Визначення фону колонки

Тепер, коли визначено чотири стовпці однакової висоти, настав час визначити колір фону для кожного стовпця. Ми використали деякі безпечні кольори для Інтернету, ви можете змінити їх на будь -який колір, який вам потрібен.

/* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; }

Крок 3 – Визначення стилю для чудових значків шрифтів

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

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; }

Крок 4 – Стиль для додаткових елементів

Нижче наведено стиль для додаткових елементів, таких як заголовок (заголовок), абзац (пара) та кнопка (btn).

/* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; }

Крок 5 – Додавання чутливості до віджету

Останній крок у визначенні CSS – додати чуйність за допомогою медіа -запитів, як показано нижче:

/* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } }

Тепер частина CSS завершена, і повна CSS буде виглядати так:

/* Font Awesome icons stylesheet */ <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <style> /* Equal column height container */ .panel_container { display: -webkit-flex; display: -ms-flexbox; display: -ms-flex; display: flex; } /* Four columns c1, c2, c3 & c4 */ .c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; } /* Color definitions for each column */ .c1{ background-color: lightgreen; } .c2{ background-color: skyblue; } .c3{ background-color: orange; } .c4{ background-color: lightgrey; } /* Font Awesome icon definition with 80x80 box */ .icon{ background: rgba(255, 87, 34, 0.77); color:#ffffff; width:80px; height:80px; margin:0 auto; border-radius:5px; font-size:40px; line-height:80px; text-align:center; } /* Hover effect for icons */ .icon:hover{ opacity: 0.8; background-color: #333333; color: yellow; } /* Icon alignment */ .fa { margin:20px 15px 20px 20px; } /* Heading */ .heading { font-size:20px; font-family: georgia; margin:20px; } /* Paragraph */ .para { font-size: 16px; font-family: verdana; } /* Button */ .btn { display: inline-block; padding: 6px 12px; margin-top: 20px; font-size: 16px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; border: 1px solid transparent; border-radius: 4px; color: #ffffff; background-color: #f1f1f1; border-color: #4cae4c; } /* Button hover */ .btn:hover { color: #ffffff; background-color: #b6f0ff; border-color: #398439; } /* Responsive CSS media queries */ @media only screen and (max-device-width: 768px) { .panel_container { display: block; } .c1, .c2, .c3, .c4 { width: 80% ; margin:10px; } } </style>

Вставте повний CSS у розділ "Код заголовка" на своїй сторінці Weebly.

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

Додайте код заголовка на сторінку

Визначення HTML для віджета панелі значків

Перетягніть елемент "Вставити код" і додайте код HTML нижче. Це для однієї панелі значків, а для відображення піктограми будинку використовується піктограма “fa-home". Перегляньте список довідкових значків шрифтів, щоб вибрати потрібні значки. Також замініть заголовок, абзац та # своїм фактичним вмістом та посиланням.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Width is defined as 100% to align within a row */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Нижче наведено код для двох панелей з різною висотою – одна з кнопкою, а інша з текстовим посиланням.

<div class="panel_container"> <div class="c1" style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"style="width:100%"> /* Inline width for alignment */ <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="para"><a href="#">Read More</a></div> </div> </div>

Примітка: Використовуйте вбудований стиль для ширини = 100% для стовпців, якщо ви хочете використовувати одну або дві панелі разом з деякими іншими елементами, розміщеними поруч. Це гарантує, що панель вирівнюється на всю ширину, а не зменшується до визначеної ширини стовпця у стилі. Фактичну ширину панелі та прилеглих елементів можна регулювати як звичайне, регулюючи ширину елементів у редакторі Weebly.

Нижче наведено повний HTML -код для віджета панелі значків із чотирма стовпцями:

<div class="panel_container"> <div class="c1"> <div class="icon"><span class="fa fa-home"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <div class="icon"><span class="fa fa-pencil-square-o"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <div class="icon"><span class="fa fa-download"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <div class="icon"><span class="fa fa-shopping-cart"></span></div> <h3 class="heading">Here is your title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>

Віджет за замовчуванням має стовпці без пробілів між ними, ви можете надати праве поле для створення розриву між стовпцями.

.c1, .c2, .c3, .c4{ float: left; padding: 20px; width: 22%; margin-right: 20px; /* Add right margin to create space between panels */ }

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

Ви можете використовувати одну, дві, три або чотири панелі з різними варіаціями.

Джерело запису: webnots.com
Залиште відповідь

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