Icon panels helps you to showcase content in a very attractive manner. You can generally use this on a landing page to display different types of services provided on the site. A single panel can work as a call to action box and you can show multiple panels by placing beside. Though Weebly offer call out box as an app, icon panel with equal column style will create more appealing look.
Icon Panels Widget
Below is the icon panel widget what we are talking and read on further to create such a panel for your Weebly site.
Icon Panel Features
- You can add any number of panels just by appending piece of HTML code.
- Use as a single or multiple panels.
- Responsive design and easy to customize.
- Each panel contains a font awesome icon, a heading, a paragraph and a read more link or a button.
- Each column is of equal height even though the content height is different.
How to Create Icon Panel Widget in Weebly?
Creating an icon panel is a two step process – first define the CSS and then add HTML.
Defining Styles for Icon Panel Widget
Step1 – Defining Columns and Panel Container
Let us create a widget with four columns c1, c2, c3 and c4 having equal height within a container called 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%;
}
We use flex attribute to keep the parent container height fixed regardless of the individual height of the four child columns inside. We have used 20% width for each column to fit in the Weebly theme’s width; you can try and customize the width based on your theme and the number of columns you really need.
Note: All modern browsers support CSS flex attribute. However, old browsers like Internet Explorer does not support this.
Step2 – Defining Column’s Background
Now that the four equal height columns are defined, it’s time to define background color for each column. We have used some web safe colors, you can change to any color you need.
/* Color definitions for each column */
.c1{
background-color: lightgreen;
}
.c2{
background-color: skyblue;
}
.c3{
background-color: orange;
}
.c4{
background-color: lightgrey;
}
Step3 – Defining Style for Font Awesome Icons
We use font awesome for icons so that it is easy to use as well as you will have plenty of icons to choose for your need. The icon is defined as a square box with 80px x 80px size with some hover effect.
/* 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;
}
Step4 – Style for Additional Elements
Below is the style for additional elements like heading (heading), paragraph (para) and button (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;
}
Step5 – Adding Responsiveness to the Widget
The final step in defining CSS is to add responsiveness using media queries as below:
/* Responsive CSS media queries */
@media only screen and (max-device-width: 768px) {
.panel_container {
display: block;
}
.c1, .c2, .c3, .c4 {
width: 80% ;
margin:10px;
}
}
Now the CSS part is completed and the complete CSS will look like below:
/* 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>
Paste the complete CSS under “Header Code” section of your Weebly page.
Defining HTML for Icon Panel Widget
Drag and drop an “Embed Code” element and add the below HTML code inside. This is for a single icon panel and “fa-home” icon is used to show a home icon. Check out the font awesome icons reference list for choosing your required icons. Also replace the heading, paragraph and the # with your actual content and link.
<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>
Below is the code for two panels with different height – one having a button and the other having a read more text link.
<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>
Note: Use inline style for width=100% for columns when you want to use single or two panels along with some other elements placed beside. This ensures the panel is aligned to the full width and not shrink to the defined width of the column in the style. The actual width of the panel and the adjacent element can be adjusted as normal by adjusting the width of elements on Weebly editor.
Below is the complete HTML code for four column icon panel widget:
<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>
The widget by default has columns without space between them, you can provide right margin to create gap between the columns.
.c1, .c2, .c3, .c4{
float: left;
padding: 20px;
width: 22%;
margin-right: 20px; /* Add right margin to create space between panels */
}
You can use single, two, three or four panels with different variations.
1 Comment
Leave your reply.