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.
We also recommend that you select the “100% width” option inside the “Advanced Settings” area of your slideshow.
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.
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.
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:
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.
