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

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

SHERMAN THEME

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

HALE 2015 THEME

.home #content {
padding:0
}
CODE

PRUDENCE 2018 THEME

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

Image

  1. Please Note:  Currently extra CSS may need to be added for the image to stretch full screen.  Follow the instructions below, if the image is left justified.
  2. 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.
  3. Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to ‘Blank’.
  4. On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout select ‘Full Width Stretched’.

  5. Insert an Image widget into the row and select the image. Do not add a title, but you must add alternate text.
  6. Add the following code to your Custom CSS:

    SHERMAN THEME

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

    HALE 2015 THEME

    .home #content {
    padding:0
    }
    CODE

    PRUDENCE 2018 THEME

    .home #content .container { 
    padding-top:0 
    }  
    .home .entry-content { 
    margin-top:0 
    }
    CODE
  7. If your image is Left Justified and not fully stretched, add the following to your Custom CSS:

    CSS

    .siteorigin-panels-stretch img {
        width: 100%;
    }
    CODE