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.

Sajedeh Gooklani

Mahdi Yazdani

MyPreview

<p>A fully customizable Gutenberg editor block used for wrapping several blocks in a parent wrapper, which enables you to do more sophisticated styling as well.</p>
<p><strong>Key Features</strong></p>
<ul>
<li>Maximum width</li>
<li>Full-height
<ul>
<li>Vertically align top.</li>
<li>Vertically align center.</li>
<li>Vertically align bottom.</li>
</ul>
</li>
<li>Scroll down icon — A scrolling mouse wheel animation that will offer direction to the user.
<ul>
<li>Element ID — Smoothly scroll the window to a specific element or tag ID within the page.</li>
<li>Color</li>
</ul>
</li>
<li>Visibility
<ul>
<li>Desktop</li>
<li>Laptop</li>
<li>Tablet</li>
<li>Smartphone</li>
</ul>
</li>
<li>Horizontal spacing
<ul>
<li>Desktop</li>
<li>Laptop</li>
<li>Tablet</li>
<li>Smartphone</li>
</ul>
</li>
<li>Alignment
<ul>
<li>Desktop</li>
<li>Laptop</li>
<li>Tablet</li>
<li>Smartphone</li>
</ul>
</li>
<li>Link to
<ul>
<li>Page address or URL.</li>
<li>Open in a new window.</li>
</ul>
</li>
<li>Border
<ul>
<li>Width — Sets a width for the borders.</li>
<li>Radius — Defines the radius of the corners.</li>
<li>Color</li>
</ul>
</li>
<li>Shadow — Adds a box-shadow to the block.</li>
<li>Shape — Multiple shapes to use as separators for sections or as the background graphic.
<ul>
<li>Height — A few of the shapes such as “Simple” are adjustable.</li>
<li>Color</li>
</ul>
</li>
<li>Animation on scroll
<ul>
<li>Type — Allows you to animate elements as you scroll down, and up.</li>
<li>Ease — Timing function to ease elements in different ways.</li>
<li>Offset — Offset to trigger animation sooner or later in pixels.</li>
<li>Delay — Delay the animation.</li>
<li>Duration — Duration of animation.</li>
<li>Run once — Whether animation should fire once, or every time you scroll up/down to the block.</li>
</ul>
</li>
<li>Background image
<ul>
<li>Position — Sets the starting position of the background image; “Focal Point Picker” support.</li>
<li>Repeat — Sets if and how the background image will be repeated.</li>
<li>Size — Sets the size of the background image.</li>
<li>Parallax — Not scrolling the background image with the page.</li>
<li>Sliding background effect — Supports “Left to Right” and vice versa.</li>
</ul>
</li>
<li>Background video</li>
<li>Background color</li>
<li>Overlay opacity</li>
<li>Align full and wide support</li>
<li>Aria label — To define a string that labels the current block. You might use it in cases where the block content is not visible on the screen.</li>
</ul>


Container Block

A Gutenberg editor block used for wrapping several blocks in a parent wrapper.

DOP Shortcodes vs Container Block