Something 'cool' is coming soon (teaser)
Video Player
Video Player
- New feature: wb.videoplayer.min.js has been replaced with plyr.min.js, so the video player now has many extra options: responsive, sub title support, aspect ratio and lots of styling options!
- New feature: wb.videoplayer.min.js has been replaced with plyr.min.js, so the video player now has many extra options: responsive, sub title support, aspect ratio and lots of styling options!
Embed
Embed
The 'plug-in' object has been renamed to 'embed', because this is the official HTML element name.
Deprecated HTML options have been removed.
- New feature: Added 'type' property to set the media type.
The 'plug-in' object has been renamed to 'embed', because this is the official HTML element name.
Deprecated HTML options have been removed.
- New feature: Added 'type' property to set the media type.
Site Tree
Site Tree
- New feature: Added padding support.
- New feature: Added 'indent' property to set offset for text items.
- New feature: Added 'full width' property for use with layout grids.
- New feature: Added 'text alignment' option.
- New feature: Added the ability to rotate the object.
- New feature: Added support for custom border and border images.
- New feature: Added the ability to set the line height.
- Improved: Responsive fonts.
- Improved: The Site Tree now uses Direct2D rendering instead of MSHTML. This results in faster rendering and more control over the layout.
- New feature: Added padding support.
- New feature: Added 'indent' property to set offset for text items.
- New feature: Added 'full width' property for use with layout grids.
- New feature: Added 'text alignment' option.
- New feature: Added the ability to rotate the object.
- New feature: Added support for custom border and border images.
- New feature: Added the ability to set the line height.
- Improved: Responsive fonts.
- Improved: The Site Tree now uses Direct2D rendering instead of MSHTML. This results in faster rendering and more control over the layout.
CSS Menu / Text Menu
CSS Menu / Text Menu
- Improved: The "Spacing" of (main) menu items is now responsive so it can be different in breakpoints. This may be helpful to increase spacing between links on mobile devices (and prevent "Tap targets are too small" warnings in Google's Lighthouse).
- Improved: The "Spacing" of (main) menu items is now responsive so it can be different in breakpoints. This may be helpful to increase spacing between links on mobile devices (and prevent "Tap targets are too small" warnings in Google's Lighthouse).
Navigation
Navigation (general)
- Improved: If a navigation object (menubar, panel menu etc.) is selected then the 'Link' button will open the object's properties.
- Improved: If a navigation object (menubar, panel menu etc.) is selected then the 'Link' button will open the object's properties.
Text Menu
Text Menu
- New feature: Added 'Full Width' property. Display the menu full width in Layout Grids.
- New feature: Added 'Full Width' property. Display the menu full width in Layout Grids.
Breadcrumb
Breadcrumb
- Improved: The separator padding is now responsive so it can be different in breakpoints. This may be helpful to increase spacing between links on mobile devices.
- Improved: Added support for structured data (https://schema.org/BreadcrumbList), so search engines can better understand the structure of the Breadcrumb navigation.
- Improved: The separator padding is now responsive so it can be different in breakpoints. This may be helpful to increase spacing between links on mobile devices.
- Improved: Added support for structured data (https://schema.org/BreadcrumbList), so search engines can better understand the structure of the Breadcrumb navigation.
Go Menu
Go Menu
- New feature: Added border-radius property.
- New feature: Added border-radius property.
Themeable Menu
Themeable Menu
- Improved: Added support for multilevel drop-down menus. Previously only one level was supported. Note: this requires 'click to open'.
- New feature: Added the ability to set the padding for sub items in mobile mode.
- New feature: Added 'Arrow spacing' option. Specifies the spacing between the text and the drop-down arrow.
- New feature: Added 'Use Split Button' option. A split button is a hybrid between a button and a drop-down menu. It displays a drop-down menu when the user clicks the arrow, but also offers one-click access to a default choice that doesn't require opening the menu. Note: split buttons only work with 'click to open submenus'.
- Improved: Added support for multilevel drop-down menus. Previously only one level was supported. Note: this requires 'click to open'.
- New feature: Added the ability to set the padding for sub items in mobile mode.
- New feature: Added 'Arrow spacing' option. Specifies the spacing between the text and the drop-down arrow.
- New feature: Added 'Use Split Button' option. A split button is a hybrid between a button and a drop-down menu. It displays a drop-down menu when the user clicks the arrow, but also offers one-click access to a default choice that doesn't require opening the menu. Note: split buttons only work with 'click to open submenus'.
Overlay Menu
Overlay Menu
- New feature: Added 'Expanded' option. This makes it possible to display the menu fully expanded. For example, to display a tree like navigation. When the menu is full expanded the main items with a sub menu can also have links.
- New feature: Added 'Expanded' option. This makes it possible to display the menu fully expanded. For example, to display a tree like navigation. When the menu is full expanded the main items with a sub menu can also have links.
Responsive Menu
Responsive Menu
- New feature: Added 'Arrow offset' option. This specifies the spacing between the text and arrow (for menu item with sub levels). It is also possible to set a negative offset. In that case the arrow will positioned at the right side of the menu item.
- New feature: Added 'Arrow offset' option. This specifies the spacing between the text and arrow (for menu item with sub levels). It is also possible to set a negative offset. In that case the arrow will positioned at the right side of the menu item.
ListView
ListView
- New feature: Added an optional 'Search filter'. This adds a search filter bar to the listview.
- New feature: Added an optional 'Search filter'. This adds a search filter bar to the listview.
Themeable Button
Themeable Button
- New feature: Added 'show checkmark' option for checkbox and radio button mode. This specifies whether the optional checkmark is displayed on the button.
- Improved: The button no longer uses jQuery and jQuery UI themes when the button type is set to normal, reset, submit or link.
This will make the page weight a lot lighter.
- New feature: Added 'show checkmark' option for checkbox and radio button mode. This specifies whether the optional checkmark is displayed on the button.
- Improved: The button no longer uses jQuery and jQuery UI themes when the button type is set to normal, reset, submit or link.
This will make the page weight a lot lighter.
Carousel / Slideshow / Snap Scroll
Carousel / Slideshow / Snap Scroll
- Improved: The built-in pagination dots now use CSS instead of images. This slightly reduces the size and load time of the page.
- New feature: Added 8 new pagination dot styles: Dot 2 Stroke, Fill In, Fill Up, Puff, Scale Down, Scale Up, Shadow, Small Dot
These options affects the way the dots are animated between states.
Demo:
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_paginationdots.html
- Improved: The built-in pagination dots now use CSS instead of images. This slightly reduces the size and load time of the page.
- New feature: Added 8 new pagination dot styles: Dot 2 Stroke, Fill In, Fill Up, Puff, Scale Down, Scale Up, Shadow, Small Dot
These options affects the way the dots are animated between states.
Demo:
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_paginationdots.html
prefers-reduced-motion
prefers-reduced-motion
- New feature: Added support for 'prefers-reduced-motion' via "Disable CSS animations and transitions for prefers-reduced-motion". This option will disable CSS animations and transitions if 'Reduce motion' is enabled in the user's system settings. In Windows 10 you can disable animation via Control Panel -> Turn off all unnecessary animations'. On the Mac: Accessibility -> Display -> Reduce motion
- New feature: Added support for 'prefers-reduced-motion' via "Disable CSS animations and transitions for prefers-reduced-motion". This option will disable CSS animations and transitions if 'Reduce motion' is enabled in the user's system settings. In Windows 10 you can disable animation via Control Panel -> Turn off all unnecessary animations'. On the Mac: Accessibility -> Display -> Reduce motion
jquery-3.6.0.slim.min.js
jquery-3.6.0.slim.min.js
- New feature: Added support for the ‘slim’ version of jQuery.
The 'slim' version excludes the ajax and effects modules and is approximately 17Kb smaller than the full version of jQuery. You can select the slim version if you are just using basic features like simple events (without effects) or Bootstrap based widgets.
- New feature: Added support for the ‘slim’ version of jQuery.
The 'slim' version excludes the ajax and effects modules and is approximately 17Kb smaller than the full version of jQuery. You can select the slim version if you are just using basic features like simple events (without effects) or Bootstrap based widgets.
Easing
Easing
- Improved: When using Easing effects in animations (for example in Bookmarks, Panel Menu, SVG animations, Snap Scroll etc), the HTML generator will now only include the jQuery Effects module (11KB) instead of the full jQuery UI library (248KB)!
- Improved: When using Easing effects in animations (for example in Bookmarks, Panel Menu, SVG animations, Snap Scroll etc), the HTML generator will now only include the jQuery Effects module (11KB) instead of the full jQuery UI library (248KB)!
Animation and Transitions
Animation and Transitions
- New feature: Added support for 'clip-path' property. This is a powerful property that allows you to create shape-based animations.
- New feature: Added 15 new animations using the clip-path property.
Demo:
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_clippath.html
- New feature: Added support for 'clip-path' property. This is a powerful property that allows you to create shape-based animations.
- New feature: Added 15 new animations using the clip-path property.
Demo:
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_clippath.html
Dark Mode
Dark Mode
- New feature: Added a toggle button to quickly switch between Light and Dark mode.
- New feature: Added a toggle button to quickly switch between Light and Dark mode.
Templates
To demonstrate the WWB17 features, we have created a bunch of new templates
Templates
Here are the 'live' versions of the templates.
As usual, these are just some random ideas how to use the new features of the upcoming release.
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_author.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_boutique.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_cryptocoin.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_devices.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_drinks.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_fillrule.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_hexagon.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_circle.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_layoutexperiment1.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_layoutexperiment2.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_lottie.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_neon.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_shopper.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_timetraveler.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_wizzypedia.html
As usual, these are just some random ideas how to use the new features of the upcoming release.
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_author.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_boutique.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_cryptocoin.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_devices.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_drinks.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_fillrule.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_hexagon.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_circle.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_layoutexperiment1.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_layoutexperiment2.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_lottie.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_neon.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_shopper.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_timetraveler.html
https://www.wysiwygwebbuilder.com/support/wb17tryouts/wb17_wizzypedia.html
Re: Something cool is coming soon (teaser)
And to conclude this teaser, here's the (almost) complete list of new features for WYSIWYG Web Builder 17.
https://www.wysiwygwebbuilder.com/support/wb17.html
WYSIWYG Web Builder 17 will be available within a few days...
https://www.wysiwygwebbuilder.com/support/wb17.html
WYSIWYG Web Builder 17 will be available within a few days...