What Can You Do With GeneratePress Elements?

Replace GeneratePress elements with your own.

You can replace GeneratePress elements such as the page hero, sidebar, and footer, with layouts you build yourself using GenerateBlocks plugin. You can also make all kinds of content boxes and hook them into your website wherever you need them.

Design your own.

  1. Page Heroes.
  2. Sidebars.
  3. Footers.
A GeneratePress web page.
You can have different hero headers, sidebars, and footers on different pages and posts.

Insert dynamic content into GenerateBlocks layouts.

This lets you make one hero header for a whole category, but each post will automatically draw in its own post title. Dynamic blocks. And – Dynamic data.

Dynamic text in GeneratePress elements.
This is a GenerateBlocks hero header that automatically draws in the post title of whatever post it’s displayed on.

Other things you can do with elements.

  • Use the hook element to hook code or shortcodes into your website.
  • Control when sidebars and footers display, and set page width, using the layout element.
  • Merge the page header into the page, using the header element.

Some more important points.

First, there are four elements.

  • Block.
  • Hook.
  • Layout.
  • Header.
GeneratePress elements has four element types.
The four element types.

Block element is special.

Only one of the GeneratePress elements allows you to use the GenerateBlocks plugin. You can use the block element combined with GenerateBlocks plugin to build page elements such as a hero header or footer. Then, you dynamically draw the post title into your layout, or dynamically draw the post’s featured image into your layout. So, you could make a single page hero design that will draw in the correct post title and featured image for whichever post you use it on.

Hook element.

The hook element contains a simple text box. You type code and shortcodes into this text box, then select a hook from a list to insert that code into your layout. If you’re adding Google Analytics code use the wp_head hook.

Adding Google Analytics code using the GeneratePress hook element.
Adding Google Analytics code using the GeneratePress hook element.

Layout element.

You can show or hide page sections using the layout element options. For instance, you could display sidebars and footers on most of your blog posts, but not on posts in a certain category. You can also toggle individual page elements, such as the post title, on or off using the layout element.

Use the layout element to show or hide the sidebar and footer, disable the post title, and set the width of the content area.
Use the layout element to show or hide the sidebar and footer, disable the post title, and set the width of the content area.

More layout settings…

Layout element sidebar settings.
Layout element sidebar settings.
Layout footer settings.
Layout footer settings.
Layout element disable elements tab.
Layout element disable elements tab.
Layout element display rules. All elements have display rules.
Layout element display rules. All elements have display rules.

Header element.

You can merge the logo and navigation bar into your content. Do this when your page hero section has a background image. You use the merge header option to make the logo and navigation bar transparent, so you see the hero header’s background image behind the logo and navbar.

I used the GeneratePress header element to merge the logo and navigation into the header of this web page.
I used the GeneratePress header element to merge the logo and navigation into the header of this web page.
Merging logo and navigation bar into hero area background.
Merging logo and navigation bar into hero area background.

Display rules.

You can set display rules for all these elements. So, you decide which pages, posts, and categories your settings affect. Display rules let you have different page heroes for different posts, pages, or categories. All block, hook, layout, and header elements have display rules.

This green banner has a front page display rule, so it only displays on the front page.
This green banner has a front page display rule, so it only displays on the front page.

Things that confuse new users.

Only the block element has a WYSIWYG visual editor. And, the block element has ten sub elements, such as header, footer, sidebar, and post navigation.

You can make ten block elements using GenerateBlocks plugin.
You can make ten block elements using GenerateBlocks plugin.

There are two hook elements.

There is a hook element and a block hook element. The hook element is a simple text box that hooks code into your website. The block hook element is a WYSIWYG visual editor used to build things like call-to-action boxes. You then hook those elements into your website using display rules. Display rules let you display or hide any block hook element, such as your call-to-action box, on any combination of pages and posts.

The header element is only used to merge header.

When you use the header element, you’ll see a page hero option. This is a legacy element left over from WordPress 4. If you’re using WordPress 5 and the block editor, and you want to make a page hero, use the block element page hero option instead. The block element page hero lets you build your page hero element using the GenerateBlocks WYSIWYG visual editor. The block element page hero is much more powerful, and much easier to use, than the old header page hero option.