WYSIWYG Web Builder 11 Teaser...

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

*** Now available: WYSIWYG Web Builder 12.2.2 ***
User avatar
Pablo
 
Posts: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Mon Dec 14, 2015 8:56 am

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Mon Dec 14, 2015 9:00 am

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Mon Dec 14, 2015 9:01 am

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Tue Dec 15, 2015 3:28 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Tue Dec 15, 2015 3:35 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Wed Dec 16, 2015 12:43 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Wed Dec 16, 2015 3:08 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Thu Dec 17, 2015 2:57 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Thu Dec 17, 2015 3:02 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Mon Dec 21, 2015 6:18 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Mon Dec 21, 2015 6:19 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Mon Dec 21, 2015 6:20 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Tue Dec 22, 2015 3:30 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Tue Dec 22, 2015 3:31 pm

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: 18861
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: WYSIWYG Web Builder 11 Teaser...

Post by Pablo » Wed Dec 23, 2015 12:05 pm

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

Locked

Who is online

Users browsing this forum: No registered users and 4 guests