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.

<p>The first and most powerful plugin to create awesome fullpage fullscreen vertical and horizontal scrolling websites effortlessly on WordPress for Elementor.</p>
<p><iframe loading="lazy" title="How to create horizontal and vertical fullpage fullscreen scrolling website with Webyx for Elementor" width="750" height="422" src="https://www.youtube.com/embed/TUslpzyxgxc?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 Elementor is a plugin for WordPress that allows you to create amazing <strong>fullpage fullscreen scrollable websites</strong> quickly and easily with Elementor’s visual editor and drag-and-drop builder.</p>
<p>If you want to see and try something made with Webyx, go to our <a href="https://demo.webyx.it/" rel="nofollow ugc">DEMO website!</a></p>
<h3>💎 WEBYX PRO FOR ELEMENTOR</h3>
<p>With the <a href="https://gum.co/u/hcgoaizz" 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> or manually shape the view appearance you want to show.</p>
<p><iframe loading="lazy" title="Webyx for Elementor Pro tutorial for beginners - How to create a full page scrolling website design" width="750" height="422" src="https://www.youtube.com/embed/LhGXs3Ttv6U?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>
<p>If you have both FREE and PRO version on the same installation, the PRO version will be the one that will be loaded.</p>
<p>You must remember to check and activate the options that may be different between the two versions.</p>
<p><strong>⚠️ IMPORTANT NOTE: it is not possible to directly upgrade from the FREE version to the PRO version, they are two different products and not one the extension of the other.<br />
If you are using the FREE version and have created something with it, you will have to redo them again in the PRO version.</strong></p>
<h3>🚀 TRY WEBYX FREE FOR GUTENBERG</h3>
<p>Are you also Gutenberg users and enthusiasts?<br />
We have the version of Webyx explicitly built for Gutenberg.<br />
Download and try the <a href="https://wordpress.org/plugins/webyx/" rel="ugc">Webyx Free for Gutenberg</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>Sections</li>
<li>Section content position</li>
<li>Panel style</li>
<li>Template design</li>
<li>Continuous horizontal</li>
<li>Animation easings and speeds</li>
<li>Navigation arrows</li>
<li>Navigation bullets</li>
<li>Navigation mouse wheel</li>
<li>Navigation keyboard</li>
<li>Fullscreen button</li>
<li>Hide scrollbar</li>
<li>Loading splash screen</li>
<li>Mobile settings</li>
<li>Lockable horizontal swipe</li>
<li>Custom CSS</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>View design</li>
<li>Customizable Webyx header with menu</li>
<li>Customizable header with Elementor widgets</li>
<li>Anchors</li>
<li>Scrolling content</li>
<li>Continuous vertical</li>
<li>Horizontal animation</li>
<li>Horizontal scrolling</li>
<li>Horizontal scrolling smooth animation and duration</li>
<li>Card style</li>
<li>Parallax effect</li>
<li>Indipendent animation types on X and Y axes</li>
<li>Fade and toggle animations</li>
<li>Normal scrolling website</li>
<li>Section height autofill</li>
<li>Lockable vertical movement</li>
<li>Mobile movement threshold</li>
<li>Switchable foregrounds for each Section background</li>
<li>Different backgrounds for each device type</li>
<li>Background audio</li>
<li>Background video</li>
<li>Event hooks</li>
<li>Visible or hidden Sections on the fly</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/wfe-guide" rel="nofollow ugc">Webyx FE</a>.</p>
<h4>How to enable Webyx FE in Elementor</h4>
<ol>
<li>Create a new page in WordPress.</li>
<li>In pages attributes find the Template select and choose <em>Webyx FE</em>.<br />
<strong>NOTE:</strong> if you select the <em>webyx FE</em> template through the Elementor general settings page, you will need to refresh the editor page to display webyx template correctly.</li>
<li>Edit the page with Elementor.</li>
<li>Click on Settings button. You will see Webyx tab.</li>
<li>Go to WEBYX FE tab.</li>
<li>Toggle <em>Enable Webyx</em> option.</li>
<li>Click on Apply Changes.</li>
<li>Wait for the page preview to refresh. </li>
</ol>
<p><strong>NOTE:</strong> toggling the “Enable Webyx” option in <em>SECTION GENERAL OPTIONS</em> you can disable the work done with Webyx and go back to the classic mode of Elementor sections on the fly, without losing what has been previously done.<br />
<strong>IMPORTANT:</strong> The PRO version, if installed, disables the normal loading of the FREE version, so you can keep only one of the two versions active at a time.</p>
<h4>WEBYX FE SECTIONS/CONTAINERS</h4>
<p>Webyx for Elementor allows you to wrap Elementor sections/containers into Webyx sections/containers.<br />
Webyx sections/containers are wrappers that incorporate the original Elementor sections/containers and contain specific attributes and/or webyx settings.<br />
To be able to carry out this transformation, enable the “Enable Webyx Section/Containers” toggle: in this way the Elementor source section/containers will be displayed in the editor in full screen mode<br />
and the original light blue Elementor overlay border will be shown in purple colour.</p>
<p><strong>⚠️ IMPORTANT:</strong> for Webyx to function properly, you must keep the root element active.<br />
In particular, pay attention if you are using Containers: those nested inside the root element MUST necessarily have this option deactivated, otherwise the system will not work correctly.<br />
From now on we will use the term Section for both Sections and Containers (<a href="https://wordpress.org/support/topic/working-on-compatibility-with-elementor-flexbox-containers/#post-16696168" rel="ugc">IMPORTANT NOTES FOR ELEMENTOR CONTAINERS</a>).</p>
<p><strong>NOTE:</strong> Webyx FE sections/containers are containers that can have any type of content.</p>
<p>To create the full screen flow of contents you can use the 2 types of sections provided by Webyx:</p>
<ol>
<li>Front Sections (or Containers)</li>
<li>Side Sections (or Containers)</li>
</ol>
<p><strong>Front Sections</strong></p>
<p>A Front Section appears as the leader of a strip of sections.<br />
Remember that the height of the section will automatically extended to the height of the inserted content inside the Elementor’s visual editor preview.<br />
While in the actual website if the content exceeds the viewport you can view it by enabling the “scrollable content” option.</p>
<p><strong>IMPORTANT:</strong> the very first section of your website <strong>MUST</strong> be a Front Section.</p>
<p><strong>Side Sections</strong></p>
<p>Side Sections will be placed laterally and immediately following their respective leaders on the website, while inside the visual editor they will be presented one below the other vertically following their order.</p>
<h4>Webyx FE Settings</h4>
<p>To customize general plugin settings just go to Settings > Webyx FE 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>
</ul>
<h4>Documentation and Support</h4>
<ul>
<li>For documentation visit our website at <a href="https://webyx.it/wfe-guide" rel="nofollow ugc">Webyx FE</a>.</li>
</ul>


Webyx for Elementor – Fullpage Fullscreen Scrolling Websites

Webyx for Elementor is a simple way to create amazing fullpage full screen scrollable websites in WordPress with Elementor builder.

Webyx for Gutenberg – Fullpage Fullscreen Scrolling Websites vs Webyx for Elementor – Fullpage Fullscreen Scrolling Websites