Grapesjs UI preset used in blocomposer.app with other common plugins and configurations to grapesjs to get your website builder up and running quickly. As a preset this works correctly with the provided versions but can also work with previous version if the plugins are also matched correctly. This plugins also provides a framework which can be extended by adding functionality to some of the UI provided. For more information on setup you can check the README.md provided and the sample setup provided in index.html. Provides widgets for adding blocks without having to use drag and drop. This plugin comes with grapesjs-component-icon plugin built in so no need to purchase that separately.

Components

icon
shape-divider
header
animate
block-builder
button-basic

Blocks

link-block
quote
text-basic
section-block
span-block
button-basic
block-builder
line-divider
hero-block
team
team-card
footer
shape-divider
header
icon
animate

Commands

left-assets
left-settings
page-seo
adder
gjs-open-import-webpage
settings-customHead
settings-globalCss
get-current-name
open-fonts
clone-page
add-block
help
publish
set-device-desktop
set-device-tablet
set-device-mobile
canvas-clear

Options

1. `useCloudinary` - Use cloudinary file picker - `true`
2. `showPanels` - Use editor with fixed panels - `false`
3. `staticSettings` - Reposition settings popup when a component is selected - `false`
4. `settingsAnimation` - Animate settings popup when - `true`
5. `hideSettings` - Hide settings by default - `true`
6. `linkBlock` - Extend link block - `{}`
7. `quoteBlock` - Extend quote block - `{}`
8. `textBlock` - Extend text block - `{}`
9. `btnBlock` - Extend button block - `{}`
10. `bldBlock` - Extend block builder block - `{}`
11. `hrBlock` - Extend line divider block - `{}`
12. `heroBlock` - Extend hero block - `{}`
13. `teamBlock` - Extend team block - `{}`
14. `shapedividerBlock` - Extend shape divider block - `{}`
15. `sectionBlock` - Extend section block - `{}`
16. `spanBlock` - Extend span block - `{}`
17. `footerBlock` - Extend footer block - `{}`
18. `headerBlock` - Extend header block - `{}`
19. `animateBlock` - Extend animate block - `{}`
20. `iconBlock` - Extend icon block - `{}`
21. `modalHelpLabel` - Modal help title - `Help`
22. `modalImportTitle` - Modal import title - `Import`
23. `modalImportButton` - Modal import button text - `Import`
24. `modalImportLabel` - Import description inside import modal - `HTML`
25. `importViewerOptions` - Code viewer (eg. CodeMirror) options - `{}`
26. `textCleanCanvas` - Confirm text before cleaning the canvas - `Are you sure to clean the canvas?`
27. `onSave` - Callback when save button is clicked - `editor.store()`
28, `hoverDelay` - Hover delay for block adding widgets, lower value makes hover update faster - `250`

Explore