GeneratePress is my go-to WordPress theme. Think of it like a blank canvas that allows you to develop whatever creative idea that is bursting out of your brain.
One aspect of GeneratePress that can be confusing to new users is the fact that out of the box, it’s not easy to understand how to create a template that spans the full width of a browser. In this guide, I’ll show you how you can quickly create something like this:
When you set up a GeneratePress website, the default layout is contained horizontally:
For this example, I colored the header, footer and background so you can understand how the default GeneratePress template is structured. Notice how the content is contained.
Step 1: Making Your Template Full Width
In GeneratePress, you specify the Content Container under the Page properties of each page you create. When you create a new page, it will be set to “default”. Change it to “Full Width”, and your layout will now look like this:
Step 2: Creating Containers
We now need to create some containers for the content. You could do this using the Group block, but GeneratePress provides custom Container blocks that are easier to work with and provide you far more options to style them right in the WordPress page building interface.
To access these, download the GenerateBlocks plugin. Once this is activated, you’ll be able to build a page that is structured something like this:
Note that I utilize two containers for each section: An outer container and an inner container. This is how GeneratePress recommends you utilize these containers. In fact, when you create a new container, the interface will even prompt you to consider adding an inner container with a one-click interface.
We can now style those inner containers to reduce their width as desired.
.entry-content > .gb-container > .gb-container {
max-width: 1200px;
margin-left: auto; /* centers the content */
margin-right: auto; /* centers the content */
} And you should find that your content is now contained within the inner containers:
What isn’t as apparent in this example is that the outer containers are still extending to the edge of the screen. They are currently white in color. Notice how the background of the site which is visible at the bottom of this image is green. It is being covered by the white outer containers.
Note the class .entry-content before the .gb-container in the above CSS. This belongs to the theme div that surrounds each instance of these containers. I included it so that container blocks nested deeper inside my design won’t be impacted by this rule.
Step 3: Give the Outer Containers a Background Color
You can do this either via CSS or the GeneratePress Container block settings. Personally, I like to give all my outside containers a class using the Additional CSS Class field under the Container block settings in the WordPress page editor. And then I give all my inside containers a different class. I can then easily target any container with CSS:
.outside-container:nth-child(1) {
background-color:#d9decd;
}
.outside-container:nth-child(2) {
background-color:#a1a890;
} Once your outside containers have a background color, your site will look something like this:
Step 4: Fix the Padding
Let’s give those inner containers some padding to align the content with the header and footer content and give the default margin of the text something to push against. We can do this by adding one more line to the CSS we created earlier:
.entry-content > .gb-container > .gb-container {
max-width: 1200px;
margin-left: auto; /* centers the content */
margin-right: auto; /* centers the content */
padding: 20px 40px; /* adds padding */
} The end result is a full width website where the content is contained in the center at a width you specify.
Making it responsive
We can take what we just did, a make it mobile first responsive by reworking the CSS. And while we are at it, let’s synchronize the padding so the header bar (.inside-header), content area (.gb-container > .gb-container), footer (.footer-widgets-container) and copyright area (.inside-site-info) all have the same padding assigned to them.
.inside-header,
.entry-content > .gb-container > .gb-container,
.footer-widgets-container,
.inside-site-info {
margin-left: auto;
margin-right: auto;
padding: calc(2.75vw + 5px);
}
/* Fix width and padding at 1280px */
@media screen and (min-width: 1280px) {
.inside-header,
.entry-content > .gb-container > .gb-container,
.footer-widgets-container,
.inside-site-info {
max-width: 1200px;
padding: 20px 40px;
}
}
/* Containers */
.outside-container:nth-child(1) {
background-color:#d9decd;
}
.outside-container:nth-child(2) {
background-color:#a1a890;
} This is my CSS for full width GeneratePress website projects. Copy/paste this and you’ll be in a good spot to start your creative process!
Defaulting New Pages to Full Width
The premium version of GeneratePress comes with a system called Elements that allows you to set up rules (and do all kinds of other things, like adding code to specific pages, or specific places). After you have activated Elements in the GeneratePress menu, create a new Layout element.
Under the Sidebar tab, select “Content (no sidebars)”.
Under the Content menu, set the Content Area to “Full Width (no padding)”.
Under the Display Rules menu, set the Location to “Entire Site”.