A full width slider is a great way of using sliders on any type of page, it looks good on blogs, webshops, or company websites as well. A full width slider fills the horizontal area of the browser, and they are popular to be used as headers in web design. Using a slider is a great way to highlight your content on the top of your page, like a hero header.
Let’s take a look at some beautiful examples of full width sliders which can be inspiring when building your website.
1. Advertising Agency
🎓 Available in the Smart Slider 3 Pro – Advertising Agency
The Advertising Agency slider looks like a super simple full width slider. What makes it special is its clever use of layer animations and events. First, there’s continuously rotating text on the top left corner. Second, hovering on the big texts bring up a video or another text block on the right. The combination of these effects make the Advertising Agency slider look one of a kind.
2. Colorful Full Width Slider
🎓 Available in the Smart Slider 3 Pro – Full width slider
On this colorful slider you can see a lot of awesome things such as a layer parallax and the highlighted heading. With the highlighted heading you can focus on the most important part of the slider, but the CTA button is the sliders main part too. By clicking on that a few more layers show up with a layer animation, and tell more information to the visitor.
3. Layer Slider
🎓 Available in the Smart Slider 3 Pro – Layer slider
With Smart Slider 3 you can easily create a layer slider, like this template. You can add as many layers as you want and you can also customize them without using any code. It is important to have a visual harmony among the layers and the background, this makes the slider complete.
4. Rotating Slider Example
🎓 Available in the Smart Slider 3 Pro – Rotating Slider
The Rotating Slider was designed for web development and hosting companies, and has a clean and modern design. In the background there is a smooth wave shape divider effect which completes the design and catches the visitors’ eyes. There is an orange CTA button by which you can navigate to other parts of your page.
5. Instagram Slider
🎓 Available in the Smart Slider 3 Pro – Instagram Slider
The Instagram Slider is looking to grab attention with its pastel colors, gorgeous effect and broken grid-like layout. The text partially covers the image and that creates the broken grid effect, which is a modern technique to make websites unique. You can use this slider to display your Instagram posts, or even to create a simple WordPress post slider.
6. Static Text Slider
🎓 Available in the Smart Slider 3 Pro – Static Text Slider
The Static Text Slider introduces a new approach for creating a beautiful full width slider. The textual content is on a static overlay, so it is always visible for the visitor while the slide automatically change. The highlighted heading layer attracts the eye, and catches the user’s attention. There’s also a lightbox where you can display nice videos or other images by clicking on the play icon.
7. Cooking Slider
🎓 Available in the Smart Slider 3 Pro – Cooking Slider
The Cooking demo helps you create a nice hero header for your gastro blog. The highlighted heading layer is used here which you can use to center your visitors’ attention. On each slide there is a play button which can open a video in a lightbox, and with the box at the bottom you can navigate to the next slide.
8. Showcase Template
🎓 Available in the Smart Slider 3 Pro – Showcase template
With a showcase slider you can show multiple slides together like with carousels. There is only one active slide in the middle, so the visitors can focus on that, but they can see a part of the previous and the next slide as well. You can navigate between the slides with the arrows or buttons, with a simple mouse drag, and by clicking on the next or previous slide, too.
9. Free Gradient Slider
🎓 Available in the Smart Slider 3 Free – Free Gradient Slider
Free gradient slider is completely free to download at the Slider library, and you can fully customize it. The gradient slider example has images on each slide, and each slide has a linear gradient as background. The slide’s starting color is the finishing color of the previous one, and this effect gives that slider a modern look.
10. Wedding Page
🎓 Available in the Smart Slider 3 Pro – Wedding Page
The wedding page is a great example by which you can see that you can create even a whole landing page with Smart Slider 3. In the header a full width slider is used, where there is a navigation by which you can scroll to other sliders and show other content. In the background you can see a Ken Burns effect and the layers are appearing with a beautiful animation on each slide.
11. Full Width Video Slider
🎓 Available in the Smart Slider 3 Pro – Full Width Video Slider
The full width video slider is unique because it contains both YouTube, Vimeo and video slides. On each slide there is a video, a heading layer, a small description, and a button by which you can open other video or images in a lightbox, or you can put a link on that. Smart Slider 3 is a great plugin to create a stunning video slider without programming skills. The sliders are fully responsive and they work on any device.
12. Category Carousel
🎓 Available in the Smart Slider 3 Pro – Category Carousel
In Smart Slider 3 there are a lot of slider types available, like carousels too, which you can use with the full width responsive mode together. With a category carousel you can feature your product categories in your webshop and you can show more product at the same time.
13. Header Illustration
🎓 Available in the Smart Slider 3 Pro – Header Illustration
The header illustration slider is a good example of hero headers. With the illustrations you can grab the visitors’ attention, and with the CTAs you can achieve that the visitor will have full control over the slider. Here you can encounter a lot of Pro features of Smart Slider 3 from layer animations and events to shape dividers which make that template more special.
14. Broken Grid Slider
🎓 Available in the Smart Slider 3 Pro – Broken Grid Slider
A broken grid slider is a modern way to design your slider content. These layouts are trendy and elegant, and call the visitors’ attention. You can use it as a homepage slider and you can even put a dynamic content on that and use it as a post slider.
15. Lawyer Slider
🎓 Available in the Smart Slider 3 Pro – Broken Grid Slider
The Lawyer slider is based on a slider background video, a Static Overlay for navigation and simple content slides which have the main content. The result is a spectacular full width header which you can use on your website.
How to create a full width slider in WordPress?
1. Install Smart Slider 3
Smart Slider 3 is the best rated free full width slider plugin in WordPress, and you can easily install it to your website. First, you should click on the Add New at the Plugins in your WordPress menu, search for Smart Slider 3, and click on the Install Now button.
Another option is that you can directly download the free version from the Smart Slider 3 website – or if you purchased the Pro, from the Download area – and then you can upload it through FTP.
2. Activate the plugin
After you have installed Smart Slider 3, you should activate it by clicking on the Activate button.
3. Create your slider
For creating a new full width slider all you need is to click on the green New Project icon, then select the “Create a New Project” option, and after that choose the Full width layout in the drop-down list.
Or you can import a full width slider template from the Slider library, where you can find a lot of free and premium sliders.
In Smart Slider 3 you can customize every slider, you can set a background color, change the font size or family, use layers, and you can create an image slider, a thumbnail slider or a WordPress carousel as well. It’s only up to you you what you build. You should just drag & drop your layers, use a simple animation, and your slider is ready.
4. Publish your slider
With Smart Slider 3 you can publish your slider in more ways to your WordPress website.
- You can use Shortcode
- Or use the Smart Slider 3 Gutenberg block
- You can use the slider widget
- And you can publish the slider with PHP code as well.
Are you using a page builder? This isn’t a problem either, Smart Slider 3 works well with Elementor, Divi, Beaver Builder, and Page Builder by SiteOrigin, too.
