Header slideshow is a wonderful feature which gives a professional look to your site. This is a pro feature in Weebly and available only for non-responsive themes. Free users can also use alternate methods to modify HTML/CSS and achieve this. In this article we explain how to add Nivo header slideshow in your free Weebly site.
Nivo Header Slideshow
Nivo is a popular jQuery slider and we have a free widget for adding slideshow in the content area. Here we will use the same Nivo slider widget with minor modifications to add it in the header area of responsive Weebly themes. You can view the four different styles of demo by clicking the below buttons:
How to Add Header Slideshow in Free Weebly Site?
In this example, we have used four images. The second image (up.jpg) is linked to a webpage and has a simple text caption. The fourth image (nemo.jpg) has text caption with a hyperlink.
Step 1 – Ready with Your Images
The above demos are using the responsive “Ace Soccer – Birdseye” Weebly theme and the images are used with the size 618 x 246 px. We recommend to use higher resolution images with similar width and height ratio for better quality.
Step 2 – Download and Upload Slider Files
Download all the required slider files. Login to you Weebly site and navigate to “Theme > Edit HTML / CSS > Assets” section. Create a new folder called “nivo”.
Upload all slider files into the “nivo” folder. Remember there are four demo images part of the archive file, you can always replace the images with your own images.
Step 3 – Create a New Header Type
Click on the + button against “Header Type” tab and create a new header type called “Nivo-Bar”. We want to add the Nivo header slideshow with Bar theme in this header type.
Copy all the content from “no-header.html” and paste inside “Nivo-Bar.html” header type.
Step 4 – Modifying Nivo-Bar.html Header Type
There are three parts to be added in the “Nivo-Bar.html” layout – CSS, Scripts and HTML. Insert the below CSS inside the head section of the layout.
<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />
It should look like below in the editor:
Insert the below scripts just before the closure of body tag.
<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script> <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>
It should look like below in the editor:
The final part is to insert the below HTML code just above the “main-wrap” section. Ensure to replace the image and hyperlink URLs with your own.
<div class="slider-wrapper theme-bar"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" /> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>
It should look like below in the editor:
The final code of “Nivo-Bar.html” header type should be like below. Remember this is on a free Weebly site and the theme we have used is “Ace Soccer – Birdseye”.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />
</head>
<body class='no-header-page page-has-banner wsite-theme-dark'>
<div class="wrapper">
<div class="birdseye-header">
<div class="nav-wrap">
<div class="container">
<div class="logo">{logo}</div>
<div class="nav desktop-nav">{menu}</div>
<label class="hamburger"><span></span></label>
</div>
</div>
</div>
<div class="slider-wrapper theme-bar">
<div id="slider" class="nivoSlider">
<img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" />
<a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Here" /></a>
<img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" />
<img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div>
</div>
<div class="main-wrap">
{{#sections}}
<div class="container">{content}</div>
{{/sections}}
</div>
<div class="footer-wrap">
<div class="container">
<div class="footer">{footer}</div>
</div><!-- end container -->
</div><!-- end footer-wrap -->
</div><!-- /.wrapper -->
<div id="navMobile" class="nav mobile-nav">
<label class="hamburger"><span></span></label>
{menu}
</div>
<script src="/files/theme/nivo/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>
<script type="text/javascript" src="/files/theme/plugins.js"></script>
<script type="text/javascript" src="/files/theme/custom.js"></script>
</body>
</html>
Save the changes and publish your site.
Step 5 – Choosing the Slider Header Type
When you want the header slideshow on a page then choose “Nivo-Bar” header type under “Pages” tab for that specific page.
Customizing Header Slideshow
The slideshow is offered with 4 different themes and 12 image transition effects. The theme can be changed by changing the CSS class in the HTML code. In the above example, we have user bar theme with the CSS class “theme-bar”, you can alternatively use “theme-default”, “theme-dark” or “theme-light”. You can also create four different header types and choose the required theme style for different pages.
By default random transition effect will be applied to each image. You can mention the specific transition type for each image using “data-transition” function in the HTML. Below is an example HTML code using different transition effect for each image with default theme.
<div class="slider-wrapper theme-default"> <div id="slider" class="nivoSlider"> <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" data-transition="sliceDownRight"/> <a href="https://www.webnots.com/"><img src="/files/theme/nivo/up.jpg" data-thumb="up.jpg" alt="Up" title="Enter Your Caption Here" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" data-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" data-transition="boxRainGrowReverse" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Caption with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>
You can read the complete customization options for modifying transition effect, theme, animation speed, navigation controls and adding thumbnails.
Looking for accordion style slider as shown below? Learn how to add accordion slider to your Weebly site.
22 Comments
Leave your reply.