== Webyx == Author URI: https://webyxforgutenberg.com Donate link: https://webyxforgutenberg.com Contributors: webyxforgutenberg, rodolfocucchiella, terenziocensoni Tags: page builder, scrolling, fullscreen, fullpage, slide, section, design, easing, scrolling website, full page, landing page, slider, web design, gutenberg, block Requires at least: 5.7 Tested up to: 5.7 Requires PHP: 7.2 Stable tag: 1.0.0 License: GPLv3 License URI: https://www.gnu.org/licenses/gpl-3.0.html **Webyx** for Gutenberg it's a simple way to create amazing full screen scrollable websites in WordPress with Gutenberg editor. == DESCRIPTION == This idea was born with the aim of creating **amazing fullscreen websites** in WordPress with Gutenberg editor's modular approach. We wanted to simplify and speed up the creating process, enabling customizations on the fly and making it as user friendly as possible. We are already designing and developing new features and possibilities that will allow us to expand and improve the project more and more, and to be able to give users an increasingly easy and powerful tool. Be amazed by your imagination! *the Webineer team* == WHAT YOU CAN DO == **Webyx** for Gutenberg is a plugin for WordPress that allows you to create amazing **fullscreen scrollable websites** quickly and easily. The *Free* version allows you to fully create your website and add effects to customize it according to your needs without writing a line of code. The *Premium* version further enhances **Webyx** for Gutenberg's power giving most demanding users more tools to help them improve their work and accomplish their ideas. The *Premium* version is in testing phase and will be soon available. If you are interested get in touch with us using the form on [Webyx](https://webyxforgutenberg.com) website. To see what is in the Free and Premium version visit our website at [Webyx](https://webyxforgutenberg.com). == QUICK USER'S GUIDE == For a more complete documentation visit our website at [Webyx](https://webyxforgutenberg.com). = How to add the block in Gutenberg = 1. Create a new post/page or go to the post/page you would like to add the block. 2. Find **Webyx** for Gutenberg block on the Gutenberg blocks and add it to the page. IMPORTANT: you can add only one **Webyx** for Gutenberg block. You should not add any other blocks to the page. = Enable Webyx = 1. Click on the Page tab in the right side of Gutenberg editor. 2. In pages attributes find the Template select and choose *webyx*. *Important note*: **Webyx** for Gutenberg template provides a responsive custom menu. = Webyx navbar block utilities = You can change the **Webyx** for Gutenberg block size in the editor via preset options in its navbar. * **Small alignment**: default block width (max-width 610px). * **Wide alignment**: wider than default (max-width 1240px). * **Full alignment**: full width (max-width removed). = Sections = Sections are containers that can have Slides only. *General actions on Sections:* * **Add Section**: click on Add Section button inside the **Webyx** for Gutenberg block. * **Remove Section**: click on the More Options menu dots in the top navbar and click Remove Block. * **Add Slide**: click on Add Slide button inside the Section block. = Section options = * **Title**: insert here a title for the current Section. IMPORTANT: you should give different titles for each Section otherwise some features may have problems (e.g. menu, bullets, etc.). = Slide navbar utility = * **Hide background**: hides Slide background (image or colour you have eventually chosen from the Slide background options group) only in the editor. = Slides = Slides are elements inside Sections that can have any type of content. *General actions on Slides:* * **Add Slide**: click on Add Slide button inside the Section block. * **Remove Slide**: click on the More Options menu dots in the top navbar and click Remove Block. * **Add Slide content**: click inside the Slide block and add Gutenberg blocks inside it. You can add anything inside here. *Slide general options:* * **Title**: insert here a title for the current Slide. IMPORTANT: you should give different titles for each Slide. (Please note that Slides within the same Section should be named differently, while between different Sections they could also have the same title.) * **Slide content position**: select general content position in the current Slide (*top*, *middle*, *bottom*). * **Scrolling content**: viewport exceeding Slide content will be displayed through scrolling. = Slide background options = * **Background colour**: choose the background colour to be applied from the colour box. * **Background image**: to choose the background image to be applied, click on the Upload Image button and select the image from media library. * **Background image size**: choose from a pre-estabilished set of sizes. * *auto*: background image is displayed in its original size. * *cover*: background image is resized to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges. * *contain*: background image is resized to make sure the image is fully visible. * **Background image position**: choose from a pre-estabilished set of positions. The first value is the horizontal position and the second value is the vertical. * *left top* * *left center* * *left bottom* * *right top* * *right center* * *right bottom* * *center top* * *center center* * *center bottom* * **Background image repeat**: choose if the background image should be repeated or not. * *repeat*: background image is repeated both vertically and horizontally and the last image will be clipped if it does not fit. * *no-repeat*: background image is not repeated and will only be shown once. * **Background image attachment**: choose if the image scrolls with the rest of the Slide or is fixed. * *scroll*: background image will scroll with the Slide. * *fixed*: background image will not scroll with the Slide. = Slide Easings = In this group you can set the motion animation behavior for Slides, such as: * **Vertical speed**: set the vertical animation speed from a pre-estabilished set of values (range from 300 to 1200 milliseconds with a step of 50). * **Vertical easing**: set the vertical animation easing from a pre-estabilished set of curve types (31 types available). * **Horizontal speed**: set the horizontal animation speed from a pre-estabilished set of values (range from 300 to 1200 milliseconds with a step of 50). * **Horizontal easing**: set the horizontal animation easing from a pre-estabilished set of curve types (31 types available). * **Speed for IE9**: set the general animation speed for Internet Explorer 9 browser from a pre-estabilished set of values (range from 300 to 1200 milliseconds with a step of 50). * **Easing for IE9**: set the general animation easing for Internet Explorer 9 browser from a pre-estabilished set of curve types (5 types available: *linear*, *easeout*, *arc*, *quadratic*, *cubic*). = Navigation Arrows = In this group you can customize the look and behaviour of navigation arrows. * **Arrows size**: available set of arrows sizes (*small*, *medium*, *large*). * **Arrows thickness**: available set of arrows thicknesses (*thin*, *standard*, *thick*). * **Arrows curvature**: enables a slight curvature to the arrows aesthetics. * **Arrows colour**: choose the colour to be applied to arrows from the colour box. * **Mouse wheel**: enables navigation between Slides via mouse wheel. * **Mouse wheel icon**: if mouse wheel is enabled, with this option vertical navigation arrows will be replaced by a mouse wheel icon that will remain visible until the first movement between Slides. * **Mouse wheel icon colour**: choose the colour to be applied to mouse wheel icon from the colour box. = Full Screen Button = In this group you can customize the look and behaviour of the full screen button. * **Full screen button**: enables a button to switch to full screen display. * **Full screen button position**: if full screen button is enabled it allows you to choose its position (*left*, *right*). * **Full screen button colour**: choose the colour to be applied to full screen button from the colour box. = Mobile Devices = In this group you can set the motion animation behavior for Slides on mobile devices, such as: * **Vertical speed**: set the vertical animation speed from a pre-estabilished set of values (range from 300 to 1200 milliseconds with a step of 50). * **Vertical easing**: set the vertical animation easing from a pre-estabilished set of curve types (31 types available). * **Horizontal speed**: set the horizontal animation speed from a pre-estabilished set of values (range from 300 to 1200 milliseconds with a step of 50). * **Horizontal easing**: set the horizontal animation easing from a pre-estabilished set of curve types (31 types available). = Loading Splash Screen = In this group you can customize the look of the loading splash screen. * **Background colour**: choose the colour to be applied to splash screen background from the colour box. * **Spinner colour**: choose the colour to be applied to the spinner from the colour box. = Custom CSS = In this group you can add your custom CSS. * **Custom CSS**: enables the Custom CSS button to open a pop-up window where you can enter your CSS code for the page. = Languages = - English = Documentation and Support = - For documentation visit our website at [Webyx](https://webyxforgutenberg.com). == INSTALLATION == = Minimum Requirements = * WordPress 5.7 or greater * PHP version 7.2 or greater * MySQL version 5.0 or greater = Installation = To install **Webyx** for Gutenberg is very easy: 1. Install using the WordPress built-in Plugin installer, or Extract the zip file and drop the contents in the `wp-content/plugins/` directory of your WordPress installation. 2. Activate the plugin through the 'Plugins' menu in WordPress. From now on you will be able to access and use **Webyx** for Gutenberg! **Important note** 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". If you see this error instead of the **Webyx** for Gutenberg block use "attempt block recovery" button. Do NOT use "Convert to classic block" option. = Uninstalling = To uninstall **Webyx** for Gutenberg you just need to: 1. Deactivate the plugin via the 'Plugins' menu in WordPress. 2. Choose the 'Delete plugin' action you can find in the same menu. == Frequently Asked Questions == **Q. Why should I use Webyx for Gutenberg? A. You should try and use Webyx if you feel like creating a smooth and engaging fullscreen website. **Q. Can Slides have any type of content?** A. Yes, Slides are container elements in which you can add anything inside. **Q. Can Sections have any type of content?** A. No, Sections are container elements that can have only Slides. If you want to add some content you should put it inside a Slide. **Q. Can I create any number of pages in my website with Webyx for Gutenberg block?** A. Yes, you can create as many pages as you need. **Q. Can I use more than one Webyx for Gutenberg block inside the same page?** A. No, you can add only one Webyx for Gutenberg block. **Q. I have put Webyx for Gutenberg block inside a page but I can't see it correctly. What should I do?** A. Check that you have selected the webyx template in page attributes of the Page tab. **Q. Can I use a page created with Webyx for Gutenber block inside a theme?** A. Yes, but to see the header and footer correctly you might need to know CSS and JavaScript to change the behaviour of the page. **Q. Is Webyx for Gutenberg block supported on all browsers?** A. Yes, it is supported on all modern browsers. **Q. Are there any requirements to install Webyx for Gutenberg?** A. You should have at least a 5.7 WordPress version and Gutenberg should be active on the WordPress website. **Q. Can I ask for a new custom feature not present in Webyx for Gutenberg at the moment?** A. For any request please contact us using the appropriate form. == Screenshots == 1. **Webyx** creating amazing fullscreen websites in WordPress with Gutenberg editor's modular approach 2. Add **Webyx** starting block 3. Add **Webyx Section** block 4. Add **Webyx Slide** block 5. Hide/show background colour/image == Changelog == = 1.0.0 = * Initial Public Release == Upgrade Notice == = 1.0.0 =