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

Як додати панель вмісту на веб -сайт Weebly?

1

Панелі вмісту використовуються для демонстрації важливого вмісту в налаштуваннях вітрини. Ви можете налаштувати окрему панель або набір панелей для відображення вашого вмісту у кількох стовпцях. Цей тип панелей легко додати до високоякісних CMS, таких як WordPress, з плагінами короткого коду, доступними переважно безкоштовно або за номінальною ціною. Однак такі платформи, як Weebly, відстають у пропонуванні таких елементів. Наша мета – поєднати легкість Weebly разом із простими кодами CSS, щоб власники веб -сайтів Weebly також могли використовувати будь -які елементи, такі як кольорове текстове поле, підказки, панель вмісту, мітки тощо.

Панель вмісту для Weebly

У цій статті ми пояснимо чотири різні стилі панелей, кожен з якими має незначні зміни, використовуючи код CSS. Перш ніж перейти до наведеного нижче коду, наведено приклад панелі вмісту, про що ми говоримо.

Щоб уникнути плутанини, ми використали окремий набір кодів для панелей, але якщо ви подивіться на код, більшість класів CSS однакові для всіх панелей.

1 Проста панель вмісту

Проста панель вмісту містить заголовок та вміст з таким самим кольором фону, як показано нижче:

Як додати панель вмісту на веб -сайт Weebly?

Ви можете додати код CSS для простої панелі вмісту різними способами:

  • Під основною таблицею стилів “main.less" без та тегів
  • У розділі сторінки «Код заголовка »
  • Усередині елемента " Вставити код " разом з HTML -кодом.
<style> .panel { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #d8d8d8; } .panel > .panel-heading { color: #333333; background-color: #f4f4f4; border-color: #d8d8d8; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; } </style>

Після додавання коду CSS вставте нижченаведений код HTML всередину елемента "Вставити код":

<!-- Content Panel --> <div class="panel"> <div class="panel-heading"> <h3 class="panel-title">Default Panel</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Default Panel -->

Як щодо додавання кольору фону до розділу заголовка? Скористайтеся наведеним нижче кодом CSS / HTML, щоб додати панель вмісту з кольором заголовка як “Aqua”. Замість кольору аква, ви можете використовувати будь -який колір за вашим бажанням.

Як додати панель вмісту на веб -сайт Weebly?

/* CSS Code Start */ <style> .panel-aqua { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #86b998; } .panel-aqua > .panel-heading { background-color: #66a67c; border-color: #a6ccb4; color: #FFFFFF; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; } </style> /* CSS Code End */ <!-- HTML Code for Panel with Aqua Header --> <div class="panel-aqua"> <div class="panel-heading"> <h3 class="panel-title">Panel withh Aqua Header</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Aqua Panel -->

3 Повнокольорова панель вмісту

Додамо колір як до заголовка, так і до розділу вмісту:

Як додати панель вмісту на веб -сайт Weebly?

І ось код для повнокольорової панелі вмісту:

/* CSS Code Start */ <style> .panel-brown { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #6f6f55; } .panel-brown > .panel-heading { background-color: #52523f; border-color: #8c8c6b; color: #FFFFFF; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; background: #6f6f55; color: #FFFFFF; } </style> /* CSS Code End */ <!-- HTML for Full Color Panel in Brown --> <div class="panel-brown"> <div class="panel-heading"> <h3 class="panel-title">Full Color Panel in Brown</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <!-- End Brown Panel -->

Нарешті, додамо нижній колонтитул на панель і додамо деякі нотатки.

Як додати панель вмісту на веб -сайт Weebly?

Нижче наведено код панелі вмісту з колонтитулом:

/* Start of CSS for Content Panel with Footer */ <style> .panel-with-footer { margin-bottom: 20px; background-color: #f4f4f4; border: 1px solid transparent; border-radius: 5px; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); border-color: #bc5e43; } .panel-with-footer > .panel-heading { color: #ffffff; background-color: #bc5e43; border-color: #e4bfb4; } .panel-heading { padding: 10px 15px; border-bottom: 1px solid transparent; border-top-right-radius: 4px; border-top-left-radius: 4px; } .panel-title { font-size: 20px; margin-top: 0; margin-bottom: 0; font-size: 16px; color: inherit; } .panel-body { padding: 15px; background: #c97e69; color: #FFFFFF; } .panel-footer { background: #bc5e43; border-color: #e4bfb4; color: #FFFFFF; padding: 10px 15px; border-top: 1px solid #d8d8d8; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } </style> /* End of CSS for Content Panel with Footer */ <!-- HTML for Content Panel with Footer --> <div class="panel-with-footer"> <div class="panel-heading"> <h3 class="panel-title">Content Panel with Footer</h3> </div> <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquid ex ea commodi consequat. Quis aute iure reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint obcaecat cupiditat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <div class="panel-footer">Panel Footer</div></div> <!-- End Panel with Footer-->

Додавання зображень всередині панелі

Хоча ми показали всі приклади з текстовим вмістом, ви можете додати будь -який елемент HTML як вміст. Наприклад, нижче – панель вмісту з колонтитулом разом із зображенням всередині.

Як додати панель вмісту на веб -сайт Weebly?

Заключні слова

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

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

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