DOTonPAPER

<p>View <a href="http://dopdemo.net/wp/dop-shortcodes/" rel="nofollow ugc">demo</a> here.</p>
<p>This is a collections of shortcodes we use in our themes. We always accept feedback and constructive criticism so if you have something to say please use the <a href="https://wordpress.org/support/plugin/dop-shortcodes" rel="ugc">support forum</a>.</p>
<h4>Shortcodes List</h4>
<ul>
<li>Accordions</li>
<li>Containers</li>
<li>Grids</li>
<li>Images</li>
<li>Lists</li>
<li>Progress Bars</li>
<li>Separators</li>
<li>Social Icons</li>
<li>Tabs</li>
<li>Tables</li>
<li>Toggles</li>
</ul>
<h4>Shortcodes Examples</h4>
<p>Please view <a href="http://help.dotonpaper.net/dop-shortcodes-wordpress-plugin.html" rel="nofollow ugc">documentation</a> for more details.</p>
<h4>Accordion</h4>
<pre><code>[dopaccordions]
    [dopaccordion title="Title 1"]text[/dopaccordion]
    [dopaccordion title="Title 2"]text[/dopaccordion]
    [dopaccordion title="Title 3"]text[/dopaccordion]
[/dopaccordions]
</code></pre>
<h4>Container</h4>
<pre><code>[dopcontainer]text[/dopcontainer]
</code></pre>
<h4>Grid</h4>
<pre><code>[dopgridrow]
    [dopgrid size="1/3"]<h5>1/3</h5>text[/dopgrid]
    [dopgrid size="1/3"]<h5>1/3</h5>text[/dopgrid]
    [dopgrid size="1/3"]<h5>1/3</h5>text[/dopgrid]
[/dopgridrow]
</code></pre>
<h4>Image</h4>
<pre><code>[dopimg align=left height=200 width=100%]<img src="image path" alt="" />[/dopimg]
</code></pre>
<h4>List</h4>
<pre><code>[doplist]
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
[/doplist]
</code></pre>
<h4>Progress Bar</h4>
<pre><code>[dopprogressbar progress=70]70%[/dopprogressbar]
</code></pre>
<h4>Separator</h4>
<pre><code>[dopseparator]
</code></pre>
<h4>Social Icon</h4>
<pre><code>[dopsocialicon network=facebook]Facebook[/dopsocialicon]
</code></pre>
<h4>Tabs</h4>
<pre><code>[doptabs]
    [doptab title="Tab 1"]text[/doptab]
    [doptab title="Tab 2"]text[/doptab]
    [doptab title="Tab 3"]text[/doptab]
[/doptabs]
</code></pre>
<h4>Table</h4>
<pre><code>[doptable]
<thead>
    <tr>
        <th>One</th>
        <th>Two</th>
        <th>Three</th>
        <th>Four</th>
    </tr>
</thead>
<tbody>
    <tr class="odd">
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
    <tr>
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
    <tr class="odd">
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
    <tr>
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
    <tr class="odd">
        <td>Etiam nec</td>
        <td>aliquam</td>
        <td>erat</td>
        <td>nulla sodales dui aenean eu mollis lorem</td>
    </tr>
</tbody>
[/doptable]
</code></pre>
<h4>Toggle</h4>
<pre><code>[doptoggle title="Toggle"]text[/doptoggle]
</code></pre>


DOP Shortcodes

This is a collections of shortcodes we use in our themes.

Noor Alam

magicalblocks

<p><strong>Magical Blocks</strong> brings the <strong>Elementor experience to Gutenberg</strong> – build stunning websites with the same powerful design controls you love, but 100% native to the WordPress block editor.</p>
<h4>🎯 Why Magical Blocks?</h4>
<ul>
<li><strong>Elementor-Style Workflow</strong> – Familiar container-based layouts with Flexbox controls</li>
<li><strong>Lightweight & Fast</strong> – Only loads assets for blocks you actually use</li>
<li><strong>Design-First</strong> – Professional styling with full customization options</li>
<li><strong>WordPress Native</strong> – Built entirely on the Gutenberg block editor</li>
<li><strong>Developer Friendly</strong> – Clean code following WordPress coding standards</li>
</ul>
<h4>🚀 Get the Elementor Vibe in WordPress Editor</h4>
<p>Miss Elementor’s intuitive design controls? Magical Blocks brings that same power to Gutenberg:</p>
<ul>
<li><strong>Flexbox Containers</strong> – Build complex layouts with direction, wrap, justify, and align controls</li>
<li><strong>Nested Containers</strong> – Create sophisticated multi-column designs with Inner Container blocks</li>
<li><strong>Full Responsive Control</strong> – Desktop, tablet, and mobile settings for every property</li>
<li><strong>Visual Design Panel</strong> – Intuitive controls just like your favorite page builder</li>
</ul>
<h4>📦 12 Free Blocks</h4>
<p><strong>Layout Blocks:</strong><br />
1. <strong>Container Block</strong> – Powerful Flexbox container with full layout controls (direction, wrap, justify, align)<br />
2. <strong>Inner Container Block</strong> – Nestable container for complex multi-column layouts<br />
3. <strong>Section Block</strong> – Full-width sections with backgrounds and inner blocks</p>
<p><strong>Content Blocks:</strong><br />
4. <strong>Heading Block</strong> – Advanced typography controls with Google Fonts integration<br />
5. <strong>Button Block</strong> – Stylish buttons with hover effects and icon support<br />
6. <strong>Icon Box Block</strong> – Icon + text combinations for features and services<br />
7. <strong>Testimonial Block</strong> – Customer reviews with avatar and star ratings<br />
8. <strong>Info Box Block</strong> – Information cards with icons and call-to-action<br />
9. <strong>Image Box Block</strong> – Image + text layouts with hover effects<br />
10. <strong>Counter Block</strong> – Animated number counters for statistics<br />
11. <strong>Progress Bar Block</strong> – Visual progress indicators with animations<br />
12. <strong>Divider Block</strong> – Stylish separators with icons and text</p>
<h4>⚡ Key Features</h4>
<ul>
<li><strong>Flexbox Layout System</strong> – Container blocks with full Flexbox controls like Elementor</li>
<li><strong>On-Demand Asset Loading</strong> – CSS/JS only loads when blocks are used</li>
<li><strong>Responsive Controls</strong> – Desktop, tablet, and mobile settings for all properties</li>
<li><strong>CSS Variables</strong> – Easy theme integration and customization</li>
<li><strong>Block Patterns</strong> – Pre-designed layouts (coming soon)</li>
<li><strong>Pro Blocks</strong> – Additional premium blocks available (coming soon)</li>
</ul>
<h4>🎨 Full Customization</h4>
<p>Every block includes comprehensive styling options – just like Elementor:</p>
<ul>
<li>Typography (font family, size, weight, line-height, letter-spacing)</li>
<li>Colors (text, background, borders with opacity support)</li>
<li>Spacing (padding, margin with responsive controls)</li>
<li>Borders (width, radius, style, color)</li>
<li>Shadows (customizable box shadows)</li>
<li>Hover effects (transitions and transforms)</li>
<li><strong>Layout Controls</strong> (Flexbox direction, wrap, justify, align, gap)</li>
</ul>
<h4>🔧 Developer Features</h4>
<ul>
<li>PHPCS compliant (WordPress Coding Standards)</li>
<li>ESLint & Prettier configured</li>
<li>Webpack build system with @wordpress/scripts</li>
<li>Proper internationalization (i18n ready)</li>
<li>Documented codebase with PHPDoc/JSDoc</li>
</ul>
<h4>💡 Perfect For Elementor Users</h4>
<p>Switching from Elementor to Gutenberg? Magical Blocks makes the transition smooth:</p>
<ul>
<li>Same container-based workflow you’re used to</li>
<li>Familiar Flexbox layout controls</li>
<li>Visual design panels for all styling options</li>
<li>No learning curve – just start building!</li>
</ul>


Magical Blocks – Elementor Style Blocks for Gutenberg

Get Elementor vibe in the WordPress Editor! Powerful Gutenberg blocks with Flexbox containers, responsive controls, and professional design options.

DOP Shortcodes vs Magical Blocks – Elementor Style Blocks for Gutenberg