Almost 18... (teaser)

Post by **Pablo** » Tue Nov 01, 2022 7:33 am

CAPTCHA

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

Post by **Pablo** » Tue Nov 01, 2022 6:11 pm

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

Post by **Pablo** » Tue Nov 01, 2022 6:12 pm

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

Post by **Pablo** » Tue Nov 01, 2022 6:16 pm

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

Post by **Pablo** » Tue Nov 01, 2022 6:19 pm

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

Post by **Pablo** » Tue Nov 01, 2022 6:40 pm

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

Post by **Pablo** » Wed Nov 02, 2022 7:29 am

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

Post by **Pablo** » Wed Nov 02, 2022 7:31 am

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.

Post by **Pablo** » Wed Nov 02, 2022 7:34 am

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

Post by **Pablo** » Wed Nov 02, 2022 7:52 am

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

Post by **Pablo** » Wed Nov 02, 2022 5:07 pm

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

Post by **Pablo** » Wed Nov 02, 2022 5:08 pm

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.

Post by **Pablo** » Wed Nov 02, 2022 5:09 pm

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

Post by **Pablo** » Wed Nov 02, 2022 5:10 pm

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.

Post by **Pablo** » Wed Nov 02, 2022 5:10 pm

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

Post by **Pablo** » Wed Nov 02, 2022 6:37 pm

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

Post by **Pablo** » Wed Nov 02, 2022 6:38 pm

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.

Post by **Pablo** » Wed Nov 02, 2022 6:39 pm

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.

Post by **Pablo** » Wed Nov 02, 2022 6:45 pm

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

Post by **Pablo** » Thu Nov 03, 2022 7:47 am

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/

Post by **Pablo** » Thu Nov 03, 2022 7:52 am

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

Post by **Pablo** » Thu Nov 03, 2022 7:55 am

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

Post by **Pablo** » Thu Nov 03, 2022 8:00 am

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

Post by **Pablo** » Thu Nov 03, 2022 8:07 am

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

Post by **Pablo** » Thu Nov 03, 2022 8:09 am

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.

Post by **Pablo** » Thu Nov 03, 2022 8:10 am

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

Post by **Pablo** » Thu Nov 03, 2022 8:10 am

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/

Post by **Pablo** » Thu Nov 03, 2022 11:27 am

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

Post by **Pablo** » Thu Nov 03, 2022 6:38 pm

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

Post by **Pablo** » Thu Nov 03, 2022 6:39 pm

Flex Container

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

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

Post by **Pablo** » Thu Nov 03, 2022 6:42 pm

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.

Post by **Pablo** » Thu Nov 03, 2022 6:48 pm

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

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

Post by **Pablo** » Thu Nov 03, 2022 6:50 pm

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.

Post by **Pablo** » Thu Nov 03, 2022 6:51 pm

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.

Post by **Pablo** » Thu Nov 03, 2022 6:52 pm

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

Post by **Pablo** » Thu Nov 03, 2022 6:54 pm

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

Post by **Pablo** » Thu Nov 03, 2022 6:55 pm

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

Post by **Pablo** » Fri Nov 04, 2022 7:48 am

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

Post by **Pablo** » Fri Nov 04, 2022 7:51 am

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.

Post by **Pablo** » Fri Nov 04, 2022 7:53 am

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.

Post by **Pablo** » Fri Nov 04, 2022 7:54 am

Global Replace

- Added the ability to replace the 'class' property (style) for all pages/objects.

Post by **Pablo** » Fri Nov 04, 2022 10:25 am

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

Post by **Pablo** » Fri Nov 04, 2022 6:15 pm

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

Post by **Pablo** » Fri Nov 04, 2022 6:18 pm

Snap Scroll

- Added support for horizontal scrolling!

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_medieval_town.html

Post by **Pablo** » Fri Nov 04, 2022 6:19 pm

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

Post by **Pablo** » Fri Nov 04, 2022 6:22 pm

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

Post by **Pablo** » Fri Nov 04, 2022 6:24 pm

Responsive Menu

- Added 'Underline' property.

- Added support for predefined styles.

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html

Post by **Pablo** » Fri Nov 04, 2022 6:25 pm

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

Post by **Pablo** » Fri Nov 04, 2022 6:26 pm

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

Post by **Pablo** » Fri Nov 04, 2022 6:28 pm

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.