Jump to content

Search the Community

Showing results for tags 'pagebuilder'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • Welcome to ProcessWire
    • News & Announcements
    • Showcase
    • Wishlist & Roadmap
  • Community Support
    • Getting Started
    • Tutorials
    • FAQs
    • General Support
    • API & Templates
    • Modules/Plugins
    • Themes and Profiles
    • Multi-Language Support
    • Security
    • Jobs
  • Off Topic
    • Pub
    • Dev Talk

Product Groups

  • Form Builder
  • ProFields
  • ProCache
  • ProMailer
  • Login Register Pro
  • ProDrafts
  • ListerPro
  • ProDevTools
  • Likes
  • Custom Development

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 8 results

  1. PAGEGRID 2 is out now! 💫 The new version contains several bug fixes and adds exciting new features. It's also more flexible and easier to use. Check out the new website 👀 and click the edit button ✏️ to see for yourself. With this update, PAGEGRID becomes a very flexible no-code editor that still gives developers the power and control they need. Easily modify existing block templates or create your own with your favorite code editor and ProcessWire's powerful API. Use PAGEGRID to build whole websites, connect PAGEGRID to regular ProcessWire templates/pages or use PAGEGRID only as a "body" field. PAGEGRID 2 uses as many native features from ProcessWire as possible (everything is a page). NEW Reusable Symbols Turn nav bars, footers, or any combination of items into symbols that you can reuse wherever you need them. (Symbols are pages) Animations Add powerful multi-step CSS animations with a few clicks. Use interactions like scroll, mouseover, inview, loading or click to trigger them. Reuse them throughout your website. (Animations are pages) Blueprints Blueprints can be used to automatically populate empty pages with a predefined layout. They are useful if you want website editors to start from a base design when they create new pages. (Blueprints are pages) DOM Navigator The dom navigator makes it possible to select any markup on the page through PAGEGRID's style panel. It gives you full control over your site's appearance. Style regular templates Make CSS edits to any template inside processwire just by adding the PAGEGRID field to it (works with any markup). VW and VH units Almost all style inputs now support PX, %, VH and WV units. Updated Google Fonts The fonts list has been updated to include the latest fonts and material icons. Datalist Block (PageGridBlocks module) The new datalist block renders a link list of pages that you can define. It can render a title, thumbnail, video, or text per page. This can be useful for rendering a grid of your latest portfolio projects, news, or a list of articles. iFrame Block (PageGridBlocks module) The new iFrame block uses layziframe to layziload any iFrame when you click a placeholder. You can upload a custom placeholder or, for YouTube/Vimeo, the placeholder can be loaded automatically and saved to the database (to comply with the EU General Data Protection Regulation). This is great for embedding external services such as YouTube, Vimeo, Spotify, Soundcloud, or others to your site. –––––––––––––––––––––––––– How to update from version 1: Please make sure you run the latest ProcessWire version before updating. I would also recommend to make a database backup for existsing websites before the update (just to be save). Then simply update the FieldtypePageGrid and PageGridBlocks modules.
  2. Watch this 6-minute video to learn the basics of PAGEGRID. TIPP: You can hold down [SHIFT] while dragging to change the parent of an item. More shortcuts Install options There are two ways to install PAGEGRID: Installing just the module or installing the theme. The theme is more opinionated and comes with pre installed modules to handle SEO, generate a sitemap, or display a cookie banner. If you prefer to have less dependencies, we recommend you only install the module. It’s everything you need to run PAGEGRID and verion 2.0. made it much easier to install. How to install and setup the module How to install the theme
  3. With the style panel, you can customise the look of your website without writing CSS code. If you prefer to work with code, that's fine too. Just deactivate the panel and load your CSS as you are used to. PAGEGRID will stay out of your way. You can also combine the approaches or bring your favorite CSS framework. The style panel is a tool for developers, designers or "advanced users", not necessarily for your client (you can give them access, but I wouldn't recommend it 😈). The great thing about using the style panel (and PAGEGRID) is that you don't need a build tool or deticated development environment. If you use the block modules, a simple database backup can be enough to restore all changes. Since the templates and fields are all created by the modules, migrations are no longer an issue. This can be a quick and easy way to create a custom website. Which CSS frameworks are supported by PAGEGRID? The style panel generates modern vanilla CSS. The block modules use vanilla CSS and vanilla JS. With your own custom blocks you can easily add a framework if you want. If there are enough requests in the PW community for a certain framework, I might build some blocks for it. 🤞
  4. I am very exited to launch PAGEGRID on Product Hunt today 🎉 You can support it by upvoting or giving feedback here. And while you're there don't forget to give your love to processwire too. PAGEGRID is a friendly pagebuilder for ProcessWire. Learn more Thanks for your support!
  5. PAGEGRID – A visual page builder for ProcessWire. Design fully responsive websites (or parts of them) without writing any code. Use ProcessWire's native templates (and fields) to create your own blocks. Rearrange and resize items in a visual way and use inline or modal editing to quickly edit the content of your website. (The demo uses AdminThemeCanvas but it will work just fine with the core Uikit Theme) Try PAGEGRID for free Checkout the online demo. PAGEGRID is not free software. However, you can try PAGEGRID on your local machine or on a test server as long as you need to make sure it is the right tool for your next project. … and when you’re convinced, buy your license. Get it here Download from GitHub Download from Module Directory Requirements ProcessWire 3.0.210 or greater Currently the dev version of ProcessWire 3.0.216 or greater has some bugs with PG. (I have a working fix, and it will be comming soon). Please use the latest master release of ProcessWire for now) Installation Go to “Modules > Site > Add New“ in your admin Paste the Module Class Name "FieldtypePageGrid" into the field “Add Module From Directory“ Click “Get Module Info“ On the overview, click “Download And Install“ On the following screen, click “Install Now“ More install options Module install guide Site profile install guide Get up and running Quick start Create your own blocks or install the PageGridBlocks Module (installs premade templates and fields for PAGEGRID blocks). What's PAGEGRID? page-grid.com – Get to know PAGEGRID. Documentation – Read the official documentation. Issues – Report bugs and other problems. Forum – Whenever you get stuck, don't hesitate to reach out for questions and support. Why I build it ProcessWire is super flexible in itself and lets me build whatever I want. But building a custom website can be a lot of work. For some projects, I've ended up using a lot of templates and fields. To make my pages more flexible, I sometimes build my own little page builder based on the RepeaterMatrix or PageTable module. While these page builders were great for the specific site I was building them for, they were never flexible enough to be used for new projects, so I ended up customizing them frequently. The more complex they became, the harder it became to use them for my clients. After playing around with some WYSIWYG page builder tools, I realized that while they can save me a lot of time, they can also be very limiting or have expensive subscriptions and somehow tie you to their ecosystem. So I decided to build my own page builder based on the most flexible CMS I knew. Concept This fieldtype Renders block templates and adds drag and drop functionality in admin, as well as enable inline editing for text, and file fields. It also let's you manipulate CSS in a visual way to design fully responsive websites (or parts of them) without writing code. The fieldtype comes with an optional style panel to manipulate CSS properties directly on the page. You can customize the panel or disable it completely from the module settings (and just use a CSS file that you include in your template). The data to style the items is stored directly on the item using PW's meta data (no extra fields are created). Don't want to give your client all that power? Use ProcessWire’s powerful permission system to control what your clients can edit. You can then also grant access individually to the style panel, resize or drag functionality using ProcessWire's build in permission system. Features Blocks are just pages Blocks are defined by native PW templates and fields Manipulate CSS grid or flexbox based layouts in a visual way to design fully responsive websites (or parts of them) Encapsulated frontend code (PAGEGRID renders the template of your frontend inside an iframe in the backend) Design and editing features can be disabled for certain roles (using ProcessWire's build in permission system) Inline editing of text, textarea, TinyMCE (supports latest version), ckeditor and file fields Simply drag and resize to manipulate grid items directly inside the backend Manipulate grid columns and rows directly on the page (use any number of columns you want) All style manipulations are saved as JSON and used to generate dynamic styles that you render in your main template (no inline styles) Nested groups/grids (child pages of nested blocks are created under group parent) The style panel supports adding custom classes and assigning styles to them. These classes can be used globally on all pages (a css class is also a page) The style panel supports selecting html tags to style tags globally across the whole site Global blocks work with page reference field (changes on one page, changes all blocks on all pages) Manual and auto placement of grid items blocks and nested blocks can be cloned Redo/undo and copy/paste shortcuts Editing block items in modal sidebar immediately updates frontend (Ajax Save). Define custom icons for your blocks via native template settings (template -> advanced -> icon) Automatic page save (Changes are getting saved via ajax, no need to click the save button) NEW: Option to automatically load lazysizes lazyloader (V 0.1.0) Changelog V 0.1.0: Feature: Option to automatically load lazysizes lazyloader (Module Settings > Plugins). V 0.1.5: Fixed bug: Tabs not working when editing items via modal panel. V 0.1.6: Fixed bug: Setting height in VH unit was not working. V 0.1.7: Feature: Option to hide save button (and use automatic ajax save ) if there are no other fields than PAGEGRID on the content tab (Module Settings > Interface). V 0.2.0: Fixed bug: Custom block wrapper element <p> was not working with inline editor. V 0.2.0: Fixed bug: Inline editor would sometimes not save after clicking cancel and then edit item again. V 0.2.0: Feature: Now it's possible to add classes to elements inside richt text fields via style panel. V 0.2.0: Fixed bug: Inline editor was not working after first item was added to the page (needed reloading the page). V 0.2.1: Feature: Updated PageGridBlocks Module: Using TinyMCE as the default editor. V 0.2.1: Feature: Updated PageGridBlocks Module: Group/container wrapper element can now be changed to <div>, <section>, <article>, <header>, <footer>, <nav>. Thanks to everyone who helped me improve my coding skills and for the support of this great community! Special thanks to @diogo for the valuable feedback and @ryan for this great CMS and his support for the PageFrontEdit module!
  6. Dear beta testers, thanks for your help! PAGEGRID is now available here:
  7. Hey folks. My soon to be released pagebuilder modules has a feature, that it will automatically load css files. A page can be composed by multiple block items and each block has a template file. For each block that is added to a page, the module also looks for a css file with the same name as the template file and loads it, if it's avalable and not already loaded. This works great and it only loads the css if it is really needed. But I am a bit worried of the performance, since there is a request for each file (if not cached already). Iam not sure if the ProcessWire cache or ProCache can help here? So now I am looking for a good way to combine the files into one request/file and also enable that file to be cached. The problem I see here is that every page can load different files, or load them in a different order, so even if two pages share most of the same files, the combined files for these pages would be different and a request for each page would be needed, even if the file of one page is already in the cache. Maybe someone has an idea how to optimise this? Do you think it's better to combine the files or just load and cache those smaller files?
  • Create New...