PageFlow is a drag and drop web page builder you add to your individual web site, CMS or internet utility in two traces of JavaScript. The individuals who write your pages drop blocks and ready-made sections right into a body that exhibits the kinds of your web site; you get clear, responsive Bootstrap 5 HTML, to save lots of in your database and present along with your theme. No dependency, no framework, no exterior service.
Drag, drop, carried out
Drag a block or a complete part into the web page: one clear line exhibits the place it goes. Click on a block so as to add it the place the choice is, faucet it on a telephone, or drop an image out of your desktop. Then write proper on the web page with PageFlow’s personal textual content editor, and elegance every block with a click on.
Responsive for actual
The web page is edited in a body with the kinds of your web site, so the breakpoints of Bootstrap work: the desktop, pill and telephone previews present the actual structure. Drag the sting of a column to resize it, and provides every column its width on every display measurement.
Clear HTML, and an API for builders
PageFlow writes readable, indented Bootstrap markup, with none hint of the editor. It imports the pages you have already got: what it acknowledges turns into blocks, and every thing else stays untouched. One script, as an ES module or a worldwide, with choices, strategies and occasions, your individual blocks and fields, and a bridge for jQuery.
Protected by default
All the pieces that enters the web page is cleaned, whether or not it’s typed, pasted or imported. Footage are uploaded to your server, by no means saved within the web page, and the included PHP handler checks each from its content material and writes it once more.
Options
Enhancing
- Drag and drop from the palette, or click on so as to add; contact screens supported
- One drop line, computed from the pointer, in containers, containers and columns
- Its personal textual content editor: paragraph kinds, daring, italic, hyperlinks, lists, alignment and tables
- Clear paste from Phrase, Google Docs and internet pages
- A toolbar on every block: choose the guardian, transfer, duplicate, delete
- Undo and redo (100 steps) and keyboard shortcuts
- Copy and paste of blocks between pages and browser tabs
- Layers: the define of the web page, to achieve any block
- Saved blocks, reused on the subsequent pages
- Drafts stored within the browser and provided again after a crash
- Code view: edit the HTML, and PageFlow finds its blocks once more
- Preview with out the enhancing guides, and full display
Blocks and sections
- Format: containers, full width, rows of 1 to six columns, 2/3 + 1/3, 1/3 + 2/3, 1/4 + 1/2 + 1/4, containers
- Primary: headings, textual content, quotes, lists, buttons, separators, spacers and icons
- Media: pictures with hyperlinks and captions, YouTube, Vimeo and MP4 movies, embeds and maps
- Parts: tables, playing cards, accordions (FAQ) and uncooked HTML
- 13 ready-made sections: two heroes, options, picture and textual content, name to motion, playing cards, testimonials, pricing, FAQ, key figures, staff, contact and gallery
- Your personal blocks, fields and sections
Fashion and responsive
- Spacing, colours of your theme or your individual, background footage, corners, shadows and borders, all written as Bootstrap 5 lessons
- Desktop, pill and telephone previews with the actual structure of your theme
- Column widths for every display measurement, and columns resized with the mouse
- Blocks hidden on the display sizes you select
- Anchors and CSS lessons on any block
Footage and media
- Add from the settings, drop from the desktop or paste an image
- Safe PHP add handler included; every other server language works
- Your personal add perform or media library, by means of one choice
- YouTube movies on youtube-nocookie.com
For builders
- Plain JavaScript with none dependency, about 100 KB gzipped
- ES module or international script; CSS injected by the script, or loaded by your web page
- Choices, strategies and occasions; works in kinds, with a discipline written after every change
- Your stylesheets within the canvas, in order that the web page seems like your web site
- One other textual content editor could be plugged in
- jQuery bridge with the syntax of PageFlow 1; React, Vue or any framework
- Works below a strict Content material Safety Coverage (nonce)
- Interface in English, French, Spanish, German, Italian and Portuguese; add your individual language
- Gentle, darkish or automated theme; right-to-left content material
Safety
- No scripts, no occasion attributes and no javascript: hyperlinks within the web page, no matter its supply
- Uploads checked from their content material, written once more, with random names, in a folder the place scripts by no means run
- CSRF token, same-origin test and a restrict of uploads per hour
- Eradicating a block by no means deletes a file in your server
Necessities
- A latest browser: Chrome, Edge, Firefox, Safari 15+, Opera
- The CSS of Bootstrap 5 on the pages you present (no Bootstrap JavaScript wanted)
- For the included add handler: PHP 7.4 or later with GD
What’s included
- PageFlow 2, constructed (minified and never) and as sources (ES modules) with their construct scripts
- Seven examples: a primary editor, a type, the choices, the kinds of a web site, a customized block, jQuery and PHP (add and save)
- The safe PHP add handler
- Full documentation, additionally online
Assist
We reply by means of the Assist tab of this web page. Merchandise help comes along with your buy for six months and could be prolonged to 12 months.
Changelog
Model 2.0.0
- First launch on CodeCanyon: an entire rewrite in plain JavaScript, with out dependency
- Pages written with PageFlow 1 are imported unchanged, and its jQuery syntax nonetheless works
Credit
Icons: Phosphor Icons (MIT). Bootstrap 5 (MIT) is loaded from jsDelivr by default and isn’t bundled. The placeholder footage of the sections are drawn by PageFlow. The photographs of the stay demo are proven for preview solely and aren’t included.
