Header Builder

  1. Go to GhostPool Core > Template Editor and click Add New.
  2. Give your template a title and from the Template Settings panel on the right select “Header” from the Type dropdown, click the Publish/Update button to save these changes. Finally click the Edit with Elementor button.
  3. Now you can drag and drop elements from the elements panel on the left into the area marked “Drag widgets here”.
  4. Click the cog icon in the bottom left corner of the page to open the Post Settings menu.
  5. Click the Header Settings toggle to customize the display of the header.
  6. Save your template.
  1. To display your header template on your site go to GhostPool Core > Display Conditions and from the Header section select your template from the Template dropdown menu.
  2. If you also want to display a different header template when scrolling up or down the page select your template from the Scrolling Template dropdown menu.
  3. If you also want to display a different header template for smaller devices (tablets and mobiles) select your template from the Mobile Template dropdown menu.
  4. Finally you can select under what conditions this header template is displayed. By default it’s set to display on every page of your website but you can change it to display on only certain pages.
  5. You can also display another set of header templates on other pages. To do this click the Add Another button and select your new header templates and under what conditions these new header templates will be displayed.

If you imported your header templates from a demo you  will want to edit certain things such as the logo.

Changing Standard Header Logo

  1. Go to GhostPool Core > Display Conditions and under Header Templates and click the Pencil icon next to the Standard Template dropdown.
  2. In the Elementor editor click on the logo and load the settings on the lefthand side of the page.
  3. Click on the logo images to upload your own images for standard and retina devices.
  4. Adjust the image width and height if necessary or leave them empty to display the full size image.
  5. Click Update at the bottom of the page.

Changing Mobile Header Logo

  1. Go to GhostPool Core > Display Conditions and under Header Templates and click the Pencil icon next to the Mobile Template dropdown.
  2. Click the Responsive Mode icon at the bottom of the page.
  1. Next click the Tablet icon at the top of the page.
  1. Click on the logo images to upload your own images for standard and retina devices.
  2. Adjust the image width and height if necessary or leave them empty to display the full size image.
  3. Click Update at the bottom of the page.

And here’s the video…