/pagebuilder-examples

Page Builder example modules for you to download, install, and learn from.

Primary LanguageHTMLOtherNOASSERTION

Page Builder Examples

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.

Extension Modules

Custom Modules

  • 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.

Installing the example modules

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.

  1. Clone this repo (pagebuilder-examples) to the root of your Magento instance:

    git clone https://github.com/commerce-docs/pagebuilder-examples.git
  2. 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 the Columns module, use the following command from within the app/code/ directory:

    ln -s ../../pagebuilder-examples/Columns

    This creates a symlink in app/code/ called Columns, which references the pagebuilder-examples/Columns module.

    To unlink a module: Use the unlink (macOS) or rm command, followed by the path to the symlink. This example unlinks the Columns module from the app/code/ directory:

    rm Columns

    Then you can run bin/magento setup:upgrade again to remove it from your Magento instance.

  3. From the Magento root directory, run the setup:upgrade command to install and enable the symlinked modules:

    bin/magento setup:upgrade
  4. Navigate to a CMS page and start using the module(s).

Contact us on Slack

You can join our #pagebuilder channel, within magentocommeng.slack.com, to post your questions to the Page Builder community.

Feedback

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.