This packages provides an interface to manage page content easily

2.0.0 2019-01-31 11:49 UTC

This package is not auto-updated.

Last update: 2023-02-04 20:38:46 UTC


Travis Packagist Release Licence

Improve the way you edit pages.


composer require novius/laravel-backpack-visualcomposer

Then add this to config/app.php:


Finally, run:

php artisan migrate


In the model:

use \Novius\Backpack\VisualComposer\Traits\VisualComposer;

In the crud controller:

public function setup($template_name = false)

        'name' => 'visualcomposer_main',
        'label' => 'Visual Composer',
        'type' => 'view',
        'view'   => 'visualcomposer::visualcomposer',
        // (optionnal) Only those template will be available
        'templates' => [
        // (optionnal) Pre-fill the visualcomposer with rows on new models
        'default' => [
            ['template' => MyNewRowTemplate::class],
        'wrapperAttributes' => [
            'class' => 'form-group col-md-12',

public function store(PageRequest $request)
    $r = parent::store($request);
    $this->crud->entry->visualcomposer_main = $request->visualcomposer_main;
    return $r;

public function update(PageRequest $request)
    $r = parent::update($request);
    $this->crud->entry->visualcomposer_main = $request->visualcomposer_main;
    return $r;

In the model view:

@foreach($page->visualcomposer_main as $row)
    {!! $row->template::renderFront($row) !!}

Create new row templates

Make a class and a folder for the views:

cd vendor/novius/laravel-backpack-visualcomposer
touch src/app/Templates/$class.php
mkdir src/resources/views/vendor/visualcomposer/$class
touch src/resources/views/vendor/visualcomposer/$class/crud.blade.php
touch src/resources/views/vendor/visualcomposer/$class/front.blade.php

In MyNewRowTemplate.php:


namespace Novius\Backpack\VisualComposer\Templates;

class MyNewRowTemplate extends RowTemplateAbstract
    static public $name = 'my-new-row-template';

In crud.blade.php:

<div class="row-template vc-my-new-row-template">
    <input type="hidden" class="content">
    <textarea class="some_field"
              placeholder="{{ trans('visualcomposer::my-new-row-template.crud.some_field') }}"></textarea>

        window['vc_boot', {!!json_encode($template)!!}] = function ($row, content)
            var $hiddenInput = $(".content[type=hidden]", $row);
            var fields = [

            // Setup update routine
            var update = function () {
                var contents = [];
       (item) {
                    contents.push($('.'+item, $row).val());

            // Parse and fill fields from json passed in params
   (item, index) {
                try {
                    $('.'+item, $row).val(JSON.parse(content)[index]);
                } catch(e) {
                    console.log('Empty or invalid json:', content);

            // Update hidden field on change
                'change blur keyup',
                'input, textarea, select',

            // Initialize hidden form input in case we submit with no change

In resources/lang/vendor/visualcomposer/en/templates.php, add:

    'my-new-row-template' => [
        'name' => 'My new row template',
        'crud' => [
            'some_field' => 'Some field for you to write something in',

Edit default config and templates


php artisan vendor:publish --provider="Novius\Backpack\VisualComposer\VisualComposerServiceProvider" will output the list of copied files than can now be overwritten, including the config, the backpack field type, the language files and 11 built-in templates:

  • Article, an wysiwyg and inputs for the title, subtitle, date, author, CTA button and user-customizable colors
  • BackgroundImageAndText, an uploadable picture with a caption and wysiwyg description
  • ImageInBase64, a picture stored as base64 instead of file upload
  • ImageInContainer, an uploadable picture, and that’s it
  • LeftImageRightText, a picture and some text fields on two columns
  • LeftTextRightImage, some text fields and a picture on two columns
  • LeftTextRightQuote, some text fields and customizable background color, on two columns
  • Minimal, an empty template with the minimum code for it to work
  • Slideshow, a slider of unlimited pictures and their captions
  • ThreecolumnsImageTextCta, three columns with a picture, a title, a wysiwyg and a CTA button on each of them
  • TwoColumnsImageTextCta, the same as above, but on two columns instead of three

Check out how they are made, so you can customize them and build your own.