Workflow for building a new empty website using GeneratePress

GeneratePress, the most important points.

The main components of a GeneratePress website.

• Site Library.
• Elements, Dynamic Blocks & Dynamic Data.
• Global Colors.
• Font Manager & Typography Manager.
• Modules.

Other miscellaneous features.

• Blog settings.
• Off canvas panel.
• Mobile navigation. Mobile Header.
• Header Presets.
• Sticky navigation.
• Disable Elements. Layout Element. Layout Metabox.

How I build a brand-new website using GeneratePress.

1. I import a starter site.
2. I change the global colors to match my client’s color scheme.
3. I compare the library template layouts to the content I want to display on my five main business pages.
4. I can use the page layouts that came with the site library theme as is. Or I can build a new set of pages.
5. If I don’t want to use the site library template pages immediately, I keep the page layouts but rename them and save them as drafts, not published pages.
6. After setting the page templates to draft, I make my five main business pages. Which are: home, about, services, contact, and blog.
7. I build my five business pages by copying and pasting the full pages or page sections I want to use, from the site library page templates into my own website pages.
8. I can source blocks from any site library theme, GenerateBlocks Pro patterns, or I can build my own blocks from scratch.
9. If I paste a block or page layout from any other site library theme, or from the GenerateBlocks pattern library. I reset the colors in that block using the global colors from my active theme.

I now Have a site that looks similar to the site library starter site I imported.

This is my starting point, I now have a fully functioning website. But I can change or customize any part of that site.

Page sections I can customize.

• Hero headers on the homepage and on the inner posts and pages.
• The 10 block element types (scroll down to see).
• The footer.
• The blog listing page.
• The header, where the logo and navbar display.
• Build an off-canvas panel to use as a mobile menu.
• Build a very simple mega menu.
• Change the global color scheme.
• Change the font family used.

The four Element types.

• Header Element. Now only used to merge header with content.
• Hook Element. Used to hook code into your website. This is not the same as a Block Hook Element.
• Layout Element. Used to create layout options such as content area width with display rules.
• Block Element. There are ten block element types. Which I will list now.

The Block Element types are.

• Hook.
• Site Header.
• Page Hero.
• Content Template.
• Post Meta Template.
• Post Navigation.
• Archive Navigation.
• Right Sidebar.
• Left Sidebar.
• Footer.

Block Elements that have Templates.

Most block elements replace an existing part of your website such as the page hero header, or footer.

The block elements listed below have built in templates that you can use to replace, for instance, your page hero or site footer with just a few clicks.

• Page Hero.
• Content Template.
• Post Meta Template.
• Post Navigation.
• Archive Navigation.
• Footer.

Experiment with the block element templates to learn how each block element works. You can use display rules to make a page hero template for all blog posts or for the posts in just one category. The content template replaces the blog listing page layout.

The Block Element is one of the most useful features in GeneratePress and is well worth learning.

The two hook elements are easily confused.

• The hook element is used to hook in Google Analytics code.
• And the block element. Element type. Hook. Lets you build block layouts such as call to action boxes. Then hook those block layouts into your site wherever you need them.
• By combining block elements with display rules you can have different hero headers or footers on all posts in a specific category.

GeneratePress modules. You can enable or disable any of these modules.

• Backgrounds.
• Blog.
• Copywrite.
• Disable Elements.
• Elements.
• Menu Plus.
• Secondary Nav.
• Site Library.
• Spacing.
• WooCommerce.

If a feature seems to be missing from your settings make sure have enabled that module.

Understanding Dynamic Blocks & Dynamic Data in GeneratePress and GenerateBlocks.

Dynamic blocks and dynamic data are only available inside an element. You cannot use dynamic blocks and dynamic data anywhere else.

There are two places to access dynamic blocks and dynamic data.

When you place a GenerateBlocks block, inside an element, the toolbar gets a new tool. This tool has an icon that looks like a stack of disks and is called the dynamic options tool.

Dynamic data via the dynamic options button.

When used in a block element, the headline and container blocks have a button that looks like a database icon. The button looks like a stack of disks.

This dynamic options button enables you to add place holder text to your block then on the live site the placeholder text is swapped for some form of dynamic content.

Dynamic data includes post title, categories, tags, and post author name.

Inserting featured images via container background images.

When you place a container inside an element the toolbar above the container gains a dynamic background image option that can be used to swap the place holder image for the post’s featured image.

Dynamic Blocks.

GenerateBlocks has two fully independent dynamic blocks. These two blocks only become available when you’re editing a GenerateBlocks block inside a GeneratePress element.

The dynamic blocks are the Dynamic Image block and the Dynamic Content block. The icons for these blocks look like the letter p inside a circle.

The dynamic image block enables you to add a featured image or author avatar to block elements.

The dynamic content block allows you to add post content, post excerpt, term description and author description to Block Elements.

These two blocks, with the p icon, are useful when building archive listing pages. You use the element type content template to build archive listing pages.