Design

15 Beautiful Full Width Slider Examples

Bernadett Toth
Bernadett Toth
April 5, 2020
full width slider examples

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 ProAdvertising 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

full width slider

🎓 Available in the Smart Slider 3 ProFull 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

layer slider

🎓 Available in the Smart Slider 3 ProLayer 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

rotating slider

🎓 Available in the Smart Slider 3 ProRotating 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 ProInstagram 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

static text slider

🎓 Available in the Smart Slider 3 ProStatic 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

cooking slider

🎓 Available in the Smart Slider 3 ProCooking 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

full width showcase

🎓 Available in the Smart Slider 3 ProShowcase 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

free full width slider

🎓 Available in the Smart Slider 3 FreeFree 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

wedding page

🎓 Available in the Smart Slider 3 ProWedding 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

full width video slider

🎓 Available in the Smart Slider 3 ProFull 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

category carousel

🎓 Available in the Smart Slider 3 ProCategory 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

Header Illustration

🎓 Available in the Smart Slider 3 ProHeader 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

broken grid slider

🎓 Available in the Smart Slider 3 ProBroken 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 ProBroken 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.

Install Smart Slider

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.

Activate Smart Slider

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.

Creating a full width slider

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.

The new way to build a Slider
Next generation visual editor, customizable animations & effects, and access to hundreads of premade templates.
Get Started
Smart Slider 3 - The new way to build a Slider

Why to use a full width slider on your page?

  • It can be a good header which attracts the eye
  • Makes any website look modern and trendy
  • It is SEO friendly, search engines work well with the sliders’ text
  • You can make it dynamically changing, it is easy to create a post or product slider
  • You can customize it after publishing as well
  • With a CTA button you can navigate the visitor to another place of your website

Useful tips for full width slider settings

  • Limit your slides’ width! Set a max width, and don’t let your slides go too wide. This will only restrain the width of the layers, but the background image will still stretch out to 100% width.
  • Pay attention to the slider height. If you want to create a tall section, create rather a full page slider, where your slider will have 100% width and the height of your screen.
  • Don’t use too much text. In Smart Slider your slide’s height is based on the layers and all the slides’ height are based on your highest slide. If you are using the Text layer, you can set up different texts for different devices which can be useful to show less text on mobile.
  • Don’t work with too big sizes. 1200px width and 500-600px height is an optimal size for every device. We are working with these numbers at the templates, too.

Final Thoughts

Creating a full width slider can be a good choice for every website. Use it as a header or a section, and customize it as you imagined. Smart Slider 3 gives you a lot of opportunities in slider creation, build up your slider by using layers and create your own responsive WordPress slider.

Bernadett Toth

About Author

I’m Bernadett Toth and I’m a member of Nextend‘s support team. I have two dogs, in my free time I teaching them. Besides that I often ride a bike, watching movies or reading.