Bytes.co

<blockquote>
<p>Blockade is in public beta. There may be frequent releases and features may change as we work towards releasing version 1.0. Please let us know about your experience, so we can make Blockade even better.</p>
</blockquote>
<h4>Blockade will change the way you look at designing and building for the web</h4>
<p>Page builders are usually overbuilt and hard to learn to use effectively. Blockade turns that trend on its head, and provides a lightweight page builder that integrates directly into your site’s existing interface. With Blockade, you can build beautiful, professional, and standards-compliant responsive layouts, in seconds.</p>
<p>Want to know the best part? Your layout is built in clean, easy to edit HTML5, with the popular Bootstrap framework.  Need to make a change beyond what the interface allows? Simply switch to text mode and edit the HTML directly.</p>
<h4>Built for real designers with real clients</h4>
<p>Real clients have sites with custom metaboxes, shortcodes, widgets, and theme options built into their editors. Most page builders ignore those crucial controls, and focus on building a new interface, just for their custom experience. They aren’t good at being a tool that adds to an existing workflow.</p>
<p>We built Blockade to give our clients the WordPress experience they deserve. It cut its teeth on the real problems users face with designing and editing, and working with common plugins like ACF and Slider Revolution. It has revolutionized editing for our team and our clients.</p>
<p>Now we’re ready to revolutionize editing for everyone else.</p>
<p>Learn more at <a href="https://www.wpblockade.com" rel="nofollow ugc">https://www.wpblockade.com</a></p>
<h4>Blockade Features</h4>
<ul>
<li>Content Blocks: HTML, Photo, Video, Button, Text & Map</li>
<li>Structure Blocks: Simple Columns, Groups, and Full-Width Breakouts</li>
<li>Lightweight, semantic markup for maximum performance and accessibility</li>
<li>Easy background controls</li>
<li>Mobile-friendly, responsive layouts</li>
<li>Add your own CSS classes and IDs</li>
<li>Embed shortcodes as usual</li>
<li>Works with Pages, Posts, and Custom Post Types</li>
<li>Flexible API for custom addon development</li>
</ul>


WP Blockade – Visual Page Builder

Blockade is the WordPress editor done right. It's a lightweight, flexible visual page builder that lets you build stunning layouts in seconds.

Zayed Baloch

Hammal Albulushi

Naeem Noor

<p>Twenty20 is a professional-grade image comparison tool that helps you showcase transformations in a highly engaging way. Perfect for:</p>
<ul>
<li>Photography portfolios</li>
<li>Real estate before/after</li>
<li>Renovation projects</li>
<li>Design makeovers</li>
<li>Product comparisons</li>
<li>Restoration work</li>
<li>Medical procedures</li>
<li>And much more!</li>
</ul>
<h4>Video Tutorial</h4>
<p><iframe loading="lazy" title="How to Use the Twenty20 Image Before-After Plugin in WordPress | Step-by-Step Tutorial" width="750" height="422" src="https://www.youtube.com/embed/1cQ9rhL-t70?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<h4>Live Demo</h4>
<p>Check the <a href="https://zayedbaloch.com/twenty20-image-before-after-wordpress-plugin/" title="Twenty20 Live demo" rel="nofollow ugc">Live Demo</a>.</p>
<h4>Key Features</h4>
<ul>
<li>Responsive design – works perfectly on all devices</li>
<li>Horizontal and vertical sliding options</li>
<li>Customizable slider position and orientation</li>
<li>Custom “before” and “after” labels</li>
<li>Adjustable image widths and alignments</li>
<li>Mouse hover sliding effect</li>
<li>Touch-enabled for mobile devices</li>
<li>Multiple sliders per page</li>
<li>Widget support for sidebars</li>
<li>SEO-friendly with proper alt tag support</li>
<li>Accessibility compliant image comparisons</li>
</ul>
<h4>Page Builder Support</h4>
<ul>
<li>Elementor</li>
<li>WPBakery Page Builder (Visual Composer)</li>
<li>Flatsome UX Builder</li>
<li>Classic Editor</li>
</ul>
<h4>Perfect For</h4>
<ul>
<li>Photography before/after edits</li>
<li>Home renovation comparisons</li>
<li>Web design makeovers</li>
<li>Product transformations</li>
<li>Restoration projects</li>
<li>Beauty transformations</li>
<li>Real estate renovations</li>
</ul>
<h3>Usage</h3>
<h4>Shortcode Example</h4>
<p><strong>Quick Example</strong></p>
<pre><code>[twenty20 img1="" img2="" direction="vertical" offset="0.5" align="right" width="60%" before="Before" after="After" hover="true"]
</code></pre>
<p><strong>Shortcode Parameters</strong></p>
<ul>
<li><code>img1</code> – image ID.</li>
<li><code>img2</code> – image ID.</li>
<li><code>offset</code> – range from 0.1 to 1.0.</li>
<li><code>direction</code> – <code>horizontal|vertical</code>.</li>
<li><code>align</code> – <code>none|right|left</code>.</li>
<li><code>width</code> – supports both <code>px</code> and <code>%</code>.</li>
<li><code>before</code> – text for the “before” label.</li>
<li><code>after</code> – text for the “after” label.</li>
<li><code>hover</code> – <code>true</code> or <code>false</code>.</li>
</ul>


Twenty20 Image Before-After

Simple and clear implementation of the Twenty Twenty by Zurb script.  Thanks for saving me a few hours.

Works Well

Professional before & after image comparison slider for WordPress. Create engaging visual comparisons with an intuitive drag & drop interface.

WP Blockade – Visual Page Builder vs Twenty20 Image Before-After