README

Folivoro Layotter Bridge

Integrates the Layotter page builder plugin with folivoro/sloth.

Layotter is a WordPress page builder plugin originally developed by Dennis Hingst at Quäntchen + Glück. It provides structured content editing through rows, columns, and elements — and is one of the core inspirations for Sloth itself.

Note
Layotter must be installed and activated as a WordPress plugin for this integration to work.

Installation

composer require folivoro/layotter-bridge

Usage

Enabling Layotter for a post type

Set $layotter on your Sloth model:

class Project extends Model
{
    // Enable with default settings
    public static $layotter = true;

    // Enable with custom row layouts
    public static $layotter = [
        'allowed_row_layouts' => ['full', 'half', 'third'],
    ];

    // Disable (default)
    public static $layotter = false;
}

Turning a module into a Layotter element

Set $layotter on your module with an ACF field group key and display settings:

class HeroModule extends Module
{
    public static $layotter = [
        'field_group' => 'group_hero',
        'title'       => 'Hero',
        'description' => 'Full-width hero section',
        'icon'        => 'star',
    ];
}

The bridge registers the module as a Layotter element automatically. The ACF fields defined by field_group are passed to the module as view variables when rendered.

Backend preview

By default, Layotter shows a table of field values as the backend preview. To use a custom Twig template instead, create a _layotter variant of your module template:

theme/views/module/hero.twig              # Frontend template
theme/views/module/hero_layotter.twig     # Backend preview template

Custom views

Override the default markup for elements, columns, rows, or the entire post layout by placing Twig templates in your theme:

theme/views/layotter/element/default.twig
theme/views/layotter/column/default.twig
theme/views/layotter/row/default.twig
theme/views/layotter/post/default.twig

Each view receives the rendered content and contextual options (post_options, row_options, col_options, etc.).

Column classes

Column classes default to a 12-column Bootstrap grid (col-lg-1 through col-lg-12). Publish the config and override via custom_classes:

wp sloth vendor:publish --provider="Folivoro\LayotterBridge\LayotterBridgeServiceProvider" --tag=config

// config/layotter.php
return [
    'row_layouts' => ['full', '1/2', '1/3', '2/3'],
    'custom_classes' => [
        '1/2' => 'col-md-6',
        '1/3' => 'col-md-4',
        '2/3' => 'col-md-8',
    ],
];

Configuration reference