Webyx for Gutenberg guide V1.4.0

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. webyx for Gutenberg icon

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.

Free features:

Premium features:

Other features:

  • Built-in responsive menu
  • Responsive
  • Touch support
  • Clean and minimized code
  • Compatible with all modern browsers
  • No jQuery
  • Easy to use with hundreds of configurable options

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

webyx for Gutenberg alignment

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.

Webyx Plugin Settings

To customize general plugin settings just go to Settings > Webyx Plugin Settings.

  • Hide WP admin top bar: hide WordPress admin top bar in Webyx pages preview.
  • Enable Webyx menu: enable Webyx menu "Display location" in Appearance/Menus/Menu structure/Menu Settings.

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 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, scrollable, multi-level, with logo custom menu (Webyx Menu) that could be created with the WordPress Menus internal management. Webyx Menu is compatible only to the Twenty(s) standard WordPress themes.
webyx for Gutenberg menu

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.

You can provide your own Custom Template, such as a modified version of the theme template. Put the template path here if you want to use your own. If left empty or if you write something that doesn't exist or it is wrong, the empty predefined page template will be used.

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

You can choose options from the top Section navbar:

  • Expand/Contract: expand/contract selected Section in the editor for ease of use. webyx for Gutenberg expand or contract section content
  • Visible/Hidden: makes visible/hidden selected Section in the actual website page. webyx for Gutenberg visible or hidden section content
These unique Gutenberg editor display settings in WordPress are saved to improve the user experience when creating pages.

Section general 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.)
  • Tag type: select HTML tag type. This parameter changes the Section HTML tag to the specified tag.
  • Header colour in editor: choose the Section header colour to be applied from the colour box.
  • 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 show background
  • Expand/Contract: expand/contract selected Slide in the editor for ease of use. webyx for Gutenberg expand or contract slide content
  • Visible/Hidden: makes visible/hidden selected Slide in the actual website page. webyx for Gutenberg visible or hidden slide content
These unique Gutenberg editor display settings in WordPress are saved to improve the user experience when creating pages.

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).
  • Header colour in editor: choose the Slide header colour to be applied from the colour box.
  • Slide content: enable content position management in the current Slide.
  • Slide content position: select general content position in the current Slide.
  • Tag type: select HTML tag type. This parameter changes the Slide HTML tag to the specified tag.
  • Scrolling content: viewport exceeding Slide content will be displayed through scrolling.
  • Wrapper content: enable element wrapper for the Slide's content.
  • Wrapper Slide additional CSS class(es): you can add your own CSS class(es). Separate multiple classes with spaces.

webyx for Gutenberg slide attribute

Slide background options

Background general options
  • Background: enable background management.
  • Foreground Object: choose from a pre-estabilished set of foregrounds.
    • colour
    • image
    • video
    • Through the Foreground Object it is possible to keep background settings set at the same time, guaranteeing the possibility of being able to switch from one to the other quickly. In the Free version, on the other hand, background image prevails over background colour.
Background colour
  • Background colour: choose the background colour to be applied from the colour box.

webyx for Gutenberg slide background general

Background image
  • 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 image

Background video
  • Background video: to choose the background video to be applied, click on the Upload Video button and select the video from media library.
  • Background video poster image: to choose the background video poster image to be applied, click on the Upload Image button and select the image from media library.
  • Video on mobile: enable this option to play the video on mobile devices. If this option is disabled, the video will not be loaded on mobile devices and only poster image will be displayed if present.
  • Preload: specifies that the browser should or should not load the entire video when the page loads.
  • Controls: specifies that video controls should be displayed.
  • Muted: specifies that the audio output of the video should be muted.
  • Autoplay: video will be played as soon as it's playable.
    IMPORTANT: you must activate muted option to let your video start playing automatically (but muted).
  • Loop: specifies that the video will start over again, every time it is finished.

webyx for Gutenberg slide background video

Website Architecture

In this group you can customize the general architecture and behaviour of the website.

  • Vertical lock: vertical movement is no longer possible on every Slide.
  • Normal scrolling website: Slides are all positioned vertically and consecutively.
  • Normal scrolling threshold: define limits of the browser width/height to enable the normal scrolling website in pixels.
  • Width threshold: set the limit of the browser width of the normal scrolling website from a pre-estabilished set of values (range from 0 to 5000 pixels with a step of 1).
  • Height threshold: set the limit of the browser height of the normal scrolling website from a pre-estabilished set of values (range from 0 to 5000 pixels with a step of 1).
  • Slide height autofill: enables viewport minimum size for the Slide height.
    IMPORTANT: you must enter some content to be able to see the Slide.

webyx for Gutenberg website architecture

Slide Design

This group of options define the style structure of Slides.

  • 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 animation type: choose animation type.
    • toggle
    • slide
    • fade
  • 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 animation type: choose animation type.
    • toggle
    • slide
    • fade
  • 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.
  • Continuous vertical: enables direct vertical passage from first to last Slide and vice versa.

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

Navigation Keyboard

In this group you can activate website navigation via keyboard.

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

webyx for Gutenberg keyboard navigation

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 dimension thickness: available set of thicknesses (thin, standard, thick).
  • Full screen button custom offset: enables custom positioning for the button (range from 0 to 100 pixels with a step of 1).
    • Full screen button offset top
    • Full screen button offset left
    • Full screen button offset right
  • Full screen button colour: choose the colour to be applied to full screen button from the colour box.
  • Full screen button background: enables button background.
  • Full screen button background colour: choose the colour to be applied to full screen button background area from the colour box.

webyx for Gutenberg fullscreen button

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 1).
  • Vertical easing: set the vertical animation easing from a pre-estabilished set of curve types (31 types available).
  • Vertical threshold: Threshold value in pixels for y-axis to fire vertical movement (select 10, 25, 50, 75 or 100).
  • Horizontal speed: set the horizontal animation speed from a pre-estabilished set of values (range from 300 to 1200 milliseconds with a step of 1).
  • Horizontal easing: set the horizontal animation easing from a pre-estabilished set of curve types (31 types available).
  • Horizontal threshold: threshold value in pixels for x-axis to fire horizontal movement (select 10, 25, 50, 75 or 100).
  • Horizontal swipe: enables side swipe on every Slide. If disabled side Slides will not be reachable.

webyx for Gutenberg mobile device

Scrollbar

In this group you can customize the behavior of the browser's default scrollbar.

  • Hide scrollbar: hides browser's default scrollbar in the Slides when it should be present.

webyx for Gutenberg loading splash screen

Background Audio

In this group you can activate and customize the behaviour of the background audio for the current website page.

  • Background audio: enables Background audio.
  • Background audio upload: to choose the background audio to be applied, click on the Upload Audio button and select the audio from media library.
  • Audio player position: if audio player is enabled it allows you to choose its position (right, left).
  • Audio on mobile: enable this option to play the audio on mobile devices.
  • Preload: specifies that the browser should or should not load the entire audio when the page loads.
  • Controls: specifies that audio controls should be displayed.
  • Muted: specifies that the audio should be muted.
  • Autoplay: audio will be played as soon as it's playable.
    IMPORTANT: you must activate muted option to let your audio start playing automatically (but muted).
  • Loop: specifies that the audio will start over again, every time it is finished.

webyx for Gutenberg background audio

Loading Splash Screen

In this group you can customize the look of the loading splash screen.

  • Loading Splash Screen: enables loading splash screen.
  • Splash screen type: choose the splash screen type (default, custom).
  • 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.
  • Initial loading message: message to be displayed during the website loading.
  • Message colour: choose the colour to be applied to initial message 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.

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

Event Hooks

In this group you can add your custom Hooks.

  • Hooks: enables Sections and Slides event hooks.
  • Hooks list:
    • onBeforeStartingGoToSection: this event is triggered before each time you are going directly to another Section through navigation bullets or "toggle" animation type.
    • onAfterCompletedGoToSection: this event is triggered each time after going to another Section is completed through navigation bullets or "toggle" animation type.
    • onBeforeStartingGoToSlide: this event is triggered before each time you are going directly to another Slide through navigation bullets or "toggle" animation type.
    • onAfterCompletedGoToSlide: this event is triggered each time after going to another Slide is completed through navigation bullets or "toggle" animation type.
    • onBeforeStartingSlide: this event is triggered before each time you are going directly to another Slide through "slide" animation type.
    • onAfterCompletedSlide: this event is triggered each time after going to another Slide is completed through "slide" animation type.
    • onBeforeStartingSlideY: this event is triggered only in Y-axis before each time you are going directly to another Section through "slide" animation type.
    • onAfterCompletedSlideY: this event is triggered only in Y-axis each time after going to another Slide is completed through "slide" animation type.
    • onBeforeStartingSlideX: this event is triggered only in X-axis before each time you are going directly to another Slide through "slide" animation type.
    • onAfterCompletedSlideX: this event is triggered only X-axis each time after going to another Slide is completed through "slide" animation type.
    • onBeforeStartingFade: this event is triggered before each time you are going directly to another Slide through "fade" animation type.
    • onAfterCompletedFade: this event is triggered each time after going to another Slide is completed through "fade" animation type.
    • onBeforeStartingFadeY: this event is triggered only in Y-axis before each time you are going directly to another Section through "fade" animation type.
    • onAfterCompletedFadeY: this event is triggered only in Y-axis each time after going to another Slide is completed through "fade" animation type.
    • onBeforeStartingFadeX: this event is triggered only in X-axis before each time you are going directly to another Slide through "fade" animation type.
    • onAfterCompletedFadeX: this event is triggered only X-axis each time after going to another Slide is completed through "fade" animation type.

webyx for Gutenberg custom css

In the following dialog box enter your custom JavaScript code in the text area, click the Save/Close button and remember to update via the general Update button on the page.

webyx for Gutenberg custom css

Parameters:

  • iCurSec: current Section index (ie: Section 1 matches iCurSec=1).
  • iTrgSec: target Section index (ie: Section 1 matches iTrgSec=1).
  • iPrevSec: Section index of origin (ie: Section 1 matches iPrevSec=1).
  • iCurSl: current Slide index (ie: Slide 1 matches iCurSl=1).
  • iTrgSl: target Slide index (ie: Slide 1 matches iTrgSl=1).
  • iPrevSl: Slide index of origin (ie: Slide 1 matches iPrevSl=1).
  • webyx: Webyx global Object (advanced customization).

Editor user interface

In the editor user interface, you can easily locate important Webyx features and information with icons and colors.

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.