Content panels are used to showcase important content in a display board kind of setup. You can setup an individual panel or set of panels to show your content in multiple columns. This type of panels are easy to add in high end CMS like WordPress with shortcode plugins mostly available for free or for a nominal price. However, platforms like Weebly are lagging in offering such elements. Our objective is to combine the easiness of Weebly along with the simple CSS codes to ensure Weebly site owners can also use any type of elements like colored textbox, tooltips, content panel, labels, etc.
Content Panel for Weebly
In this article we will explain four different styles of panels each with minor modifications using CSS code. Before we go with the code below is an example content panel what we are talking about.
In order to avoid confusion we have used separate set of codes for the panels but if you look into the code most of the CSS classes are same for all the panels.
1. Simple Content Panel
Simple content panel contains a header and the content with same background color as shown below:
You can add the CSS code for the simple content panel in different ways:
- Under the main stylesheet “main.less” without <style> and </style> tags
- In “Header Code” section of the page
- Inside “Embed Code” element along with HTML code.
<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>
Once the CSS code is added then paste the below HTML code inside “Embed Code” element:
<!-- 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 -->
2. Content Panel with Color Header
What about adding background color to the header section? Use the below CSS / HTML code for adding a content panel with header color as “Aqua”. Instead of aqua color, you can use any color as you wish.
/* 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. Full Color Content Panel
Let us add color to both header and content section:
And here is the code for full color content panel:
/* 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 -->
4. Content Panel with Footer
Finally let us add a footer to the panel and add some notes.
Below is the code for the content panel with footer:
/* 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-->
Adding Images Inside Panel
Though we have shown all the examples with text content, you can add any HTML element as content. For example, below is the content panel with footer along with an image inside.
Final Words
As you can see, it is very easy to create widgets in Weebly and insert on single or multiple pages. You can customize the content panels to adjust the size, colors and insert elements inside the panel.
Leave a Reply
Your email is safe with us.