Almost 18... (teaser)
CAPTCHA
CAPTCHA
- Added 'Full Width' property. Specifies whether the element is full width when used in a Layout Grid.
- Added 'Full Width' property. Specifies whether the element is full width when used in a Layout Grid.
Image Comparison
Image Comparison
- Added 'compare' mode to Rollover Image.
This mode adds a comparison slider to the images for comparing before and after images. For example, it could be used to compare images before and after compression or editing or to demonstrate the effect of a product or service etc.
The Image Comparison option has its own icon in the toolbox for easy access.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_rolloverimage.html
- Added 'compare' mode to Rollover Image.
This mode adds a comparison slider to the images for comparing before and after images. For example, it could be used to compare images before and after compression or editing or to demonstrate the effect of a product or service etc.
The Image Comparison option has its own icon in the toolbox for easy access.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_rolloverimage.html
Rollover Text
Rollover Text
- Added 'show always' option (to animation list). When this option is selected, then the text will always be displayed.
- Added 'hide on hover' option (to animation list). When this option is selected, then the text will initially be displayed, but hides when the mouse hover over the image (inverse rollover).
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_rollovertext.html
- Added 'show always' option (to animation list). When this option is selected, then the text will always be displayed.
- Added 'hide on hover' option (to animation list). When this option is selected, then the text will initially be displayed, but hides when the mouse hover over the image (inverse rollover).
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_rollovertext.html
Banner
Banner
- Added the ability to control text animation of a Banners with Events.
• "Media Play" will start the animation from the beginning.
• "Media Stop" will stop the animation. Characters will be hidden.
• "Media Pause" will stop the animation. Characters will remain visible (depending on the current state). Pressing "pause' again will continue the animation where it left off.
This feature can be useful for use in a carousel, to make sure the text animation always starts from the beginning when the slide becomes active.
Or you can control the animation via the click of a button:
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_banner.html
- Added the ability to control text animation of a Banners with Events.
• "Media Play" will start the animation from the beginning.
• "Media Stop" will stop the animation. Characters will be hidden.
• "Media Pause" will stop the animation. Characters will remain visible (depending on the current state). Pressing "pause' again will continue the animation where it left off.
This feature can be useful for use in a carousel, to make sure the text animation always starts from the beginning when the slide becomes active.
Or you can control the animation via the click of a button:
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_banner.html
Stock Photo
Stock Photo
- Added integration with 'Pexels'.
WWB already supported Unsplash and Pixabay, and now you can also easily use free stock photos, royalty free images & videos shared by creators on Pexels.com
- Added integration with 'Pexels'.
WWB already supported Unsplash and Pixabay, and now you can also easily use free stock photos, royalty free images & videos shared by creators on Pexels.com
Photography Template Preview
This is a preview of a new template for WWB18: "Photography".
This is a basic template created with Layout Grids.
What makes this template special is that it uses transparent PNG images to force the aspect ratio of the grid cells.
This trick makes it relative easy to create flexible layouts with images, without the need for breakpoints.
Another fun fact is that the images were specially created for WYSIWYG Web Builder by Ukrainian photo model 'Irena'.
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_photography.html
This is a basic template created with Layout Grids.
What makes this template special is that it uses transparent PNG images to force the aspect ratio of the grid cells.
This trick makes it relative easy to create flexible layouts with images, without the need for breakpoints.
Another fun fact is that the images were specially created for WYSIWYG Web Builder by Ukrainian photo model 'Irena'.
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_photography.html
Image
Image
- Added the ability add a text-stroke (outline) to watermark text (like sub-titles in movies).
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_image_watermark.html
- Added the ability add a text-stroke (outline) to watermark text (like sub-titles in movies).
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_image_watermark.html
Image Hotspot
Image Hotspot
- Added 'auto' placement option to Tooltip properties. When auto is specified, it will dynamically reorient the tooltip.
- Added the ability add a border (width / color) to the tooltip.
- The tooltip arrow is now relatively sized based on the tooltip font-size.
- Added 'auto' placement option to Tooltip properties. When auto is specified, it will dynamically reorient the tooltip.
- Added the ability add a border (width / color) to the tooltip.
- The tooltip arrow is now relatively sized based on the tooltip font-size.
Picture
Picture
- Added the ability to apply a shape to the picture. This works just like the shape feature of a standard image, however in this case CSS's clip-path will be used, instead of a modifying the image. Which means that the quality of the original image will not be affected. Also, it looks much better because the edges will not be blurred.
- Added the ability to apply a stencil/mask to the picture. This works just like the stencil feature of a standard image, however in this case CSS's mask-image will be used, instead of a modifying the image. Which means that the quality of the original image will not be affected.
- The 'Add/Remove frame' menu can now also be used on Pictures.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_picture.html
- Added the ability to apply a shape to the picture. This works just like the shape feature of a standard image, however in this case CSS's clip-path will be used, instead of a modifying the image. Which means that the quality of the original image will not be affected. Also, it looks much better because the edges will not be blurred.
- Added the ability to apply a stencil/mask to the picture. This works just like the stencil feature of a standard image, however in this case CSS's mask-image will be used, instead of a modifying the image. Which means that the quality of the original image will not be affected.
- The 'Add/Remove frame' menu can now also be used on Pictures.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_picture.html
Photo Gallery / Slideshow
Photo Gallery / Slideshow
- Added support for third party GLightbox script. GLightbox (https://github.com/biati-digital/glightbox/) is a pure javascript lightbox (no jQuery!).
It can display images and videos with optional autoplay for YouTube, Vimeo and self hosted videos.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_glightbox.html
- Added support for third party GLightbox script. GLightbox (https://github.com/biati-digital/glightbox/) is a pure javascript lightbox (no jQuery!).
It can display images and videos with optional autoplay for YouTube, Vimeo and self hosted videos.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_glightbox.html
Shapes
Shapes
- Shapes with output format 'CSS' now use clip-path, so CSS shapes are no longer limited to rectangles and ellipses only!
- Background patterns of SVG shapes are now exported in vector format (instead of an image), so they take up less space and look nicer.
- Most gradients styles now have a decent fallback for SVG , so they look the same (or better) as image based shapes.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_shapes.html
- Shapes with output format 'CSS' now use clip-path, so CSS shapes are no longer limited to rectangles and ellipses only!
- Background patterns of SVG shapes are now exported in vector format (instead of an image), so they take up less space and look nicer.
- Most gradients styles now have a decent fallback for SVG , so they look the same (or better) as image based shapes.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_shapes.html
Clip Art / Text Art
Clip Art / Text Art
- Added output format 'CSS'. This will output the element with clip-path and SVG. When using CSS as output, the border and background can be styled with Styles.
- Added output format 'CSS'. This will output the element with clip-path and SVG. When using CSS as output, the border and background can be styled with Styles.
Polygon / Curve/ Line / Scribble
Polygon / Curve/ Line / Scribble
- Added output format 'CSS'. Basically, this generates the same output as SVG, but when using CSS it is possible to use styles. In this case, the 'text color' controls the fill of the shape.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_drawing_tools.html
- Added output format 'CSS'. Basically, this generates the same output as SVG, but when using CSS it is possible to use styles. In this case, the 'text color' controls the fill of the shape.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_drawing_tools.html
Shape / Clip Art / Text Art / Polygon / Curve
Shape / Clip Art / Text Art / Polygon / Curve
- Added new background size option ‘cover' (in addition to ‘tile’ and ‘stretch’). Unlike stretching, ‘cover’ scales the image to be as large as possible so that the background area is completely covered by the image without affecting the aspect ratio.
- Added new background size option ‘cover' (in addition to ‘tile’ and ‘stretch’). Unlike stretching, ‘cover’ scales the image to be as large as possible so that the background area is completely covered by the image without affecting the aspect ratio.
Polygon / Curve
Polygon / Curve
- The Polygon / Curve object can now be part of a layout grid. When the output is set to SVG or CSS, the polygon/curve is also responsive and scalable!
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_polygons.html
- The Polygon / Curve object can now be part of a layout grid. When the output is set to SVG or CSS, the polygon/curve is also responsive and scalable!
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_polygons.html
YouTube
YouTube
- Added 'Mute' property. Specifies whether to mute the audio of the video.
This can be useful if you want to automatically play without user interaction, because most browsers will block autoplay if the video has audio.
- Added 'Trigger' functionality. This can be used to start the video based on a 'trigger'. For example, then the video is scrolled into the viewport.
This also supports scroll continuously which plays the video frame by frame based on the scroll position of the scrollbar.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_youtube.html
- Added 'Mute' property. Specifies whether to mute the audio of the video.
This can be useful if you want to automatically play without user interaction, because most browsers will block autoplay if the video has audio.
- Added 'Trigger' functionality. This can be used to start the video based on a 'trigger'. For example, then the video is scrolled into the viewport.
This also supports scroll continuously which plays the video frame by frame based on the scroll position of the scrollbar.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_youtube.html
Vimeo
Vimeo
- Added 'Mute' property. Specifies whether to mute the audio of the video. This can be useful if you want to automatically play without user interaction, because most browsers will block auto play if the video has audio.
- Added 'Show controls' property. Specifies whether to show/hide all elements in the player (play bar, sharing buttons, etc.).
- Added 'Trigger' functionality.
- Added 'Mute' property. Specifies whether to mute the audio of the video. This can be useful if you want to automatically play without user interaction, because most browsers will block auto play if the video has audio.
- Added 'Show controls' property. Specifies whether to show/hide all elements in the player (play bar, sharing buttons, etc.).
- Added 'Trigger' functionality.
HTML Video
HTML Video
- Added integration with 'Pexels' via the 'Select stock video' button.
- Added 'Trigger' functionality. This can be used to start the video based on a 'trigger'. For example, then the video is scrolled into the viewport.
This support, scroll continuously this plays the video frame by frame based on the scroll position of the scrollbar.
- Added integration with 'Pexels' via the 'Select stock video' button.
- Added 'Trigger' functionality. This can be used to start the video based on a 'trigger'. For example, then the video is scrolled into the viewport.
This support, scroll continuously this plays the video frame by frame based on the scroll position of the scrollbar.
"Purple Fantasy" Template Preview
This is a preview of a new template for WWB18: "Purple Fantasy".
A basic template created with Layout grids and Sections. It also uses floating labels and custom scrollbar colors.
The art work in the template was created with the help of Artificial Intelligence (Stable Diffusion).
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_purplefantasy.html
A basic template created with Layout grids and Sections. It also uses floating labels and custom scrollbar colors.
The art work in the template was created with the help of Artificial Intelligence (Stable Diffusion).
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_purplefantasy.html
Upgraded to Bootstrap 5
Upgraded to Bootstrap 5
All built-in Bootstrap widgets have been rewritten to use Bootstrap 5. Bootstrap 5 no longer uses jQuery and has many other improvements.
Also, many jQuery UI objects now have a Bootstrap alternative. For example, tooltips, progress bar, checkbox, radio button etc. More details will be available later in this post.
What is the difference between Bootstrap and jQuery UI?
Bootstrap is a modern UI framework based on modern browser functionality.
jQuery UI is an older UI framework based on JavaScript, uses themes. jQuery UI relies on jQuery, and jQuery UI themes and uses JavaScript for animation so it has more impact on the performance of the page. Bootstrap is lightweight and only uses JavaScript when necessary, it uses CSS styling and for animation.
jQuery UI size: approx. 424 KB (jQuery, jQuery UI and theme files)
Bootstrap size: approx. 77 KB (bootstrap.min.js, popper.min.js)
Also, Bootstrap is actively maintained, jQuery UI is no longer under development.
jQuery UI website: https://jqueryui.com/
Bootstrap website: https://getbootstrap.com/
All built-in Bootstrap widgets have been rewritten to use Bootstrap 5. Bootstrap 5 no longer uses jQuery and has many other improvements.
Also, many jQuery UI objects now have a Bootstrap alternative. For example, tooltips, progress bar, checkbox, radio button etc. More details will be available later in this post.
What is the difference between Bootstrap and jQuery UI?
Bootstrap is a modern UI framework based on modern browser functionality.
jQuery UI is an older UI framework based on JavaScript, uses themes. jQuery UI relies on jQuery, and jQuery UI themes and uses JavaScript for animation so it has more impact on the performance of the page. Bootstrap is lightweight and only uses JavaScript when necessary, it uses CSS styling and for animation.
jQuery UI size: approx. 424 KB (jQuery, jQuery UI and theme files)
Bootstrap size: approx. 77 KB (bootstrap.min.js, popper.min.js)
Also, Bootstrap is actively maintained, jQuery UI is no longer under development.
jQuery UI website: https://jqueryui.com/
Bootstrap website: https://getbootstrap.com/
Progressbar
Progressbar
- Added Bootstrap progress bar. This uses Bootstrap's progress bar instead of jQuery UI. The Bootstrap progress bar does not use JavaScript for rendering and is therefore much smaller.
https://getbootstrap.com/docs/5.2/components/progress/
- Added Circle type. This renders a circular progress bar. The value can also be rendered as pie!
- Added 'stripes' property. This applies diagonal stripes to the background of the value. The stripes can also be animated.
- Added the ability to display text, instead of percentages.
- Added transition properties. This specifies the transition timing and duration when the value changes.
- Added 'border width' property to set the border size of the object.
- Added 'trigger' functionality. This can be used to trigger the value at a specific moment. For example, then the progress bar is scrolled into the viewport or via events. Also supports scroll continuously this changes the value of the progress bar based on the scroll position of the scrollbar.
Demos:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_progressbar_overview.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_progressbar_trigger.html
- Added Bootstrap progress bar. This uses Bootstrap's progress bar instead of jQuery UI. The Bootstrap progress bar does not use JavaScript for rendering and is therefore much smaller.
https://getbootstrap.com/docs/5.2/components/progress/
- Added Circle type. This renders a circular progress bar. The value can also be rendered as pie!
- Added 'stripes' property. This applies diagonal stripes to the background of the value. The stripes can also be animated.
- Added the ability to display text, instead of percentages.
- Added transition properties. This specifies the transition timing and duration when the value changes.
- Added 'border width' property to set the border size of the object.
- Added 'trigger' functionality. This can be used to trigger the value at a specific moment. For example, then the progress bar is scrolled into the viewport or via events. Also supports scroll continuously this changes the value of the progress bar based on the scroll position of the scrollbar.
Demos:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_progressbar_overview.html
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_progressbar_trigger.html
Auto Complete
Auto Complete
- Added Bootstrap inspired auto complete mode. This offers a lightweight alternative for jQuery UI's bulky script.
- Added support for 'disable', 'auto focus' and 'read-only' properties.
- Added 'focus color' property.
- Added 'place holder color' property. Specifies the text color of the place holder text.
- Added the ability to set the text alignment.
- Added the ability to set padding of the auto complete list items.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_auto_complete.html
- Added Bootstrap inspired auto complete mode. This offers a lightweight alternative for jQuery UI's bulky script.
- Added support for 'disable', 'auto focus' and 'read-only' properties.
- Added 'focus color' property.
- Added 'place holder color' property. Specifies the text color of the place holder text.
- Added the ability to set the text alignment.
- Added the ability to set padding of the auto complete list items.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_auto_complete.html
Tooltip
Tooltip
- Added support for Bootstrap tooltips as alternative for jQuery UI. https://getbootstrap.com/docs/5.2/components/tooltips/
- Bootstrap tooltips can be triggered via hover, click, focus or manually. With more than 35 available 'show' animations!
- Added the ability to show/hide/toggle tooltips via events.
This option can be useful, for example, to show a hint on how to display the menu. You may have already seen this feature in action in some of the template previews...
- Added 'justify' to alignment options.
- Added the ability to set the background mode (transparent, solid, gradient, image, pattern, texture). Previously only solid was supported.
- Added 'Maximum width' property. This specifies the maximum width of the tooltip (before text wraps to the next row).
- Added 9 new animations to jQuery UI tooltip: blind, bounce, drop, fold, highlight, puff, pulsate, scale, shake. Also, the slide animation is now direction aware, which means that it moves in the direction of the tooltip's arrow.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_tooltips.html
- Added support for Bootstrap tooltips as alternative for jQuery UI. https://getbootstrap.com/docs/5.2/components/tooltips/
- Bootstrap tooltips can be triggered via hover, click, focus or manually. With more than 35 available 'show' animations!
- Added the ability to show/hide/toggle tooltips via events.
This option can be useful, for example, to show a hint on how to display the menu. You may have already seen this feature in action in some of the template previews...
- Added 'justify' to alignment options.
- Added the ability to set the background mode (transparent, solid, gradient, image, pattern, texture). Previously only solid was supported.
- Added 'Maximum width' property. This specifies the maximum width of the tooltip (before text wraps to the next row).
- Added 9 new animations to jQuery UI tooltip: blind, bounce, drop, fold, highlight, puff, pulsate, scale, shake. Also, the slide animation is now direction aware, which means that it moves in the direction of the tooltip's arrow.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_tooltips.html
Droplist
Droplist
- Added a dedicated 'droplist' icon in the toolbox.
'Droplist' is an option of the listview widget. However, this option is often over-looked, although it can be very useful. For example, to create dropdown selection list with images.
- The size of the dropdown arrow is now relative to the font-size.
- The dropdown arrow now use SVG instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_droplist.html
- Added a dedicated 'droplist' icon in the toolbox.
'Droplist' is an option of the listview widget. However, this option is often over-looked, although it can be very useful. For example, to create dropdown selection list with images.
- The size of the dropdown arrow is now relative to the font-size.
- The dropdown arrow now use SVG instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_droplist.html
Listview
Listview
- 'listview' mode is now CSS only. So, it no longer depends on jquery.min.js, jquery-ui.min.js and listview.min.js for markup!
- Added the ability to set the border width of the list items.
- 'listview' mode is now CSS only. So, it no longer depends on jquery.min.js, jquery-ui.min.js and listview.min.js for markup!
- Added the ability to set the border width of the list items.
Spinner
Spinner
- Arrows now use SVG images instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_widgets.html
- Arrows now use SVG images instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_widgets.html
Toast
Toast
- Toast now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency.
https://getbootstrap.com/docs/5.2/components/toasts/
- Toast now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency.
https://getbootstrap.com/docs/5.2/components/toasts/
"Digital Agency" template preview
This is a preview of a new template for WWB18: "Digital Agency".
The main purpose of this template is to demonstrate the use of Tooltips in combination with Sections in the 'Our Team' block.
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_digitalagency.html
The main purpose of this template is to demonstrate the use of Tooltips in combination with Sections in the 'Our Team' block.
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_digitalagency.html
Layout Grid
Layout Grid
- It is now possible to set the left and right margin of the layout grid!
This may be useful to make the outer spacing of the grid the same as the gutter.
- Added support for rounded corners (border-radius).
- It is now possible to set the left and right margin of the layout grid!
This may be useful to make the outer spacing of the grid the same as the gutter.
- Added support for rounded corners (border-radius).
Flex Container
Flex Container
- Implemented responsive height. The height property can now have a different value in breakpoints.
- Added support for rounded corners (border-radius).
- Implemented responsive height. The height property can now have a different value in breakpoints.
- Added support for rounded corners (border-radius).
Flex Grid
Flex Grid
- Added new height options: 75vh, 33vh, 25vh and 10vh (vh = viewport height).
- Added support for events, animations, transitions and motion effects.
- Implemented responsive height. The height property can now have a different value in breakpoints.
- Added new height options: 75vh, 33vh, 25vh and 10vh (vh = viewport height).
- Added support for events, animations, transitions and motion effects.
- Implemented responsive height. The height property can now have a different value in breakpoints.
"Pretty" template preview
This template uses a Flex Grid to create an irregular image grid.
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_pretty.html
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_pretty.html
Carousel
Carousel
- Added the ability to use icon libraries for navigation controls. With properties for icon color, alpha value and icon size. Icons are published in SVG format. Also, all navigation properties are now on a separate property page.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_carousel.html
- Added new height options to flexible carousel: 75vh, 33vh, 25vh and 10vh (vh = viewport height).
- In flexible mode it's now also possible to set the position of the navigation controls (left, right, top, bottom and offset in percentages)
- Added the ability to the set the alpha value of the icon colors normal/hover. This can be useful, for example, to reduce the opacity of the icons when the mouse is not inside the navigation area.
- Carousel / flexible now uses Bootstrap 5. No longer depends on jQuery. https://getbootstrap.com/docs/5.2/components/carousel/
- If a Carousel is added to a page with flexible layout (a page that already has a layout grid, flexbox or flex grid) then the type is automatically set to 'flexible'.
- 'Predefined style' is now also available in the Style section of the Carousel.
- Added the ability to use icon libraries for navigation controls. With properties for icon color, alpha value and icon size. Icons are published in SVG format. Also, all navigation properties are now on a separate property page.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_carousel.html
- Added new height options to flexible carousel: 75vh, 33vh, 25vh and 10vh (vh = viewport height).
- In flexible mode it's now also possible to set the position of the navigation controls (left, right, top, bottom and offset in percentages)
- Added the ability to the set the alpha value of the icon colors normal/hover. This can be useful, for example, to reduce the opacity of the icons when the mouse is not inside the navigation area.
- Carousel / flexible now uses Bootstrap 5. No longer depends on jQuery. https://getbootstrap.com/docs/5.2/components/carousel/
- If a Carousel is added to a page with flexible layout (a page that already has a layout grid, flexbox or flex grid) then the type is automatically set to 'flexible'.
- 'Predefined style' is now also available in the Style section of the Carousel.
Slideshow
Slideshow
- Added the ability to use icon libraries for navigation controls. With properties for icon color, alpha value and icon size. Icons are published in SVG format.
- Added the ability to use icon libraries for navigation controls. With properties for icon color, alpha value and icon size. Icons are published in SVG format.
Dialog
Dialog
- Added 'one-time popup' functionality via the 'Cookie Expire Days' property. A cookie is stored on the visitor’s browser to only show the dialog once across multiple visits. Use '0' to disable cookie functionality.
- Dialog now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency. https://getbootstrap.com/docs/5.2/components/modal/
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_dialog_cookie.html
- Added 'one-time popup' functionality via the 'Cookie Expire Days' property. A cookie is stored on the visitor’s browser to only show the dialog once across multiple visits. Use '0' to disable cookie functionality.
- Dialog now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency. https://getbootstrap.com/docs/5.2/components/modal/
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_dialog_cookie.html
Tabs
Tabs
- Tabs / Bootstrap type now uses Bootstrap 5. No longer depends on jQuery. https://getbootstrap.com/docs/5.2/compo ... tabs/#tabs
- Added 'deactivate' and beforedeactivate' events. These events will be triggered when a panel gets deactivated. This can be useful, for example, to hide other elements on the page.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_tabs.html
- Tabs / Bootstrap type now uses Bootstrap 5. No longer depends on jQuery. https://getbootstrap.com/docs/5.2/compo ... tabs/#tabs
- Added 'deactivate' and beforedeactivate' events. These events will be triggered when a panel gets deactivated. This can be useful, for example, to hide other elements on the page.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_tabs.html
Accordion
Accordion
- Added 'deactivate' and beforedeactivate' events. These events will be triggered when a panel gets deactivated. See also the image under the ‘tabs’ section.
- Accordion now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency.
https://getbootstrap.com/docs/5.2/components/accordion/
- Accordion arrows now use SVG images instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.
- Accordion (Bootstrap) full header is now clickable (instead of just the text)
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_accordion.html
- Added 'deactivate' and beforedeactivate' events. These events will be triggered when a panel gets deactivated. See also the image under the ‘tabs’ section.
- Accordion now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency.
https://getbootstrap.com/docs/5.2/components/accordion/
- Accordion arrows now use SVG images instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.
- Accordion (Bootstrap) full header is now clickable (instead of just the text)
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_accordion.html
Simplified Ribbon
Simplified Ribbon
WWB18 has a new redesigned ribbon mode: Simplified Ribbon. The Simplified Ribbon is a mix between the classic toolbar and ribbon. It shows the commands in a single line which not only brings a modern interface to WWB but also frees up space to show more of the page you are working on.
Because there is less space available, all buttons might not be visible. If you want to switch back to the classic ribbon where you can see more commands, simply click the downward pointing arrow in the lower right corner of the ribbon to expand it. Use this arrow control to switch between the simplified and classic ribbon.
It's also possible to switch between ribbon, classic menubar/toolbars and simplified ribbon in Tools -> Options -> User Interface -> User interface
- Added Office 2022 inspired visual themes (Colorful, Dark Gray, White and Black).
WWB18 has a new redesigned ribbon mode: Simplified Ribbon. The Simplified Ribbon is a mix between the classic toolbar and ribbon. It shows the commands in a single line which not only brings a modern interface to WWB but also frees up space to show more of the page you are working on.
Because there is less space available, all buttons might not be visible. If you want to switch back to the classic ribbon where you can see more commands, simply click the downward pointing arrow in the lower right corner of the ribbon to expand it. Use this arrow control to switch between the simplified and classic ribbon.
It's also possible to switch between ribbon, classic menubar/toolbars and simplified ribbon in Tools -> Options -> User Interface -> User interface
- Added Office 2022 inspired visual themes (Colorful, Dark Gray, White and Black).
Page
Page
- Added a quick and easy way to rearrange floating layers (layout grids, flex containers etc.) via the vertical ruler bar. When a floating layer is selected, the ruler will show 'move up' and 'move down' arrows.
- Added 'New Page' tab to user interface. This adds a quick way to add new pages.
By default, the new page tab only contains the ‘+’ sign, but you can change the text of the tab in Tools -> Options -> User Interface. If you leave the field empty then the new page tab will be hidden.
- Added the ability to rename the page by double clicking the tab.
- Added the ability to set a minimum font size for 'Automatically scale new objects in other breakpoints'. Previously, if the base font size was small then the scaled font could become too small to read, so now it can be limited to a more practical size.
- Error Reports checks for invalid page alignment in flexible layouts. The page alignment in flexible layouts should be set to 'do not center this page'. Double click the error to open the Page Properties.
- Enabled 'Rotate Left 90', 'Rotate right 90' and flip commands for all rotatable objects. Previously these commands only worked for Shapes and Images.
- Added a quick and easy way to rearrange floating layers (layout grids, flex containers etc.) via the vertical ruler bar. When a floating layer is selected, the ruler will show 'move up' and 'move down' arrows.
- Added 'New Page' tab to user interface. This adds a quick way to add new pages.
By default, the new page tab only contains the ‘+’ sign, but you can change the text of the tab in Tools -> Options -> User Interface. If you leave the field empty then the new page tab will be hidden.
- Added the ability to rename the page by double clicking the tab.
- Added the ability to set a minimum font size for 'Automatically scale new objects in other breakpoints'. Previously, if the base font size was small then the scaled font could become too small to read, so now it can be limited to a more practical size.
- Error Reports checks for invalid page alignment in flexible layouts. The page alignment in flexible layouts should be set to 'do not center this page'. Double click the error to open the Page Properties.
- Enabled 'Rotate Left 90', 'Rotate right 90' and flip commands for all rotatable objects. Previously these commands only worked for Shapes and Images.
User Interface
User Interface
- Added support for Windows 11 Snap Layout. When the maximize/restore caption button is hovered, the layout popup menu will appear near this button.
- Many property dialogs are now resizable. Also, the software will remember the window placement, so the next time you open the properties it will have the same position and size.
- Added the ability to automatically hide scrollbars in the workspace. When a scrollbar is inactive (the mouse cursor is not located inside it), only compact (thin) thumb box will be drawn. When you move the mouse inside the scrollbar, the bar will be fully drawn.
You can control this behavior in Tools -> Options -> User Interface -> Automatically Hide Scrollbars.
- Added ‘Open file location’ to the context menu of the Toolbox.
When an extension is selected, then this will open extensions folder in Windows Explorer.
- Added support for Windows 11 Snap Layout. When the maximize/restore caption button is hovered, the layout popup menu will appear near this button.
- Many property dialogs are now resizable. Also, the software will remember the window placement, so the next time you open the properties it will have the same position and size.
- Added the ability to automatically hide scrollbars in the workspace. When a scrollbar is inactive (the mouse cursor is not located inside it), only compact (thin) thumb box will be drawn. When you move the mouse inside the scrollbar, the bar will be fully drawn.
You can control this behavior in Tools -> Options -> User Interface -> Automatically Hide Scrollbars.
- Added ‘Open file location’ to the context menu of the Toolbox.
When an extension is selected, then this will open extensions folder in Windows Explorer.
Global Replace
Global Replace
- Added the ability to replace the 'class' property (style) for all pages/objects.
- Added the ability to replace the 'class' property (style) for all pages/objects.
"Barber Shop" template preview
This template was inspired by the website of my barber;)
Specially, the price list which uses flex containers to implement dotted lines with dynamic lengths (no script, just flexbox!).
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_barbershop.html
Specially, the price list which uses flex containers to implement dotted lines with dynamic lengths (no script, just flexbox!).
Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_barbershop.html
Dropdown Menu
Dropdown Menu
- Added 'Dropdown Menu' item in the toolbox. The dropdown menu is a simplified version of the themeable menu without jQuery. Dropdown Menu uses Bootstrap 5 and does not depend on jQuery (unlike the themeable menu).
Note: The themeable menu (with jQuery UI support) is now hidden in the Toolbox by default, but you can still access it via the Insert menu or manually add it back to the toolbox (via customize toolbox)
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
- Added 'Dropdown Menu' item in the toolbox. The dropdown menu is a simplified version of the themeable menu without jQuery. Dropdown Menu uses Bootstrap 5 and does not depend on jQuery (unlike the themeable menu).
Note: The themeable menu (with jQuery UI support) is now hidden in the Toolbox by default, but you can still access it via the Insert menu or manually add it back to the toolbox (via customize toolbox)
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
Snap Scroll
Snap Scroll
- Added support for horizontal scrolling!
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_medieval_town.html
- Added support for horizontal scrolling!
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_medieval_town.html
Overlay Menu
Overlay Menu
- Added 'Blur' property. This adds a backdrop blur filter to the overlay background.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_overlaymenu.html
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
- Added 'Blur' property. This adds a backdrop blur filter to the overlay background.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_overlaymenu.html
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
Panel Menu
Panel Menu
- Added 'Reveal' type (in addition to 'overlay' and 'push'). In reveal mode, the panel menu will initially show the icon only and when the mouse is over the menu, it will expand to its full width. Note that this only works when the menu is at the left/right edge of the page.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu_reveal.html
- Added 'Fixed' type (in addition to 'overlay', 'push' and 'reveal'). In fixed mode, the panel menu will always be visible. Note that this only works when the menu is at the left/right edge of the page.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu_fixed.html
- Added 'Blur' property. This adds a backdrop blur filter to the overlay background.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu.html
- Added dropdown menu to select the hamburger icon animation. (https://wysiwygwebbuilder.com/support/panelmenu-animations/index.html)
- Added the ability to set the size for icons in menu items. Previously the icon size was the same as the size of button icon. Now the icons can have a different size. Note: the spacing between the icon and text is determined by the padding.
- It is now possible to hide the menu on smaller screens via the breakpoint property by specifying a negative value. For example, '-768' will hide the menu on screens smaller than 768 pixels.
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
- Added 'Reveal' type (in addition to 'overlay' and 'push'). In reveal mode, the panel menu will initially show the icon only and when the mouse is over the menu, it will expand to its full width. Note that this only works when the menu is at the left/right edge of the page.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu_reveal.html
- Added 'Fixed' type (in addition to 'overlay', 'push' and 'reveal'). In fixed mode, the panel menu will always be visible. Note that this only works when the menu is at the left/right edge of the page.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu_fixed.html
- Added 'Blur' property. This adds a backdrop blur filter to the overlay background.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu.html
- Added dropdown menu to select the hamburger icon animation. (https://wysiwygwebbuilder.com/support/panelmenu-animations/index.html)
- Added the ability to set the size for icons in menu items. Previously the icon size was the same as the size of button icon. Now the icons can have a different size. Note: the spacing between the icon and text is determined by the padding.
- It is now possible to hide the menu on smaller screens via the breakpoint property by specifying a negative value. For example, '-768' will hide the menu on screens smaller than 768 pixels.
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
Responsive Menu
Responsive Menu
- Added 'Underline' property.
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
- Added 'Underline' property.
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
CSS Menu
CSS Menu
- Added 'space between' size mode. The items are evenly distributed. The spacing between each pair of adjacent items is the same.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_cssmenu.html
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
- Added 'space between' size mode. The items are evenly distributed. The spacing between each pair of adjacent items is the same.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_cssmenu.html
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
Mega Menu
Mega Menu
- Added 'Icon Offset' property for sub menu items. This specifies the offset from the left (or right) side of the menu item. Note that if you increase this value then you may also need to increase the padding otherwise the icon will overlap the text.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_megamenu.html
- The properties dialog of the Mega Menu has been redesigned to be more consistent with other menus, for quicker access to properties and making them easier findable.
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
- Added 'Icon Offset' property for sub menu items. This specifies the offset from the left (or right) side of the menu item. Note that if you increase this value then you may also need to increase the padding otherwise the icon will overlap the text.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_megamenu.html
- The properties dialog of the Mega Menu has been redesigned to be more consistent with other menus, for quicker access to properties and making them easier findable.
- Added support for predefined styles.
Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
Themeable Button
Themeable Button
- Added 2 new icon align options: inline left and inline right. This will align the icon inline with the text instead of at the left or right side of the button.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_themablebutton.html
- Added the ability to set the 'icon size'. Previously the icon size was the same as the text size. Now the icon can have a different size.
- Button icons can now also be published as SVG (Tools -> Options -> HTML -> Publish navigation icons as SVG).
- 'button set' type no longer uses jQuery's control group, it uses flexbox instead, resulting in cleaner and faster code.
- Added 2 new icon align options: inline left and inline right. This will align the icon inline with the text instead of at the left or right side of the button.
Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_themablebutton.html
- Added the ability to set the 'icon size'. Previously the icon size was the same as the text size. Now the icon can have a different size.
- Button icons can now also be published as SVG (Tools -> Options -> HTML -> Publish navigation icons as SVG).
- 'button set' type no longer uses jQuery's control group, it uses flexbox instead, resulting in cleaner and faster code.