Webyx for Elementor Create amazing full screen scrollable websites

Webyx FE Pro Settings

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

• Webyx licenses: enter your activation key here in order to use the Webyx for Elementor 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 Licenses

In order to take full advantage of the power of Webyx for Elementor Pro you need to activate a Pro license: just go to Settings > Webyx FE Pro 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 FE Pro 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 FE Pro plugin for another domain you'll have deactive your license for current domain.
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

Webyx Pro support, exclusive to Pro products, allows you to have a privileged and priority contact form directly inside the plugin.

Get developers' assistance, faster response and higher priority for reported issues and questions.

Support is provided by e-mail only and only for questions regading Webyx for Gutenberg/Elementor Pro's implementation, issues or bugs

You can also activate a Pro Support license for Webyx FE Pro: just go to Settings > Webyx FE Pro 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 FE Pro 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.
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.

Once Pro support has been activated, the form for requests for assistance will be displayed in Settings > Webyx FE Pro Settings > Maintenance and support.

Version Manager

To downgrade to a previous version, simply select it from those listed in the select Available versions and click on the Rollback Version button.

It is recommended to always use the latest version available, but you can use a previous one if it is necessary. Only use this feature carefully if you really need to go back to a previous version. Before rolling back make sure to backup your database and your WordPress installation files. To undo this operation, simply click on the cancel button.

Automatic updates management

Updates are managed through the native interface provided by WordPress in Plugins.

It is recommended to always use the latest version available. Before updating, please take a database backup as a precaution.

Webyx for Elementor Sections/Containers

Webyx for Elementor allows you to wrap Elementor sections/containers into Webyx Sections/Containers.

Webyx Sections/Containers are wrappers that incorporate the original Elementor sections/containers and contain specific attributes and/or Webyx Settings.

To be able to carry out this transformation, enable the Enable Webyx Section/Container toggle: in this way the Elementor source section/container will be displayed in the editor in full screen mode and the original light blue Elementor overlay border will be shown in purple colour.

NOTE: Webyx Sections are containers that can have any type of content.

IMPORTANT: for Webyx to function properly, you must keep the ALL ROOT element active.
Webyx's Sections or Containers enabled cannot be used in conjunction with Elementor Sections or Containers with Webyx disabled.
If you want to hide Sections or Containers use the Hide Section/Container option.
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.

To create the full screen flow of contents you can use the 2 types Sections/Containers provided by Webyx:

• Header Sections (or Containers)
• Front Sections (or Containers)
• Side Sections (or Containers)

Header Sections/Containers

A Header Section/Container is a place where you can create your website header (menu, logo, etc) directly with Elementor widgets.

Section/Container Header will be a sticky top header over the first fullpage Section/Container.

NOTE: this only works with the Full Page design type option.

Front Sections/Containers

A Front Section/Container appears as the leader of a strip of Sections/Containers.

Remember that the height of the Section/Container will automatically extended to the height of the inserted content inside the Elementor's visual editor preview.

While in the actual website if the content exceeds the viewport you can view it by enabling the scrollable content option.

IMPORTANT: the very first Section/Container of your website MUST be a Front Section/Container.

Side Sections/Containers

Side Sections/Containers 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.

Sections (Containers)

Webyx Sections/Containers are wrappers that incorporate the original Elementor sections/containers and contain specific attributes and/or Webyx Settings.

To properly manage Webyx Sections or Container you only have to change/set the attributes provided by Webyx inside them. DO NOT change/set the Elementor's native attributes of the respective root Sections or Container (layout, style, advanced), ONLY use the Webyx's ones.

Webyx FE PRO

To enable Webyx FE PRO, enable the option Enable Webyx and click on APPLY CHANGES.

NOTE: If Webyx for Elementor is disabled the Sections or Containers will go back to normal Elementor elements.

Template design

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.

NOTE: use this option if you want to create a custom layout that includes elements not managed by Webyx such as user headers or footers.

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 WEBYX header: the view has a partial height and full width with the addition of a WEBYX top header.
  • custom: allows the user to manually shape the view appearance to their liking.

    

• Anchors: enable anchors navigation (#). Webyx will handle the website URL and browsing history.

  NOTE: you should give different anchor names (white spaces will be replaced with "-") for each Section/Container. If an anchor name is not set, the Section/Container name will be used instead.

  NOTE: if horizontal scrolling style is enabled, its anchor will refer to the first Section/Container of its row only.

Webyx full page view

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

Webyx full width view with Webyx header

With this type of view the website will be structured in full width but with a partial height because a Webyx header will be added on top (this header is generated by WEBYX and not that of your page template or theme). The user will be able to customize the header, add a logo and a built-in menu if they wish so.

• Webyx 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 Webyx FE based on the number of Sections 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.

  NOTE: 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 margins: enable a margin for the navigation menu.
• 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.

  NOTE: 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 Sections. 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 Section to the other, otherwise Panel style will be used (simultaneous scrolling of all Sections).
• Vertical animation type: choose animation type (toggle, slide, fade).
• Vertical parallax: enables parallax effect during vertical movement of the Sections, applicable only to Card style.
• Vertical parallax percentage: sets percentage of vertical parallax effect between moving Sections.
• Horizontal Card style: this option enables Card style animation mode (scrolling one over the other) during the horizontal shift from one Section to the other, otherwise Panel style will be used (simultaneous scrolling of all Sections).
• Horizontal animation type: choose animation type (toggle, slide, fade).
• Horizontal parallax: enables parallax effect during horizontal movement of the Sections, applicable only to Card style.
• Horizontal parallax percentage: sets percentage of horizontal parallax effect between moving Sections.
• Continuous vertical: enables direct vertical passage from first to last Section and vice versa.
• Vertical lock: vertical movement is no longer possible on every Section.
• Normal scrolling website: Sections 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).
• Section height autofill: enables viewport minimum size for the Section height.

  IMPORTANT: you must enter some content to be able to see the Section.

• 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 Sections, 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 (5 types available).
• Vertical easing PRO: 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 (5 types available).
• Horizontal easing PRO: set the horizontal animation easing from a pre-estabilished set of curve types (31 types available).

Navigation Arrows

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

• Navigation arrows: enables clickable navigation arrows on every Section to move from one Section to the next.
• Vertical arrows: enables vertical navigation arrows on every Section.
• Horizontal arrows: enables horizontal navigation arrows on every Section.
• 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 type: set the arrows type (standard or custom image).
• Arrows image: to choose the arrows image to be applied, click on the Upload image button and select the image from media library.
• 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 Section to move from current Section 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 Section 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 Section to move from current Section 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 Section.
• 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 Section 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 type PRO: extended set of bullets types (28 types available).
• 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 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 Sections.
• Mouse wheel icon: if mouse wheel icon fixed option is not enabled this icon will disappear after the first vertical movement.

  NOTE: 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 animation: enables sequential navigation between adjacent Sections via mouse wheel or trackpad, with horizontal and then vertical priority and animation of your choice (slide, fade or toggle).
• Horizontal smooth animation: enables a softer movement for horizontal scrolling navigation with mouse wheel, otherwise the browser's standard sticky behaviour will be used instead.
• Smooth animation duration: enables a predefined time duration for the horizontal smooth animation movement (range from 0.8 to 2 with a step of 0.1).
• Horizontal scroll velocity: set the horizontal scrolling speed factor with mouse wheel from a pre-estabilished set of values (range from 1 to 100 with a step of 1).

Navigation Keyboard

In this group you can activate website navigation via keyboard.

• Navigation keyboard: enables navigation between adjacent Sections 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 Sections on mobile devices, such as:

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

  WARNING: if enabled, Sections and Sections 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 (5 types available).
• Vertical easing PRO: 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 (5 types available).
• Horizontal easing PRO: 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 Section.

  WARNING: if enabled side Sections will not be reachable.

• Horizontal scrolling gesture: set the horizontal scroll gesture for the Section that has the horizontal scrolling style enabled. (vertical, classic, all).
• Horizontal scroll velocity: set the horizontal scrolling speed factor in mobile devices finger swiping gesture from a pre-estabilished set of values (range from 1 to 100 with a step of 1).

Scrollbar

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

• Hide scrollbar: hides browser's default scrollbar in the Sections when it should be present.
• Scroll reset position: Scrolls back the content of the Section with scroll bar when leaving it so it will always be at the start (for horizontal and vertical scrollable content).

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 event hooks.
• Hooks list:
  • onBeforeLeave: this event is triggered before each time you are going directly to another Section through "Slide" animation type.
  • onAfterEnter: this event is triggered each time after going to another Section 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 Section.
  • onAfterEnterXaxis: this event is triggered only X-axis each time after going to another Section is completed.
  • onAfterLoadWebyx: this event is triggered after Webyx has been loaded.

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 Section index (ie: Section 1 matches iCurX=1).
• iTrgX: target Section index (ie: Section 1 matches iTrgX=1).
• iPrevX: Section index of origin (ie: Section 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.

  NOTE: the value set will overwrite every other present in every media query of the Webyx FE page settings.

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