This tutorial will show you how to install a modified verision of the Weebly "Slideshow" element -- we all know and love -- into the header of your Weebly site.
This slider will become an integrated part of a page layout. Changing the images and text of the Weebly slider is done in the exact same manner as the Weebly "Slideshow" element -- never a need to touch code (after installation).
Adding the slider to any page on your site is as simple as applying the "Slider" page layout to that site, as the slider has been integrated into the page layout. The slider will also automatically adapt when the "Full Width" option is selected under "Theme>Theme Options".
We'll also show you how to customize the height of the slider at the end of tutorial.
"Unite" is the Weebly theme used in this tutorial, but you can use any.
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>:
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.
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!
Weebly Tricks is a third-party Weebly 'after market' site providing tutorials, apps, and widgets for Weebly sites. Weebly Tricks is not affiliated with Weebly, Inc in any manner. Not all tutorials work for every site and may require additional customizing. Always save your files before editing.