WP Manifestindependent plugin directory
manifest / builders / layotter

Layotter

Add and arrange your content freely with an intuitive drag and drop interface!

★ 23stars
384composer installs

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/hingst/layotter/archive/refs/heads/master.zip

On Packagist as hingst/layotter:

composer require hingst/layotter
No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Build fully customizable and easy to use Wordpress websites – with Layotter, the drag-and-drop page builder for developers!

As a professional Wordpress developer, you've probably got your own theme boilerplate, a favorite grid system, project structure, … you name it. So why should your page builder dictate its own HTML or CSS structure? Why should it come with a ton of predesigned modules that won't fit your client's design anyway? We believe it shouldn't. So Layotter doesn't.

If you like ACF, you'll love Layotter

Layotter is based on Advanced Custom Fields (ACF), a very popular Wordpress plugin that lets you create wildly complex forms without having to write any code. Thanks to ACF, building a simple Layotter element takes as little as 15 lines of code:

class Text_Element extends Layotter_Element {
    protected function attributes() {
        $this->title       = 'Text';
        $this->description = 'A very simple text element.';
        $this->icon        = 'font'; // pick an icon from Font Awesome
        $this->field_group = 'group_abc1337'; // your ACF field group
    }
    protected function frontend_view($fields) {
        echo $fields['content']; // what visitors will see
    }
    protected function backend_view($fields) {
        echo $fields['content']; // what editors will see
    }
}
Layotter::register_element('text', 'Text_Element');

Read the introduction or the installation instructions to get started, or head directly to the tutorial on how to create an element type.

Some more features you'll enjoy

  • Super clean, object oriented API
  • Full HTML and CSS customization
  • Settings filters for programmatic configuration
  • Integrates so nicely, your clients will think it's a part of Wordpress
  • Works with the Pro and regular versions of ACF
  • Open source and free to include even in commercial themes

By the way, Layotter 2 is in the making…

Check out the (terribly named) modular branch to learn more about the the upcoming release.