There are several ways you can create complex layouts with the WPHubSite Site Builder and assign them to different places of your website. One of the ways is to use the WPHubSite Theme Custom Layouts Pro Module.
The Custom Layouts Pro Module lets you create a custom layout and assign it to several different places on your website. You can use it to create a custom header, footer, and more. You could even use it to place a call to action at the bottom of every page. That call to action could include a meeting form from HubSpot or anything else.
This help article will help you create a custom layout header and also a custom layout that “hooks” in above the footer on every page of your website. Without further ado, let’s get started creating custom layouts to easily enhance your website across all or some pages.
You must activate the Custom Layouts pro module in the WPHubSite Theme before you can do any of these steps.
Table of Contents
- Create A Custom Header With Custom Layouts
- Create A Custom Layout Above The Footer On Every Page
- Edit a Custom Layout
- Temporarily Disable A Custom Layout
- Delete A Custom Layout
Create A Custom Header With Custom Layouts
In this section, we’re going to create a custom header that will show up on the entire site. We’ll create the header with the WPHubSite Site Builder and it will override the WPHubSite Theme header.
Before you have the Custom Layouts option in the menu you first need to activate the Custom Layouts pro module.
Ready to get started?
Step 1: Hover over or click on Appearance.
Step 2: Click on Custom Layouts.
Step 3: Click the Add New button.
Step 4: Type in a name for the header. Naming it header is just fine.
Step 5: Select Header from the Layout drop-down menu. If you’d like to create a Footer or 404 page you can also choose one of those.
Option 6: Choose whether you’d like the header to stick to the top or not. If you enable the stick then you’ll get some additional options (listed below).
- Shrink: Enabling shrink will make the header lose all padding when users scroll down on your page.
- Stick On: Choose to only shrink the headers on certain size screens (Desktop, Mobile, or Desktop + Mobile).
Step 7: Choose where you’d like this custom header to show up. You’ll likely want your custom header to show up on your entire website but you don’t have to have it that way. You can also add additional display rules or even add exclusion rules to show your header on your entire site except for some pages.
Step 8: Select what users should see this custom header.
Step 9: Click the Site Builder tab. This will open the Site Builder editor which will let you create your custom header. You can learn more about working with the Site Builder in the create a page with Site Builder help article.
Note: Once you publish your header in Site Builder then the custom layout will also publish and be live on your website.
Above is the basic custom header I created for this tutorial. There are several Site Builder modules for inserting a menu module. You can use columns to align content but be sure you also work with the different page sizes from desktop to mobile.
Create A Custom Layout Above The Footer On Every Page
The custom layouts pro module of the WPHubSite Theme not only lets you make a customer header, footer, or 404 page. It also lets you create a layout that can then be placed nearly anywhere into your content.
This is called a hook because you’re hooking the content into various places on your site. There are several hooks built into the WPHubSite Theme and you can place a custom layout at any of them.
In this section of this help article, we’re going to place a custom call to action just above the footer on every page of this website. Remember, you need to activate the Custom Layouts pro module in the WPHubSite Theme.
Step 1: Hover over or click on Appearance.
Step 2: Click the Custom Layouts option.
Step 3: Click the Add New button.
Step 4: Name your custom layout to something you’ll recognize or reminds you of what it’s for.
Step 5: Choose Hooks from the Layout drop-down menu.
Step 6: Choose the location on your website you’d like this layout to inserted into.
Step 7: Set a priority for this hook if you have several hooks at the same location.
Step 8: Set space at the top or bottom of your custom layout. Be sure to also include the unit of measure (ex. 10px, 10vh, etc.)
Step 9: Choose what pages to display this custom layout.
Step 10: Choose what user roles can see this layout.
Step 11: Click the Site Builder tab to open Site Builder and design your custom layout hook.
Once you’re finished editing your custom layout in Site Builder you can publish the layout and it will be live on your website.
Above is our custom call to action that we inserted immediately before the footer on every page of our website.
Edit a Custom Layout
You can create many different layouts to accomplish different tasks on different parts of your website. But how do you get back to them and edit everything?
It depends on what you need to edit. This section will cover how you can edit your custom layout settings and also the custom layout Site Builder formatting. Here’s how.
Step 1: Hover over or click on Appearance.
Step 2: Click on Custom Layouts.
Step 3: Hover over the custom layout you’d like to edit.
Step 4: Click on the Edit link to edit the custom layout settings (layout, action, name, etc.) or click on Site Builder to edit the custom layout in Site Builder.
Note: You can also get to the Site Builder edit screen in the custom layout settings by clicking the Launch Site Builder button.
If you’re editing the custom layout settings then make all the changes you’d like to make and then continue to step 5 when you’re done.
Step 5: Click the Update button.
That’s it! Any updates you made to your custom layout will now save. You can click the View Custom Layout link in the WordPress top bar to view just your custom layout or just check it out in its place on your website.
Temporarily Disable A Custom Layout
If you want to disable a custom layout temporarily because you might need it again, you can do that. The custom layouts are a post just like any other in WordPress and can be placed in draft mode. That will make them disappear from your website but keep them on the back end for you to publish when you need it.
Step 1: Hover over or click on Appearance.
Step 2: Click on Custom Layouts.
Step 3: Hover over the custom layout you’d like to edit.
Step 4: Click the Edit link.
Step 5: Click the Edit link next to the status (which is likely set to published).
Step 6: Choose Draft from the status drop-down menu.
Note: When you want to set this custom layout back to published, follow these same steps but set the status to published.
Step 7: Click the OK button.
Step 8: Click the Update button.
Once the layout is updated then it will be in draft mode and will be invisible on the front end of your website. You can see it by editing the post and only saving it in draft until you’re ready to publish it again.
Delete A Custom Layout
Sometimes a custom layout has outlived its usefulness. If that’s the case you’ll want to delete it. You can also clear the trash to delete it permanently.
Step 1: Hover over or click on Appearance.
Step 2: Click on Custom Layouts.
Step 3: Hover over the custom layout you’d like to delete.
Step 4: Click on the Trash link.
This will place the custom layout into the Trash folder rather than permanently delete it. The following steps will let you empty the trash to permanently delete any custom layout in the trash. These steps will work for nearly everything in WordPress to clean out the trash.
Step 5: Click the Trash category.
Step 6: Empty the entire trash or delete one item at a time. Here’s how to do each.
- Empty everything: Click the Empty Trash button.
- Delete individual items: Hover over the item to remove and click the Delete Permanently link.
That’s it! You now have moved a custom layout to the trash and then deleted it permanently.