Designing a Custom WordPress Header in Crio

Crio Pro, BoldGrid’s WordPress theme for business, now has a Page Header feature that allows you to create unique Page Headers for different pages or posts on your website, providing more flexibility and creativity than ever before. In order to help jump start the process, 6 sample layouts are included and in this article we will show you how to work with them.

Please Note: Custom WordPress Page Headers require Crio 2.5.0 +, Crio Pro 1.1.0+ and Post and Page Builder 1.14.0+, if you cannot see this feature please update to these versions. Don’t have Crio Pro? Buy Now For $3.25/mo. (Billed annually)

Keep in mind the sample layouts will look different on each website because they use the colors and fonts set in the Customizer. In our example, we are using Crio’s starter content.

If you already have Crio Pro and want to follow along, we recommend using Total Upkeep to clone your website into BoldGrid’s Cloud WordPress. This way you will feel free to create without worry of making accidental changes to your live website.

To get started, in the WordPress dashboard navigate to Crio > Page Headers and click yes on the notice to install the sample layouts.

The page will reload and show 6 page headers available to edit. However, instead of opening them here we’re going to use the Customizer’s live preview to see what they each look like.  Then you’ll have a better idea of which design to open and use as a starting point when you return to the dashboard.

Now navigate to Appearance > Customize to open the Customizer. Before previewing the page header layouts, we need to do some setup to ensure they appear as intended. All sample layouts include a menu, so first we select a menu to display. Click on Menus > View All Locations and you will see menu locations for each sample layout as shown below.

Crio starter content comes with 2 menus – Main Menu and Social Media Links. You can assign the same menu to all locations if there’s only one menu created on your website. Now we’re ready to preview the sample page headers. Click the back button twice in the Customizer and then navigate to Design > Header > Page Headers.

In the Global Page Header section is a dropdown menu – you can now select each Sample Layout and the live preview will reload to show you each layout. Make a note of which layout you want to start with and close the Customizer without saving, unless you’ve made a change you want to keep.

Back in the WordPress dashboard navigate to Crio > Page Headers. If this is your first page header, we strongly recommend starting with one of these sample layouts so the basic elements are already on the screen to drag and drop in place. Hover over your desired layout and click the Edit link. This will open the page header in the Post and Page Builder interface so you can easily make changes.

We hope you found this article helpful! If you’d like to learn more, please read our support tutorial on working with page headers, or watch our video series at the bottom of this article.

Create More, Worry Less with BoldGrid Premium

Crio Pro + BoldGrid Premium

Our powerful WordPress SuperTheme plus the entire ecosystem of useful BoldGrid plugins.

Custom WordPress Headers Video Tutorials

Here is a playlist of all available Crio Pro WordPress Page Header tutorials available at this time, or If you’d like to learn more, please read our support article on working with page headers.