Webyx

Descripción

This idea was born with the aim of creating amazing fullpage 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

⚠️ IMPORTANT: 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.

WHAT YOU CAN DO

Webyx for Gutenberg is a plugin for WordPress that allows you to create amazing fullpage fullscreen scrollable websites quickly and easily.

This version allows you to fully create your fullpage fullscreen website and add effects to customize it according to your needs without writing a line of code.

If you are interested get in touch with us using the form on Webyx website.

QUICK USER’S GUIDE

For a more complete documentation visit our website at Webyx.

Webyx For Gutenberg Plugin Settings

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

  • Hide WP admin top bar: hide WP 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

  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.
    IMPORTANT: you can add only one Webyx for Gutenberg block as the only root element of the page.
    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

  1. Click on the Page tab in the right side of Gutenberg editor.
  2. In pages attributes 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 note: 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.

Important note: Webyx Menu is compatible only to the Twenty(s) standard WordPress themes.

Enable your Custom template page

  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. It is a good practice to create a child theme where to possibly add these changes.

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

General actions on Sections:

  • Add Section: click on Add Section button inside the Webyx for Gutenberg block.
  • Remove Section: click on the More Options menu dots in the top navbar and click Remove Block.
  • Add Slide: click on Add Slide button inside the Section block.

Section options

  • Name: insert here a name for the current Section. IMPORTANT: you should give different names 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.
  • Continuous horizontal: enables direct horizontal passage from first to last Slide of the same Section and vice versa.

Slide navbar utility

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

Slides

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

General actions on Slides:

  • Add Slide: click on Add Slide button inside the Section block.
  • Remove Slide: click on the More Options menu dots in the top navbar and click Remove Block.
  • Add Slide content: click inside the Slide block and add Gutenberg blocks inside it. You can add anything inside here.

Slide general options:

  • Name: insert here a name for the current Slide. IMPORTANT: you should give different names 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 name.)
  • Slide content: enable content position management in the current Slide.
  • Slide content position: select general content position in the current Slide (top, middle, bottom).
  • 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.

Slide background options

  • Background: enable background management.
  • 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.

Template Design

In this group you can set the custom template page, such as:

  • Custom Template: Enabled custom template page.
  • Template file name: path to the custom template page file (example: page-custom.php or path-to\page-custom.php).

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.
  • 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 (80×50), medium (150×70), large (300×90)).
  • 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 100 pixels with a step of 1).

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 100 pixels with a step of 1).
    • Vertical bullet offset left
    • Vertical bullet offset right
  • 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 100 pixels with a step of 1).
    • Vertical bullet offset top
    • Vertical bullet offset bottom
  • 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.
  • Bullet tooltip background area: enables bullets tooltip background area.
  • Bullet tooltip background area colour: choose the colour to be applied to bullets tooltips texts when not mouse hovered from the colour box.

Navigation Mouse Wheel

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

  • Mouse wheel: enables navigation between Slides via mouse wheel.
  • Mouse wheel icon: if mouse wheel is enabled, with this option vertical navigation arrows will be replaced by a mouse wheel icon that will remain visible until the first movement between Slides.
  • Mouse wheel icon colour: choose the colour to be applied to mouse wheel icon from the colour box.
  • 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.

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 (left, right).
  • 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.

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

Scrollbar

In this group you can customize the behaviour of the browser’s default scrollbar.

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

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.

Custom CSS

In this group you can add your custom CSS.

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

Languages

  • English
  • Italian

Documentation and Support

  • For documentation visit our website at Webyx.

Capturas

  • Webyx creating amazing fullscreen websites in WordPress with Gutenberg editor's modular approach
  • Add Webyx starting block
  • Add Webyx Section block
  • Add Webyx Slide block
  • Hide/show background colour/image

Bloques

Este plugin proporciona 3 bloques.

  • Webyx
  • Webyx
  • Webyx

Instalación

Minimum Requirements

  • WordPress 5.7 or greater
  • PHP version 7.2 or greater
  • MySQL version 5.0 or greater

Installation

To install Webyx for Gutenberg is very easy:

  1. Install using the WordPress built-in Plugin installer, or Extract the zip file and drop the contents in the wp-content/plugins/ directory of your WordPress installation.
  2. Activate the plugin through the ‘Plugins’ menu in WordPress.

From now on you will be able to access and use Webyx for Gutenberg!

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.

Preguntas frecuentes

Q. Why should I use Webyx for Gutenberg?

A. You should try and use Webyx if you feel like creating a smooth and engaging fullpage and fullscreen website.

Q. Can Slides have any type of content?

A. Yes, Slides are container elements in which you can add anything inside.

Q. Can Sections have any type of content?

A. No, Sections are container elements that can have only Slides. If you want to add some content you should put it inside a Slide.

Q. Can I create any number of pages in my website with Webyx for Gutenberg block?

A. Yes, you can create as many pages as you need.

Q. Can I use more than one Webyx for Gutenberg block inside the same page?

A. No, you can add only one Webyx for Gutenberg block.

Q. I have put Webyx for Gutenberg block inside a page but I can’t see it correctly. What should I do?

A. Check that you have selected the webyx template in page attributes of the Page tab.

Q. Can I use a page created with Webyx for Gutenber block inside a theme?

A. Yes, but to see the header and footer correctly you might need to know CSS and JavaScript to change the behaviour of the page (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.

Reseñas

9 de abril de 2022
Plugin interessante, bello e facile da usare. È possibile creare siti web fantastici e davvero cool. Aspetto con ansia la versione premium: chissà quali altre magie tirerete fuori.
9 de abril de 2022
Conosco il team Webineer e sono forti e bravissimi in quello che fanno. Li consiglio vivamente.
7 de marzo de 2022
Hi guys, thank you very much for this work. I love the simplicity of this plugin and speed for creating something really neat. I really loved all the differents configurations I can use and change in the interface on the fly. For everyone else, I recommend this plugin. P.S: It could be nice if there was a way to decide the size (height/width) of the slides, like a % of the viewport. Another valutable option could be to have animations while using bullets or the menu. A suggestion: you could consider to put a way to have integrated header and footer. I hope to see more from you! Keep up the great work.
5 de febrero de 2022
Beautiful work, easy to use. Thank you
31 de enero de 2022
Ottimo plugin facile da usare al passo coi tempi.. da consigliare
Leer todas las 12 reseñas

Colaboradores y desarrolladores

Este software es de código abierto. Las siguientes personas han contribuido a este plugin.

Colaboradores

"Webyx" ha sido traducido a 1 idioma local. Gracias a los traductores por sus contribuciones.

Traduce "Webyx" a tu idioma.

¿Interesado en el desarrollo?

Revisa el código, echa un vistazo al repositorio SVN o suscríbete al registro de desarrollo por RSS.

Registro de cambios

1.4.1

  • Tweak: Added info texts on every option
  • Tweak: Minor changes to interface layout

1.4.0

  • New: Save hide/show Slide background in the editor
  • New: Enable/disable Slide background
  • New: Enable/disable Slide content management position
  • New: Added media file name where applicable and check icon
  • New: Added custom splash screen option
  • Fix: Removed P tag type selection in both Sections and Slides

1.3.0

  • Tweak: Improved block edit layout
  • New: Webyx Plugin Settings admin page
  • New: Hide/show WP admin top bar
  • New: Enable/disable Webyx menu

1.2.0

  • Tweak: 💥Improved Webyx menu management and layout (scrollable, multi-level, responsive, website logo)
  • Tweak: Added opacity to Arrows
  • Tweak: Added opacity to Bullets
  • Tweak: introduced range for Slide Easings speed with more granular values
  • Tweak: introduced range for Mobile Devices Easings speed with more granular values
  • Tweak: Added opacity to Loading Splash Screen background colour and spinner colour
  • New: Arrows light colour
  • New: Bullets and Tooltips light colour
  • New: Bullets tooltips background area colour
  • New: Fullscreen Button background area colour
  • New: Mouse Wheel Icon colour and background area colour
  • New: Mouse Wheel Icon fixed (can be always visible)

1.1.0

  • Tweak: Added new tab for navigation mouse wheel
  • Tweak: Added info text on some options
  • Tweak: Added AceEditor for custom CSS/JS
  • Tweak: 💥Improved interface for managing options
  • Tweak: Minimized bullets wrapper area
  • New: Section/Slide tag type parameter
  • New: Wrapper Slide content with user’s custom CSS class name
  • New: 💥Slide horizontal continuous
  • New: Hide scrollbar
  • New: Arrows custom offset for desktop/mobile
  • New: Arrows dimension area, background area and area colour
  • New: Bullets custom offset for desktop/mobile
  • New: Bullets background area and area colour
  • New: Bullets tooltips text colour
  • New: Navigation keyboard
  • New: Fullscreen button dimension thickness
  • New: Fullscreen button custom offset for desktop

1.0.2

  • New: Added navigation arrows that can be switched on/off
  • New: Added navigation arrows can now be vanishing

1.0.1

  • New: 💥Added template Design
  • New: 💥Added navigation bullets
  • Tweak: Improved webyx menu management
  • Tweak: Improved block edit layout

1.0.0

  • Initial Public Release