WYSIWYG Web Builder 11 (teaser)

[Pablo]

Hide/remove page extensions
WWB11 has the ability to hide/remove extensions from internal links.
When this option is enabled the application will use 'page1' instead of 'page1.html' in navigation objects and links.

[Pablo]

Layers
- New feature: Added ‘Full Screen’ floating mode. This will set the width/height of the layer to 100% of the current view port. This can be useful for creating full screen/single page web sites.

Example:
http://www.wysiwygwebbuilder.com/suppor ... creen.html

- New feature: Added Bootstrap modal layer support. Unlike the jQuery UI option this one is responsive!

Example:
http://wysiwygwebbuilder.com/support/bo ... modal.html

- Improved: Relative layers now use floating point numbers in percentages to reduce rounding errors.

- New feature: Added 'Box Sizing' property. The box-sizing property is used to tell the browser what the sizing properties (width and height) should include.
Should they include the border-box or just the content-box (which is the default value)? The 'border-box' option is especially useful for full width layers, where you usually want the border inside the viewport. With content-box the border size will be added to the total width (> 100%).

- New feature: Added 'Enable backdrop' option for Modal Layer. Specifies whether the background overlay is enabled.

- New feature: Added 'Close on escape' for Modal Layer. Specifies whether pressing the 'esc' key will close the modal layer.

- New feature: Added 'Display close button' for Modal Layer. Specifies whether the default close button should be displayed.

- New feature: Added 'Animation' option for Modal Layer. Specifies whether animation is used to show/hide the modal layer: None, Fade or Slide.

- New feature: Added 'Enable form' property. This option converts the layer into a form. Great for combination with modal mode or other advanced layer features, so you do not have to add a separate form inside a layer.

[Pablo]

Forms
As previously mentioned the styles of form elements are now responsive. This means that you can have different font sizes, font families, text colors and backgrounds in breakpoints.

Label
The HTML Label Element (<label>) represents a caption for an item in a form (editbox, textarea, combobox, checkbox, radio button, file upload). The <label> element provides a usability improvement for mouse users, because if the user clicks on the text within the <label> element, it toggles the control. Screen readers and 'voice browsers' use the label to identify and use form inputs.





Form Wizard
The Form Wizard now creates label objects instead of standard text.

Editbox, TextArea, Combobox
Added 'Focus state'. This removes the default outline styles and applies a box-shadow (with customizable color) in its place.



Combobox
Added group option. Groups can be used to group related options in a drop-down list. If you have a long list of options, groups of related options are easier to handle for a user.

[Pablo]

Login Tools
Added responsive layout mode. In this mode input fields have 100% width (instead of a fixed size), so it can have a different size in breakpoints.



Added option 'Use place holders instead of labels'. Enabling this option results in a cleaner layout.



and more...

[Pablo]

Rollover Image
Added 'Newspaper' animation, a great effect like in the movies;)

Demo:
http://wysiwygwebbuilder.com/support/newspaper.html

[Pablo]

New Rollover Text Animations

Fall In
Rotate and translate text on hover

Revolving Door
3D transform on hover

Translate Left/Right
Translate and scale image to reveal text on hover

Tunnel
Scale and fade image on hover

Reveal
Pushes the image up or down to reveal the text. Supports easing.

Demo:
http://www.wysiwygwebbuilder.com/suppor ... rtext.html

[Pablo]

Heading
WWB11 has a dedicated 'Heading' object. This is a quick way to add headings (<h1>, <h2>) without having to use styles. Each heading object can have its own fonts/size/color.

[Pablo]

Text
Support for CSS3 multiple column layout. In the text properties you can set the number of columns and gap between columns - just like in news papers.
The number of columns can be different in breakpoints.

Demo:
http://wysiwygwebbuilder.com/support/co ... _text.html

[Pablo]

Symbols
Added 'Subset' option to Insert Symbol dialog. Specifies a subset of special characters for the selected font. A font subset can include an extended list of language characters, such as Greek or Russian (Cyrillic), or a category of characters, such as Currency Symbols and Arrows.



Added support for 'Miscellaneous Symbols and Pictographs' (https://en.wikipedia.org/wiki/Miscellan ... ictographs. This replaces the Wingdings and Webdings fonts which should not be used in websites.



Added support for 'Emoticons': https://en.wikipedia.org/wiki/Emoticons_(Unicode_block)

[Pablo]

Slide Show

Added 'News Paper' animation:
http://wysiwygwebbuilder.com/support/sl ... paper.html

Added "Carousel' mode. When this mode is selected multiple images can be displayed per slide:
http://wysiwygwebbuilder.com/support/sl ... ousel.html

Note that in these demos the slideshow is part of a layout grid. This make the slideshow dynamically resize and center based on the available screen size.
Below 480 pixels the slideshow will switch to full width mode and the Carousel will display the images stacked.

[Pablo]

Carousel

Each slide can now have its own background. For example each slide can have another image, in combination with the full width mode this is perfect for advanced full width slideshows!

Also added ‘Full width and floating’ option. This makes it possible to use the Carousel part of floating layouts. This is especially useful in combination with layout grids and floating layers.

Demo:
http://wysiwygwebbuilder.com/support/fl ... ousel.html

[Pablo]

User Interface Improvements

Added Office 2016 color schemes: Colorful theme/Dark gray theme/White theme.
Also scrollbars and panels (site manager, toolbox, object manager, property inspector) are rendered using the current theme colors.





The status bar displays loading progress when a project is loaded



Added 'What's New' option in the help section of the menu. A shortcut to display the release notes. Also added a shortcut to the Facebook page.



Added an (optional) search box to the toolbox to filter toolbox items. For example, if you type 'menu' then only menu objects will be displayed.

[Pablo]

jQuery General
- Upgraded to jQuery 1.11.3 and 2.1.4.
- Upgraded to jQuery UI 1.11.4. This version has many improvements and outputs fewer files.
- Added the ability to control the border-radius for individual jQuery UI widgets (replaces the theme radius)

jQuery Date Picker
Added 'flexible' mode. This option makes the date picker size flexible, so it can have different sizes in breakpoints.

jQuery Tooltips
- Added Arrow support. An arrow can be displayed at the bottom, left, right or bottom of the tooltip
- Added box-shadow option
- Added text alignment option.
- Added the ability to use custom background and border instead jQuery UI Theme.

jQuery ProgressBar
- Added 'Indeterminate' option. Enable this option to display an (animated) indeterminate progress bar.

jQuery ListView
- Added 'ListView object'. Create beautiful styled (jQuery UI themable) lists with title, description and image. Two modes are supported: listview and droplist.
The droplist is a styled (dropdown) select menu which can either be used as menu or as form element (combobox).

Demo:
http://wysiwygwebbuilder.com/support/wb11_listview.html

[Pablo]

jQuery Tab
- Added new layout modes to give the tab widget a different appearance.
• Remove header background
• Remove entire header
• Tabs like button

Demo:
http://wysiwygwebbuilder.com/support/wb11_tabs.html

[Pablo]

Page Properties

Added 'Apple Touch Icon' option in Page Properties. When someone bookmarks your web page or adds your web page to their phone's home screen this icon is used

[Pablo]

Image

Added Retina support to Image object. You can specify an (optional) high-resolution version of the image. If a high-resolution variant is specified, a script will be added to swap in that image in-place on retina displays.

[Pablo]

Blog

The blog has been redesigned to make it a lot more powerful. It’s now also a great way to quick create lists or (responsive) grids for all types of data.

- Added 'Layout' option. This controls the appearance of the blog items. Includes more than 10 different layouts! More layouts will be available as an add-on package. You can also create your own layouts (with HTML/CSS templates)



Here is a demo of some of the available layouts:
http://wysiwygwebbuilder.com/support/wb11blogdemo.html

Here is a demo of the layouts in combination with the Layout Grid:
http://wysiwygwebbuilder.com/support/wb ... eblog.html

Other new Blog features:
- Added ‘Carousel’ option to the Blog. When this option is active the blog items will be displayed in a (responsive) Carousel!

- Item links now support target (new window, lightbox, popup etc), URL parameters, title, mailto, SMS, phone number, file etc.

- Added line-height property.

- Added option to specify the image width.

- Added the ability to display items in columns. This option is responsive so each breakpoint can have different number of columns.

and more...

[Pablo]

CMS

Most navigation objects can now also be used with the CMS tools.
The 'Use this menu for CMS' is available for CSS Menu, Go Menu, MenuBar, Panel Menu, Tab Menu, Text Menu, Breadcrumb and Pagination.



Added support for nicEditor (http://nicedit.com) in CMS admin. NicEdit is extremely lightweight and has built-in support for file uploads.



Added support for SCEditor (http://www.sceditor.com) in CMS admin. SCEditor is another lightweight editor with support for emoticons, YouTube and much more.



Added support for Trumbowyg (http://alex-d.github.io/Trumbowyg) in CMS admin. Trumbowyg is a light, translatable and customizable jQuery plugin. Supports images through base64.



Added 'Upload image' option to WWB editor. Uses HTML5’s filereader, so no PHP or special setup is required.



Added 'Use images for actions' to CMS admin. Specifies whether to use images instead of text for actions.



Added 'Search Index' to CMS page configuration. This option specifies whether to include the page in the CMS search index. When set to ‘false’ the page will not be displayed in the CMS search results.

[Pablo]

Here are a few experimental pages I've created with WYSIWYG Web Builder 11, just to give you an idea of some of the new possibilities.
http://wysiwygwebbuilder.com/support/wb ... gency.html
http://wysiwygwebbuilder.com/support/wb ... ousel.html
http://wysiwygwebbuilder.com/support/wb ... eejay.html
http://wysiwygwebbuilder.com/support/wb ... sktop.html
http://wysiwygwebbuilder.com/support/wb ... tures.html
http://wysiwygwebbuilder.com/support/wb ... folio.html
http://wysiwygwebbuilder.com/support/wb ... vices.html
http://wysiwygwebbuilder.com/support/wb ... debar.html
http://wysiwygwebbuilder.com/support/wb ... tpage.html
http://wysiwygwebbuilder.com/support/wb ... rgrid.html
http://wysiwygwebbuilder.com/support/wb ... deobg.html

These demos are available as templates on the website:
http://wysiwygwebbuilder.com/templates0.html

[Pablo]

YouTube
Added 'Aspect ratio' option. Keeps the aspect ratio of the video fixed at 16:9 or 4:3. This is especially useful when the video is part of a Layout Grid, so the video resizes dynamically while keeping the original aspect ratio. When used in combination with 'Fill entire browser window' this will crop the video to cover the entire background (removes black bands).
Note: this option is also available for: Vimeo and HTML5 video!



Added 'Custom parameters' to add extra features which are not implemented in WWB. For a complete list of available options please check the YouTube API documentation: https://developers.google.com/youtube/player_parameters.



Demo:
http://wysiwygwebbuilder.com/support/wb ... deobg.html

[Pablo]

CSS3 Animations
Added 6 new CSS3 animations:
• newspaper; a great effect from the movies;)
• fall; simulates a ‘falling’ object.
• side fall; simulates an object falling from the side.
• transform-3d-sign; object slides into view from the background.
• super-scaled-in; Scale (2x) and fade an object into view.
• super-scaled-out; Scale (2x) and fade an object out of view.

Demo:
http://wysiwygwebbuilder.com/support/wb ... tions.html

[Pablo]

And to conclude this teaser... here's the (almost) complete list of new features for WYSIWYG Web Builder 11 (in PDF).
http://www.wysiwygwebbuilder.com/suppor ... atures.zip

We are working very hard to release it as soon as possible, but it will not be available until we are certain that everything has been tested thoroughly.
Keep an eye on the news section of this forum and you will be the first to know the official release date;)