Step 1. Open Weebly's hTML/CSS editor

Click on "Theme" at the top, then click on "Edit HTML/CSS" on the bottom-left.

---

Step 2. create a new page layout

​To create a new page layout, on the left, click on "HEADER TYPE>New Header Type", and name this page layout "slider.html".

Now, on the left, click on the "no-header.html" page layout, on the right, select and copy all of the HTML code in this file, on the left, click on your new "slider.html" page layout, on the right, select and delete all of the HTML code in this file, and paste the HTML code you copied from the "no-header.html" page layout.

---

Step 3. Create slider <div>

Now while in the "slider.html" page layout, on the right, scroll down and find your main content area's <div>. Copy and paste the code below directly above your main content area's <div>:

<div id="slider">{slider:content}</div>

---

Step 4. Add CSS code

On the left, access your CSS file by clicking on "main.less". On the right, scroll down and find your theme's main content CSS code, and paste the slider's CSS codes below, directly above the main content CSS code.

​​#slider {
    background:#fff;
    position:relative;
    z-index:0;
}

#slider > div > div > div,
#icontent #slider > div > ul > li > .element-box > div > div > div {
    height:initial!important;
}

#slider .wslide-slide-inner1 {
    position: initial!important;
}

#slider .wslide-slide-inner2 {
    top: 0!important;
    left: 0!important;
    width: 100%!important;
}

#slider .wslide-slide-inner2 img {
    width: 100%!important;
}

#slider .wslide-caption-text {
    font-family: 'Yanone Kaffeesatz';
    font-size: 2em;
}

Click save.

---

Step 5. Select "Slider" page layout

Once back in the Weebly editor, apply your new slider page layout to your homepage. To do this, go to "Pages" at the top, on the left, select your homepage -- or any page of your choosing -- and under "HEADER TYPE", select "slider".

Note: If the "Slider" page layout is not available to choose, simply just refresh your Weebly editor.

---

Step 6. add "slideshow" element

Select "Build" at the top, and on the left, grab the "Slideshow" element and drop it into the northern most drag and drop area. This drag and drop area will span the entire width of your site, and is not your main drag and drop area.

​When the "Slideshow" element's slideshow style option appears, click on "Simple Slideshow" and then click "Continue".

Add your images and make sure their dimensions are 1920x1070.

Once your images are uploaded, click on the slideshow, click on "Spacing", and set the top and bottom margins to "0".

---

You're done! Publish your site to see your new header slider!

---

comments powered by Disqus