WebMaestro.Fr

<p>I found <a href="http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/" rel="nofollow ugc">John Dyer’s Native Fullscreen JavaScript API</a> the other day, and I thought it was pretty awesome.</p>
<p>A true fullscreen mode ! Without Flash !</p>
<p>It’s quite experimental so far, but “support is coming to most browsers in the next few months”. You should read <a href="http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/" rel="nofollow ugc">John Dyer’s post</a> about that.</p>
<p>The plugin come with a widget and a shortcode to generate the button. Use a CSS selector to target the element you want to display in fullscreen… and that’s it !</p>
<p>[fullscreen target=”THE-CSS-SELECTOR” text=”The button’s text”]</p>
<p>Enjoy folks !</p>


Native Fullscreen

terenziocensoni

Webyx

Rodolfo Cucchiella

<p>The first and most powerful plugin to create awesome fullpage fullscreen vertical and horizontal scrolling websites effortlessly on WordPress.</p>
<p><iframe loading="lazy" title="How to create a page with Webyx Free for Gutenberg in Full Site Editing step by step tutorial (1/3)" width="750" height="422" src="https://www.youtube.com/embed/MtxXauTyMs8?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>
<h3>💡 WHAT YOU CAN DO</h3>
<p><strong>Webyx</strong> for Gutenberg is a plugin for WordPress that allows you to create amazing <strong>fullpage fullscreen scrollable websites</strong> quickly and easily.</p>
<p>If you want to see and try something made with Webyx, go to our <a href="https://demo.webyx.it/webyx-free-block-with-twenty-24-block-themes/" rel="nofollow ugc">DEMO website!</a></p>
<h3>💎 WEBYX PRO FOR GUTENBERG</h3>
<p>With the <a href="https://gum.co/u/phihkwcg" rel="nofollow ugc">PRO version</a> you will also be able to create <strong>landing</strong>, <strong>single</strong> or <strong>multi page websites</strong>, manually shape the view appearance you want to show.</p>
<p><strong>⚠️ IMPORTANT NOTE: after having installed the PRO version you can convert directly from the FREE version to the PRO version.</strong></p>
<h3>🚀 TRY WEBYX FREE FOR ELEMENTOR</h3>
<p>Are you also Elementor users and enthusiasts?<br />
We have the version of Webyx explicitly built for Elementor.<br />
Download and try the <a href="https://wordpress.org/plugins/webyx-fe/" rel="ugc">Webyx Free for Elementor</a> version of our dedicated plugin!</p>
<h3>🎁 WebyxUI: join our Exclusive BETA!</h3>
<p>We are thrilled to announce the upcoming launch of our new product, <a href="https://gum.co/u/rmtlgcnq" rel="nofollow ugc">WebyxUI</a>.<br />
We would like to offer you an exclusive opportunity to be among the firsts to experience it: we are opening 20 spots for BETA testers for FREE!<br />
By joining our BETA program, you will get early and FREE access to <a href="https://gum.co/u/rmtlgcnq" rel="nofollow ugc">WebyxUI</a> and have the chance to provide feedback that will help shape the final version.</p>
<h3>🎁 FEATURES OF THE FREE VERSION</h3>
<ul>
<li><a href="https://www.youtube.com/watch?v=ALkTezuyzxc" rel="nofollow ugc">Sections</a></li>
<li><a href="https://www.youtube.com/watch?v=ALkTezuyzxc" rel="nofollow ugc">Slides</a></li>
<li><a href="https://www.youtube.com/watch?v=I2pBlUjBH8U" rel="nofollow ugc">Slide content position</a></li>
<li>Panel style</li>
<li>Template design</li>
<li><a href="https://www.youtube.com/watch?v=fY_5lVCRPsQ" rel="nofollow ugc">Continuous horizontal</a></li>
<li><a href="https://www.youtube.com/watch?v=coJF40Yj0qE" rel="nofollow ugc">Animation easings and speeds</a></li>
<li><a href="https://www.youtube.com/watch?v=p9wo5iJBh0Q" rel="nofollow ugc">Navigation arrows</a></li>
<li><a href="https://www.youtube.com/watch?v=Mp3idgS2xcQ" rel="nofollow ugc">Navigation bullets</a></li>
<li><a href="https://www.youtube.com/watch?v=bmmQuoGfC0s" rel="nofollow ugc">Navigation mouse wheel</a></li>
<li>Navigation keyboard</li>
<li><a href="https://www.youtube.com/watch?v=x6iX_cCWfno" rel="nofollow ugc">Fullscreen button</a></li>
<li><a href="https://www.youtube.com/watch?v=i6K_zeAOUoA" rel="nofollow ugc">Lockable horizontal swipe</a></li>
<li><a href="https://www.youtube.com/watch?v=NsFWk-hl-VE" rel="nofollow ugc">Loading splash screen</a></li>
<li><a href="https://www.youtube.com/watch?v=TmW9nPNnhDQ" rel="nofollow ugc">Mobile settings</a></li>
<li><a href="https://www.youtube.com/watch?v=3aKxzeEUi28" rel="nofollow ugc">Custom CSS</a></li>
<li><a href="https://www.youtube.com/watch?v=MtxXauTyMs8" rel="nofollow ugc">WordPress Full Site Editing Theme compatibility</a></li>
<li>Built-in responsive menu</li>
<li>Responsive</li>
<li>Touch support</li>
<li>Clean and minimized code</li>
<li>Compatible with all modern browsers</li>
<li>No jQuery</li>
<li>Easy to use with hundreds of configurable options</li>
<li>…and much more</li>
</ul>
<h3>🏆 FEATURES OF THE PRO VERSION ONLY</h3>
<ul>
<li><a href="https://www.youtube.com/watch?v=ou4L8iN1zDc" rel="nofollow ugc">View design</a></li>
<li><a href="https://www.youtube.com/watch?v=ou4L8iN1zDc" rel="nofollow ugc">Customizable header with menu</a></li>
<li><a href="https://www.youtube.com/watch?v=XU2p0MrdvhI" rel="nofollow ugc">Anchors</a></li>
<li><a href="https://www.youtube.com/watch?v=16EHgtjSFzw" rel="nofollow ugc">Scrolling content</a></li>
<li><a href="https://www.youtube.com/watch?v=fY_5lVCRPsQ" rel="nofollow ugc">Continuous vertical</a></li>
<li><a href="https://www.youtube.com/watch?v=junt7gnmfRs" rel="nofollow ugc">Horizontal animation</a></li>
<li><a href="https://www.youtube.com/watch?v=_nUlXMsEMvg" rel="nofollow ugc">Horizontal scrolling</a></li>
<li><a href="https://www.youtube.com/watch?v=r5gUISxdqM8" rel="nofollow ugc">Horizontal scrolling smooth animation and duration</a></li>
<li><a href="https://www.youtube.com/watch?v=VsWc8sqPaGY" rel="nofollow ugc">Card style</a></li>
<li><a href="https://www.youtube.com/watch?v=VsWc8sqPaGY" rel="nofollow ugc">Parallax effect</a></li>
<li><a href="https://www.youtube.com/watch?v=cr-0UX2wn38" rel="nofollow ugc">Navigation Drag and Move (BETA)</a></li>
<li><a href="https://www.youtube.com/watch?v=XGTaXUK-UfE" rel="nofollow ugc">Indipendent animation types on X and Y axes</a></li>
<li><a href="https://www.youtube.com/watch?v=XGTaXUK-UfE" rel="nofollow ugc">Fade and toggle animations</a></li>
<li><a href="https://www.youtube.com/watch?v=0NeotUFVJIw" rel="nofollow ugc">Normal scrolling website</a></li>
<li><a href="https://www.youtube.com/watch?v=0NeotUFVJIw" rel="nofollow ugc">Slide height autofill</a></li>
<li><a href="https://www.youtube.com/watch?v=Jhmq-O2LB2E" rel="nofollow ugc">Lockable vertical movement</a></li>
<li>Mobile movement threshold</li>
<li><a href="https://www.youtube.com/watch?v=xjdqoDbwtyE" rel="nofollow ugc">Switchable foregrounds for each Slide background</a></li>
<li><a href="https://www.youtube.com/watch?v=xjdqoDbwtyE" rel="nofollow ugc">Different backgrounds for each device type</a></li>
<li><a href="https://www.youtube.com/watch?v=rG7yvGdswqc" rel="nofollow ugc">Background audio</a></li>
<li><a href="https://www.youtube.com/watch?v=e_tdcVLiRgE" rel="nofollow ugc">Background video</a></li>
<li><a href="https://www.youtube.com/watch?v=hPz3rhWL4vE" rel="nofollow ugc">Event hooks</a></li>
<li><a href="https://www.youtube.com/watch?v=ySsDlcOZpas" rel="nofollow ugc">Visible or hidden Slides on the fly</a></li>
<li>Automatic updates management</li>
<li>Rollback to previous versions</li>
<li>…and much more</li>
</ul>
<h3>📖 QUICK USER’S GUIDE</h3>
<p>For a more complete documentation visit our website at <a href="https://webyx.it" rel="nofollow ugc">Webyx</a>.</p>
<h4>How to add the block in Gutenberg</h4>
<ol>
<li>Create a new page or go to the page you would like to add the block.</li>
<li>Enable Webyx Template page or Custom Template page.</li>
<li>Find <strong>Webyx for Gutenberg</strong> block on the Gutenberg blocks and add it to the page.<br />
    IMPORTANT: you can add only one <strong>Webyx</strong> for Gutenberg block as the only root element of the page.<br />
    You should not add any other block to the page at the same level of the <strong>Webyx</strong> for Gutenberg block.</li>
<li>Inside the root level <strong>Webyx</strong> for Gutenberg block you must only add Section blocks that will contain exclusively Slide blocks.<br />
    IMPORTANT: remember to give different titles to Sections and Slides inside the same Section to allow a correct functioning of Navigation Bullets.</li>
<li>Create your layout inside every single Slide.</li>
</ol>
<p><strong>⚠️ IMPORTANT: Sometimes with the update of Gutenberg, WordPress or other third party plugins, Webyx for Gutenberg block might generate this error: “Webyx for Gutenberg block contains unexpected or invalid content”.<br />
If you see this error instead of the Webyx for Gutenberg block use “attempt block recovery” button.<br />
Do NOT use “Convert to classic block” option. We may introduce major changes that fix bugs or simply add new features which could lead to an attempt block recovery.<br />
Check your pages after each update.</strong></p>
<h4>Enable Webyx template</h4>
<ol>
<li>Click on the Page tab in the right side of Gutenberg editor.</li>
<li>In pages attributes find the Template select and choose <em>webyx</em>.</li>
<li>In Appearance > Menus create your new menu and enable in Menu Settings > Display location: <em>Webyx Menu</em>.</li>
</ol>
<p><em>Important note</em>: <strong>Webyx</strong> for Gutenberg template provides a responsive, scrollable, multi-level, with logo custom menu (Webyx Menu) that could be created with the WordPress Menus internal management.</p>
<h4>Webyx For Gutenberg Plugin Settings</h4>
<p>To customize general plugin settings just go to Settings > Webyx Plugin Settings.</p>
<ul>
<li><strong>Hide WP admin top bar</strong>: hide WP admin top bar in Webyx pages preview.</li>
<li><strong>Enable Webyx menu</strong>: enable Webyx menu “Display location” in Appearance/Menus/Menu structure/Menu settings.</li>
</ul>
<h4>Languages</h4>
<ul>
<li>English</li>
<li>Italian</li>
</ul>
<h4>Documentation and Support</h4>
<ul>
<li>For documentation visit our website at <a href="https://webyx.it" rel="nofollow ugc">Webyx</a>.</li>
</ul>
<h3>🔧 INSTALLATION</h3>
<h4>Minimum Requirements</h4>
<ul>
<li>WordPress 5.7 or greater</li>
<li>PHP version 7.2 or greater</li>
<li>MySQL version 5.0 or greater</li>
</ul>
<h4>Installation</h4>
<p>To install <strong>Webyx</strong> for Gutenberg is very easy:</p>
<ol>
<li>Install using the WordPress built-in Plugin installer, or Extract the zip file and drop the contents in the <code>wp-content/plugins/</code> directory of your WordPress installation.</li>
<li>Activate the plugin through the ‘Plugins’ menu in WordPress.</li>
</ol>
<p>From now on you will be able to access and use <strong>Webyx</strong> for Gutenberg!</p>
<h4>Uninstalling</h4>
<p>To uninstall <strong>Webyx</strong> for Gutenberg you just need to:</p>
<ol>
<li>Deactivate the plugin via the ‘Plugins’ menu in WordPress.</li>
<li>Choose the ‘Delete plugin’ action you can find in the same menu.</li>
</ol>


Webyx for Gutenberg – Fullpage Fullscreen Scrolling Websites

Webyx for Gutenberg it's a simple way to create amazing fullpage full screen scrollable websites in WordPress with Gutenberg editor.

Native Fullscreen vs Webyx for Gutenberg – Fullpage Fullscreen Scrolling Websites