Tutorial Stats
How To Make A Rotating Background For Your Weebly Site
Tutorial Description
This tutorial will show you how to make a rotating background for your Weebly site. In order to achieve this effect, we'll be using the Weebly "Slideshow" element we all know and love, as well as a little code editing. And since we're using the "Slideshow" element to create the rotating background effect, you can even link each individual image in the rotating background to another page.
SHOW MORE
Tutorial
Step 1. Open the html/css editor
Click on "Design" at the top, then click on "Edit HTML/CSS" on the left.
Step 2. add html code
Select the page layout your site uses on the left. Add the following code just below the beginning of the "<body>" div.
<div id="rotate">{rotate:content}</div>
Note: If your Weebly sites uses more than one type of page layout, you'll need to perform this step for each page layout your site uses.
<div id="rotate">{rotate:content}</div>
Note: If your Weebly sites uses more than one type of page layout, you'll need to perform this step for each page layout your site uses.
Step 3. Add css coding
Select "main-style.css" on the left and add the code below just after the general styling in the css file.
/* Rotating Background Coding
---------------------------------------------------*/
/** Rotating Background Height Coding **/
.wslide-main {
position: fixed!important;
z-index: 2;
width: 87%;
}
.wslide {
font-family: arial;
font-size: 13px;
color: #fff;
cursor: default;
height: 750px!important;
}
.wslide-content {
position: relative;
overflow: hidden;
height: 1000px!important;
}
/** End Rotating Background Height Coding **/
/** Rotating Background Main Coding **/
.wslide-slide-inner2 {
position:absolute;
width: 2000px !important;
left: -952px!important;
top: -535px!important;
opacity: 0.99;
}
.wslide-slide-inner2 img {
float: left;
width: 2000px!important;
}
.wslide-overlay-top-left {
position: absolute;
z-index: 2;
top: 60px!important;
left: 10px;
}
.wslide-overlay-top-right {
top: 60px!important;
}
.wslide-content-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1050px!important;
overflow: hidden;
}
/** End Rotating Background Main Coding**/
/* Rotating Background Coding
---------------------------------------------------*/
/** Rotating Background Height Coding **/
.wslide-main {
position: fixed!important;
z-index: 2;
width: 87%;
}
.wslide {
font-family: arial;
font-size: 13px;
color: #fff;
cursor: default;
height: 750px!important;
}
.wslide-content {
position: relative;
overflow: hidden;
height: 1000px!important;
}
/** End Rotating Background Height Coding **/
/** Rotating Background Main Coding **/
.wslide-slide-inner2 {
position:absolute;
width: 2000px !important;
left: -952px!important;
top: -535px!important;
opacity: 0.99;
}
.wslide-slide-inner2 img {
float: left;
width: 2000px!important;
}
.wslide-overlay-top-left {
position: absolute;
z-index: 2;
top: 60px!important;
left: 10px;
}
.wslide-overlay-top-right {
top: 60px!important;
}
.wslide-content-inner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1050px!important;
overflow: hidden;
}
/** End Rotating Background Main Coding**/
Step 4. add more Css Coding
While still in "main-style.css", you need to find your website's content's css coding. For this specific theme, we're looking for "#main". But because we are using the rotating background on one page layout [this tutorial uses ".landing.html"] , we want this code just to affect this page layout.
Copy the "#main" or "#main-content .container" code, paste it right below the code you copied it from, and apply the orange code as shown below.
.landing-page #main {
position: relative;
left: 0;
display: block;
padding: 40px 40px 40px 245px;
vertical-align: top;
z-index: 9;
margin-top:-700px!important
}
Click save.
Note: Some Weebly themes uses "#main", while others may be using "#main-content .container". If you're not sure the content area div tag your site's theme is using, just simply right click on your site's content area in a new window, and "inspect the element".
If you still need help, leave a comment below!
Copy the "#main" or "#main-content .container" code, paste it right below the code you copied it from, and apply the orange code as shown below.
.landing-page #main {
position: relative;
left: 0;
display: block;
padding: 40px 40px 40px 245px;
vertical-align: top;
z-index: 9;
margin-top:-700px!important
}
Click save.
Note: Some Weebly themes uses "#main", while others may be using "#main-content .container". If you're not sure the content area div tag your site's theme is using, just simply right click on your site's content area in a new window, and "inspect the element".
If you still need help, leave a comment below!
Step 5. Use the "slideshow" element
Grab the "Slideshow" element from the left, and drag and drop it into the northern most part of your Weebly editor.
Select "Simple Slideshow" and then click "Continue". If the slideshow box freezes after clicking "Continue", simply "X" out the window and begin uploading your pictures.
Select "Simple Slideshow" and then click "Continue". If the slideshow box freezes after clicking "Continue", simply "X" out the window and begin uploading your pictures.
Step 6. Add images
Click the top part of the Weebly editor (the area where you dropped the "Slideshow" element), and begin uploading your photo. This is where you may choose to hyperlink each photo to another page.
Recommended image sizes are 1500x900.
Recommended image sizes are 1500x900.
Step 7. Change the "slideshow" elements' settings
You want the background of your website to look more like an autonomous, rotating display of images rather than a slideshow. Plus, we also need to finalize the dimensions of the rotating background so it fits perfectly in your website.
Click once more on the top part where you added the slideshow element.
Click Navigation>Nav Style>None
Click Spacing>Spacing Above & Below>None
Click Advanced>Show Controls>No
Click once more on the top part where you added the slideshow element.
Click Navigation>Nav Style>None
Click Spacing>Spacing Above & Below>None
Click Advanced>Show Controls>No
You're done!
Publish your site to see your new rotating background!
Tips & additional information
Since we're using the "Slideshow" element to act as a rotating background, we can also choose how fast the images rotate, as well as the transition style in which they rotate.
This is self-explanatory once the Slideshow editing box appears.
This is self-explanatory once the Slideshow editing box appears.
Need Help Installing This Tutorial?
Editor Tricks Web Design Services
Open
· Closes 5 PM
Closed
· Opens 7 AM
Recent Tutorial Comments
