PHPackages                             clevyr/backpack-page-builder - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Admin Panels](/categories/admin)
4. /
5. clevyr/backpack-page-builder

AbandonedLibrary[Admin Panels](/categories/admin)

clevyr/backpack-page-builder
============================

Clevyr Page Builder for Backpack

v3.2.1(1y ago)71.8k2GPL-3.0-or-laterPHP

Since Sep 16Pushed 1y ago13 watchersCompare

[ Source](https://github.com/clevyr/backpack-page-builder)[ Packagist](https://packagist.org/packages/clevyr/backpack-page-builder)[ Docs](https://clevyr.com)[ RSS](/packages/clevyr-backpack-page-builder/feed)WikiDiscussions master Synced today

READMEChangelog (7)Dependencies (3)Versions (10)Used By (0)

Backpack Page Builder
=====================

[](#backpack-page-builder)

[![Latest Stable Version](https://camo.githubusercontent.com/9e25c2769ff3b311917961df025d85bf22fbe40e997a0430024d26edf416fdee/68747470733a2f2f706f7365722e707567782e6f72672f636c657679722f6261636b7061636b2d706167652d6275696c6465722f76)](//packagist.org/packages/clevyr/backpack-page-builder)[![Total Downloads](https://camo.githubusercontent.com/2afe37f43245d409036082be39ad73b94d144ba7553d6a37e2cbf475149b82c5/68747470733a2f2f706f7365722e707567782e6f72672f636c657679722f6261636b7061636b2d706167652d6275696c6465722f646f776e6c6f616473)](//packagist.org/packages/clevyr/backpack-page-builder)[![Latest Unstable Version](https://camo.githubusercontent.com/83f632216f6a0e35dc41bad94188522ae9c28728ec7f8979c67d044ee76f9822/68747470733a2f2f706f7365722e707567782e6f72672f636c657679722f6261636b7061636b2d706167652d6275696c6465722f762f756e737461626c65)](//packagist.org/packages/clevyr/backpack-page-builder)[![License](https://camo.githubusercontent.com/a711d422073dcaa4f9fc3249b74fb2d96941764ada9e980f61f211e5c9f0982b/68747470733a2f2f706f7365722e707567782e6f72672f636c657679722f6261636b7061636b2d706167652d6275696c6465722f6c6963656e7365)](//packagist.org/packages/clevyr/backpack-page-builder)

Prerequisite
============

[](#prerequisite)

Laravel Backpack must be installed

1. Laravel 7
2. PHP 7.4
3. GD or Imagick for Image Intervention

Table of Contents
=================

[](#table-of-contents)

- [Installation](#installation)
- [Create a super admin](#create-a-super-admin)
- [Page Development](#page-development)
    - [Sync Pages](#syncing-pages)
    - [Edit Static Pages](#editing-static-pages)
    - [Edit Dynamic pages](#editing-dynamic-pages)
    - [Creating pages](#creating-pages)
        - [Generating Pages](#generating-pages)
- [Development](#development)
    - [Local Package Development](#setting-up-local-package-development)

Installation
============

[](#installation)

Run `composer require clevyr/backpack-page-builder`

This will install the Page Builder and the  package

This will install Image Intervention [http://image.intervention.io/getting\_started/introduction](http://image.intervention.io/getting_started/introduction)

To install the Page builder run the following command, this will install the Permissions Manager and the Page Builder

Run `php artisan pagebuilder:install`

---

Update the `config -> backpack -> base.php` file

```
'guard' => 'backback',
```

to

```
'guard' => config('auth.defaults.guard'),
```

---

Run `composer dump-autoload`

Seed the permissions

Run `php artisan db:seed --class=PageBuilderSeeder`

---

Update `resources -> views -> vendor -> backpack -> base -> inc -> sidebar_content.blade.php` file with

```
@canany(['View User List', 'View Role List', 'View Permission List'])

         Authentication

            @can('View User List')
                 Users
            @endcan

            @can('View Role List')
             Roles
            @endcan

            @can('View Permission List')
                 Permissions
            @endcan

@endcanany

@can('View Page List')

            Pages

                        Manage

@endcan
```

---

Update `app -> User.php` with

```
...
use Backpack\CRUD\app\Models\Traits\CrudTrait;
use Spatie\Permission\Traits\HasRoles;
...

class User extends Model {
    ...
    use CrudTrait;
    use HasRoles;
    ...
}
```

---

Create a super admin
====================

[](#create-a-super-admin)

Run `php artisan pagebuilder:user`

Run with parameters

```
php artisan pagebuilder:user --name=Name --email=email@example.com --password=password

```

Page Development
================

[](#page-development)

### Syncing pages

[](#syncing-pages)

Navigate to `pages -> manage`

Click the sync icon in the bottom right, this will load in static pages (Every folder that is not the **dynamic** folder) and it will reload the page

You also have the option to sync them from the command line with the following command

`php artisan pagebuilder:sync`

### Editing static pages

[](#editing-static-pages)

Navigate to the page management page and click edit on the homepage

#### Page Settings

[](#page-settings)

**Name:** Page name, admin functionality only, does not affect the functionality of the page's at all

**Title:** Page title, also generates the slug as you type

**Slug:** Slug of the page

**View:** Page view

#### Page Content

[](#page-content)

The page content populates with a list of sections, and their fields which you can edit.

---

### Editing Dynamic pages

[](#editing-dynamic-pages)

See [Editing Static Pages](#editing-static-pages) for a run down of **Page Settings** and **Page Content**

- Page Layout

*Note - You can only use the Page Layout tab if you are working with a dynamic page*

#### Sections list

[](#sections-list)

A list of dynamic sections will be displayed, you can click them to add them to the Content Section

#### Content Section

[](#content-section)

The content section displays the sections that will be available to edit on the page

You will not be able to edit the content until you save the page

---

### Creating pages

[](#creating-pages)

Pages are located at `resources -> views -> pages` each folder is considered as the page, with the contents inside the folder dictating what view / sections are available

Contents

- Sections - Holds each individual section for that view
- config.php - Holds the configuration for the page sections
- index.blade.php - Is the view of the page

*Note - Pages sections will not sync if there is not a `.blade` file inside the sections directory and a config property inside the config.php*

---

#### Generating Pages

[](#generating-pages)

To generate a new page run the following command `php artisan pagebuilder:page page` with page being the name of the new page

This will create a folder with the page name with the following structure

- page
    - index.blade.php
    - config.php
    - sections
        - default.blade.php

---

#### Sections

[](#sections)

The `sections` folder holds the `.blade` files that correspond to the section key in the `config.php`

**Using data inside a section**

You have access to the `$sections` variable which is an anonymous function that returns the field data from the `section name` and the `field title`

```

    {{-- default: section name, title: field name --}}
    {{ $sections('default', 'title') }}

        {{ $sections('default', 'sub-title') }}

{!! $sections('default', 'content') !!}
```

#### config.php

[](#configphp)

The `config.php` holds the configuration of the page sections. Each section holds a list of backpack crud fields any field, including custom fields will be available to be used inside the config.

**Example config**

```