800,000+ WordPress sites are already using MetaSlider!

Full Width Slideshows with MetaSlider

This guide will show you how to create a “full width” layout for your MetaSlider slideshow. The aim is to create a slideshow that will stretch from one side of the browser window to another.

How you create a “full width” layout will depend on your theme, so please read this guide to understand the best approach for your site.

In this image below, the yellow “slider” area is ideal for creating a full-width slideshow. Ideally your theme will have an area like this where you can place your slideshow.

Full width slideshow layout

We also recommend that you select the “100% width” option inside the “Advanced Settings” area of your slideshow.

Full width slideshow layout settings of 100% width

Don’t Place Full-Width Slideshows Inside Posts

To create a full-width slideshow, we suggest that you don’t place your slideshow in a post or page. This is because most WordPress themes have a central content container, shown in red in the image below.

Fixed width slideshow layout

The post or page content is often placed within this central container. So if you insert MetaSlider into a post, it will only be as wide as this container. Even if you enable the “100% width” option in MetaSlider, your slider will only be as wide as the container.

Centered fixed width slideshow layout

Customizing a Theme to Add a Full-Width Slideshow

If your theme doesn’t have a full browser width module or similar (it may be worth contacting the theme developer to find out) then you will need to insert the slider directly in the page template. This exact method will vary depending on the theme, but will generally involve adding PHP code to your theme’s files. You will find the code inside the editing area for your slideshow, as in the image below:

PHP settings for a full width slideshow layout

Copy this PHP code. You will then need to find the correct theme template to paste this into and again, this varies depending on the theme and of course where you would like the slider to appear.

The most popular location tends to be on the homepage below the main navigation menu. Navigate to the theme editor at Appearance > Editor where there will most likely be a file called “Header” (header.php). If you are a MetaSlider Pro member, you are welcome to open a support ticket and contact our team who will be happy to help.

Edit theme file to add slideshow