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

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

7

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

Шаг 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.

Как добавить виджет панели значков в 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="#">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
Leave A Reply

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