Hello everyone, the AZLifeMastery you are reading is made from the Generatepress theme; this is my favorite theme after going through countless other themes on the WordPress website-making platform.
In terms of SEO standards and page loading speed, this theme is ranked at the top of the world’s top themes in terms of small capacity and website loading speed.
When you use this theme, you have a huge benefit in Google search engine optimization or other words; you have the advantage to put your website on the top page of Google search.
To make a website optimized by google search engines and user-friendly, the website theme is an indispensable issue and can be quite important, one of the big factors.
So in this article, I would like to share the usage and installation of this theme so that you can add skins to choose from for yourself!
First, we need to learn how to install web themes.
Since the launch in mid-2014, GeneratePress Theme has more than 3 million downloads and 5/5 stars rating on WordPress.ORG.
What are the advantages of GeneratePress Themes:
GeneratePress is a very lightweight WordPress theme designed with a focus on speed and ease of use. Performance is important; that’s why GeneratePress install is less than 15kb (gzip archive).
GeneratePress takes full advantage of the block editor (Gutenberg), giving you a lot of control when writing content. The theme is fully compatible with page builders, including Beaver Builder and Elementor.
Thanks to the focus on WordPress coding standards, the theme is compatible with clean code plugins, including WooCommerce.
GeneratePress is responsive, uses standard HTML / CSS, and has been translated into more than 25 languages by the user community. The theme has many outstanding features such as microdata compatibility, 9 widget, 5 menus, 5 sidebar layout, drop-down menus (click or hover), and default menu color.
- Extremely light and fast loading: only 912 kb
- Schema markup standard (SEO) code
- Compatible with most Page Builder: is one of the few themes that every Page Builder recommends.
- Highly customizable – Supports Live Customizer drag & drop.
- Great support for Hooks and Filters for you to customize – extend the functionality
- Great support: you can sign up for free on the forum and ask anything; experienced members and the author will support 24/24!
Website: GeneratePress 2021
Compared with the famous Genesis Framework, GeneratePress is quite similar in design and features but much easier to use; the support and documentation are also friendly to free and premium users.
GeneratePress’ Premium Addons also brings powerful features that perhaps StudioPress (Genesis) will have nothing to counterbalance shortly!
I bought the license and used this theme from 2018:
How to Use GeneratePress Layout
This article will show you the basics of using the GeneratePress theme and the Premium Addons suite.
For GB members, you will have a detailed Case Study AZ guide on the Club membership page shortly!
Install and use GeneratePress Layout
Like most other Free Themes, you can download GeneratePress directly on WordPress.ORG or Install and Update automatically from WP Repository.
Go to Themes -> Add new, type GeneratePress to install and activate:
Once activated, you should go to Appearance -> GeneratePress to see through:
Here introducing GeneratePress Premium Modules, you will need to install GP Premium plugins to have these addons. The free GeneratePress theme only supports customization on Customizer.
Customize GeneratePress via Customize
Open Customize (Appearance -> Customize).
The Customize theme includes many items similar to most other themes. We’ll take a look at the customizations that are specific to GeneratePress:
First of all, look at the 6 customizations that are commonly found in each theme:
- Site Identity: Change Site Title, Tagline, Allow Display or Not. This section also supports changing the logo for and site icon (Favicon).
- Color: choose color for text, background and link (default – hover – visited).
- Typography: choose fonts – font size & style. Supports most popular Google Fonts.
- Menus: Menu settings, GeneratePress supports a Menu location as the Primary menu.
- Homepage Settings: select the page as the homepage and blog page. This you can choose from in Dashboard Settings -> Readings.
- Advanced CSS: Add CSS code if you want to customize the design.
6 Options above are nothing special than other free themes if you only use the Free version of GeneratePress. We also have 3 Options to help GeneratePress score:
GeneratePress Widgets: Site side sections
GP supports 5 areas for Widgets:
This is the area located on the Primary Menu (to the right of the Logo) – suitable for us to place the Icon links to social networking accounts or the Call to Action button:
This area is similar to other themes:
But, we can choose to display or not (0 widgets) and choose the number of columns to display right in the editor of the Page. The default will be 3 columns (3 widgets):
As the area right below the Footer Widgets (under the black part), you can write a note like yourself:
The top area of the Header, great for placing a submenu (top menu) or notification bar (such a promotion):
This section has only 2 simple options to speed up page loading. GeneratePress has integrated the entire library of FontAwesome to use icons. Here, you can only load font icons available on your site instead of loading the entire FontAwesome library.
The other option is to cache dynamic CSS in the browser to loads the site faster from the second time.
The Premium version also has an option that allows you to compress CSS and JS in this section.
Layout: layout that divides the site column
This section allows users to customize the Site Container’s width by dragging and dropping, as well as dividing the layout size into two separate columns (Content and Sidebar) or full form.
Also, in each section, there are options to re-layout. This is the section where you have to work a lot to choose the best layout!
The Footer section also has an option to number Widgets displayed in the Footer Widgets area introduced above. This option applies to all Pages of the Site, while the page editor’s option, as mentioned above, applies only to that page.
How to use GeneratePress Premium Addons?
This is the main part of the tutorial. With Premium Addons, Generatepress theme will be like a Ferrari with a rocket engine !!!
GeneratePress Premium currently has 15 add-ons that allow us to customize our teeth:
We will go through each of the Addons and walk through the most powerful Addons to build complex sites. But first, need to install and activate them already:
Install and activate GP Premium Addons
As mentioned, GeneratePress Premium is a set of Addons to enhance the GeneratePress theme’s functionality, so we upload and install from the Plugins section, not the Themes section.
After going to Plugins -> Add New to upload, install and activate. We go back to the configuration tab of GP (Appearance -> GeneratePress) to activate the addons and enter the key to auto-update (you may not enter the key and still use the full feature):
Note that you can uncheck the Addons you don’t want to use. Only WooCommerce Addons can be activated only after you have installed and activated the WooCommerce plugin.
On the right sidebar, there are also Export, Import, and Reset Settings for addons.
We will see the functionality of these Addons later in the article.
First, let’s go through the Site Library section to see what demos GeneratePress Premium has available for us:
Import Demo Templates for GeneratePress
Currently, GeneratePress Premium integrates us with more than 20 Templates (still increasing every month). There are 3 options when building Templates for GeneratePress, namely using Page Builder Elementor – Beaver Builder or using GeneratePress’ Page Builder itself (namely Sections Addons).
Depending on which Page Builder you prefer to use, choose the Import Templates you want. If you notice, the Templates for each Page Builder are quite similar, showing the relatively similar strength of the three in building basic themes.
To import demo templates, we hover over the corresponding demo, select Details to display Popup Import:
Demo information, built-in plugins, and used Page Builder are fully displayed in this Popup. Click Get Started to get started; a Backup Options button will appear for you to backup and download (Save) the existing Options; this step is crucial because if we are not satisfied with the new demo, it can be removed and restored. Theme Options again did not import the demo.
After Backup Options, we will do the next step, which is Import Options of the Demo to import:
Next is the Import demo contents option, which includes Content, Widgets, Menus, Site Options, and the demo’s built-in plugins. If you prefer a clean site to install by yourself, click Skip to skip this step.
But usually, we should Import content so that it is easy to have the structure available to start writing content, later deleting the demo content and editing the Options is not difficult. Remember to tick the check-box “I understand …” and click the Import Content button to proceed to Import:
Wait for a while; note that this process is fast and slow depending on the loading speed of Hosting. In general, importing a demo of GeneratePress, OceanWP, or Astra is quite quick because the data is very light, not sluggish like themes in ThemeForest (especially The7 and BeTheme).
When finished, click the View site button to experience the demo.
Use GP Premium Addons
We need to note that the Addons will integrate the feature into Customize. When installing and activating these Addons, we will add more customizations in each part than when using only GeneratePress free theme.
We’ll go through each of the Addons and then use some of the most prominent Addons to create responsive pages. First of all, introduce the simple Addons first:
1- Copyright Addons: Copyright idea:
2 & 3 & 4- Color & Typography & Background: Color – Text – Background:
These add-ons allow you to customize the Color, Typography, and Background (color & background image) of all areas and elements on the layouts:
Like most modern themes, GeneratePress has Google Fonts built-in to choose Font Family for each element right in Customize easily.
This Addon allows us to create and customize a 2nd Menu, usually located under the Main Menu or placed in the Sidebar:
Menu Plus allows us to create Sticky Menu, add a Logo to Menu. It also supports you to create SlideOut Menu with full-motion effects from Main Menu. You can choose to display on Desktop, Mobile or both:
An Addons are great for creating Page Headers for all pages or a few specified pages.
You can also create separate Page Headers for each page. In addition to the ‘classic’ Page Header form commonly found in Genesis child-themes, GeneratePress allows you to create modern Hero-style Page Headers – Image / Video Header:
Another difference in Page Header addons is that you have to create it in Dashboard -> Appearance -> Elements. (Old versions will be different, but this is with current version 1.91) Click Add New to create a Page Header:
After creating and customizing, Publish is complete. We’ll go to the Global Locations section to specify which types of pages will use Page Headers.
8- Blog Addons: Optional blog page
Blog Addons allows us to choose a layout to display articles in column form (magazine) or famous masonry format.
It also allows customizing featured image size and alignment, etc.
9- Sections Addons: The selection to write articles
These are the Addons that help GeneratePress Premium be seen as a Page Builder, creating themes similar to Beaver Builder and Elementor.
To use Sections Addons, when we open the Page to Edit or create a new one, we must choose to use Sections. Note, when using addons for any page, the other Page Builder will automatically invalidate because Sections Addons and Page Builder cannot be used together with another Page Builder on the same page.
GeneratePress calls the Sections Addons “A straightforward Page Builder” and recommends that if you are already using Elementor or Beaver Builder (and other famous Page Builders), you don’t need to activate this.
Of course, if you want to create extremely lightweight Templates, why not make use of it!
10- Spacing Addons: Adjust the distance width
If we only see the name, we will easily despise these Addons. But it is a ‘quality’ feature that rivals Genesis, Astra, OceanWP can not compare with GeneratePress.
Spacing Addons allows you to easily resize (width – spacing, margin & padding) Layouts and all the blocks on it without fear of layout rupture. You can customize both on Desktop and Mobile!
It’s on Customize -> Layout:
We are often helpless when we want to change the theme’s layout size because the author builds each theme on a standard & fixed Grid to satisfy well for desktop, tablet, and mobile devices. But GeneratePress allows us to do very flexible customization.
11- WooCommerce Addons: For 1 site selling products and services
As the name implies, these add-ons allow us to customize WooCommerce Product Page and Single Product pages. It supports custom layout, typography, color …
12- Import & Export Addons: Import and export extensions
These add-ons help users import/export the site options, very useful in case you want to clone your site to another hosting.
13 – Hooks Addons: An extra code that extends theme functionality
For advanced users who want to add content to the theme’s areas (where hook declaration is available). This feature is quite similar to the Genesis Framework but easier to use.
To use Hooks, go to Appearance -> Elements – Choose Hooks
14 – Disable Elements: Turn off, and on certain components you want
Help users turn off some parts such as Header, Content Title, Footer … on some optional pages. This feature is integrated into both the page editor and Customize:
15- Site Templates: A template theme from a group of authors is available
These are the Addons that help us to import Demo from the author’s Server!
About speed Generatepress:
If this article is helpful for you, buy this theme and don’t forget to share it with those who need this information. Thank you for being here, good luck!