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:
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.
This can be done in a number of ways, including clicking and dragging on the guides themselves like so:
Or for more fine tuned adjustments; within the "Page" tab as shown below.
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.
As this page element is intended to serve as your guide to assist with placement, it is present by default. It can be removed from view at any point though by unchecking the "Apply Visible Page Styles" option in the "Page" tab, which will still leave the guidelines themselves for you to adjust.
When an object is selected on your page, it will help display objects that are showing up outside of your page width by adjusting the opacity of those particular objects. This is meant to serve as a visual cue which shows that these objects could be affected when viewing on screens smaller than your page width, or through devices like tablets which will only show content within your page width.
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 1080px page element as seen below.