Как добавить виджет панели значков в Weebly?

Панели со значками помогают очень привлекательно демонстрировать контент. Обычно вы можете использовать это на целевой странице для отображения различных типов услуг, предоставляемых на сайте. Одна панель может работать как окно призыва к действию, и вы можете показать несколько панелей, разместив рядом. Хотя 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 flex поддерживается всеми последними браузерами и НЕ поддерживается в Internet Explorer 9 или более ранней версии.

Шаг 2 – Определение фона столбца

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

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

Шаг 3 – Определение стиля для иконок Font Awesome

Мы используем font awesome для значков, чтобы им было легко пользоваться, а также у вас было множество значков на выбор. Значок представляет собой квадратную рамку размером 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.

Добавить код заголовка на страницу
Добавить код заголовка на страницу

Определение HTML для виджета панели значков

Перетащите элемент «Вставить код» и добавьте внутрь приведенный ниже HTML-код. Это панель с одним значком, а значок «fa-home» используется для отображения значка дома. Ознакомьтесь со справочным списком значков font awesome icons, чтобы выбрать нужные значки. Также замените заголовок, абзац и # своим фактическим содержанием и ссылкой.

<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="https://www.webnots.com/free-icon-panel-widget-for-weebly/#">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="https://www.webnots.com/free-icon-panel-widget-for-weebly/#">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="https://www.webnots.com/free-icon-panel-widget-for-weebly/#">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="https://www.webnots.com/free-icon-panel-widget-for-weebly/#">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="https://www.webnots.com/free-icon-panel-widget-for-weebly/#">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="https://www.webnots.com/free-icon-panel-widget-for-weebly/#">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="https://www.webnots.com/free-icon-panel-widget-for-weebly/#">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 Icon Panel с полем

Вы можете использовать одну, две, три или четыре панели с разными вариациями. Посмотрите живую демонстрацию одной, двух, трех и четырех панелей.

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

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

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