manuelmasia

Here is the demo page: <a href="http://www.pixedelic.com/plugins/pixgridder" title="PixGridder" rel="nofollow ugc">PixGridder</a> where a link to Pro version is available (pixgridder-pro)
I prefer to define this plugin as a “grid builder” instead of a page builder, because a page builder is commonly intended as a tool that allows to create sections and, usually, comes with shortcodes such as tabs, accordions, particular sections, galleries etc… And, in many cases, all these shortcodes are not compatible with other similar plugins you could prefer to use.
PixGridder is instead very simple, because it only allows to split your page into rows and columns by moving the functions available on your tinyMCE editor from the whole page to each column you decide to split your page into. In this way you can use the plugins you prefer with the shortcodes you prefer (and also the buttons available on your tinyMCE editor) since the editor is exactly the same one you would have without using PixGridder.
<h4>How it works</h4>
PixGridder doesn’t generate shortcodes, it only puts into your posts and pages some html comments like this: <code></code>
They’re invisible except through the source code. So if you want to disable the plugin you don’t have to worry about a lot of strange and unuseful shortcodes across your content because everything will be hidden for both the users and the search engine robots.
However, if you want to remove any trace of the plugin from the source code of a page, you can do it by enabling the “no trace” option: you’ll get rid of all the HTML comments, but you’ll keep unaltered your content.
<h4>Page builder visual description</h4>
Take a look to the <a href="https://s.w.org/plugins/pixgridder/screenshot-2.jpg" rel="nofollow ugc">2nd screenshot</a>
<ol>
<li>title and version of the installed plugin</li>
<li>Preview tab: by clicking it you will see the live site with a preview of the changes, not editable from the preview visual itself</li>
<li>Builder tab: where you can edit your page/post by using the grid builder</li>
<li>row dragger: use it to sort your rows and move them to the top or to the bottom</li>
<li>ID and class: use it to open a dialog box where to add an ID or a class to your row</li>
<li>clone button: clone your entire row and append the clone below the original one (everything will be cloned, cloumns, IDs, classes etc.)</li>
<li>column select: select how many columns your row is based on</li>
<li>delete: remove the row</li>
<li>alert icon: this icon will appear when you make a not-allowed operation, such as adding a column where there is no space for other columns or try to reduce the width of column if it already has got the minimum width allowed</li>
<li>add row: click to add an empty row</li>
<li>add column: click to add an empty column</li>
<li>column dragger: use it to sort your columns and move them to the left or to the right inside a row</li>
<li>column content: here is displayed a preview of the content (the font and the text color won’t reflect on the frontend)</li>
<li>expand column: click to increase the width of the column</li>
<li>contract column: click to reduce the width of the column</li>
<li>edit column: click to open a dialog box where to edit the content of the column (a tinyMCE editor will open in the dialog box, the width of the textarea will be relative to the max width set for the theme you’re using and the width of the column you’re editing)</li>
<li>clone button: clone your entire column and append the clone to the right of the original one, if there is enough space (everything will be cloned, content, ID, class etc.)</li>
<li>ID and class: use it to open a dialog box where to add an ID or a class to your column</li>
<li>delete: remove the column</li>
<li>“Disable the grid builder”: tick the checkbox and update the page → now the page is editable without using the grid builder, but the frontend still displays columns and rows, so pay attention to not remove any html comment or you risk to break the layout</li>
<li>“Remove any trace of PixGridder from this page”: tick the checkbox and update the page → all the row and the columns will be removed but without touching the content, still available both on the frontend and on the editor</li>
</ol>

PixGridder

A simple page grid composer that splits your pages into ordered grids, a builder for rows and columns

Carsten Bach

Gridster is a WordPress plugin that makes building intuitive draggable layouts from elements spanning multiple columns. You can even dynamically resize, add and remove elements from the grid, as edit the elements content inline.
You can fork <a href="https://github.com/carstingaxion/cbach-wp-gridster" rel="nofollow ugc">Gridster at Github</a> or tell me about your <a href="https://github.com/carstingaxion/cbach-wp-gridster/issues" rel="nofollow ugc">issues</a>.
<h4>General – Features</h4>
<ul>
<li>manage your contents within a grid</li>
<li>drag & drop contents as gridster widgets from your last posts, pages or custom post types</li>
<li>resize gridster widgets on the fly</li>
<li>use custom templates for all your gridster-widgets, or per post_type</li>
<li>override side wide settings for every gridster</li>
<li>inline edit every content loaded via your templates</li>
<li>images within your gridster-widgets are re-loaded on every resize of a widget, to best fit its dimensions</li>
<li>add gridsters by simply adding a generated shortcode, you’ll get from the gridsters post-list </li>
<li>this plugin recognizes your defined content width from your theme and will help you create best fitting gridsters</li>
<li>scripts & styles are loaded only if shortcode is really used, this saves load time</li>
<li>visual shortcode replacement, like you know from [gallery]-Shortcode</li>
<li>TinyMCE Button to add gridster layouts with user-friendly GUI</li>
<li>clean uninstall: all options, gridster-posts and related post-meta fields are deleted on uninstalling (not deactivation)</li>
</ul>
<h4>Templates</h4>
Adjust the HTML output of the gridster-widgets by overriding the default template from <code>cbach-wp-gridster/views/gridster-default.php</code>. 
Just copy this file into a new created directory <code>gridster-templates</code> within your theme folder and change it to your needs. 
Furthermore you can add different templates per post_type, when you create files like <code>gridster-YOUR_POST_TYPE_NAME.php</code> within these folder.
By using the later described <code>gridster_locate_templates_from</code> filter you are able to add more conditions to make your templates match more customized conditions.
<h4>Inline editing</h4>
With help of the <a href="http://www.appelsiini.net/projects/jeditable" rel="nofollow ugc">Jeditable</a> library it is possible to edit loaded content directly inside the gridster workbench. 
So if you are using a post called “My grandmothers apple pie is the best”, you could adjust the text inside your gridster-widget to shorter version, ie. “best apple pie” without editing the original post. 
Just add some CSS class to the wrapper element, where your title will appear.
For editing single lines of text, like titles add <code>class="gridster_edit"</code>. 
If you want to edit texts in more comfortable textarea use <code>class="gridster_edit-area"</code>
Have a look at the <code>/views/gridster-default.php</code> inside the plugin directory to get a clue.
<h3>Arbitrary section</h3>
<h4>Filters and Hooks</h4>
You can adjust the behavior of this plugin by using following filters:
<ul>
<li>Change the <code>get_post_types()</code> call for usable post_types by filtering <code>gridster_get_post_types_as_widget_blocks_args</code></li>
<li>Change final array of used post_types by modifying <code>gridster_post_types_as_widget_blocks</code></li>
<li>Filter the list of visible / usable posts per post_type by hooking into <code>gridster_get_posts_by_type_query_args</code></li>
<li>Adjust the naming convention for used templates by filtering <code>gridster_locate_templates_from</code></li>
<li>Add custom CSS classes to each Gridster widget individually from a multiple select field enhanced by <a href="http://harvesthq.github.com/chosen/" rel="nofollow ugc">chosen.js</a>, using the <code>gridster_choose_from_custom_css_classes_for_widgets</code> filter. 
The return of your applied function should be an array() like this <code>array( 'alignleft' => __('Align text from left'), 'alignright' => __('Align text from right')</code>, where the array_keys are the CSS classes to apply and the values are the readable text for you or your editors.</li>
<li>Change the capability, which allows users to overwrite the default settings for each gridster individually by filtering <code>gridster_overwrite_post_options_with_cap</code>. By default “edit_theme_options” is used.</li>
</ul>
Or you can hook in your own functionality by using the following action hooks:
<ul>
<li>Do something before and/or after the shortcode ouput by using <code>gridster_before_shortcode_render</code> or <code>gridster_after_shortcode_render</code>. Both action hooks come with three additional arguments you are able to work with, the <code>$post_id</code>, the <code>$title</code> and the <code>$widgets_html</code> of the current gridster-post. </li>
</ul>
Have a look inside the plugin file to see, what variables you are able to use within your filter hooks.
<h4>Translations</h4>
<ul>
<li>English (en_US)</li>
<li>German (de_DE)</li>
</ul>
<h4>Many Thanks goes out to</h4>
<ul>
<li>The guys of <a href="http://ducksboard.com/" rel="nofollow ugc">Ducksboard</a> and the many github Contributors for their work on <a href="https://github.com/ducksboard/gridster.js" rel="nofollow ugc">gridster.js</a></li>
<li><a href="http://www.appelsiini.net/" rel="nofollow ugc">Mika Tuupola</a> for his work on <a href="http://www.appelsiini.net/projects/jeditable" rel="nofollow ugc">Jeditable</a></li>
<li><a href="http://p.yusukekamiyamane.com/" rel="nofollow ugc">Yusuke Kamiyamane</a> for his <a href="http://www.iconfinder.com/iconsets/diagona" rel="nofollow ugc">Diagona Icons</a> licensed under <a href="http://creativecommons.org/licenses/by/3.0/" rel="nofollow ugc">Creative Commons (Attribution 3.0 Unported)</a></li>
<li><a href="http://www.midtonedesign.com/portfolio/category/portfolio/" rel="nofollow ugc">MidTone Design</a> for their <a href="http://www.iconfinder.com/iconsets/webinjection" rel="nofollow ugc">Web Injection Icons</a></li>
<li><a href="http://www.aha-soft.com/" rel="nofollow ugc">Dmitry Costenco</a> for his <a href="http://www.iconfinder.com/iconsets/freeapplication" rel="nofollow ugc">Free Applications Icons</a></li>
<li><a href="http://code.google.com/u/newmooon/" rel="nofollow ugc">New Moon</a> for their <a href="http://www.iconfinder.com/iconsets/UltimateGnome" rel="nofollow ugc">Ultimate Gnome Icons</a></li>
<li><a href="http://www.getharvest.com/" rel="nofollow ugc">Harvest</a> for developing <a href="http://harvesthq.github.com/chosen/" rel="nofollow ugc">chosen.js</a> a Javascript Plugin to make <code><select></code>s more user-friendly</li>
</ul>

Gridster

Use Gridster to manage your content with ease in a customizable grid.

PixGridder vs Gridster