GeneratePress 文档

Sticky Navigation

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

Our Menu Plus add-on adds some really cool sticky navigation options inside Appearance > Customize > Layout > Sticky Navigation.

You can choose to activate your sticky navigation on mobile, desktop, both or disable it completely.

Sticky Navigation Transition

The Sticky Navigation Transition option has 3 choices:

Fade – your sticky navigation will fade in once you start scrolling.Slide – your sticky navigation will slide down once you start scrolling.None – there is no transition, as you start scrolling your navigation will simply stick to the top of your screen.

Hide when scrolling down

Checking this option will hide the sticky navigation unless you』re scrolling up towards the top of the site. This can save you valuable screen space, especially on mobile devices.

Sticky Navigation Logo

You can upload a logo specifically for sticky navigation.

Menu item height

You can also change the height of your navigation when it becomes sticky using this option.

Widget Padding

Note: These options require the Spacing add-on in GP Premium.

You can adjust the spacing inside your sidebar widgets (padding) in Customize > Layout > Sidebars.

You can adjust either four sides of the widget, and the value is in pixels.

Note that this can be adjusted separately for desktop and mobile by using the toggle buttons.

Footer Widget & Footer Padding

Note: These options require the Spacing add-on in GP Premium.

We can adjust the padding of the footer widget area and the footer area (copyright) in Customize > Layout > Footer.

Footer Widget Area

You can change the amount of space surrounding your footer widgets using these options.

Note that this can be adjusted separately for desktop and mobile by using the toggle buttons.

Footer (Copyright area)

The copyright area also has padding options you can adjust.

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:

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' );

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

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

Changing the Copyright Message

You can change the copyright message in the footer of your website using our Copyright add-on in GP Premium, or using a function.

Using the Copyright add-on

First, make sure the Copyright add-on is activated under Appearance > GeneratePress

You can find the copyright setting in Customize > Layout > Footer.

Using a function

If you don』t have GP Premium, you can use a function instead. This function requires at least GeneratePress 1.3.42.

add_filter( 'generate_copyright','tu_custom_copyright' );
function tu_custom_copyright() {
?>
Your new message in here. You can add anything you want, including PHP and HTML.
<?php
}

Learn how to add PHP here.

Removing the entire footer bar

You can remove the entire footer area with a simple function:

add_action( 'after_setup_theme', 'tu_remove_footer_area' );
function tu_remove_footer_area() {
remove_action( 'generate_footer','generate_construct_footer' );
}

Learn how to add PHP here.

Header Padding

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

You can adjust the padding inside your header container in Appearance > Customize > Layout > Header.

The value you see is in pixels, and controls the amount of space between the edge of your header container and content inside of it:

Note that this can be adjusted separately for desktop and mobile by using the toggle buttons.

Using a Different Menu on Mobile

In some cases, you may want to use a different menu on mobile than you use on desktop.

To do this, we』ll need to activate our Mobile Header feature.

Once you』ve turned on the Mobile Header, we need to create a new menu location. We can do that with this function:

add_action( 'init', function() {
register_nav_menu( 'mobile-menu', __( 'Mobile Menu' ) );
} );

Then we have to tell the Mobile Header to use this new menu location with a filter:

add_filter( 'generate_mobile_header_theme_location', function() {
return 'mobile-menu';
} );

These functions can be added using one of the methods explained here.

Now we can go into Appearance > Menus and create a new menu for our mobile site.

Once you』ve created your menu, you can apply it to the new Mobile Menu menu location.