wgrivera

<p>A debugging tool that adds a small badge in the corner of the site, showing the current viewport width and height for finding media queries breakpoints and testing responsive website.</p>
<p>Works in real-time, so resizing the browser will also trigger an update to the screen dimensions.</p>
<p>The viewport reporter can be activated or deactivated by enabling or disabling the plugin.</p>


WP Viewport

A debugging tool that adds a small badge in the corner of the site, showing the current viewport width and height for finding media queries breakpoint …

shift8

<p>Shift8 ScrollShot turns a tall image into a scrolling screenshot preview. Add the wrapper and image classes, then adjust the behavior with data attributes. It works in regular templates, block markup, and most page builders.</p>
<p><strong>Features:</strong></p>
<ul>
<li>Automatic loop or scroll-linked movement</li>
<li>Configurable pause timing</li>
<li>Optional browser-style frame with traffic-light dots</li>
<li>Per-instance configuration via data attributes</li>
<li>Multiple independent instances on one page</li>
<li>Respects <code>prefers-reduced-motion</code></li>
<li>No jQuery dependency</li>
</ul>
<h3>Usage</h3>
<ol>
<li>Add a container element and give it the CSS class <code>s8-scrollshot</code>.</li>
<li>Add an image inside that container and give the image the CSS class <code>s8-scrollshot__image</code>.</li>
<li>(Optional) Add data attributes to the container or image to configure the behavior.</li>
</ol>
<p>Data attributes can be placed on either the wrapper or the image. If the same attribute appears on both, the wrapper value takes priority.</p>
<h4>Page Builder Setup</h4>
<p>In visual builders such as Bricks or Elementor:</p>
<ol>
<li>Add a container or section element and apply the CSS class <code>s8-scrollshot</code>.</li>
<li>Add an image element inside it and apply the CSS class <code>s8-scrollshot__image</code>.</li>
<li>Use the builder’s custom attributes panel to add any <code>data-*</code> attributes.</li>
</ol>
<h4>Plain HTML Example</h4>
<pre><code><div class="s8-scrollshot" data-mode="auto" data-duration="15000">
  <img class="s8-scrollshot__image" src="screenshot.png" alt="Screenshot">
</div><h3>Data Attributes</h3>
</code></pre>
<p>All configuration is done through HTML data attributes on the <code>.s8-scrollshot</code> container or the <code>.s8-scrollshot__image</code> element. Wrapper values take priority over image values.</p>
<ul>
<li><code>data-mode</code> – <code>auto</code> or <code>scroll</code> (default: <code>auto</code>)</li>
<li><code>data-duration</code> – Total cycle time in milliseconds (default: <code>12000</code>)</li>
<li><code>data-end-pause</code> – Hold time at top and bottom in milliseconds (default: <code>1500</code>)</li>
<li><code>data-pause-on-hover</code> – <code>true</code> or <code>false</code> (default: <code>true</code>)</li>
<li><code>data-reverse</code> – <code>true</code> or <code>false</code>, controls bounce direction (default: <code>true</code>)</li>
<li><code>data-frame</code> – <code>none</code> or <code>browser</code> (default: <code>none</code>)</li>
<li><code>data-viewport-height</code> – Visible area height in pixels (default: <code>700</code>)</li>
<li><code>data-viewport-width</code> – Viewport width in pixels, <code>0</code> for auto (default: <code>0</code>)</li>
<li><code>data-easing</code> – Any CSS easing string (default: <code>ease-in-out</code>)</li>
</ul>


Shift8 ScrollShot

Display tall screenshots inside a fixed-height scrolling frame.

WP Viewport vs Shift8 ScrollShot