Adding a Container Wrapper

By default, there』s no element that wraps your entire container.

A container wrapper might be useful if you』re wanting to place a border or shadow around your entire website, and don』t want to apply it to individual elements (header, widgets, content area etc..).

To achieve this, you』ll need to use the Elements module.

First, create a new Hook Element.

In your hook content, add the following HTML as your content:



Set the hook to after_footer, and set your Display Rules to the entire site.

Now you can target this class, and do whatever you want to it, like add a shadow:

.site-wrapper {
box-shadow: 0 0 5px 5px rgba(0,0,0,0.1);
}

Learn how to add CSS here.

Note: This kind of layout is typically for contained websites, so the following options should be set:

Customize > Layout > Container > Content Layout: One containerCustomize > Layout > Header > Header Width: ContainedCustomize > Layout > Primary Navigation > Navigation Width: ContainedCustomize > Layout > Footer > Footer Width: Contained

Off Canvas Panel Overview

Note: This option requires the Menu Plus add-on in GP Premium.

Starting in GP Premium 1.8, the former Slideout Navigation panel is replaced by the off canvas panel.

First, make sure there is a menu assigned to Off Canvas Menu under menu settings

You can choose to activate your off canvas panel on mobile, desktop, both or disable it completely.

Style

Slide – This is the typical slideout navigation. You can also choose the side it slides out and where the close button is positioned.

Overlay – This is the full-screen overlay style off canvas panel that has been increasingly popular nowadays. When activated, you can choose Set Overlay Defaults and let GP style it for you. These settings can also be changed in Colors > Off Canvas Panel and Typography > Off Canvas Panel.

Menu Item Height

Set the menu item height for the off canvas panel.

Off Canvas Panel Widget Area

The off canvas panel has a widget area, which you can add widgets to in Appearance > Widgets or Customize > Widgets.

You can simply use for widgets, and leave out the navigation completely if you like!

Use Off Canvas Menu Only

Some users wish to use off canvas menu only on desktop. This can be done with the simple method below:

First, create a menu with the desired items and assign it to Off Canvas Menu in theme locations.

Then create an empty menu and assign it to Primary Menu in theme locations

Then you can head to navigation location to adjust the position of the toggle.

Empty Off Canvas Navigation

If you have activated the off canvas navigation but the menu items aren』t showing up:

Then make sure you have a menu assigned to off canvas menu in Theme Location.

Header Layout Overview

Header Presets

Header Widths & Alignment

Navigation as a Header

Header Padding

Mobile Header

WooCommerce Overview

GP Premium has an awesome WooCommerce (WC) add-on which gives you layout, color and typography options for your WC elements.

In order to activate the WC add-on, you must have WC installed and activated. Then you can activate the add-on in Appearance > GeneratePress.

Layout

Most of the WC options are layout options, which you can find in Customize > Layout > WooCommerce.

General

Display cart in menu – Adds a cart icon with the total price of your items in the primary navigation.You must have a theme location set for your primary navigation.

Display mini cart sub-menu – Show a mini cart when the icon above is hovered.

Menu Item Icons – Choose to use cart, bag or basket as the icon.

Menu Item Content – Choose to display the amount of number of items.

Display breadcrumbs – turn the WC breadcrumbs on or off.

Shop

These options relate to your main shop/product archive pages.

Sidebar layout – Choose the sidebar layout of your shop.

Product columns – Choose the number of columns to display your products in. Use the toggle to set specific number for mobile.

Image alignment – Choose the product image alignment. You typically only want to align it to the left or right if your product columns are set to 1.

Products per page – Choose the number of products to display on each page.

Text alignment – Choose the alignment of the product content (title, price, description etc..)

Display cart panel on add to cart – Show the cart panel when add to cart is clicked.

Display page title – Choose to display the page title.

Display product results count

Display product sorting

Display product image

Display secondary product image on hover – If you have more than 1 image set for your product, this option can show the second image when you hover over the primary image.

Display product title

Display sale flash

Sale flash over image

Display rating

Display price

Display add to cart button

Display short description

Single product

These options relate to your single product template.

Sidebar Layout – Choose the sidebar layout of the single product pages.

Product Image Area Width – Set the width of the product image area.

Display add to cart panel on scroll – Display the sticky cart panel when scroll.

Display quantity buttons

Display Sale Flash

Display product tabs – Show tabs which hold your item description, reviews, specs etc..

Display related products – Show the products related to the currently viewed item.

Display upsell products – Show the upsell products.

Related/upsell columns – Choose the number of columns to show the related/upsell products in.

Display product meta data – Show the meta for the current product (category, SKU etc..)

Display short description – Show the short description below the product title

Checkout

Distraction-free mode – this option disables unnecessary elements on your checkout page, including the sidebars, footer widgets and sticky menus.

Colors

You can adjust your WC colors inside Customize > Colors > WooCommerce.

Typography

Typography options for WC can be found in Customize > Typography > WooCommerce.

Currently, you can edit the product title font weight, transform size and the related/upsell title font size.

Promotional video

How to Create a Page Hero

The Header element module is one of the most popular features of GP Premium and the amount of options available can definitely be overwhelming at the beginning. If you are struggling to make a page hero, the following steps should provide a quick guideline on how to get started.

For detailed explanation of each option, please see this article.

For examples of page heros, please see this article.

Step 1: Add the Content

First, decide whether if you want some content in the page hero or not.

If you only want to use the background image without adding any content, simply add some HTML comments:

If you do wish to add some content, the content box accepts any HTML (headings, paragraphs etc.), shortcodes (slider, contact forms etc.)

A common example for the front page would be a catch phrase to capture your audience:

The perfect lightweight theme for your next project.

For posts and pages, you can take advantage of our template tags to output the things like post title and entry meta:

{{post_title}}

{{post_author}} {{post_date}}

You can then use the color options to set the text, link and link hover colors of your content.

Step 2: Choose a Background

There are basically 3 choices for the background:

Solid Color: If you only want a solid color behind your content like this example, simply select the desired color in the background color option.

Featured Image: This option uses the Featured Image added in the pages or posts as the background image.  A very common choice the page hero of posts.

Custom Image: This option allows you to upload a custom image specific for this page hero.

If you choose either the Featured Image or Custom Image option above, you will see the following additional options:

Background Image PositionParallaxDisable Featured ImageBackground Overlay

Step 3: Set the Width

The width property of the page hero is determined by the Container and Inner Container options.

Container

Full: The page hero will span the entire width of the screen.

Contained: The page hero will be the same width as the container.

Inner Container

Full: The content will span the entire width of the screen.

Contained: The content will be the same width as the container.

Step 4: Set the Height

The height property of the page hero, or how much the background or background image shows, is determined by the top and bottom padding options.

Step 5: Position the Content

The horizontal position of the page hero content is determined by the horizontal alignment option:

The horizontal position can also be fine tuned by using the left and right padding options:

Similarly, the vertical position can be fine tuned by using the top and bottom padding option:

Optional Step: Merge with Site Header

If you wish to merge the page hero with the site header and navigation like this:

Head to the Site Header tab and select either Merge or Merge on Desktop Only. Then the additional options will appear for further customization:

Full ScreenOffset Site Header HeightHeader BackgroundSite LogoNavigation LogoNavigation LocationNavigation Colors

Using the WordPress Menu Builder

WordPress has an awesome menu builder built in, allowing you to create awesome menus you can drag and drop to sort, and drag to indent items you wish to turn into a sub-menu.

This article goes over some of the functionality of the menu builder.

Create a new menu

How to add pages to your menu

Creating a drop down menu

Creating a drop down menu with custom links

Do you want your parent page to not link anywhere? Use custom links to achieve this!

Hint: If you don』t want your item to act like a link, remove the # once it』s added to the menu (the # is necessary to add it in the first place).

Setting a theme location

When Secondary Navigation Add-on is activated

When Menu Plus Add-on is activated

Adding Custom Classes

Opening in a New Window/Tab

generate_disable_customizer_shortcuts

The generate_disable_customizer_shortcuts allows you to disable the customizer shortcuts.

To disable them, add this PHP snippet:

add_filter( 'generate_disable_customizer_shortcuts', '__return_true' );

Header Element Overview

The Header element replaces our old Page Header module. This element has most of the same options as the old Page Headers. If you need help migrating from your old Page Header, see this article.

For examples of page heros, please see this article.

For a step by step guideline of creating a page hero, please see this article.

generate_elements_show_object_ids

The generate_elements_show_object_ids filter allows you to activate the ID next to the title in the Display Rules.

To enable this, add the following PHP snippet:

add_filter( 'generate_elements_show_object_ids', '__return_true' );

Customizer Shortcuts

Starting in GP Premium 1.8, shortcuts to related panels have been added on top of each customizer panel.

For example, the shortcut allows us to jump from Layout > Header to Colors > Header or Typography > Header with a single click:

After you arrive at the next panel, you have the option to either go back:

Or close it to see more options to go to the next panel: