PHPackages                             super-admin-org/page-designer - 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. super-admin-org/page-designer

ActiveLibrary[Admin Panels](/categories/admin)

super-admin-org/page-designer
=============================

Page designer for open admin

v1.0.3(10mo ago)06MITPHPPHP >=7.0.0

Since Jun 22Pushed 10mo agoCompare

[ Source](https://github.com/super-admin-org/page-designer)[ Packagist](https://packagist.org/packages/super-admin-org/page-designer)[ Docs](https://github.com/super-admin-org/page-designer)[ RSS](/packages/super-admin-org-page-designer/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependencies (3)Versions (2)Used By (0)

PageDesigner for Super-Admin
============================

[](#pagedesigner-for-super-admin)

Freely position items on a page and edit their content.

[![StyleCI](https://camo.githubusercontent.com/a4961887fa462bb05039f78219d9bc9a0525d7ea55400277a2beea790a364a4d/68747470733a2f2f7374796c6563692e696f2f7265706f732f3530333839333236392f736869656c643f6272616e63683d6d61696e)](https://styleci.io/repos/503893269)[![Packagist](https://camo.githubusercontent.com/7103e48b03e82866459a41da7b879f089fba86f66e2d97de7c4c8f1b8a847e19/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f73757065722d61646d696e2d6f72672f706167652d64657369676e65722e7376673f7374796c653d666c61742d73717561726526636f6c6f723d627269676874677265656e)](https://packagist.org/packages/super-admin-org/page-designer)[![Total Downloads](https://camo.githubusercontent.com/5dae66b189037b95ff294bc255ee5aa1c367a4f9a1588a31e9aaadff566214d3/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f73757065722d61646d696e2d6f72672f706167652d64657369676e65722e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/super-admin-org/page-designer)![Pull request welcome](https://camo.githubusercontent.com/25f2db1404306d6dc01b1ac6e8c70f5f397ea8043dd9584d8dc4bc31b8bfea59/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f70722d77656c636f6d652d677265656e2e7376673f7374796c653d666c61742d737175617265)

Screenshot
----------

[](#screenshot)

[![extention-page-designer](https://user-images.githubusercontent.com/86517067/173943033-9234fe5a-273f-4383-84a1-d2f38120c3bf.png)](https://user-images.githubusercontent.com/86517067/173943033-9234fe5a-273f-4383-84a1-d2f38120c3bf.png)

Installation
------------

[](#installation)

### 1) Terminal

[](#1-terminal)

```
$ composer require super-admin-org/page-designer

$ php artisan admin:import page-designer

$ php artisan vendor:publish --tag=page-designer

$ php artisan migrate

```

### 2) Add Routes

[](#2-add-routes)

Add admin routes in App/Admin/routes.php

```
$router->resource('page-designer', PageDesignerController::class);
$router->resource('page-designer-images', PageDesignerImagesController::class);
$router->resource('page-designer-videos', PageDesignerVideoController::class);
$router->resource('page-designer-texts', PageDesignerTextController::class);
$router->resource('page-designer-inline-galleries', PageDesignerInlineGalleryController::class);
$router->resource('page-designer-embeds', PageDesignerEmbedController::class);
```

Add front-end routes in routes/web.php

```
use App\Http\Controllers\PageDesignerController;

Route::get('/page/{id}', [PageDesignerController::class, 'index'])->name('page-designer');
```

### 3) Check it out

[](#3-check-it-out)

App\\Controllers\\PageDesignerController.php

Now in the form section you see.

```
$form->pagedesigner('data', __('pageDesign'));
```

##### For the front-end:

[](#for-the-front-end)

Go to your-app-url/page/{id} and see how it look you can alter the look by changing resources/views/page\_designer.blade.php

Options
-------

[](#options)

```
// set snap
$form->pagedesigner('data', __('pageDesign'))->snap(30);
```

Adding new items to the PageDesigner
------------------------------------

[](#adding-new-items-to-the-pagedesigner)

The PageDesigner automaticly scans the `Admin/Controllers` directory to see if there are controller with `PageDesignItem` trait.

You can generate an AdminController like you normaly would (Tip: use the helper plugin), then you can add the following code below.

Lets say you like an quote item to add to your PageDesigner after you create the controller. Alter it to look like this:

```
use SuperAdmin\Admin\PageDesigner\Traits\PageDesignItem;

class PageDesignerQuoteController extends AdminController
{
    use PageDesignItem;

    public function __construct()
    {
        $this->initPageDesignItem();
    }

    public static function pageDesign()
    {
        return [
            'parent_field'=> 'page_id',
            'type'        => 'quote',
            'title'       => 'quote',
            'icon'        => 'icon-quote-right',
            'model'       => "\App\Models\PageDesignerQuote",
        ];
    }

    // this part renders the content part of the item
    // the rendering on the frond-end is seperate, but offcourse you can let them share styles
    public static function pageDesignScripts()
    {
        return