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

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

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

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

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

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

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

Вы можете добавить 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». Вместо цвета морской волны вы можете использовать любой цвет по своему желанию.

Панель с заголовком Aqua
/* 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. Панель полноцветного содержимого

Давайте добавим цвет как в заголовок, так и в раздел содержимого:

Полноцветная панель

А вот код для полноцветной панели контента:

/* 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 -->

Наконец, давайте добавим нижний колонтитул к панели и добавим несколько заметок.

Панель содержимого с нижним колонтитулом

Ниже приведен код панели содержимого с нижним колонтитулом:

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

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

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

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