Skip to main content

Usage

PageBuilder: Backend (Strapi Plugin)​

What is the PageBuilder: Backend?
The PageBuilder: Backend is a strapi-plugin (@am-gmbh/pabu-strapi-plugin, shortly called pabu) that enables your Strapi application to fulfill the role as the backend for the Pagebuilder: Frontend (Next.js).

In comparison to the frontend the pabu-plugin is used to setup your environment and configure the behaviour and appearance of your site.

That means that after initial configuration, a typical content-manager does no longer have to work and edit content inside of Strapi and is only required to login to Strapi if the design or configuration of the site changes.

The pabu-plugin bundles multiple features like customFields and various specific content-types that contain the content and configuration (pages, content-elements, UI-elements) of your website buildt with the PageBuilder. The PageBuilder currently only supports these exclusive content-types.

Any existing logic inside of your Strapi application (contentTypes, controllers, ...) can be used in parallel to the features of the pabu-plugin.

💡 With exception to configuration of the store, contentElementSettings, cmsSettings and global the content of the pabu-plugin (pages, media, navigation, footer, ...) should only be used via the API by using the PageBuilder: Frontend.

❗ Manually changing data of the PageBuilder from within Strapi or directly in the database can lead to data loss and a malfunctional state of your application!

Usage​

The @am-gmbh/pabu-strapi-plugin-plugin is the backbone of the PageBuilder. While the main functionality, the backend logic and API it provides, is not visible from within Strapi Admin, the configuration for the PageBuilder: Frontend is done within the store, contentElementSettings, cmsSettings and global content-types.

💡 Content-Types that needs to be edited from within Strapi Admin are visually highlighted in the Strapi Admin.

The @am-gmbh/pabu-strapi-plugin will provide the configuration as API, .json-Files or minified CSS (that is (re)generated on every configuration change) for the PageBuilder: Frontend.

💡 Make sure to always reload the frontend if you have configured content-types inside of Strapi. Otherwise you might not see the (re)generated styles.

Developer Documentation (Strapi Plugin)​

For additional informations and more technical insights on how the different features of the pabu-plugin work, we strongly advise you to have a look into the separated Strapi Plugin Documentation

PageBuilder: Frontend (Next.js)​

What is the PageBuilder: Frontend?

The PageBuilder Frontend is a Next.js project currently using nextjs v14 and the pages router instead of the app router. If you want to learn more about how Next.js works, you can refer to the official Next.js documentation.

💡 Understanding how Next.js works is not mandatory if you do not intend to modify the code of this project.

This frontend serves as the UI for the backend service, which uses Strapi with the PageBuilder plugin installed.

The goal of the PageBuilder Frontend is to enable end users to create and configure web pages easily in a WYSIWYG (What You See Is What You Get) style, without needing to access the Strapi backend service.

💡 The PageBuilder Frontend will not function as a standalone solution. It requires the backend service to be running and connected.

Usage Frontend​

After starting the frontend, you should be able to access the login page at http://127.0.0.1:3000/cms/login. The login form will only work if the backend is also running. You can sign in with the same credentials that are used for the Strapi admin panel.

Once signed in, you will see a toolbar at the top of the page called the CmsTopBar. This top bar indicates that you are logged into the PageBuilder Frontend and contains the contentmanager main navigation (a dropdown autocomplete with all existing pages) and other action buttons like edit page or add page.

First Steps​

Here are some initial tasks you can perform:

  • Create the navigation
  • Create the footer
  • Fill the root page with content
  • Create other pages
  • And so on...

It is highly recommended to look into the content manager user documentation that was provided to you.

Features Frontend​

Pages​

  • Draft / Publish

    • Each page has two versions: a draft version and a published version. The published version is live and available at the URL, while the draft version is only visible to the content manager after clicking the edit button. This allows you to save a modified version of a page without publishing it immediately.

  • Edit Mode / Preview Mode

    • While editing a page, you can toggle to preview mode to see how the currently edited page would look to a user.

  • Content Elements

    • Content elements are various components that display content on each page. The content manager can choose what a content element should display and where it should be placed.

  • Page Settings

    • General Page Settings
      • Name, URL, show/hide navigation, show/hide footer
    • SEO Settings
      • Meta tags for configuring SEO for each page individually
  • Create and update the navigation with an easy-to-use navigation editor. The navigation is created once and displayed on every page configured to show it.
  • Edit the footer region in edit mode. The footer is created once and displayed on every page configured to show it.

Forms​

  • Create and update forms using a forms editor. Place the created forms on any page you create.

Media Manager​

  • The media manager handles all uploads. You can upload various file types and select them in content elements on the page.

Multi-Language Support​

  • Pages, navigation, footer, forms, and media files can all be localized, allowing content to be displayed in different languages for different locales.