WYSIWYG Web Builder 11 (teaser)

All the latest news about WYSIWYG Web Builder can be read in this section

*** Current version: WYSIWYG Web Builder 19.1.1 ***


Locked
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

WYSIWYG Web Builder 11 (teaser)

Post by Pablo »

The next major version of WYSIWYG Web Builder (WWB11) is planned for 2016, this will be a major upgrade with more than 150 new features and improvements!
This post will give you a sneak peak at some of these new features, it will be regularly updated with new information, so make sure you don't miss anything...

ScrollSpy, Affix and Smooth Scrolling
Inspired by Bootstrap we have added support for ScrollSpy, Affix and Smooth Scrolling

ScrollSpy is a navigation mechanism that automatically highlights the navigation buttons based on the scroll position to indicate the visitor where they are currently on the page. This feature works in combination with bookmarks.

The Affix functionality is often used with navigation menus to make them "stick" at a specific area while scrolling up and down the page.

The bookmark object now supports Smooth Scrolling. When link to a bookmark is clicked the page will scroll smoothly to the bookmark, optionally with easing effects.

Here's a demo of these new features:
http://www.wysiwygwebbuilder.com/suppor ... _demo.html
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Responsive Styles
Most objects now can have different fonts, backgrounds and text colors in breakpoints.

Added support for responsive styles in Style Manager.

Image

You can also configure different background properties in breakpoints.

Here's a basic example of this functionality:
http://wysiwygwebbuilder.com/support/rdwstyles.html

This demo has 3 breakpoints. In each breakpoint the objects have different styles. The background background also has a different color.
Note that this can also be a different image or other background style!
The text object uses responsive styles (created with Style Manager), which makes it possible to mix different styles and switch to another fonts or sizes in breakpoints.
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Layout grid
The Layout Grid can be used to create flexible multi column layouts that automatically adapt to the screen size. A grid can have up to 12 columns, with sizes in percentages.
Objects that are dragged into a grid will automatically become floating. For smaller (mobile) screens all columns are stacked based on the defined breakpoint.
This is a great new way to create flexible and responsive (Bootstrap-like) layouts!

Here's a demo:
http://www.wysiwygwebbuilder.com/support/creative.html
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Parallax
WYSIWYG Web Builder 11 will have built-in support for the 'parallax' background effect.
The background image scrolls slower than the content in the foreground, creating the illusion of 3D depth.

Demo:
http://www.wysiwygwebbuilder.com/support/parallax.html

More demos with different scroll speeds:
http://www.wysiwygwebbuilder.com/support/parallax2.html
http://www.wysiwygwebbuilder.com/support/parallax3.html
http://www.wysiwygwebbuilder.com/support/parallax4.html

Related tutorial:
http://www.wysiwygwebbuilder.com/parallax.html
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

FontAwesome
When you looked at the demos in previous posts then you may have noticed WWB11 also has support for FontAwesome icons!
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

HTML/CSS/JavaScript
New options to control the generated code.

Image

- Added the ability to put all page specific scripts in an external (JS) file.

- Added 'Move JavaScript to the end of the page' option. This will place all scripts at the end of the page. This may result in better performance because the JavaScript will be executed after the rest of the page has been loaded. This is also known as "Unobtrusive JavaScript".

- Added JavaScript 'minify' option. Removes all white spaces and line feeds from the code.

- Added HTML 'minify' option. This option can be used to reduce the size of the generated HTML and may improve the performance of the page.

- Added CSS formatting options: beautify, compact and minify.
'Beautify' formats the CSS code so it looks better and is easier to read.
'Compact' compacts all styles from a section into one line.
'Minify' reduces the size of the generated CSS by removing tabs, spaces and line feeds.

- Added the ability to insert code inside the <html> tag. In Page HTML or via an HTML object.
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Lazy Loading
Enable this option to delay the loading of images until they are visible in the view port. This will speed up the page loading. It also prevents loading large images in mobile devices because only the visible images will be downloaded.
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Photo Gallery
- Added 'Responsive' option for thumbnail size. When this option is selected the gallery can have a different number of columns in breakpoints and images will automatically resize based on the available container space.

- Added the ability to set a description for images

- Added Bootstrap frame style to create Bootstrap-like thumbnail images.

+ border radius, text padding, transitions, lazy loading and more...

Here's a demo of a responsive photo gallery with Bootstrap-like thumbnails:
http://www.wysiwygwebbuilder.com/gallery_demo9.html
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Lightbox
Added support for Magnific Popup. Magnific Popup is a responsive gallery with a modern look that can be used in the SlideShow, Photo Gallery, YouTube, Vimeo, Inline frame.
Magnific Popup can also be used as a replacement for the default Fancybox lightbox which is used in links. This can be configured in the Page Properties.

Image

Demo (click on the images to trigger the lightbox):
http://www.wysiwygwebbuilder.com/gallery_demo9.html
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Breadcrumb
Breadcrumbs are used to enhance the accessibility of a website by indicating the location using a navigational hierarchy.
You can either manually configure all links for the menu or automatically synchronize with Site manager. It's also possible to use FontAwesome icons.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Pagination
If you have a web site with lots of pages, you may wish to add the pagination object for easier navigation. You can either manually configure all links for the menu or automatically synchronize with Site manager. In that case the menu will automatically generate links with auto numbering and next/previous buttons.
This menu also works with the Content Management System.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Layer Menu
A Layer Menu is an advanced menu where the drop down menus are layers. This is great for creating advanced mega menus with images, text, form or any other object!

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Responsive Menu
This is a responsive, multi-level menu optimized for desktop computers and mobile (touch) devices which uses CSS only (no JavaScript!). On desktop computer the menu will display a standard drop down menu and on mobile devices it will display a multi-level stacked menu with the common ‘hamburger’ icon. The menu supports FontAwesome icons, ScrollSpy and Affix to give your website a modern look and feel.

Image

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

MenuBar
The menubar has been redesign with many new options. It no longer uses 'fixed' themes, but the menu appearance is now fully customizable with the built-in menu editor.
There are more than 50 predefined templates available to get you started.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

Text link animations
WWB11 will add the possibility to animate link decorations (underline).

Image

See the examples at the bottom of this related tutorial:
http://www.wysiwygwebbuilder.com/link_transitions.html
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image

Image

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.

Image

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.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image

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

Image

and more...
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo »

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

Demo:
http://wysiwygwebbuilder.com/support/newspaper.html
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image

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.

Image

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

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image

Image

The status bar displays loading progress when a project is loaded

Image

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.

Image

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.

Image

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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)

Image

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...
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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.

Image

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

Image

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

Image

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.

Image

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

Image

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

Image

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.

Image
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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!

Image

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.

Image

Demo:
http://wysiwygwebbuilder.com/support/wb ... deobg.html
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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
User avatar
Pablo
 
Posts: 21333
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by 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;)
Locked