WordPress PageBox

Creating a full-bleed style website with PageBox for WordPress

140 views January 16, 2019 Leandi Kolver 0

One of the benefits of PageBox for WordPress and its customisable, responsive rows and columns, is that you have the option to create full-width sections at almost any point on the page. This effect can help create beautiful pages with colourful backgrounds or background images. It can also affect the atoms within the rows, meaning that your content can be stretched across the entire page. This allows you to create eye-catching banners, or to simply have a fully immersive page without any gutters.

In order to create a full-bleed page, you will first need to understand the basics of page building. If you need more information on creating a page, dynamic templates, or atoms and modules, take a look at some of our handy guides. If you already know how to build a page, but are looking for information on how your pages can be improved, read on.

In this guide, we will take an example of a fixed-width, or contained, page, and show how it can be transformed into an entirely different page using fluid-width, or full-bleed, controls. Before applying fluid-controls to any elements on the page, you will first need to understand how they work.

Background and content width can be set within row settings. Applying fixed-width to either the background, or the content, within a row will mean they adhere to the margins of the page template. Applying fluid-width (100% wide) will allow either the background or the content to stretch across the entire width of the page.

For more information on how to control row and column settings, take a look at our row and setting guide here.

The first element to which we will apply fluid-width controls, is our page’s header banner. This is perhaps where fluid-width controls have the most significant effect. Header banners usually sit at the top of a page, and as such make up your above-the-fold content. Content above the fold is immediately visible upon visiting a page, without having to scroll or interact in any way. This is your first opportunity to encourage users to interact with your site, therefore, above-the-fold content should be as attractive and eye-catching as possible. Take a look at these two examples of above-the-fold banners using both fixed-width (contained) and fluid-width (full-bleed) controls.

As you can see, adding fluid-width controls to the background image creates a full-width banner, removing the gutters at the side of the page. This gives the banner a greater impact, creates a more immersive effect, and makes use of space that might otherwise draw the user’s eye away from your brand or message.

Fluid-width backgrounds can also be used throughout your site. One use is applied to the background colour of certain rows in order to create distinct sections on a page, without losing the cohesive look of the page. Applying a background colour to rows can create a page break for your users, highlighting certain content, or simply offering a break from a white background, especially on longer pages. However, white gutters surrounding coloured backgrounds can create a text-box effect rather than a page-break background. Making the background colour fluid-width creates a smoother experience and a more cohesive page, as you can see below.

Fluid-width, or full-bleed, controls can also be applied to content within rows, as long as the background already has fluid-width applied. If the background of the row is still set as fixed-width the content will not have the fluid-width option available. If the background is set to fluid-width, the content will remain fixed-width unless fluid-width controls are added.

This can be done for any content on the page. In some cases, fluid-width controls can be used to add spacing to content that may otherwise be squashed within the margins. It can also remove excessive whitespace. In the example below, applying fluid-width controls to the team member module stretches the team member boxes, allowing the descriptions and pictures more room, and therefore making them more readable. It also reduces the amount of whitespace around content that already contains a lot of whitespace, making the page look more interesting.

Not every section of your page, however, needs to be fluid-width. In some cases, it can be detrimental to the content to try to stretch it across the page. A good example of this is the insights carousel atom. The problem with applying fluid-width controls to this atom is that the arrows that you use to scroll through the posts will overlap the posts if they are stretched to full-bleed.

Clearly, although fluid-width controls can drastically improve the appearance of your page, it does not need to be used on every atom.

As you can see, applying fluid-width, or full-bleed, settings to both the background and content of your rows can dramatically improve the appearance of your page. Whitespace, margins, and gutters can be used effectively on pages and across sites, however, in many cases removing them through the use of fluid-width controls can create interesting, and better-looking effects.

For further examples of how fluid controls can create a great-looking website, take a look at hermes-investment.com. Hermes make excellent use of fluid controls throughout their site to create fabulous headers, highlight sections, and really immerse their users within each page. You need to look no further than the homepage for an example on how fluid controls can make a website. Hermes make use of a stunning full-width banner to immediately catch the user’s interest.

The promo boxes beneath also make use of fluid controls – making them full-width ensures that they are in proportion with the banner above, and removing whitespace either side of them ensures that the user’s eye is not drawn away from them.

Hermes also makes use of full-width background colour with their grey sales contact section, which effectively separates it from the rest of the page. As you can see though, they have kept their insights carousel fixed-width to ensure that the arrows do not overlap its content.

Hermes utilise full-width controls throughout their site, including full-width banners on almost every page. It is an excellent example of using fluid controls to enhance your site.

Was this helpful?