Almost 18... (teaser)

[Pablo]

PayPal Shopping Cart

- Added 'Use shipping based on weight' option. This option can be used instead of PayPal's default shipping options. The shipping fee is calculated locally and displayed in the cart instantly (instead of at checkout only).





Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_paypalshoppingcart.html


- Added the ability to set the minimum order quantity. A (user definable) message can be displayed if the quantity is too low.






- Added 'transition' properties. This specifies the timing and duration for the hover transition.




- Added 'alignment' property to the PayPal Shopping Cart.
This can be used to display the shopping cart at the left or right side of the browser window, instead of centered.
The ‘maximum width’ property specifies the width of the panel.

[Pablo]

PayPal Buttons

- Added 'Weight' property to shipping section. This option is meant to be used in combination with the 'PayPal Shopping Cart' widget to calculate the shipping costs, it overrides the default PayPal shipping settings (based shipping, extra shipping and handling). The reason why this was added is because if you use the standard PayPal shipping then it's not possible to display the complete costs until the customer checks out. The number represents the weight of the product. Do not include weight units like lb, oz or kg.



- Added 'Move Up' and 'Move Down' buttons to "Extra Variables' properties to re-arrange the values.

[Pablo]

Here is a preview of a template that uses the new PayPal shipping options.




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_liquor.html

[Pablo]

Shape Dividers

- Added support for image background, texture, gradients and patterns. The background style can be set via 'more styles'.










- Added 7 new divider types: water-two-layers, water-three-layers, water-four-layers, water-five-waves, water-six-waves, water-seven-waves, water-eight-waves.




Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_shape_dividers.html

[Pablo]

Site Summary

- Added Site Summary option. The summary contains statistics about the web site project for informational purposes.




Included information:
Created, the date the project was created.
Last Modified, the date the project was last modified
Total Editing Time, the total editing time in minutes (starting in version 18).
Project Size, the size of the project file (wbs)
Pages, the number of pages in the project
Images, the number of images in the project and total file size.
Video, the number of video files in the project and total file size.
Audio, the number of audio files in the project and total file size.
Downloads, the number of downloads (linked files) in the project and total file size.
Extensions, the number of extensions used in the project.
Fonts, the number of different fonts in the project.

[Pablo]

Asset Manager

- Added filter type 'Linked files', displays a list of the downloads in the project.




- Added filter type 'Extensions', displays a list of all the extensions used in the project.




- Added the ability to copy the file list to the clipboard via the 'Copy' button.

[Pablo]

Icons Libraries

- Added 'User Collection' functionality. This makes it possible to add icons to a custom collection so you have all your favorites icons in one place.
You can add any icon from any icon library. The icons from the user collection will be saved in SVG format, so you can even remove the icon library from your computer if you no longer need the other icons!

[Pablo]

Icon object

- Added 'transition' properties. This specifies the timing and duration for the hover transition.

[Pablo]

Lottie Animations

- Added the ability to add a preview image. This will be displayed in the workspace as a place holder, instead of the standard Lottie logo.

Workspace without preview image (like in WWB17):




Workspace with preview image:

[Pablo]

Here is a preview of one of the new templates for WWB18: "Branding Concepts". This one is using Lottie Animations.




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_brandingconcepts.html

[Pablo]

Editbox / Text Area

- Added support for 'floating labels'. With floating labels, you can insert the label inside the input field, and make it float/animate when you click on the input field.






Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_floatinglabel.html

[Pablo]

Select

- Combobox has been renamed to 'select' which is the official name for this HTML element.

- Added support for 'floating labels'. For the select element the <label> is always shown.





Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_floatinglabel.html


- Added 'Access key' property. Specifies a shortcut key to activate/focus the select element.

[Pablo]

Radio Button

- Added 'Bootstrap' inspired radio button style, as alternative for the jQuery UI style.





Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_radiobutton.html

[Pablo]

Checkbox

- Added 'Bootstrap' inspired checkbox style, as alternative for the jQuery UI style.





Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_checkbox.html

[Pablo]

Flip Switch

- The flipswitch can now be used to toggle between light and dark color scheme by using 'darktheme_switch' for the ID property. Not only does this change the color scheme but it also stores the current state and reloads it when you revisit the page (or another page that includes the flipswitch) later!

[Pablo]

CAPTCHA

- Added 'Full Width' property. Specifies whether the element is full width when used in a Layout Grid.

[Pablo]

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

[Pablo]

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

[Pablo]

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

[Pablo]

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

[Pablo]

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

[Pablo]

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

[Pablo]

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.

[Pablo]

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

[Pablo]

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

[Pablo]

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

[Pablo]

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.

[Pablo]

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

[Pablo]

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.

[Pablo]

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

[Pablo]

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

[Pablo]

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.

[Pablo]

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.

[Pablo]

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

[Pablo]

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/

[Pablo]

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

[Pablo]

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

[Pablo]

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

[Pablo]

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

[Pablo]

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.

[Pablo]

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

[Pablo]

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/

[Pablo]

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

[Pablo]

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

[Pablo]

Flex Container

- Implemented responsive height. The height property can now have a different value in breakpoints.




- Added support for rounded corners (border-radius).

[Pablo]

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.

[Pablo]

This template uses a Flex Grid to create an irregular image grid.




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_pretty.html

[Pablo]

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.

[Pablo]

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.

[Pablo]

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