Home>Support>Masthead, metaslider, and interior page header dimensions for outside graphic designer

Masthead, metaslider, and interior page header dimensions for outside graphic designer

By Amber Javaid, 9 years ago. Last reply by Andrew Misplon, 9 years ago.

Hi SiteOrigin Team! I love your work and upgraded to premium. I am a beginner and am working with an outside graphic designer to uploaded images that cover the masthead, and can be in the metaslider, as well as images for headers in the interior pages – what dimensions can I give the designer? hrwesttest.dreamhosters.com
Warm regards,
Amber

URL: http://www.hrwesttest.dreamhosters.com/

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Hi Amber

    Thanks for reaching out. Are you using Vantage in Boxed or Full Width layout bound? We unfortunately can’t see your site to check.

  2. 9 years, 3 months ago Amber Javaid

    Hey Andrew, thanks for your reply! I apologize for the privacy settings I am actually trying to find a way to make the work server public while the final server stays private, so you can see it all and help me, try http://www.hrwesttest.dreamhosters.com I'm using full width

  3. 9 years, 3 months ago Amber Javaid

    Hi Andrew I'm still a beginner with bypass links too but I found this works to view my site (please do view it because I changed the padding in the masthead)

    http://www.hrwesttest.dreamhosters.com/teams

    When u go there u will see code, just refresh the page and you will see the site

  4. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    Thanks.

    There is no set width for your masthead background. It’s 100% screen width. Same goes for Meta Slider, also 100% screen width.

    Masthead
    Add the following to Appearance > Custom CSS:

    #masthead {
  background-repeat: no-repeat;
  background-position: center;
}

    If you leave the header padding as it is now you should resize the masthead background image to be 220px in height.

    Meta Slider
    I’d recommend setting your slider up to be 1905px width x whatever height you choose.
    If you’re using Meta Slider free you can add an additional centered image layer in the caption field. We cover this method here: https://siteorigin.com/vantage-documentation/slider/

  5. 9 years, 3 months ago Amber Javaid

    Hi Andrew thanks for your prompt reply. Please clarify, when my designer asks me for dimensions for our new images that will be in the Masthead (cover style), meta slider, And interior pages header what do I tell him? 100% screen width for all categories?

  6. 9 years, 3 months ago Andrew Misplon
    Hi, I Work Here

    There is no easy answer with 100% width elements. These are my suggestions:

    Masthead:
    The CSS I sent removes the repeat and gives you a centered background. You can’t use cover with an image with text in it, or rather I would advise against it. Cover works nicely with images but not text that people need to read.

    Meta Slider:
    Go with 1905 px width and the appropriate height. Set your slider settings up to match your image dimensions.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More