Extra Tweaks & Customisations
GeneratePress and Elementor work pretty well together out of the box.
However, I’ve developed a few extra settings, tweaks and customisations, just to make everything work together optimally. It automates a lot of layout issues, so you don’t have to worry about it.
These extra tweaks are really easy to set up. And actually… even if you use another theme, I reckon these tips will still prove very useful.
You can read the text instructions below (click to jump straight there).
You can watch a video of me walking you through it…
These are the first proper screencasts I ever made, so go easy on me…. 🙂
In part 1 below, I explain the 3 reasons I make these custom tweaks:
In part 2 below, I show you how to make these changes – step-by-step:
And in the optional part 3, I explain exactly what the bit of code does, that I had you copy-and-paste in the previous video:
If you prefer to read, the text from the video is below:
The 3 issues my custom settings fix
There are 3 reasons I make these particular custom settings:
1. Consistency of layout
The first, is to automatically achieve consistency of layout. I want to make sure that any layouts created by either GP (the theme) or Elementor (the page builder), are always in line with each other and always have the same gaps between columns.
2. Consistent breathing room on mobile
The second reason is to make sure that there’s always some nice spacing or padding at the edges of the screen on mobile. I want to make it the exact same padding, whether that particular part of the page layout is made by GeneratePress or Elementor.
3. Fix layout problems caused by how Elementor creates the gap between columns
And the third and final reason, is a fix for a small problem caused by how Elementor creates the spacing around columns. If you leave things as the default, you can often end up with layouts that don’t align properly with other elements of your designs.
Where will you make these changes?
You’ll make the various settings tweaks in 3 different places:
1. Elementor’s settings panel (Elementor > Settings)
2. The Customizer (Appearance > Customizer).
3. Copy-pasting a bit of extra CSS code (Appearance > Customizer > Additional CSS).
Let’s take these one at a time…
1. Elementor settings
Click on Elementor in the WordPress menu, then click on Settings.
Job number 1: Tick both boxes for Disable Global Colors and Disable Global Fonts.
Why? Well, we set our basic styles for the site in the theme – within the Customizer. These styles are usually related to your client’s branding – fonts, font sizes, colours, things like that. If we leave these 2 boxes unticked, then Elementor also loads its own fonts and colours too. It’s like a double whammy of code.
There are 3 big problems if that happens:
- Your site has a ton of code that it doesn’t need. We don’t like slow sites.
- You have to set all your typography and colour settings in 2 places, duplicating your effort. We don’t like wasting time.
- It’s much harder to know where styling rules are coming from. You don’t know if a particular font setting or colour is coming from Elementor or from GeneratePress.
If your main styles are all in the theme – meaning, in the Customizer – you’ve only got one place to look.
That doesn’t mean you can’t override these global settings on an individual basis within Elementor. Far from it. Go nuts making custom style settings on individual elements. But this setting just makes sure your basic global branding defaults are in 1 place. It’s the right way to do it.
Job number 2: Set your content width.
This tells Elementor how wide you want Elementor-created content to be. Obviously.
It’s at 1140 pixels by default, but feel free to set it to whatever you like.
The reason I mention it is… you need to make a note of the setting, because we’ll need to make sure that GeneratePress uses the exact same setting – unless you want wonky layouts.
Don’t forget to ‘save changes’ at the bottom.
Now we head to the Customizer!
2. The Customizer
You can get to the WordPress Customizer one of 2 ways:
You can either click on Customise from the admin menu at the top of any page on your site.
Or, in the WordPress backend, you can go to Appearance and then Customise.
(I’m in the UK, so mine’s spelt with an S, not a Z. I don’t want to get into a fight here about the right way to spell it…) 🙂
Here’s where you make all your theme style changes.
Remember, these are all the global styles that your site will use by default, unless you override them in specific parts of your layouts.
One great feature of the Customizer is that any changes you make will automatically display live in this window. And you can click around your site to visit specific pages too, with the Customizer still active.
Don’t worry – until you click ‘Save’ at the top here, your changes won’t actually go live. If you make changes but then decide not to keep them, just click the X at the top left here to leave the Customizer without saving.
Our work here is in Layout, so click Layout and then Container.
Within container, firstly make sure the Container Width setting is the same as you set in Elementor’s Content Width setting.
Content Layout: I tend to leave as One Container.
Separate Containers puts the columns and widgets in separate boxes. which is only really an issue on pages created by GeneratePress only.
Personally, I think separate containers is harder to style consistently. I had issues with blog layouts for example, where I couldn’t maintain that nice 20px column gaps, like I can with the one container setting.
However: it’s totally fine to set ‘Separate Containers’ if it works for your particular design. None of my other settings or custom code depend on you having set ‘One Container’.
Set Separating Space to 20px – remember I said Elementor’s columns typically have a gap of 20px between them?
Content Padding is just the space created around the page content. Now this setting doesn’t apply if, on any given page you have the ‘Page builder integration’ full width content ticked. But on pages where you don’t have that ticked, these settings kick in.
The top and bottom padding is your own preference really. The right and left padding is 20px. This is going to be the same padding as we’ll set on the header in a moment, and also the same padding we’ll set on Elementor elements too. And it’s the same gap as we have between columns, so everything lines up nicely.
And Mobile Content Padding is – you guessed it – 20px.
(In an imminent update to GeneratePress you’ll be able to set mobile padding as top, right, bottom and left as well. Right now, it’s a one-size fits all, but it does the job for our purposes here.)
Now hit the ‘back’ arrow top left.
We’re still in Layout. Click Header.
We’re going to make similar changes here. These affect the header area, which is your logo and navigation, created by GeneratePress.
Most of these settings totally depend on your design. But the header padding at the bottom here – make sure you set right and left padding to 20px. Sure I don’t have to explain why again. 🙂
By the way: if you prefer to build your sitewide header in Elementor Pro instead (which replaces your theme’s header) – then you can ignore these header settings. They only apply to your theme.
Now hit back again, pop into Layout > Sidebars.
Personally, I don’t add any padding to sidebar widgets. If your design needs it – let’s say your widgets all have a nice background colour on them and you need a bit of padding to give the text room to breathe – then by all means set the padding you need here.
Then back again, and finally into the Footer layout settings.
Whizz down to the bottom, and make sure your right and left padding is also 20px.
All this just makes sure that everything lines up nicely, regardless of whether it was created by theme or page builder, and it also makes sure you get a nice consistent breathing room on smaller screens.
While we’re here, I will say that I generally don’t use GeneratePress’s own footer. I turn it off by setting Footer Widgets to zero.
I instead create my footers in Elementor’s library, and then make them appear at the bottom of every page with a shortcode placed in GP’s hooks page. Or… I use the Footer Builder feature in Elementor Pro.
If you look at my footer here on Design Build Web, I wouldn’t have been able to create this particular design in GP… well, not without a lot of custom code and head-scratching.
This is a good time to hit ‘Save’ up at the top here, to make your changes live.
3. Adding some custom CSS code
Now we’ve sorted Elementor and the Customizer, the last thing to do is add a little bit of CSS code.
Don’t panic – it’s really not difficult.
Just click into the box below, highlight and copy ALL the code below to your clipboard. Make sure you capture everything.
Now go back to the Customizer, and click through to Additional CSS.
Then just paste the code into the Additional CSS box.
(Mac: CMD+V. PC: CTRL+V)
Once you’ve done all that, you can hit Save again.
What does this code do, by the way?
At this point, you can pat yourself on the back, walk away, celebrate with a cold beer or something.
But if you’re wondering what that bit of code does (and I’d hope that you are at least a little bit curious), then this is for you.
The code is actually in 3 sections (even though it’s all pasted in as one block).
1. Set browser sizing method to border-box
The first bit is to set the browser sizing method to border-box. What does this mean? Well, it’s just related to the way that web browsers calculate the widths of things, taking into account padding and borders. You don’t really need to know.
What this bit of code does is set the browser sizing method to border box. The main reason, is because this is the method Elementor uses. So I put this here to make the theme use border box too.
I’ve also found recently a plugin that assumed the theme used the border box method, and it caused a few issues.
2. Add the same 20px left and right padding to Elementor ‘sections’
The second section of code… remember in the Customizer we told GeneratePress to have a nice 20px padding to the left and right, which gives that nice breathing room on small screens? Well this little bit of code makes sections in Elementor have that same padding, automatically, without having to do anything else.
This is the bit where the left AND right padding is set.
The next bit of code in this section is there to NOT set any padding in a couple of situations:
The first is a situation where you might have a section nested inside another section. So for the *outer* section – call it the parent – we do want the padding at the sides, because it’ll be touching the edges of the browser window. But we don’t want that padding also applied to the section inside that one, because then we’ll have double padding – effectively 20px + 20px – which looks weird.
The other exception here is when you might use Elementor on a standard GeneratePress page – that is, one where you haven’t ticked the ‘full width template’ page builder integration setting. Now on those pages, GP’s own left and right padding is in play, so you don’t want Elementor adding yet more padding in. You only want that padding when you’re using a full width blank template.
And the very last bit here is a bit specific. I had a situation on a site recently where for just ONE specific section on a page, the automatic padding looked weird. I actually needed the section to be totally flush with the edges of the screen. So the way this works, in the section’s advanced settings tab in Elementor, put ‘nopad’ in the ‘class’ field. That then removes that automated padding, just for those odd times you might need it.
3. Hack to fix how Elementor creates gaps between columns
The 3rd and final section of this CSS code is a little hack to work around the way that Elementor creates gaps between columns. I mentioned this earlier and gave you a little demo earlier, so I won’t go over it again here.
Ok, so now you’re a code wizard!
If you have any questions or problems, don’t hesitate to drop me an email at email@example.com. I’ll be happy to help.