What Is The Size Of Weebly Header

Header slideshow is a wonderful characteristic which gives a professional look to your site. This is a pro feature in Weebly and available only for not-responsive themes. Free users tin also use alternate methods to change HTML/CSS and reach this. In this article we explicate how to add Nivo header slideshow in your gratuitous Weebly site.

Nivo is a pop jQuery slider and we have a free widget for adding slideshow in the content expanse. Hither nosotros will use the same Nivo slider widget with small-scale modifications to add information technology in the header area of responsive Weebly themes. You can view the four different styles of demo by clicking the below buttons:

In this example, we have used iv images. The 2nd prototype (up.jpg) is linked to a webpage and has a simple text explanation. The fourth epitome (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 ten 246 px. We recommend to use higher resolution images with like width and elevation ratio for better quality.

Footstep 2 – Download and Upload Slider Files

Download all the required slider files. Login to you Weebly site and navigate to "Theme > Edit HTML / CSS > Avails" section. Create a new binder called "nivo".

Creating New Folder in Weebly Code Editor — Creating New Folder in Weebly Lawmaking Editor

Upload all slider files into the "nivo" binder. Call back in that location are four demo images part of the archive file, yous tin always supplant the images with your own images.

Click on the + button confronting "Header Type" tab and create a new header type called "Nivo-Bar". Nosotros 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.

There are three parts to be added in the "Nivo-Bar.html" layout – CSS, Scripts and HTML. Insert the below CSS within the head department of the layout.

<link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" />

It should wait like below in the editor:

Insert the below scripts only before the closure of trunk tag.

<script src="/files/theme/nivo/jquery-i.seven.ane.min.js"></script>  <script blazon="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script>

It should expect similar below in the editor:

Inserting Scripts in Header Type — Inserting Scripts in Header Blazon

The concluding part is to insert the below HTML code only above the "chief-wrap" section. Ensure to supercede the image and hyperlink URLs with your ain.

<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/upwards.jpg" alt="Up" championship="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-explanation">Enter Your Explanation with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>

Information technology should look like below in the editor:

The last lawmaking of "Nivo-Bar.html" header blazon should be like below. Retrieve this is on a free Weebly site and the theme we have used is "Ace Soccer – Birdseye".

<!DOCTYPE html> <html> <caput> <meta http-equiv="Content-Type" content="text/html; charset=utf-viii" /> <meta proper noun="viewport" content="width=device-width, initial-scale=ane.0" /> <link rel="stylesheet" href="/files/theme/nivo/theme-styles.css" type="text/css" media="screen" /> </head> <body class='no-header-page folio-has-banner wsite-theme-dark'> <div class="wrapper"> <div course="birdseye-header"> <div form="nav-wrap"> <div form="container"> <div class="logo">{logo}</div> <div grade="nav desktop-nav">{menu}</div> <label grade="hamburger"><span></span></characterization> </div> </div> </div> <div class="slider-wrapper theme-bar"> <div id="slider" grade="nivoSlider">  <img src="/files/theme/nivo/toystory.jpg" data-thumb="/files/theme/nivo/toystory.jpg" alt="Toy Story" />  <a href="https://world wide web.webnots.com/"><img src="/files/theme/nivo/up.jpg" information-thumb="/files/theme/nivo/up.jpg" alt="Up" title="Enter Your Caption Hither" /></a> <img src="/files/theme/nivo/walle.jpg" data-thumb="/files/theme/nivo/walle.jpg" alt="Walle" /> <img src="/files/theme/nivo/nemo.jpg" information-thumb="/files/theme/nivo/nemo.jpg" alt="Nemo" title="#htmlcaption" /> </div> <div id="htmlcaption" class="nivo-html-caption">Enter Your Explanation with HTML <a href="https://www.webnots.com/">Link</a>. </div> </div>  <div grade="chief-wrap"> {{#sections}} <div class="container">{content}</div> {{/sections}} </div> <div class="footer-wrap"> <div course="container"> <div grade="footer">{footer}</div> </div><!-- stop container --> </div><!-- stop footer-wrap --> </div><!-- /.wrapper --> <div id="navMobile" class="nav mobile-nav"> <label grade="hamburger"><bridge></span></characterization> {menu} </div> <script src="/files/theme/nivo/jquery-ane.7.one.min.js"></script>  <script type="text/javascript" src="/files/theme/nivo/jquery.nivo.slider.nod.js"></script> <script blazon="text/javascript" src="/files/theme/plugins.js"></script> <script blazon="text/javascript" src="/files/theme/custom.js"></script> </body> </html>

Save the changes and publish your site.

When you lot desire the header slideshow on a page and so choose "Nivo-Bar" header blazon under "Pages" tab for that specific page.

Choosing Header Type for Specific Page — Choosing Header Blazon for Specific Folio

The slideshow is offered with 4 dissimilar themes and 12 paradigm transition effects. The theme can be changed by changing the CSS course 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-calorie-free". Y'all tin 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 lot can mention the specific transition type for each image using "data-transition" office in the HTML. Beneath is an example HTML code using dissimilar transition result for each paradigm with default theme.

<div form="slider-wrapper theme-default"> <div id="slider" grade="nivoSlider">  <img src="/files/theme/nivo/toystory.jpg" data-pollex="/files/theme/nivo/toystory.jpg" alt="Toy Story" information-transition="sliceDownRight"/>  <a href="https://www.webnots.com/"><img src="/files/theme/nivo/upwardly.jpg" data-pollex="up.jpg" alt="Up" title="Enter Your Caption Hither" data-transition="fold"/></a> <img src="/files/theme/nivo/walle.jpg" data-pollex="/files/theme/nivo/walle.jpg" alt="Walle" data-transition="boxRainGrow" /> <img src="/files/theme/nivo/nemo.jpg" information-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 consummate customization options for modifying transition effect, theme, animation speed, navigation controls and adding thumbnails.

Looking for accordion style slider as shown beneath? Learn how to add accordion slider to your Weebly site.