PageFlow jQuery Plugin
Powerfull Page Builder

Welcome to the jQuery PageFlow Documentation! This guide provides everything you need to get started and make the most of PageFlow’s powerful features.
With its intuitive drag-and-drop interface, responsive grid system, and seamless integration with CKEditor, PageFlow enables you to build professional, customizable web pages quickly and efficiently.
Whether you're configuring layouts, managing content, or exporting HTML, this documentation offers detailed instructions and examples to help you unlock PageFlow’s full potential for your projects.
Based on HTML5 - CSS3 - Bootstrap 5 - jQuery - CKEditor 5

Latest update: 30/10/2024 - By: Pandao

Demo Purchase & Download

Thank you for purchasing our Plugin. If you have any questions that are beyond the scope of this help file, please contact us. Thanks so much!

Implementation

To implement the PageFlow on a page, you need to link the following CSS and JS files.

<!-- Bootstrap 5 / required -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

<!-- JQuery / required -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

<!-- CKEditor 5 / required -->
<script type="importmap">
    {
        "imports": {
            "ckeditor5Balloon": "./jquery-pageflow/libs/ckeditor5Balloon/ckeditor5.js",
            "ckeditor5Balloon/": "./jquery-pageflow/libs/ckeditor5Balloon/"
        }
    }
</script>

<!-- PageFlow / required -->
<link rel="stylesheet" href="jquery-pageflow/css/jquery-pageflow.min.css">
<script src="jquery-pageflow/js/jquery-pageflow.min.js" type="module"></script>

Then, all that you have to do is call the PageFlow on the page.

<script>
    $(function() {
        $('.pageflow').pageflow({
            showExportBtn: false, // whether to show export button
            exportToInput: true // export into a text field
        });
    });
</script>

Basic HTML code

<!-- PageFlow wrapper. Add the class "pflow-compact" to change and compact the skin. Use rel="#exportedCode" to specify an input container for the exported code -->
<div class="pageflow pflow-compact" rel="#exportedCode"></div>

<!-- Use the following line to get the generated code in a text field (usefull to post and save in a database) -->
<textarea id="exportedCode" style="display: none;"></textarea>

General options