The template builder - ACPT

The template builder

Please note that the editor can be used only with a screen size grater than 960px.

ACPT comes with a visual template builder built on top of grapesjs, one of the best open-source Web Builder Frameworks.

To create a new template, go to the custom post type list (the main dashboard) or taxonomy list, in both cases you find a section named Frontend UI. Here you find several choices, for example, Archive template or Single template.

Enabling the visual builder

First of all you need to enable the visual builder in order to use it.

Go to Settings page and find "Content settings" section, enable the visual builder and you are good to go.

Using the visual builder

Open up the visual builder.

The window is divided basically in three parts:

  • the header
  • the sidebar
  • the main editor window

Header

Starting from left to right, you have:

  • the ACPT logo
  • the device preview switch
  • action buttons: Toggle guides, toggle preview, fullscreen mode, show code, unbo, redo, save and exit

Sidebar

The dark gray sidebar contains the building blocks.

On top of it take place four buttons:

  • Layers: the graphical representation of DOM tree of the page
  • Styles: a complete style manager
  • Blocks: the blocks are divided in groups. The elements may vary depending on the template type. The blocks can be filtered by a searchbox.
  • Specific settings: every block has some specific settings (for example: surroung HTML tag, target of anchor text etc…)

The main editor window

This is the interactive area.

Every block can be selected/deselected with a single click. When a block is selected, a contextual action bar becomes visible.

You can drag the blocks around the editor area.