Photo panel is used to display an image along with a small description and call to action link or button. This is an easy way to attract user’s attention and drive them to the destination page. Instead of an individual panel you can also use full page panels in multiple columns as a restaurant menu or to showcase destinations for a travel agency. In this article we will explain how to create single photo panel widget and use it in multiple columns on your Weebly site.
Photo Panel Widget Demo
The single photo panel widgets will look like below and you can create a restaurant or gallery by enhancing the single widget.
Creating a Single Photo Panel Widget
The single panel can be used independently as an individual photo panel widget. If you want to use it in a column then single photo panel needs to be placed along side of any other element using “Embed Code” element on your Weebly site. The panel contains an image, title, description and a call to action button. Basically you need images, CSS and HTML to create a panel and the photo panel will look like beside with minor deviations based on your Weebly theme.
Features of Photo Panel Widget
- Add as a single widget or in multiple columns.
- Made with simple CSS without query.
- Customize the color and fonts as your need.
- Use for a call to action or full page widget like restaurant menu.
- Full responsive automatically fitting the width of mobile devices.
Uploading Images in Weebly Site
The first step is to upload the required images to your Weebly site under “Theme > Edit HTML / CSS > Assets > Upload File(s)…“. The uploaded image will have the following link:
https://yoursite.com/files/theme/image.jpgCSS for Single Photo Panel
First we create a container panel with the background-color as beige. This is the color displayed at the down part of the panel and you can change this to any color to suit your site’s theme.
/* Photo Panel Container Definition */
.panel_container {
float: left;
border: 1px solid;
border-color: lightgrey;
background-color: beige;
}
The container will have an image at the top and the content at the bottom. Let us define the image height as 200px along with some hover effect.
/* Styles for Image */
.photo{
width:100%;
height: 200px;
margin:0;
}
/* Hover Effect for Image */
.photo:hover{
opacity: 0.8;
color: yellow;
}
Next, we define the call to action button with hovering effect:
/* Call to Action Button */
.btn {
display: inline-block;
border: 1px solid #969696;
margin: 15px;
padding: 10px 32px 11px;
font: bold 16px 'Economica', sans-serif;
border-radius: 5px;
color: gray;
}
/* Button Hover Effect */
.btn:hover {
color: grey!important;
border-color: #aaccaa;
background-color: #aaccaa;
}
The final part of CSS is to define additional styles for link, paragraph and heading.
/* Link Hover Effect to Overcome Default Effect */
a:hover {
color: grey !important;
}
/* Paragraph Definition */
.para {
font-size: 16px;
font-family: verdana;
padding: 10px;
}
/* Heading Definition */
.heading {
font-size:20px;
font-family: georgia;
margin: 15px 0px 10px 0px;
}
The complete CSS for a single panel will look below and add the code under “Pages > Choose the page you want to add the panel > SEO Settings > Header Code” of your Weebly page.
<style>
/* Photo Panel Container Definition */
.panel_container {
float: left;
border: 1px solid;
border-color: lightgrey;
background-color: beige;
}
/* Styles for Image */
.photo{
width:100%;
height: 200px;
margin:0;
}
/* Hover Effect for Image */
.photo:hover{
opacity: 0.8;
color: yellow;
}
/* Call to Action Button */
.btn {
display: inline-block;
border: 1px solid #969696;
margin: 15px;
padding: 10px 32px 11px;
font: bold 16px 'Economica', sans-serif;
border-radius: 5px;
color: gray;
}
/* Button Hover Effect */
.btn:hover {
color: grey!important;
border-color: #aaccaa;
background-color: #aaccaa;
}
/* Link Hover Effect to Overcome Default Effect */
a:hover {
color: grey !important;
}
/* Paragraph Definition */
.para {
font-size: 16px;
font-family: verdana;
padding: 10px;
}
/* Heading Definition */
.heading {
font-size:20px;
font-family: georgia;
margin: 15px 0px 10px 0px;
}
</style>
HTML for Single Photo Panel
Once the CSS is added then add the below HTML code inside an “Embed Code” element. Ensure to replace the image URL with your own.
<div class="panel_container"> <div> <img class="photo" src="https://img.webnots.com/2015/10/Weebly-Carbon-Upgrade.gif"> <h3 class="heading">Weebly Carbon Upgrade</h3> <p class="para">Weebly introduced a third generation upgrade and named it as Carbon...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div>
Creating a Full Page Photo Panel Widget
Let us take an example of a restaurant menu with four columns and multiple rows of menu items. The above single panel widget is to be modified to fit the panels into flexible equal height container with four columns as c1, c2, c3 and c4 and all other styles remain same. Below is the example way, you can create multiple panels in a single page.
Below is the complete CSS you can paste under the “Header Code” section of your Weebly page:
<style>
/* Photo Panel Container Definition */
.photo_panel_container {
display: -webkit-flex;
display: -ms-flexbox;
display: -ms-flex;
display: flex;
margin: 10px 10px 80px 10px;
}
.c1, .c2, .c3, .c4 {
float: left;
border: 1px solid;
border-color: lightgrey;
background-color: beige;
}
.c1, .c2, .c3 {
margin-right: 15px;
}
/* Styles for Image */
.photo{
width:100%;
height: 200px;
margin:0;
}
/* Hover Effect for Image */
.photo:hover{
opacity: 0.8;
color: yellow;
}
/* Call to Action Button */
.btn {
display: inline-block;
border: 1px solid #969696;
margin: 15px;
padding: 10px 32px 11px;
font: bold 16px 'Economica', sans-serif;
border-radius: 5px;
color: gray;
}
/* Button Hover Effect */
.btn:hover {
color: grey!important;
border-color: #aaccaa;
background-color: #aaccaa;
}
/* Link Hover Effect to Overcome Default Effect */
a:hover {
color: grey !important;
}
/* Paragraph Definition */
.para {
font-size: 16px;
font-family: verdana;
padding: 10px;
}
/* Heading Definition */
.heading {
font-size:20px;
font-family: georgia;
margin: 15px 0px 10px 0px;
}
@media only screen and (max-device-width: 768px) {
.photo_panel_container {
display: block;
}
.c1, .c2, .c3, .c4 {
width: 80% ;
margin:10px;
}
}
</style>
Below is the HTML for the widget having two rows contains eight panels. Add the below HTML inside an “Embed Code” element by replacing the dummy content and image URL with your own.
<!-- First Row Contains 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img1.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img2.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img3.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img4.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Second Row Contains another 4 Panels --> <div class="photo_panel_container"> <div class="c1"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img5.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c2"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img6.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c3"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img7.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> <div class="c4"> <img class="photo" src="https://widgetcode.weebly.com/files/theme/PhotoPanel/page2_img8.jpg"> <h3 class="heading">Here is a title</h3> <p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod...</p> <div class="btn"><a href="#">Read More</a></div> </div> </div> <!-- Add More Rows Here -->
5 Comments
Leave your reply.