This repo is a collection of extended and custom content type modules created to teach you how to develop for Page Builder. The modules are designed to help you learn by example, and teach you best practices for extending and creating new content types for Page Builder.
NOTE: The Page Builder team members created these modules for educational purposes. 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.
-
Banner Extension — This module shows you how to customize an existing content type: the Banner. This is the completed module featured in the documentation topic Extend an appearance. Created by Bruce Denham.
-
Banner Appearance — This module shows you how to add a new appearance to the Banner. This is the completed module featured in the documentation topic Add appearances. Created by Bruce Denham.
-
Forms Extension — This module shows you how to remove fields and fieldsets from Page Builder's built-in forms. Created by Bruce Denham.
-
Button Extension — This module shows how to add custom button types. Created by Bruce Denham.
-
Columns Extension — This module shows how to use breakpoints to control the responsive layout of columns. Created by Bruce Denham.
-
Deactivate PageBuilder — 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 Denham.
-
Image LazyLoading — 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 Denham.
-
Slider Extension — This module shows you how to add
centerModeandcenterPaddingsettings from the slick carousel used by the Slider. Create by Bruce Denham. -
Text Extension — 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 Denham.
-
Custom Quote — This module shows you how to create a content type for a customer testimonial. This is the completed Quote module featured in the documentation tutorial: Creating content types. Created by Bruce Denham.
-
Custom Homepage Grid — 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. Created by Dave Macaulay.
-
Custom FAQ — This module shows you how to create a content type for an FAQ page that uses an accordion for the questions and answers. Created by Igor Melnikov.
The best way to explore and use these example modules in Page Builder is to clone this repo into the root of your Magento instance, then symlink one or more modules into the app/code/ directory, and run setup:upgrade to install. Step-by-step instructions follow.
-
Clone this repo (
pagebuilder-examples) to the root of your Magento instance:git clone https://github.com/commerce-docs/pagebuilder-examples.git
-
Navigate to the
app/code/directory (or create one as needed), then use the symlink command to add one or more of the example modules you want to add to your instance. For example, to install theColumnsmodule, use the following command from within theapp/code/directory:ln -s ../../pagebuilder-examples/Columns
This creates a symlink in
app/code/calledColumns, which references thepagebuilder-examples/Columnsmodule.To unlink a module: Use the
unlink(macOS) orrmcommand, followed by the path to the symlink. This example unlinks theColumnsmodule from theapp/code/directory:rm Columns
Then you can run
bin/magento setup:upgradeagain to remove it from your Magento instance. -
From the Magento root directory, run the
setup:upgradecommand to install and enable the symlinked modules:bin/magento setup:upgrade
-
Navigate to a CMS page and start using the module(s).
You can join our #pagebuilder channel, within magentocommeng.slack.com, to post your questions to the Page Builder community.
We encourage and welcome you to help us keep these examples current by submitting Issues and Pull Requests. We also welcome your feedback and ideas on other code examples you would like to see added to this repo.