Webyx for Gutenberg Create amazing full screen scrollable websites

Webyx Plugin Settings

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

• Webyx license: enter your activation key here in order to use the Webyx for Gutenberg Pro version.
• 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.
• Version manager: you can browse the list of available previous versions of the plugin.
• Maintenance and support: you can directly send an email to receive support from the developer team.

Webyx License Management

In order to take full advantage of the power of Webyx for Gutenberg Pro you need to activate a Pro license: just go to Settings > Webyx FGP Settings > Webyx license.

1. Insert the license key in the product license field.

2. Click the Active Product button.

To deactivate Pro license: just go to Settings > Webyx FGP Settings > Webyx license.

1. Click the Deactive Product button.

IMPORTANT: the license key was sent to you on the purchase confirmation email. In order to register Webyx FGP plugin for another domain you'll have deactive your license for current domain.

IMPORTANT: you can deactivate and reactivate your activation key any time you want as long as your product license is active. In installations where the product is deactivated it will no longer be usable.

WARNING: if the product license has expired, deactivating the activation key will no longer allow its reactivation. You will need to purchase a new product license.

Webyx Pro support

You can also activate a Pro Support license for Webyx: just go to Settings > Webyx FGP Settings > Webyx license.

1. Insert the license key in the support license text field.

2. Click the Active Support button.

To deactivate Support license: just go to Settings > Webyx FGP Settings > Webyx license.

1. Click the Deactive Support button.

IMPORTANT: the license key was sent to you on the purchase confirmation email. In order to register support for another domain you'll have deactive your license for current domain.

IMPORTANT: you can deactivate and reactivate your activation key any time you want as long as your support license is active. In installations where the support is deactivated it will no longer be usable.

WARNING: if the support license has expired, deactivating the activation key will no longer allow its reactivation. You will need to purchase a new support license.

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. Enable Webyx template page or Custom template page

3. 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 block to the page at the same level of the Webyx for Gutenberg block.

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

5. Create your layout inside every single Slide.

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.

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.

Enable custom template page

To enable a 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 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).

Sections

Sections are containers that can have Slides only.

Slides

Slides are elements inside Sections that can have any type of content.

View design

In this group you can customize the general type and behaviour of Webyx view for the website. The options are configurable and independent for both desktop and mobile devices.

• View type: choose from a pre-estabilished set of Webyx view behaviour types.
  • full page: classic full height and width choice throughout the website.
  • full width with header: the view has a partial height and full width with the addition of a top header.
  • custom: allows the user to manually shape the view appearance to their liking.

Webyx full page view

With this type of view the website will be structured in full screen: each Slide added within each Section will be automatically and suitably created to have full height and width dimensions of the viewport.

Webyx full width view with header

With this type of view the website will be structured in full width but with a partial height because a header will be added on top. The user will be able to customize the header, add a logo and a built-in menu if they wish so.

• Header type: choose if you want to have a header with a menu management for a single or multi page type of website.
  • Header single page (Webyx menu): provides a header with an internal navigation menu in Single Page mode, automatically generated by the block based on the number of Sections and Slides that make up the website.
  • Header multi page (WordPress menu): provides a header with a WordPress navigation menu in Multi Page mode, managed directly in "Display location" in Appearance/Menus/Menu structure/Menu settings.

  IMPORTANT: the Single Page and Multi Page header configuration parameters are completely separate: both maintain their configuration settings independently from the other.

• Header view breakpoint: enter a value that defines the threshold for switching from desktop to mobile mode in pixels (range from 1 to 5000 pixels with a step of 1).
• Header height: enter a value to apply a height in pixels (range from 0 to 5000 pixels with a step of 1).
• Header background colour: choose the background colour for the header to be applied from the colour box.
• Logo image: to choose the logo image to be applied, click on the Upload Logo Image button and select the image from media library.
• Logo height: enter a value to apply a height in pixels (range from 0 to 5000 pixels with a step of 1).
• Logo width: enter a value to apply a width in pixels (range from 0 to 5000 pixels with a step of 1).
• Logo horizontal position: choose from a pre-estabilished set of positions (left, right).
• Logo left position value: enter a value to apply a left position in pixels (range from 0 to 5000 pixels with a step of 1).
• Logo right position value: enter a value to apply a right position in pixels (range from 0 to 5000 pixels with a step of 1).
• Logo vertical position: choose from a pre-estabilished set of positions (top, bottom).
• Logo top position value: enter a value to apply a top position in pixels (range from 0 to 5000 pixels with a step of 1).
• Logo bottom position value: enter a value to apply a bottom position in pixels (range from 0 to 5000 pixels with a step of 1).
• Menu horizontal position: choose from a pre-estabilished set of positions (left, center, right).
• Menu margin top/right/bottom/left: enter a value to apply a top/right/bottom/left margin in pixels (range from 0 to 5000 pixels with a step of 1).
• Menu dropdown item width: enter a value to apply a dropdown item container width in pixels (range from 0 to 5000 pixels with a step of 1).
• Menu item height: enter a value to apply a item height in pixels (range from 30 to 75 pixels with a step of 1).
• Menu item font size: enter a value to apply a item font size in pixels (range from 12 to 32 pixels with a step of 1).
• Menu item background colour: choose the background colour for the menu items to be applied from the colour box.
• Menu item background colour light: choose the background colour for the menu items when not mouse hovered to be applied from the colour box.
• Menu item colour: choose the colour for the menu items to be applied from the colour box.
• Menu item colour light: choose the colour for the menu items when not mouse hovered to be applied from the colour box.
• Menu burger icon background colour (mobile only): choose the background colour for the burger menu icon background to be applied from the colour box.
• Menu burger icon bars colour (mobile only): choose the colour for the burger menu icon bars to be applied from the colour box.
• Menu overlay background colour (mobile only): choose the background colour for the menu overlay to be applied from the colour box.

Webyx custom view

It will be possible to shape Webyx view as needed for the website. The user will be in charge to create any necessary boundary structures and fillings.

• Partialization hide scrollbar: hide browser's default scrollbar when it should be present in the Webyx view.
• Partialization view breakpoint: enter a value that defines the threshold for switching from desktop to mobile mode in pixels (range from 1 to 5000 pixels with a step of 1).
• Partialization view position: choose from a pre-estabilished set of types of positioning methods.
  • static: default value. Elements render in order, as they appear in the document flow.
  • relative: the element is positioned relative to its normal position.
  • absolute: the element is positioned relative to its first positioned (not static) ancestor element.

  IMPORTANT: if you decide NOT to use 'px' as unit of measure, remember to put the Webyx view inside a container with fixed measures. If you are using a custom template the Webyx view will take the width of the margins of your theme.

• Partialization view width: set a value to apply a width (px, %, vw, vh).
• Partialization view height: set a value to apply a height (px, %, vw, vh).
• Partialization view margin: enable a margin for the partialization view.
• Partialization view margin auto: enable an auto margin for the partialization view (only top and bottom margins will be settable).
• Partialization view margin top: set a value to apply a top margin (px, %, vw, vh).
• Partialization view margin right: set a value to apply a right margin (px, %, vw, vh).
• Partialization view margin bottom: set a value to apply a bottom margin (px, %, vw, vh).
• Partialization view margin left: set a value to apply a left margin (px, %, vw, vh).
• View CSS ID: add your custom CSS ID to the view.
• View CSS class(es): add additional CSS class(es) to the view.

Navigation Design

This group of options define the style structure of Slides. The options are configurable and independent for both desktop and mobile devices.

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

• Animation: enables animation management for the normal scrolling website.
• Scrolling vertical speed: set the vertical scrolling animation speed from a pre-estabilished set of values (range from 300 to 1200 milliseconds with a step of 1).
• Scrolling vertical curve: set the vertical scrolling easing from a pre-estabilished set of curve types (5 types available: linear, easeout, arc, quadratic, cubic).

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

Navigation Arrows

In this group you can customize the look and behaviour of navigation arrows.

• Navigation arrows: enables clickable navigation arrows on every Slide to move from one Slide to the next.
• Vertical arrows: enables vertical navigation arrows on every Slide.
• Horizontal arrows: enables horizontal navigation arrows on every Slide.
• Fixed arrows: if navigation arrows are enabled it makes them persistent, otherwise arrows will fade and reappear only on mouse hover their original position.
• Arrows size: available set of arrows sizes (small, medium, large).
• Arrows thickness: available set of arrows thicknesses (thin, standard, thick).
• Arrows dimension area: available set of arrows dimension areas in pixels (small (80x50), medium (150x70), large (300x90)).

  

• Arrows colour: choose the colour to be applied to arrows from the colour box.
• Arrows colour light: choose the colour to be applied to arrows when not mouse hovered from the colour box.
• Arrows curvature: enables a slight curvature to the arrows aesthetics.
• Arrows background area: enables visible background area for every arrow.
• Arrows background area colour: choose the colour to be applied to every arrow background area from the colour box.
• Arrows custom offset: enables custom positioning for every arrow (range from 0 to 5000 pixels with a step of 1).
  • Arrow top position offset
  • Arrow right position offset
  • Arrow bottom position offset
  • Arrow left position offset

Navigation Bullets

In this group you can customize the look and behaviour of navigation bullets.

• Vertical bullets: enables vertical clickable navigation bullets on every Slide to move from current Slide to the target one.
• Vertical bullets position: if vertical navigation bullets are enabled it allows you to choose their position (right, left).
• Vertical bullets offset: enables custom positioning for every vertical bullet (range from 0 to 5000 pixels with a step of 1).
  • Vertical bullet offset desktop
  • Vertical bullet offset mobile
• Vertical bullets tooltips: if vertical navigation bullets are enabled shows the name on each vertical bullet of the corresponding Slide on mouse hover.
• Vertical bullets fixed tooltips: if vertical navigation bullets tooltips are enabled they become persistent.
• Horizontal bullets: enables horizontal clickable navigation bullets on every Slide to move from current Slide to the target one.
• Horizontal bullets position: if horizontal navigation bullets are enabled it allows you to choose their position (top, bottom).
• Horizontal solo bullet: if horizontal navigation bullets are enabled makes a bullet present even in the case of a single horizontal Slide.
• Horizontal bullets offset: enables custom positioning for every horizontal bullet (range from 0 to 5000 pixels with a step of 1).
  • Horizontal bullet offset desktop
  • Horizontal bullet offset mobile
• Horizontal bullets tooltips: if horizontal navigation bullets are enabled shows the name on each horizontal bullet of the corresponding Slide on mouse hover.
• Horizontal bullets fixed tooltips: if horizontal navigation bullets tooltips are enabled they become persistent.

  

• Bullets type: available set of bullets types (7 types available: scale, stroke, small stroke, fill-in, fill-up, fall, puff).
• Bullets colour: choose the colour to be applied to bullets from the colour box.
• Bullets colour light: choose the colour to be applied to bullets when not mouse hovered from the colour box.
• Bullets background area: enables bullets background area colour.
• Bullets background area colour: choose the colour to be applied to every bullet background area from the colour box.
• Bullets tooltips colour: choose the colour to be applied to bullets tooltips texts from the colour box.
• Bullets tooltips colour light: choose the colour to be applied to bullets tooltips texts when not mouse hovered from the colour box.
• Bullets tooltip background area: enables bullets tooltip background area.
• Bullets tooltip area colour: choose the colour to be applied to bullets tooltip area from the colour box.
• Bullets animation: enables the animation for movement towards Slides/Sections when bullets are clicked on.

Navigation Mouse Wheel

In this group you can customize the look and behaviour of navigation mouse wheel.

• Mouse wheel: enables navigation with mouse wheel between Slides.
• Mouse wheel icon: if mouse wheel icon fixed option is not enabled this icon will disappear after the first vertical movement.

  IMPORTANT: this icon will be shown ONLY if mouse wheel option is enabled.

• Mouse wheel vertical offset: enables a vertical offset for the mouse wheel icon.
• Mouse wheel vertical bottom offset: sets custom vertical positioning for the icon (range from 0 to 5000 pixels with a step of 1)
• Mouse wheel icon colour: choose the colour to be applied to mouse wheel icon from the colour box.
• Mouse wheel icon background: enables mouse wheel icon background.
• Mouse wheel icon background colour: choose the colour to be applied to mouse wheel icon background area from the colour box.
• Mouse wheel icon fixed: if mouse wheel icon is enabled it makes it persistent.
• Horizontal scrolling: enables sequential navigation between adjacent Slides via mouse wheel or trackpad, with horizontal and then vertical priority.

Navigation Keyboard

In this group you can activate website navigation via keyboard.

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

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 5000 pixels with a step of 1).
  • Full screen button offset top
  • 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.

Mobile Devices

In this group you can set the motion animation behavior for Slides on mobile devices, such as:

• Force desktop mode: enables Webyx desktop mode on all mobile devices.

  WARNING: if enabled, Sections and Slides navigation will be possible through arrows/bullets/menu and NOT through swipe/scroll.

• 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 lock: disables side swipe on every Slide.

  WARNING: if enabled side Slides will not be reachable.

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.

Background Audio

In this group you can activate and customize the behaviour of the background audio for the current website page. The options are configurable and independent for both desktop and mobile devices.

• Background audio: enables background audio.
• Audio player auto closing: enables auto closing of the audio player.
• Audio player auto closing timer: enter a value that defines the audio player auto closing timer (range from 5 to 20 seconds with a step of 1).
• Media queries breakpoint width: enter a value that defines the threshold for switching from desktop to mobile mode in pixels (range from 1 to 5000 pixels with a step of 1).
• Background audio upload: to choose the background audio to be applied, click on the Upload Audio button and select the audio from media library.
• Preload: specifies that the browser should or should not load the entire audio when the page loads.

  IMPORTANT: the preload attribute is ignored if autoplay is present.

• 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). NOTE: Chromium browsers do not allow autoplay in most cases.

• Loop: specifies that the audio will start over again, every time it is finished.
• Audio button icon: shows an audio player icon button.
• Audio button size: available set of sizes (small, medium, large).
• Audio button background type: available set of background types (color, image).
• Audio button background colour: choose the colour to be applied to audio button background from the colour box.
• Audio button background colour light: choose the colour to be applied to audio button background when not mouse hovered from the colour box.
• Audio player horizontal position: if audio player is enabled it allows you to choose its horizontal position (right, left).
• Horizontal position value: set a value to apply to the audio player horizontal position (px, %, vw).
• Audio player vertical position: if audio player is enabled it allows you to choose its vertical position (top, bottom).
• Vertical position value: set a value to apply to the audio player vertical position (px, %, vh).
• Audio button background upload image: to choose the audio player button background image to be applied, click on the Upload Image button and select the image from media library.

  

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.
• Enable time duration: enables a predefined time duration for the loading splash screen to be shown.
• Always visible: the loading splash screen will be visible indefinitely.
• Time duration: set the value for the time duration (range from 1 to 10 seconds with a step of 0.1).

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.

Event Hooks

In this group you can add your custom Hooks.

• Hooks: enables Sections and Slides event hooks.
• Hooks list:
  • onBeforeLeave: this event is triggered before each time you are going directly to another Slide through "Slide" animation type.
  • onAfterEnter: this event is triggered each time after going to another Slide is completed through "Slide" animation type.
  • onBeforeLeaveYaxis: this event is triggered only in Y-axis before each time you are going directly to another Section.
  • onAfterEnterYaxis: this event is triggered only in Y-axis each time after going to another Section is completed.
  • onBeforeLeaveXaxis: this event is triggered only in X-axis before each time you are going directly to another Slide.
  • onAfterEnterXaxis: this event is triggered only X-axis each time after going to another Slide is completed.

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.

Parameters:

• webyx: Webyx global object (advanced customization).
• iCurY: current Section index (ie: Section 1 matches iCurY=1).
• iTrgY: target Section index (ie: Section 1 matches iTrgY=1).
• iPrevY: Section index of origin (ie: Section 1 matches iPrevY=1).
• iCurX: current Slide index (ie: Slide 1 matches iCurX=1).
• iTrgX: target Slide index (ie: Slide 1 matches iTrgX=1).
• iPrevX: Slide index of origin (ie: Slide 1 matches iPrevX=1).

Global settings

In this group you can manage some global settings.

• Global media query breakpoint: sets a global media query breakpoint for every option that has a settable media query.

  IMPORTANT: the value set will overwrite every other present in every media query of the block.

• Media query breakpoint : enter a value that defines the threshold for switching from desktop to mobile mode in pixels (range from 0 to 5000 pixels with a step of 1).

Editor user interface

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