Page Width Guidelines

PageCloud's Page Width Guidelines are a crucial part of your site as it helps determine where your content exists relative to different screen sizes, including tablets. It can be used as a great guideline to help structure your content within your site.

By default, when you start with a blank canvas, you will notice the following page:


Screen_Shot_2016-02-09_at_10-1.40.44_AM-ID-0b9575e8-4aae-413c-f9e1-275edcf6f8c1.png


This box represents where we would recommend your content be placed in order to ensure it is displayed optimally on your website for view on various different screen sizes. By default, your page width will begin at 946px however you do have the ability to change that if you'd like within the 'Page' tab as shown below.

Screen_Shot_2016-02-09_at_10.40.52_AM-ID-5456e6ea-853f-4086-a7d6-3526df47615f.png


We would encourage you to try and avoid setting your page width higher than 1280px as this could make it trickier to see on smaller screen sizes, leading to horizontal scroll bars to view your page.


Screen_Shot_2016-02-09_at_10.41.44_AM-ID-ce0aabcd-493c-4d77-a46e-58b3b0a9a918.png



As this page element is intended to serve as your guide to assist with placement, we would recommend keeping it in place while designing your site. It can be removed from view at any point though by unchecking the 'Apply Visible Page Styles' option in the 'Page' tab.

As you start adding in content, these guides may become a bit trickier to see, so you can always hop into X-RAY mode by hitting Command+Option+X on your Mac, or CTRL+ALT+X on your Windows computer.


Screen_Shot_2016-02-09_at_11.46.50_AM-ID-53128051-1aea-4544-9866-ac23f0decee7.png


Depending on the site you'd like to design, you may want to make use of the space outside of your page element and we have a few options for this.

  • Window Fill - Allowing you to choose your page's background colour to fill in the space outside of your page element.
  • Window Background - Choose an image that will serve as a full page backdrop to your site. Great for images with some pattern or gradient to it.
  • Background Video - Have a full page video playing in the background on your page.

We also offer a couple responsive elements that will adjust to your viewer's screen size. These would include:

  • Full Bleed - Allows you to stretch images and rectangles to the full width of the screen. This effect will zoom in and out of the image in order to stretch it properly based on the different screen sizes.
  • Poster Video - Stretches your videos to the full width of the screen based on your viewer's screen size.

We make use of a few of these techniques on our own site at www.pagecloud.com while keeping the content within the 946px page element as seen below.


Screen_Shot_2016-02-09_at_12.25.23_PM-ID-9755c32b-1aa5-4205-ab12-2ee65b7ac1d8.pngScreen_Shot_2016-02-09_at_12.26.51_PM-ID-b13a3a52-a4c5-423c-8d9f-32c8de059747.png