Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Create the slideshow. See Meta Slider slideshows for more information.

  2. On the Meta Slider page, set the width for your slideshow to be at least 1800px.

  3. On the right side of the Meta Slider 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.

    Image RemovedImage Added
  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.

    full width stretched row layoutImage Removedfull width stretched row layoutImage Added
  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 to remove the space above the Meta Slider:

...

  1. Upload the image.
    (warning) 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.

  2. Go to your homepage edit screen. Under Page Attributes, make sure that the Template is set to Blank.

    blank templateImage Removedblank templateImage Added
  3. On your homepage, create the top row with 1 column. In the Row Styles, open Layout, and underneath Row Layout, select Full Width Stretched.

    full width stretched row layoutImage Removedfull width stretched row layoutImage Added
  4. Insert an Image widget into the row and select the image. Do not add a title. Add alternate text.

  5. Add the following code to your Custom CSS:

    SHERMAN THEME

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

    HALE 2015 THEME

    Code Block
    .home #content {
    padding:0
    }

    PRUDENCE 2018 THEME

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

    CSS

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

...