Webyx for Gutenberg guide V1.0.1

Webyx for Gutenberg
Webyx for Gutenberg

Introduction

Welcome in Webyx for Gutenberg, a Webineer project: we are happy and honored with your presence!

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

Get Webyx for Gutenberg

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 this page.

Free features:

Premium features:

Other features:

  • Built-in responsive menu
  • Responsive
  • Touch support
  • Clean and minimized code

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!

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.
We may introduce major changes that fix bugs or simply add new features which could lead to an attempt block recovery. Check your pages after each update

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.

Quick user's guide

Learn how to use Webyx for Gutenberg to design your WordPress website and create pages quickly.

How to add the block in Gutenberg

To add Webyx for Gutenberg to the Gutenberg editor, follow these steps:

1. Create a new page or go to the page you would like to add the block.

2. Find Webyx for Gutenberg block on the Gutenberg blocks and add it to the page. webyx for Gutenberg add block

IMPORTANT: you can add only one Webyx for Gutenberg block. You should not add any other block to the page at the same level of the Webyx for Gutenberg block.

3. Inside the root level Webyx for Gutenberg block you must only add Section blocks that will contain exclusively Slide blocks.

IMPORTANT: remember to give different titles to Sections and Slides inside the same Section to allow a correct functioning of Navigation Bullets.

4. Create your layout inside every single Slide.

5. Enable Webyx template page or Custom template page

Enable Webyx template page

To enable Webyx template page, follow these steps:

1. Click on the Page tab in the right side of Gutenberg editor.

2. In Page Attributes find the Template select and choose webyx. webyx for Gutenberg template

3. In Appearance > Menus create your new menu and enable in Menu Settings > Display location: Webyx Menu.

IMPORTANT: Webyx for Gutenberg template provides a responsive custom menu (Webyx Menu) that could be created with the WordPress Menus internal management.

Enable Custom template page

To enable Custom template page, follow these steps:

1. In Template Design enable the option Custom Template and put the page template path you want to use.

2. Remember that you should know and use some code to adjust a custom template (PHP, CSS, JS). It is a good practice to create a child theme where to possibly add these changes. webyx for Gutenberg template

Webyx for Gutenberg navbar block utilities

You can change the Webyx for Gutenberg block size in the editor via preset options in its navbar. Default block width has a max-width of 610px.

  • Expand: wider than default (max-width 1240px).
  • Contract: default block width (max-width 610px).

webyx for Gutenberg alignment

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.webyx for Gutenberg add section
  • 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.webyx for Gutenberg add slide

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.)
  • Continuous horizontal: enables direct horizontal passage from first to last Slide of the same Section and vice versa.

webyx for Gutenberg section attribute

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 navbar utility

You can choose options from the top Slide navbar:

  • Hide background: hides Slide background (image or colour you have eventually chosen from the Slide background options group) only in the editor.webyx for Gutenberg hide background

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.
  • Scrolling content: viewport exceeding Slide content will be displayed through scrolling.

webyx for Gutenberg slide attribute

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.

webyx for Gutenberg slide background

Slide Design

This group of options define the style structure of Slides.

  • Continuous vertical: enables direct vertical passage from first to last Slide and vice versa.
  • Vertical Card style: this option enables Card style animation mode (scrolling one over the other) during vertical shift from one Slide to the other, otherwise Panel style will be used (simultaneous scrolling of all Slides).
  • Vertical parallax: enables parallax effect during vertical movement of the Slides, applicable only to Card style.
  • Vertical parallax percentage: sets percentage of vertical parallax effect between moving Slides.
  • Horizontal Card style: this option enables Card style animation mode (scrolling one over the other) during the horizontal shift from one Slide to the other, otherwise Panel style will be used (simultaneous scrolling of all Slides).
  • Horizontal parallax: enables parallax effect during horizontal movement of the Slides, applicable only to Card style.
  • Horizontal parallax percentage: sets percentage of horizontal parallax effect between moving Slides.

webyx for Gutenberg slide design

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).

webyx for Gutenberg slide easing

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 (right, left).
  • Full screen button colour: choose the colour to be applied to full screen button from the colour box.

webyx for Gutenberg fullscreen button

Keyboard Navigation

In this group you can activate website navigation via keyboard.

  • Keyboard navigation: enables navigation between adjacent Slides via keyboard arrows.

webyx for Gutenberg keyboard navigation

Horizontal Scrolling

In this group you can activate horizontal scrolling.

  • Horizontal scrolling: enables sequential navigation between adjacent Slides via mouse wheel or trackpad, with horizontal and then vertical priority.

webyx for Gutenberg horizontal scrolling

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).

webyx for Gutenberg mobile device

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.

webyx for Gutenberg loading splash screen

Custom CSS

In this group you can add your custom CSS rules.

  • Custom CSS: enables the Custom CSS button to open a pop-up window where you can enter your CSS code for the page.

webyx for Gutenberg custom css

FAQ

Q.

Can I try Webyx for Gutenberg?

A.

Sure! To try Webyx for Gutenberg just download the free version from WordPress official repository.

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. If you are using a custom page template (Template Design), check that you have entered the name or path correctly.

Q.

Can I use a page created with Webyx for Gutenberg 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 (Template Design).

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.

Contact us

We would love to hear from you! Our team is happy to answer your questions.