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

Как добавить панель контента на сайт Weebly?

10

Панели содержимого используются для демонстрации важного содержимого в виде настройки панели отображения. Вы можете настроить отдельную панель или набор панелей для отображения вашего контента в нескольких столбцах. Этот тип панелей легко добавить в высокопроизводительную CMS, такую ​​как WordPress, с плагинами коротких кодов, которые в основном доступны бесплатно или по номинальной цене. Однако платформы, подобные Weebly, отстают в предоставлении таких элементов. Наша цель – объединить простоту Weebly с простыми кодами CSS, чтобы владельцы сайтов Weebly могли также использовать любые типы элементов, такие как цветное текстовое поле, всплывающие подсказки, панель контента, метки и т.д.

Панель контента для Weebly

В этой статье мы объясним четыре разных стиля панелей, каждый с небольшими изменениями с использованием кода CSS. Прежде чем мы перейдем к приведенному ниже коду, это пример панели содержимого, о которой мы говорим.

Чтобы избежать путаницы, мы использовали отдельный набор кодов для панелей, но если вы посмотрите на код, большинство классов CSS одинаковы для всех панелей.

1 Простая панель содержимого

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

Как добавить панель контента на сайт Weebly?

Вы можете добавить CSS-код для простой панели содержимого по-разному:

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

Источник записи: www.webnots.com

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