laravel grapes is a cms drag and drop page builder
mahmoudelsherbeny/laravel-grapes is a Laravel package for laravel grapes is a cms drag and drop page builder.
It currently has 0 GitHub stars and 5 downloads on Packagist (latest version v2.0.1).
Install it with composer require mahmoudelsherbeny/laravel-grapes.
Discover more Laravel packages by mahmoudelsherbeny
or browse all Laravel packages to compare alternatives.
Last updated
This Package is forked from main package: (https://github.com/allamo123/laravel-grapes)
Laravel Grapes is a library for laravel framework, that offer cms drag and drop page builder for frontend which support all Laravel functionality and help user to change all frontend and content just in simple clicks.
| Feature | Regular Version | Pro Version | |-----------------------------------|-----------------|-------------| | Laravel CSRF | yes | yes | | Laravel Auth User Condition | yes | yes | | Laravel Auth Dynamic Guard | yes | yes | | Multilingual | yes | yes | | Dynamic Laravel Shortcode widgets | 1 | unlimted | | Dynamic Routes /{id} | No | yes |
composer require MahmoudElsherbeny/laravel-grapes
php artisan vendor:publish --provider="MahmoudElsherbeny\LaravelGrapes\LaravelGrapesServiceProvider" --tag="*"
php artisan migrate
<?php
return [
// routes for builder configurations
'routes' => [
'prefix' => 'builder',
'middleware' => null,
],
/* Define additional translation languages. */
'languages' => [
'ar',
'es',
],
];`
The builder by default come with route route('page-builder.index') which consists of your-domain.com/builder/page-builder.
you can change the builder prefix to what you want so now the builder load with your new route prefix instead of builder.
Assign any middleware you want to the builder for example auth:admin.
Now laravel grapes is working.
Navigate to builder route your-domain.com/builder_prefix/page-builder.
The Controll Panel Consists Of 3 Panels :-
4) Customize Builder Style Sheet
The options panel consists of 11 buttons :-
The view component button show grid lines for all components droped in the canvas, this help to to select each component individual for example take a look on the screenshot below.
The preview button help you to show page without pannels like screenshot below
The full screen mode button hide all browser utils and show only the builder.
The view code button show you the html and css code of the page like sceenshot below
The create new page button at topbar when you press on it, the popup modal open with new page form, so fill page name and slug and if you need the page become a home page type slug / .
Don't forget to handle routes in routes/web.php , laravel grapes come with it own route file in page-builder.php
<?php
use Illuminate\Support\Facades\Route;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
// Route::get('/', function () {
// return view('welcome');
// });
require __DIR__.'/page-builder.php';
The edit code button it will open a popup code editor modal that hold page code including html and css.
The Component Manager button will open a popup hold all custome components that has been saved to reused on another page to let you edit name of the component or delete it.
The page manager button will open a popup hold all pages and let you to edit page name and slug.
The clear canvas button will remove all components from the canvas.
Laravel Grapes let you to save any custome component for reuse it on other pages all you need to select the component and click on Save Component Button.
The save changes button update the page content and if you check the page slug you will find that page content has been changed.
The options panel consists of 2 select input :-
The select page input let you to select page that you need to modify it.
The select device input let you to modify page html and styles on different screens with the following sizes
The View Panel consists of 4 buttons :-
The Block Manager Comes with Bootstrap Components :-
Layout which holds
Components which holds
Typography which holds
Templates which holds
Saved which holds
Another utility tool you might find useful when working with web elements is the layer manger. It's a tree overview of the structure nodes and enables you to manage it easier.
Each component come with it's own settings you can modify it for example, if you select from the canvas link element and got to component settings you will find the following:
The Style manager is composed by sectors, which group inside different types of CSS properties. So you can add, for instance, a Dimension sector for width and height, and another one as Typography for font-size and color and more. So it's up to you decide how organize sectors.
Classes
General
Flex Options
Dimension Options
Typography Options
Decorations Options
Extra
Go to public/css/laravel-grapes.css and start Customizing Laravel Grapes Builder style sheet As You Wish.
Each text component have translation input trait for your languages that you were defined in config/lg.php, In the example below you will find Ar Local and Es Local .
Add your custom route for show page.
web.php
Route::get('{page:slug}', [PageController::class, 'index']);
in your controller add show page method
public function index(Page $page)
{
if (! $page->is_active) {
return abort(404);
}
return view('website.pages.page')->with([
'page' => $page,
]);
}
create your own custom page view and use those to show page styles and html content
{!! $page->styles !!}
{!! $page->html !!}
MIT © Mohamed Allam
