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.
Hi,
Thank you for the awesome slider. I have inserted the slider as a Header Slideshow. However, my top navigation bar covers it. How do I set my navigation bar to Transparent?
Home <-would like to achieve this Transparent Navigation Bar
/home1.html <-would like to set Nagivation Bar to Transparent
Great tutorial and have watched it over and over again because I love the Nivo slider… but am unable to make it work on my weebly website. Currently using the Vectur template and find that the coding in the header is different and I am also getting broken images, so must have the paths wrong. Any tips for a relative newbie who wants to learn?
Wow coding is fun, but hard.
You may need to adjust the position of the code to fit the slider on your site. The images should appear if you provide the correct relative link as mentioned in the article (remember to upload images inside the folder named “nivo”).
Thanks for the reply! Yes I have tried multiple times in different locations of the code but haven’t been successful so far…
Images – I actually re-created it exactly as per the tutorial using the nivo folder and images as a basis to then build on and tweak to suit what I need….but the photos didn’t appear so I know I have it wrong somewhere. Damn I have no idea what I am doing wrong. Thoughts?
Hope you are saying the images are not visible on the published site and not inside the editor. You can right click and inspect why the images are not loading on the page.
Also after uploading the images inside nivo folder, right click and get the complete URL. This will be a absolute URL like http://www.weebly.com/….. Use this URL instead of the relative URL like /files/theme/…
Ideally image uploading and linking should work regardless of this slider code.
Dear webnots,
first of all I would like to thank you for your awesome tutorial – you rock.
Only question I had was how to make sure that the slide show does not cover the menu bar when scrolling down (I did not use the custom slider code).
Your help is much appreciated.
did all what you said and in instructions but when I save new “slider” header in the header type. it does not show up in header types menu.
It should show up under “Pages” menu as a new “Header Type”.
I’ve got one very basic question . . . what are responsive and non-responsive themes?
Resize your browser to see the elements on the page are automatically aligned to fit the width of the browser – if yes then you are using one of Weebly’s responsive themes. If the page looks similar on all browser size (and on all devices) then probably you are using a non-responsive theme.
Thank you.
how to control the width of the slider, whatever the pic I upload it still not covering the entire width of the page!?
Hi thanks alot for the code! Can I enquire if it is possible to add in additional images? …tried editing the code but only supports 3 photos max
how to put the diferent pictures in the header slider, please help, code is working but how to input my pictures
Hello,
I want different sliding headers on each page. I followed this method, but whatever content i put into the slider, remains same on all pages. If I delete something from one page, it gets deleted from all other pages.
Please help.
Thanks.
If you want different sliders for different pages then add the slider code in different header types. For example,
Slider 1 – no-header.html
Slider 2 – short-header.html
Slider 3 – tall-header.html
In case, if you use same header type then you need to create a custom header types by replicating the existing HTML header type and then add slider code and choose it when creating a new page. For example,
Slider 1 – no-header.html
Slider 2 – no-header-copy1.html
Slider 3 – no-header-copy2.html
Hope this helps.
Unfortunately this did not help, but I found the solution to add different images on the slider for different pages. It’s pretty easy:
Uou can allow unique content on each page by specifying the global=”false” attribute.
ex. {area-name:content global=”false”}
And that’s it! No need to replicate the existing HTML header type, just create one and insert {area-name:content global=”false”}.
Elements inserted in this manner may not be responsive and sometimes not visible on mobile devices. Ensure it works fine for you.
The custom slideshow code given by you is not responsive.
Can you share a responsive slideshow code please?
Dear Webnots,
So do you guys have figured something to make a slideshow in header area? Thank you so much for your efforts!! rally appreciate it!
Hi,
I agree with you. we can use animated gif instead of slider in weebly(non pro version).
but animated gif is not same as slider. like the five(or any number) black dots wont appear at bottom/top of slider.slide selection dot needs to change dynamically.
I came here after learning that weebly requires us to buy pro version for slider. thanks anyway.
I am a web developer.I thought of using weebly instead of wordpress. but it seems no option for me.
regards
vinodh
There are plenty of options to add header slideshow with controls other than GIF image (till the time Weebly allows to modify source CSS/HTML). We will check and publish an article on this soon.
Ok. I will search and find out on css modification.
thanks
vinodh