Corey McKrill

<p>This plugin is intended for theme developers and others who want to have full control of their column styles while still providing a quick and easy framework for adding/editing column content via WordPress’s visual editor. It eliminates the need to type tedious, unmanageable chunks of HTML into the editor when specific posts or pages require a columnar layout.</p>
<p>That said, this plugin is not plug-and-play. It does not include any styles out-of-the-box, so if you start using the shortcodes without adding appropriate CSS rules, there probably won’t be any visible changes to your content.</p>
<p>See the <a href="https://github.com/jupiterwise/Columns-DIY/wiki/Recipes" rel="nofollow ugc">Recipes</a> page on the GitHub wiki for some styling examples.</p>
<h4>Usage</h4>
<ul>
<li>Designate each column with <code>[column]</code> and <code>[/column]</code></li>
<li>Mark the end of a row with <code>[endrow]</code></li>
</ul>
<h4>Features</h4>
<ul>
<li>Includes enumerated column and row classes, allowing for per-column and -row styling. Also includes parity classes (odd/even) for striping.</li>
<li>If a user forgets to add the last <code>[endrow]</code> shortcode, the plugin will automatically insert a closing <code></div></code> so the site layout doesn’t get broken.</li>
<li>Cleans up errant <code><p></code> and <code><br /></code> tags that result from WordPress’s <code>wpautop()</code> function.</li>
<li>All parameter inputs are escaped for security.</li>
</ul>
<h4>Example</h4>
<p>Putting this into the visual editor:</p>
<blockquote>
<p><code>[column]</code></p>
<p>This is the column of Foo.</p>
<p><code>[/column]</code></p>
<p><code>[column]</code></p>
<p>This is the column of Bar.</p>
<p><code>[/column]</code> <code>[endrow]</code></p>
</blockquote>
<p>Will result in this output:</p>
<p>This is the column of Foo.</p>
<p>    </p>
<p>This is the column of Bar.</p>
<p>    </p>
<p></p>
<h4>Parameters</h4>
<p>The following optional parameters can be added to the <code>[column]</code> shortcode:</p>
<ul>
<li><em>class</em> (String : ”)<br />
Classes for the column <code><div></code> element. Separate multiple classes with spaces.</li>
<li><em>rowclass</em> (String : ”)<br />
Classes for the row <code><div></code> element. Only works when included with the first <code>[column]</code> shortcode in a row.</li>
<li><em>style</em> (String : ”)<br />
Inline styles for the column <code><div></code> element.</li>
<li><em>rowstyle</em> (String : ”)<br />
Inline styles for the row <code><div></code> element. Only works when included with the first <code>[column]</code> shortcode in a row.</li>
<li><em>norow</em> (Boolean : false)<br />
Set to true to omit the row wrapper <code><div></code>.</li>
</ul>
<h4>Filters</h4>
<p>The following filter hooks can be used to alter the output of the shortcodes:</p>
<ul>
<li><code>diy_colclass</code></li>
<li><code>diy_colstyle</code></li>
<li><code>diy_column</code></li>
<li><code>diy_rowclass</code></li>
<li><code>diy_rowstyle</code></li>
<li><code>diy_beginrow</code></li>
<li><code>diy_endrow</code></li>
</ul>

Columns DIY

Simple shortcodes for div-based columns and rows. Wrap desired content in [column][/column]. Mark the end of a row with [endrow]. CSS not included.

marsian

<p>Essential addons for your websites like Portfolios, Team Members, Testiminials, Sliders, WooCommerce Product Listing. etc via Shortcodes or SiteOrigin Page builder or using Elementor widgets. This plugin also optionally adds Wishlist and Compare Products for Woocommerce.</p>
<h4>Elementor Demos</h4>
<p><a href="http://www.wp-demos.com/i-spirit/tx-demo/elementor-templatesnext-toolkit/" rel="nofollow ugc">Slider</a> – A simple Slider widget for elementor.<br />
<a href="http://www.wp-demos.com/i-spirit/tx-demo/templatesnext-toolkit-portfolio/" rel="nofollow ugc">Portfolio</a> – A Portfolio widget for elementor to showcase your work.<br />
<a href="http://www.wp-demos.com/i-spirit/tx-demo/elementor-team-contact-form-7/" rel="nofollow ugc">Team</a> – Team widget for elementor to show team member.<br />
<a href="http://www.wp-demos.com/i-spirit/tx-demo/product-lists-post-grids/#postgrid" rel="nofollow ugc">Posts Grid</a> –  Create Posts Grid with this elementor widget.<br />
<a href="http://www.wp-demos.com/i-spirit/tx-demo/elementor-team-contact-form-7/#contactform7" rel="nofollow ugc">Contact Form 7</a> – An elementor widget for Contact Form 7.<br />
<a href="http://www.wp-demos.com/i-spirit/tx-demo/product-lists-post-grids/" rel="nofollow ugc">Products Lists</a> – This widget combines elementor with WooCommerce.<br />
<a href="http://www.wp-demos.com/i-spirit/tx-demo/templatesnext-toolkit-portfolio/#tx-testimonials" rel="nofollow ugc">Testimonials</a> – A testimonial Carousel widget for elementor.</p>
<h4>SiteOrgin Page Builder Demo</h4>
<p><a href="http://www.wp-demos.com/i-spirit/tx-demo/" rel="nofollow ugc">Home Page</a> – Created with <strong>TemplatesNext Toolkit</strong> widgets for SiteOrigin Page Builder.</p>
<h4>Shortcodes Demos And Documentations</h4>
<p><a href="http://www.templatesnext.org/icreate/?page_id=541" rel="nofollow ugc">Demos And Documentation</a> – Demos created with shortcode generators and documentations.</p>
<h4>Themes Built To Work With TemplatesNext ToolKit</h4>
<p><a href="https://wordpress.org/themes/i-excel/" rel="ugc">i-excel</a>, <a href="https://wordpress.org/themes/i-craft/" rel="ugc">i-craft</a>, <a href="https://wordpress.org/themes/i-design/" rel="ugc">i-design</a>, <a href="https://wordpress.org/themes/i-max/" rel="ugc">i-max</a><br />
Some of the shortcodes/widgets may only work properly with above TemplatesNext Themes.</p>


TemplatesNext ToolKit

This plugin adds portfolio, team/members, itrans slider, testimonials post type along with shortcodes for Portfolio, Testimonials, Image Sliders, Team …

Columns DIY vs TemplatesNext ToolKit