What is new in WYSIWYG Web Builder 15?

WYSIWYG Web Builder 15 has more than 200 new features/improvements!

Here’s an overview of some of the new features. Note: the screenshots are based on the BETA version. The final release may look slightly different. Besides screenshots there are also links to online examples and tutorials to demonstrate the new functionality.

 

Direct2D rendering

The graphics engine for workspace rendering has been completely redesigned using hardware acceleration (direct 2d), for better performance and higher quality graphics during design time. This means rendering should be much faster and the graphics will be sharper even when zooming in/out.              

 

New Icons

The ribbon, toolbars, menus and toolbox have redesigned icons. The style is thin, lined & colored, inspired by the new icons introduced by Microsoft® Office 365® and 2019 suites. The icons have been optimized for High DPI (100%, 150% and 200%).

 

 

 



 

Secure FTP support

Secure FTP functionality is now built into the application.

 

In addition to standard FTP and local disk publishing, support for the following protocols has been added:

• FTP with TLS/SSL (Port 990 - Implicit)

• FTP with TLS/SSL (AUTH TLS - Explicit)

• SFTP using SSH2 (Secure Shell)

 

 

Standard FTP (winsock) has also been refactored. With better support for different FTP server variants and many other improvements.

  


Shape Dividers

- New feature: Last year, we released the experimental ‘divider’ template, which turned out to be the most downloaded template to date. So, this year we decided to make it a standard feature! The new shape divider option is available for layers, layout grids and flex box containers. Shape dividers are SVG based shapes that can be used to separate the sections of a page.

There are more than 30 shapes you can choose from, but you can also add custom shape SVG files.  Shapes dividers can be added at the top or bottom (or both) of a layer.

The color specifies the color of the shape. The width specifies the width in percentages, this can be useful if you only want to display a smaller part of the shape, for example 200%, clips the left and right part of the shape. The height is in pixels.  Shapes can be flipped horizontally/vertically. This makes it possible to use shapes that were designed to be used at the top, also at the bottom (flip vertically). The arrangement property controls whether the shape will be displayed underneath the content or on top of content.

 

 


A few examples:

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/dividers-demo.html

 

Tutorial:

https://www.wysiwygwebbuilder.com/shape_dividers.html

 

 


Unsplash Integration

- New feature: Browse thousands of free-to-use, high quality images from Unsplash directly within WYSIWYG Web Builder.

 

 

Unsplash images can be inserted via the Insert Menu. The Unsplash selection dialog supports search and the ability to set the desired size.

There is also a dedicated Unsplash browse button next to the standard image browse button.

 

 

 

Tutorial:

https://www.wysiwygwebbuilder.com/unsplash.html

  


Toasts

- New feature: Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They can be displayed at page load or with delay. Multiple Toasts will automatically stack vertically.

 

 

The text can be edited just like standard text. So, the same formatting and edit tools are available, including styles, line spacing, letter spacing, bullets, find/replace, lorem ipsum, responsive fonts and link support.

 

Show Delay specifies the delay (in milliseconds) before the Toast is shown. Set to '-1' to initially hide the Toast, so you can control it via events (show/hide). Hide Delay, delays hiding the toast in milliseconds. Set to '0' to disable auto hide.

 

Tutorial: https://www.wysiwygwebbuilder.com/toasts.html

 

 


Theme Colors

- New feature: Added 'Theme Colors'. By default, WYSIWYG Web Builder's color picker displays a standard color palette with 140 standard web colors. With the 'Theme color' option (inspired by the MS Office color picker) you can configure a custom color palette of 12 colors. The light and dark variants of these colors will be generated automatically.

Tutorial: https://www.wysiwygwebbuilder.com/color_themes.html

 

          

 

Besides the ability to customize the colors, it is also possible to synchronize the colors when they are modified or when you select a different color theme.

 

 

 

 


Preloader

- New feature: Added the ability to add an animated preloader image to the page (in Page Properties). A preloader (also known as loading screen) is what you see on some sites before the main content of the web page is loaded.

 

 

Preloaders are simple (GIF) animations that are used to keep visitors entertained while server operations finish processing.

WYSIWYG Web Builder can display a (semitransparent) overlay with animated gif when the website loading is in progress. It will disappear right after the page loads.

 

A collection of standard preloader images is included, but you can also add your own animations by adding a custom gif image to the 'preloader' folder.

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/preloader.html

 

Tutorial:

https://www.wysiwygwebbuilder.com/preloader.html

 

 


Wrap Text

- New feature: Added support for floating layout, so the 'Wrap Text' can also be used inside a layout grid. This makes it possible to wrap text around images or other objects. Child elements can either float left or right.

 

Tutorial: https://www.wysiwygwebbuilder.com/wrap_text.html

 

 

- New feature: Added experimental support for CSS's shape-outside. This will wrap the text around the outline of a (transparent) image or shape, making it possible to wrap text around complex objects rather than simple rectangular boxes. Note that this will only work in modern browsers (Safari, Chrome, FireFox, not in IE or Edge!)

 

 

 


SVG Path Animation

- New feature: Added 'SVG path animation' option. This adds the ability to animate the border (stroke) of SVG shapes, textart, clipart and makes it look like the shape/text is drawn on the web page in real-time;)

 

For complex shapes (with sub paths), it is possible to delay the rendering of sub paths for even cooler effects.

 

 

 

Tutorial: https://www.wysiwygwebbuilder.com/svg_animations.html

 

 

 


Card Container

- New feature: Added 'Card Container' object. This is a dedicated container for Cards to simplify laying out a series of cards.

The Card Container has the following layout options:


 

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/card-container.html

  

 


Cards

 - New feature: Added support for animations and transitions to card items. Each card item can have its own animations and transitions! Transitions can also be synchronized. This can be useful if you want to trigger all transitions at the same time when you move the mouse over the card instead of over each card item individually.

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/card-demo.html

 


- New feature: Added 'Copy' button to quickly clone a card item.

 

 

 

- New feature: Added the ability to set the alignment for each text item individually, including justify.

 

 

 

 

 - New feature: Added the ability to set the line height for text items.

 

 

 

 

- New feature: Added the ability to add padding between border and image.

 

 


- New feature: Added 'HTML' card item type. This adds the ability to add custom HTML items to the card. For example, Google Maps, Facebook scripts etc.

 

    

 

- Improved: Card properties dialog is now resizable. 

 


Flex Grid

- Improved: The Flex Grid editor now displays a preview of the alignment for the selected area to get a better idea of how the settings will affect the layout.

 

 

- New feature: Added the ability to save custom flexgrid templates. It is also possible to edit or remove pre-defined templates.

 

 

- New feature: Added 'Easy Mode'. Many users have asked an easier way to control the flexgrid without having to deal with flexbox.

In "Easy Mode”, the flexgrid behaves just like the Layout grid.

 

- Improved: It is now possible to rename grid cells while keeping the content.
Note that this will only work if you do not make other changes to the structure of the grid. In other words, if you would like to change the cell names then do not change the column/row structure at the same time, otherwise there will be no way for the software to know the relation between the old and new names.

 


Layout Grid

- New feature: Added 'Footer (fixed)' and 'Footer (floating)' mode. This makes it possible to use a layout grid as (fixed) footer. This also works with master pages.

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/layoutgrid-footer.html

 

- New feature: Added 'Sticky' mode. A sticky Layout Grid is treated as relatively positioned element until it reaches the top, at which point it is sticks to the top. This is standard HTML feature that only works in modern browsers (not in IE/Edge).

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/sticky_demo.html

 

 

- New feature: Added 'pattern overlay'. Add (semitransparent) pattern overlays to the background image/video. More than 50 pattern styles to choose from.

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/pattern-demo.html

  

 


Flex Container

- New feature: Added 'Footer (fixed)' and 'Footer (floating)' mode. This makes it possible to use a Flex Container as (fixed) footer. This also works with master pages.

 

- New feature: Added 'Sticky' mode. A sticky Flex Container is treated as relatively positioned element until it reaches the top, at which point it is sticks to the top. This is a relative new HTML feature and requires a modern browser:

https://caniuse.com/#feat=css-sticky

 

- New feature: Added 'pattern overlay'. Add semitransparent pattern overlays to the background image/video.

 

 


Text

- Improved: The text editor is now fully integrated into the workspace. WWB no longer loads an overlay editor, but handles all editing internally (via ITextHost): this means that it’s faster, it uses the same rendering in edit/display mode and we have more control over the output.

 

- Improved: HTML code generator for text has been completely redesigned with direct RTF to HTML conversion for more accurate rendering results.

 

- Improved: Line spacing now supports 2 decimals after the comma: 1.05, 1.14 etc.

 

 

- New feature: Added 'Redo' support to text editor.

 

- New feature: Added 'List' support! Bullets, Numbering, Alphabetic, Roman styles.

 

 

- New feature: Added Paragraph properties for indent, space before/after.

 

 

- New feature: Added Ribbon Mini Toolbar ("Floaty"). Microsoft Office-style mini toolbar is a semi-transparent toolbar appearing right near the cursor, providing quick access to text formatting tools. It can also be turned off in the settings.

 

 

- New feature: Added 'Format Painter' functionality to text editor to quickly apply the same formatting to other text.

 

 


- New feature: Added colored Emoji support (requires Windows 10).

 

 

 

- New feature: Added ‘Paste (keep text only)’ command. This will paste the text from the clipboard without formatting. Also available via Ctrl+Shift+V

 

 


Marquee

- Improved: The unofficial <marquee> tag has been replaced with CSS3 animations for better compatibility with (modern) browsers. W3C compliant!

 

- New feature(s): The Marquee object now supports the same editing and styling options as standard text: styles, line spacing, letter spacing, bullets, find/replace, lorem ipsum, responsive fonts etc.

 

 

 

- New feature: Added 'Star Wars' behavior. Implements Stars Wars-like 3D scrolling.

 

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/marquee.html

 

 


Shape/ClipArt/TextArt

 

- New feature: All supported Icon Libraries can now also be used in ClipArt!

 

- New feature: Added support for "Segoe UI Emoji" symbols to ClipArt (Windows 10).

 

 

- New feature: Added the ability to output shape text as HTML: 'Publish as HTML'.

 

 

 

 

- Improved: Added support for gradient/pattern and texture border styles in exported SVG.

 

 


- Improved: ClipArt symbol selection dialog.

 

 

- Improved:  Webdings, Wingdings, Wingdings2 and Wingdings3 display more symbols in ClipArt selection dialog (> 200 instead 100).

 

- Improved: Now uses CSS transforms for rotation.

 

- Improved: Exported SVG now uses cublic beziers for much better graphics.

 


Styles

- New feature: Added 'Copy Style' and Paste Style' command to object's context menu. This make it possible to quickly copy style properties to multiple objects (in addition to the format painter).

 

 

 


Style Manager

- New feature: Added 'Filter' properties. The filter property defines visual effects, like blur, brightness, contrast, grayscale, hue-rotate, invert, saturate and sepia. The effect will be applied to the object and all its children.

 

 

 

 


- New feature: Added 'Backdrop Filter' properties. The backdrop-filter property lets you apply graphical effects to the area behind an element.  Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

 

 

 

This requires a modern browser!

https://caniuse.com/#feat=css-backdrop-filter

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/filters-demo.html

 


- New feature: Added support for border-images. Select Border Style->image and then Border Settings to configured advanced borders.

 

 


Page

- New feature: Added 'Design Layout' view mode. Renders the page in a frame, centered on the screen during in the workspace.

 

 

- New feature: Added support for 'drag & drop' re-arranging floating elements. You can now drag/drop a floating layer (layout grid/flexbox) before or after another floating object.

 

 

- New feature: Added the ability to set the 'highlight color' in Guide Settings. This specifies the color of insert markers in layout grids and other containers.

 


- New feature: Added 'Facebook App ID' property (fb:app_id) to Open Graph Meta Tags. Facebook App ID tags lets Facebook know the identify of your site, which provides additional benefits like social analytics, comments moderation and authentication capabilities to your site. More info: https://developers.facebook.com/docs/sharing/webmasters#markup

 

 

 

- Improved: 'Disable scroll transitions on small screens' in Page Properties now also disables the parallax effect.

 

 


SEO
- Improved: Search Engine Optimization settings now have a dedicated section in the page properties.

 

- New feature: Added 'Canonical URL' property. If you have different pages with similar content (for example, a page with both a mobile and a desktop version), Google sees these as duplicate versions of the same page. Google will choose one URL as the canonical version and crawl that, and all other URLs will be considered duplicate URLs and crawled less often.

More information: https://support.google.com/webmasters/answer/139066?hl=en

 

- New feature: Added 'hreflang' configuration. The hreflang attribute tells Google which language you are using on a specific page, so the search engine can serve that result to users searching in that language. The links will also be added to the site map.

More information: https://support.google.com/webmasters/answer/189077?hl=en

 

 


Web Icons
- Improved: Web Icons settings now have a dedicated section in the page properties.

 

- New feature: Added the ability to add 32x32 and 64x64 favorite icons to support modern browsers. These icons are in standard PNG format.

 

- New feature: Added the ability to configure multiple Apple Touch Icons to target different devices.

 

Similar to the Favicon, the Apple Touch Icon is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When the user bookmarks the web page or adds the page to their home screen, this icon is used. Apple Touch Icons are also supported by most Android devices. Unfortunately, different devices require different image sizes. So, that is why we have now added the ability to configure multiple sizes.

 

 

 


Border Images

- New feature: Added 'Border Image' support. With border images you can create complicated, visually rich borders around elements like text, images, layers, layout grid etc. Besides built-in pre-defined border images you can also use your own images. The border images have several repeat options like repeat, space, round or stretch.

 

Tutorial: https://www.wysiwygwebbuilder.com/borders.html

 

 

 

 


Background Properties

- New feature: Added new background repeat option: space. The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.

 

 

- New feature: Added new background repeat option: round. The background-image is repeated and squished or stretched to fill the space (no gaps).

 

 

 


General

- New feature: Added "Open the most recent used page of the project" option. When loading the project, this will open the page that was active when you last saved the project.

 

 

- New feature: Added option to enable/disable ctrl+click+drag (duplicate objects) functionality.

 

 

 
- New feature: Added “Publish navigation icons as SVG image”. This will output the icons as embedded SVG (scalable vector image) instead as font and reduces the overall size of the website if you only use a few icons.

 

 

This option applies to icons used in: Breadcrumbs, Cards, Mega Menu, Overlay Menu, Panel Menu, Responsive Menu, Tabs, Themeable Menu and Toasts.

 

- New feature: Added Visual Studio 2019 Light Blue theme.

 

 
- New feature: Added confirmation window for 'Easy Mode'.

 

 

- New feature: The first time you start WWB, it will ask you if you want to import the settings from a previous version.

 

 

- New feature: Added 'AutoSave' option. This automatically saves the active project at the specified interval.

 

 


Rotate

- Improved: Rotatable objects now have a rotation handle to provide quicker way to rotate the object.

 

 

 


Responsive Web Design

- New feature: Added 'Automatically scale new objects in other breakpoints' option.

(Tools -> Options -> General)

Normally when you insert a new object, it will be inserted at the same position and with the same size as the default view.  The new option 'Automatically scale new objects in other breakpoints' is enabled, new objects will automatically scale and reposition in other breakpoints relative to the breakpoint size. It will also scale the font size of some objects when possible. This may speed of the implementation of (fixed) responsive layouts.

 

 

- Improved: The option "Include min-width in CSS3 media queries " has been replaced with “Activate breakpoints when browser window is smaller than the device width” and “Activate breakpoints when browser window is larger than the device width” to make the functionality clearer. Also, ‘max-width’ has been renamed to ‘device width’.

 

 


Object Manager

- Improved: Added the ability to re-arrange objects using drag & drop before and after other objects. An ‘insert line’ indicates the new position.

 

 

- Improved: Added the ability to re-arrange objects using drag & drop on layers (including layout grid/flexbox).

 

- Improved: Added the ability to move objects between floating layers (including layout grid/flexbox). This is not possible for fixed layout because then you have no visible feedback where the object will move to!

 

- New feature: Added 'Assets Folder' property (context menu). This adds the ability to specify a different output folder per object! For example, set the images folder for one object (gallery) to a different folder. This overrides the global publish settings.

 

 

- Changed: 'Allocated filenames' has been renamed to 'Internal filenames'.

 


Publish

- New feature: Added the possibility to use wildcards in Publish File types

(Tools->Options->Publish). This makes it possible to publish specific files (based on the filename, in addition to file extensions) to a different folder.

 

 

- Improved: Publish File types are now saved in the project file so they can be different for each project.

 

 

Preview

- Improved: Added 'Preview current page' option in addition to 'Preview entire website'.

 

 

- Improved: Added 'PHP Preview Warning'. When you try to preview a website with PHP, the application will now display a warning that the pages may not display correctly, because PHP can only be viewed online through a web server.

 

 


Verify Links

- New feature: Added 'Filter' option. This make it possible to filter links to make it easier to find URLs when you have a long list of links. It is also possible to filter the links based on the page name.

 

 


Events

- New feature: Added 'self' target. When you select this as the target then WWB will automatically use the ID of the current object. This may be useful when you copy the object, so you do not have to manually edit the 'self' events.

 

 

- New feature: Added 'enable' and ‘disable’ actions. This can be used to disable/enable a form elements (button, checkbox, radio button, editbox, combobox, textarea).

 

 

 


Mega Menu

- New feature: Now supports font icons, this replaces the (fixed) jQuery UI icon set. Not only will this give you a wider selection of icons, but with will also improve the quality of the images.

 

 

- New feature: Added the ability to set a different icon for each link (instead of one global bullet icon).

  

 

- New feature: Added property to change the category text color.

 

- Improved: body scrollbar will be hidden, when the mobile drop down menu is active.

 

 

Overlay Menu

- Improved: The colors of the (trigger) button are now responsive, so they can be different in breakpoints.

 


Panel Menu

- New feature: Added Link transitions. This adds the ability to animate the background or border of the menu items. Includes 18 transition effects: fade, slide, scale, rotate, underline, overline etc.

 

 

Online demo:

https://wysiwygwebbuilder.com/support/wb15tryouts/panelmenu-transitions.html

 

- Improved: Panel background color can now be semi-transparent (alpha) when in overlay mode.

 

- Improved: Added support for semi-transparent (alpha) borders.

  


CSS Menu

- New feature: Added Link transitions (main and sub items). This adds the ability to animate the background or border of the menu items. Includes 18 transition effects: fade, slide, scale, rotate, underline, overline etc.

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/cssmenu-transitions.html

 

- New feature: Added the ability to set the alpha value of the shadow color.

 

 

 


Themeable Menu

- New feature: Now supports font icons, this replaces the (fixed) jQuery UI icon set.

 

 

- New feature: Added the ability to set the border color (and alpha) of the mobile trigger button.

  

 

 

- New feature: Added support for drop down animations in Bootstrap menu: fade, slide and scale.

 

 

 


Themeable Button

- New feature: Now supports font icons, this replaces the (fixed) jQuery UI icon set.

 

 


Pagination

- Improved: Using ellipse ("...") as text will disable the link.

 

 

- New feature: Added the possibility to display ellipses when synchronized with the Site Manager. Set 'Start at' to -1. Visible items specify how many adjacent pages should be shown on each side of the current page.

 

 


CSS Animations/transitions

- New feature: Added 24 new easing functions, inspired by jQuery UI:
ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-quart, ease-out-quart, ease-in-out-quart, ease-in-quint, ease-out-quint, ease-in-out-quint, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-expo, ease-out-expo, ease-in-out-expo, ease-in-circ, ease-out-circ, ease-in-out-circ, ease-in-back, ease-out-back, ease-in-out-back

 

- New feature: Added 8 new animations: flip-in, flip-out, fold, unfold, turbine-in, turbine-out, swoop-in, swoop-out

 

 

Online demo:

http://wysiwygwebbuilder.com/support/wb15tryouts/wb15-animations.html

 


- New feature: Added alpha support to transition colors. This also works with scroll transitions!

 

 

 

Animation Manager

- New feature: Added 'Merge' option. This option will merge the default animations with your own collection.

Why? We regularly add new animations to the default collection. However, if you have customized animations then your custom collection will not be overwritten, so this means that new animations are not added to your list automatically. The 'Merge' option will make it easier to add these new animations to your custom collection.

if you do not have modified animations then the merge button will be disabled.

 

 


Inline Frame

- New feature: Added "Enable Safari Mobile fix" option. This implements a workaround for inline frames ignoring the specified height on the iPhone/iPad.

 

 


Accordion

- New feature: Added horizontal accordion mode.

 

 

 

- New feature: Added 'Rotate' mode. This enables automatic cycle through panels with configurable duration.

 

 

- New feature: Added the ability to set individual colors for accordion header background. Demo:

 

 

Online demo: http://www.wysiwygwebbuilder.com/support/wb15tryouts/accordion-demo.html


Tabs

- New feature: Added ‘Active tab’ option. This specifies the tab that will be initially displayed. Can be set to 'false' to display none at start (in combination with ‘collapsible’).

 

 


Login

- New feature: Added "Redirect to previous page". When this option is enabled, the user will be redirected to the previous page after successful login.

 

 

 

Sign Up / Password Recovery

- New feature: Added PHP Mailer support with SMTP authentication.

 

 


Logout button

- New feature: Added text alignment property.

 

- New feature: Added padding property.

 


Image

- New feature: Added 'html overlay' to watermark options. This adds a text overlay to the image (instead of merging the text with the image). This provides a quick way to add text on top of an image in floating layouts. Also supports hover only, which displays the text on mouse over.

 

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/image-watermark.html


- Improved:
The 'Frames' option has been replaced by the standard CSS 'border-image'. Adding a frame (now border image) will no longer affect the image size, quality or make it non-responsive.

 


Photo Gallery

- Improved: 'Frames' now use the standard CSS 'border-image'. Adding a frame/border image will no longer affect the original image size or quality and adds other useful features like border image size, repeat and scaling.

 

 

- Improved: Added the ability to set the target window for Instagram links.

 

 


Photo Collage

- New feature: Added 6 new animations: move up, fall, fly, flip, helix, popup

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/photocollage.html

 

 

- New feature: Added "Customize' option. This add the ability to create custom layouts for the Photo Collage.

 

 

- New feature: Added "Lazy Load“ option. This implements ‘onscrollreveal’ functionality, so the animations will start when the gallery scrolls into the viewport.

 

 

  


Rollover Text

- Improved: All animations now support easing (including the CSS based animations).

 

- Improved: New lines in description are converted to line breaks <br>.

 

- New feature: Added 'Vertical alignment' for use in combination with position -> full.

 

 

- New feature: Added the ability to set background color, border and padding of the link, so you can make it look like a button.

 

 

- New feature: Added 14 new animations: lines (horizontal & vertical), flip (horizontal & vertical), flip, 3d flip (horizontal & vertical), 3d carousel (horizontal & vertical), box (move, zoom, scale).

 

 

 

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/rollovertext.html

 


Lazy Load

(Note: lazy load is available for images, photo gallery, rollover image, rollover text)

- New feature: $LAZYLOAD_EFFECT$ site variable. Adds the ability to set an animation for lazy load: blind, bounce, drop, fade, fold, pulsate, puff, scale, shake, slide

 

- New feature: $LAZYLOAD_DURATION$" site variable. Specifies the duration of the animation.

 

  


Slideshow

- New feature: Added 'Image Accordion' mode. Implements a horizontal image accordion, using CSS only. With animation and caption support.

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/image-accordion.html

 

- New feature: The 'Image Accordion', ‘Image Carousel’ and ‘Conveyer Belt’ now have their own icons in the toolbox for a quicker way to add these features to web pages.

 

  


Carousel

- New feature: Added 'Pause cycling on mouse enter' option. When enabled, this pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.

 

 

- New feature: Added new built-in navigation large arrows. To use the new arrows, enter '{' for previous and '}' for next in the filename fields.

 

 

 

- New feature: Added 'Fade' transition (in addition to slide) to Bootstrap Carousel. Note: all other transitions are not supported by Bootstrap!

 

- New feature: Added touch support to Bootstrap Carousel. 

 


Forms

- New feature: Added "Create a responsive form using layout grids" option to the Form Wizard. The Form Wizard can now create flexible/responsive forms. The option will automatically be selected when the page already contains layout grids.

 

 

- New feature: Added 'Spacing' option to the Form Wizard. This sets the spacing between the controls of the created form.

 

 
- New feature: Added the ability to set a Dialog (jQuery UI or Bootstrap) as form target. This makes it possible to display the success or error page in a popup. Add a dialog to the page and select the ID of the Dialog in the form's target property. All the necessary code will be generated automatically!

 

 

Online Demo:
https://wysiwygwebbuilder.com/support/wb15tryouts/form-popup.php

 

Tutorial:

https://www.wysiwygwebbuilder.com/form_popup.html

 

 

- New feature: Added new site variables to customize form error messages: $FORMERROR_EMAIL$, $FORMERROR_URL$, $FORMERROR_FILESIZE$

 

 

- New feature: Added 'Do not allow URLs in form data' option. This option may help to prevent spam by blocking messages that include links.

 

 

- New feature: Added the ability to configure the ‘From name’ for the email message.

It is also possible to use a PHP variable. For example, S_POST[‘name’] where ‘name’ is the name of the input field.

 

 

- New feature: Added the ability to configure the ‘Reply To’ for the email message.

'Reply to' can be used to specify an alternative reply address. 'Reply To' can be a fixed email address 'yourname@email.com' or a PHP variable: $_POST['email'].

 

 


Editbox, Textarea, Checkbox, Radio Button, File Upload

- New feature: Added Bootstrap-like input validation.

Note: for checkbox, Radio Button, File Upload 'use default browser style' should be unchecked!

 

 

Combobox

- New feature: Added 'HTML5' validation. For this to work, the value of the first item should be empty.

 

 

- New feature: Added Bootstrap-like validation.

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/bootstrap-validation.html

 


Dialog

- New feature: Added 'Open' and 'Close' events. The 'Open' event is fired when the dialog has been made visible to the user. The 'Close' event is fired when the modal has finished being hidden from the user.

 

A practical example would be to disable the submit button after a form has triggered the dialog on submitted the form.

 

 

- New feature: Bootstrap dialog - Added support for horizontal and vertical alignment.

 

 


Layer

- New feature: Added 'lightbox' mode. This makes it possible to display the content of the layer in a lightbox. The lightbox can be opened/closed via events (show/hide). Supported lightboxes: fancybox, magnificpopup, colorbox, lightcase, prettyphoto, swipebox, tosrus, venobox.

 

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/layer-lightbox.html

 

 

- New feature: Added 'pattern overlay'. Add semitransparent pattern overlays to the background image/video.

 


FlipSwitch

- New feature: Added "Flip Switch" object. A "Flip Switch" (also known as Toggle switch) can be used as alternative for a checkbox. Inspired by the iPhone checkbox. It is possible to use different colors (text/background/border) for checked/unchecked, add animations, conditions and events.

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/flipswitch.html

 

 

Button

- New feature: Added the ability to use the (form) button as a link. Although the button is mainly for use with Forms, many users have requested this feature, so now it's (finally) possible.

 

 


HTML

- New feature: Added 'full width' option. When the HTML object is used in a layout grid, the div container can now be edge-to-edge.

 

 

 

Site Search

- New feature: Added Autocomplete padding to set the spacing around the items in drop down list.

 

 

- New feature: Added 'open page' mode to Autocomplete. Clicking an item in the Autocomplete drop down list will immediately open the page. This makes it possible to implement a search field without a 'results' section.

 

 

Online demo:

https://www.wysiwygwebbuilder.com/support/wb15tryouts/search-autocomplete.html

  


Ready-to-use-JavaScripts

 - New feature: Added 'Count Up' script. A simple counter that starts counting when the object scrolls into view.

 

 

Online demo: https://wysiwygwebbuilder.com/support/wb15tryouts/scripts.html

 

- New feature: Added 'Circular Text' script. Animated text wrapped around a circle.

 

Online demo: https://wysiwygwebbuilder.com/support/wb15tryouts/scripts.html

 


- New feature: Added 'Bubble Text' script. Bubbling Text Effect.

 

 

Online demo: https://wysiwygwebbuilder.com/support/wb15tryouts/scripts.html

 

 

- Improved: All scripts now support the same font sizes as in the rest of the application.

 

- Improved: Added 'size' property to Facebook Like Button script.

 

- New feature: Added 'Facebook Save Button' script. The Save button lets people save items or services to a private list on Facebook or share it with friends.

 

 

- New feature: Added 'Facebook Share Button' script. The Share button lets people add a personalized message to links before sharing on their timeline, in groups, or to their friends via a Facebook Message.

 

 


Blog / Article

 

- New feature: Added 'Timeline' layout. This implements a simple vertical timeline.

 

 

- New feature: Add 'Image margin' property. This can be used to set the margin around an image.

 

 

- New feature: Added support for native Windows spell checker to text editor. With 'spell as you type' and context menu suggestions. (requires Windows 8 or 10!)

 

- Improved: The text editor is now resizable.

 

- Improved: Responsive font (size/family) is synchronized in text editor and style settings, so it's no longer necessary to set the font in the style settings.

 

- Improved: When the button text is empty, the button will be hidden.

 

 


Polygon/Curve

- New feature: Added 'SVG path animation' option.

 

  

Heading

- New feature: - Added 'Full width' option to Heading object. When set to false, the heading can have a fixed width (instead of 100%) in Layout Grids.

 This may be useful to create inline multi-line text blocks in a Layout Grid, like this:

 

 

  

Extensions

- Improved: WWB15 now supports up to 500 extensions. Note that the available system memory may still have impact on the actual maximum number of extensions that can be loaded by the application.

 

 

Setup

- Improved: The 64-bit setup will now automatically download and install VC++ Redistributables files if they are not installed yet.

 


Icon Libraries

- Improved: The quality of exported SVG is now significantly better.

 

- New feature: Added support for 7 new icon libraries:

 

Microsoft Fabric Icons
https://developer.microsoft.com/en-us/fabric#/styles/icons#icons

 

Map Icons

http://map-icons.com/

 

Weather Icons

https://erikflowers.github.io/weather-icons/

 

Devicon

https://vorillaz.github.io/devicons/

 

Payment Webfont

https://github.com/orlandotm/payment-webfont

 

Ico Font

https://www.icofont.com/

 

Captain Icon

http://mariodelvalle.github.io/CaptainIconWeb/

 


 

  

 

     

 

 

      

 


Templates

Added 18 new templates to demonstrate some of the new features.

 

 


Blocks

Added 50+ new blocks. Available as (free) addon package.

 

 

 

New tutorials

https://www.wysiwygwebbuilder.com/borders.html

https://www.wysiwygwebbuilder.com/color_themes.html

https://www.wysiwygwebbuilder.com/form_popup.html

https://www.wysiwygwebbuilder.com/preloader.html

https://www.wysiwygwebbuilder.com/shape_dividers.html

https://www.wysiwygwebbuilder.com/svg_animations.html

https://www.wysiwygwebbuilder.com/toasts.html

https://www.wysiwygwebbuilder.com/wrap_text.html

https://www.wysiwygwebbuilder.com/unsplash.html

 

 

 

More Features

If you are upgrading from a version prior to version 14 then also check out what we’ve added in version 14, 12, 11, 10, 9 and 8!

http://www.wysiwygwebbuilder.com/new_wb14.html

and

http://www.wysiwygwebbuilder.com/new_wb12.html

and

http://www.wysiwygwebbuilder.com/new_wb11.html

and

http://www.wysiwygwebbuilder.com/new_wb10.html

and

http://www.wysiwygwebbuilder.com/new_wb9.html

and

http://www.wysiwygwebbuilder.com/new_wb85.html

and

http://www.wysiwygwebbuilder.com/new_wb80.html

  

 


Special Offer
If you buy version 14 today you will get version 15 for free when it becomes available!

This offer is also valid for all licenses purchased within 60 days before the official release date.

http://www.wysiwygwebbuilder.com/purchase.html

Other registered users of WYSIWYG Web Builder will get a discount when upgrading to the new version.