You can find the Page Builder examples used in this documentation on GitHub in the pagebuilder-examples repo. The repo contains three types of examples:
- Custom content type modules
- Extension modules for existing content types
- Example code for how-to topics
Custom content type modules
The Example directory on the repo provides custom content-type modules for you to download and install. The Page Builder team members created these modules to serve as examples for learning. They are not fully tested or guaranteed to work perfectly. However, we will do our best to improve these examples and keep them updated with the latest releases of Page Builder.
- PageBuilderQuote — Create by Bruce Denham. This module shows you how to create a content type for a customer testimonial page. This is the completed Quote module featured in the Create a content type tutorial.
- PageBuilderGrid — Created by Dave Macaulay. This module shows you how to create a content type that recreates the layout of the Magento Luma-themed home page using a grid structure with grid items.
- PageBuilderFaq — Created by Igor Melnikov. This module shows you how to create a content type for an FAQ page that uses an accordion for the questions and answers.
Extension modules for existing content types
- PageBuilderExtensionBanner — This Banner extension module shows the basic pattern for customizing existing content types using appearances.
Additional extension modules
- PageBuilderLazyLoading — This module shows how to add lazy loading behavior to the Image content type. For this example, we use the lazysizes loader. Created by @bruce on #pagebuilder.
- DeactivatingPageBuilder — This example module shows you how to disable Page Builder for a particular page in Magento, specifically Pages, Blocks, and Dynamic Blocks. Created by @bruce on #pagebuilder.
- PageBuilderExtensionBaseForms — This module shows you how to remove fields and fieldsets from Page Builder’s built-in forms. Created by @bruce on #pagebuilder.
- PageBuilderExtensionText — This module shows you how to customize the Page Builder’s Text toolbar, integrate your own theme’s typography, and add TinyMCE’s
codeplugin to the toolbar so you can view the HTML code directly. Created by @bruce on #pagebuilder.
- PageBuilderExtensionSlider — This module shows you how to add
centerPaddingsettings from the slick carousel used by the Slider. Create by @bruce on #pagebuilder.
Example code for how-to topics
In Progress. The how-to directories in the repo correspond to the how-to topics in this documentation. Each how-to directory provides the files and code changes featured in the how-to topics.
For example, the topic Add a custom toolbar, has a corresponding directory within the pagebuilder-examples repo called how-to-add-custom-toolbar. This directory provides the files with the code changes you need to make in order to add a custom toolbar to the
Assuming you have Page Builder already installed, you can install the example modules as follows:
Clone the pagebuilder-examples repo:
git clone https://github.com/magento-devdocs/pagebuilder-examples
Navigate to your
Copy or symlink the
Exampledirectory from your local
pagebuilder-examplesclone into your
ln -s <Relative_route_to_cloned_Example_directory>
Enable the modules using the
Navigate to a Page Builder instance to ensure the example content types appear in the Page Builder panel, as shown here: