Mosne / Paolo Tesei

<p>This plugin extends the core/cover block with separate mobile and desktop background images and sizes.<br />
This increases the performance of the website by loading the smaller image on mobile devices and scores better in the Core Web Vitals.</p>
<h3>Configuration</h3>
<ul>
<li>In the Settings > Mosne Hero page you can configure the mobile image size and the breakpoint at which the mobile image is displayed</li>
<li>Note that this is a new size, so you will need to regenerate the thumbnails using a plugin like Regenerate Thumbnails for existing images to use the new sizes.</li>
</ul>
<h3>In the Editor</h3>
<ul>
<li>Add a cover block and select the “Hero Cover (Mobile & Desktop)” variation.</li>
<li>Now you can see a new panel with the following options:</li>
<li>Mobile image : You can also select a custom image for the desktop and the mobile view.</li>
<li>Mobile image size : choose the size that perfectly fits your design.</li>
<li>Focal point : You can also select a focal point for the mobile image.</li>
<li>Alt text : Add alternative text for the mobile image. (Leave empty if it is a decorative image)</li>
<li>High fetch priority : force the high fetch priority attribute if the image is above the fold.</li>
<li>If you use a featured image, leave the mobile image empty and the plugin will use the mobile size for the featured image for the mobile view.</li>
</ul>
<h3>Video background</h3>
<ul>
<li>Add a cover block and select the “Hero Video (Mobile & Desktop)” variation.</li>
<li>Now you can see a new panel with the following options:</li>
<li>Mobile and desktop custom poster : You can also select a custom image for the desktop and the mobile view.</li>
<li>Mobile and desktop custom video : You can also select a custom video for the desktop and the mobile view.</li>
</ul>
<h3>Key Features</h3>
<ul>
<li>Separate mobile and desktop background images and sizes</li>
<li>Configure the mobile image size and the breakpoint at which the mobile image is displayed</li>
<li>It also works with the featured image</li>
<li>Focal point switching for the mobile image</li>
<li>Alt text switching for the mobile image</li>
<li>High fetch priority for the mobile image</li>
<li>Performance-optimized and lightweight</li>
<li>No block library required</li>
<li>Primarily built with native WordPress components</li>
<li>Support for all video formats (MP4, WebM, OGG)</li>
</ul>
<h3>Limitations</h3>
<ul>
<li>The mobile image is not displayed in the block editor</li>
<li>Repeated background is not supported</li>
<li>Parallax background is not supported</li>
</ul>
<h3>Stay Connected</h3>
<ul>
<li><a href="https://github.com/mosne/mosne-hero" rel="nofollow ugc">View on GitHub</a></li>
<li><a href="https://mosne.it/" rel="nofollow ugc">Visit my website</a></li>
<li><a href="https://x.com/mosne" rel="nofollow ugc">Follow on Twitter</a></li>
</ul>


Mosne Hero

This plugin extends the core/cover block with separate mobile and desktop background images and sizes.

Jakob Wiens

<p><strong>TZM Section Block</strong> brings powerful enhancements to the Gutenberg editor, allowing you to create visually appealing sections for your website with ease. This block is based on the official “Cover block” but offers advanced features for greater flexibility and design options.</p>
<ul>
<li><strong>Enhanced Parallax Background</strong>: Choose from “slow,” “medium,” and “fast” parallax speeds for a dynamic visual effect beyond the traditional “fixed” option.</li>
<li><strong>Customizable Divider Shapes</strong>: Add top and bottom divider shapes to your sections. Choose from various shapes and customize their color, height, and more.</li>
<li><strong>Responsive Full-Height Sections</strong>: Adjust full-height sections (100vh) to fit perfectly on screens by subtracting the height of a CSS selector element, such as a fixed header.</li>
<li><strong>Overflow Content Control</strong>: Easily hide or display overflowing content within a section.</li>
</ul>
<p>With these advanced options, TZM Section Block empowers designers and developers to craft sections that stand out while providing intuitive controls for seamless customization.</p>
<h3>Source Code</h3>
<p>The source code for TZM Section Block is now available on GitHub!<br />
Follow the development, report issues, and get involved in improving the plugin. We welcome contributions, feedback, and feature requests from the community.</p>
<ul>
<li><a href="https://github.com/jakobwiens7/tzm-section-block" rel="nofollow ugc">View on GitHub</a></li>
</ul>


TZM Section Block

Build cool and eye-catching sections with parallax effects, shape dividers, and more handy features using this versatile Gutenberg block.

Mosne Hero vs TZM Section Block