Full-Width Slideshow or Image

This article covers how to setup MetaSlider within the Classic Editor or the Block Editor.

Classic Editor

Follow these instructions for a full-width slideshow or image at the top of your homepage. Examples of this can be found on the UConn website as well as The Major Experience website. Note that your homepage must be using the Page Builder and the Template must be Blank.

Slideshow

Create the slideshow. See Meta Slider slideshows for more information.
On the Meta Slider page, set the width for your slideshow to be at least 1800px.
On the right side of the Meta Slider page, under Advanced Settings > Stretch, select 100% wide output.
Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to Blank.
On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout, select Full Width Stretched.
Insert a Meta Slider widget into the row and select the slideshow. Do not add a title.
Add the following code to your Custom CSS to remove the space above the Meta Slider:

SHERMAN THEME

.home .entry-content {
margin-top:0
}

HALE 2015 THEME

.home #content {
padding:0
}

PRUDENCE 2018 THEME

.home #content .container { 
padding-top:0 
}  
.home .entry-content { 
margin-top:0 
}

Image

Currently, extra CSS may need to be added for the image to stretch over the full screen. Follow the instructions below if the image is left justified.

Upload the image.
Note: It may be a good idea to crop the image before adding it to your homepage. Normally, the ideal full-width homepage image will be very wide and very short.
Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to Blank.
On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout, select Full Width Stretched.
Insert an Image widget into the row and select the image. Do not add a title. Add alternate text.
Add the following code to your Custom CSS:
SHERMAN THEME
HALE 2015 THEME
PRUDENCE 2018 THEME
If your image is Left Justified and not fully stretched, add the following to your Custom CSS:
CSS

Information Technology