Você está na página 1de 54

WYSIWYG Web Builder 11

1 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

What is new in WYSIWYG Web Builder 11?


WYSIWYG Web Builder 11 has more than 150 new features/improvements!
Heres an overview of some of the new features. Note: the screenshots are based on the BETA version. The nal
release may look slightly dierent. Besides screenshots there are also links to online examples and tutorials to
demonstrate the new func*onality.

Responsive Web Design


- New feature: Added support for responsive styles in Style Manager. Some*mes you want to use a dierent font,
text size or color in breakpoints. For example use a larger font for smaller screens. With Responsive Styles you can
dene dierent values for breakpoints.

- New feature: Responsive styles in objects. Most objects now can have dierent fonts in breakpoints. Most
objects can also have dierent backgrounds and text colors. Some objects like the photo gallery, text and the blog
can have dierent columns in breakpoints.
Which proper*es of an object are responsive is documented in the help.

- New feature: Responsive background styles in pages. You can congure dierent background proper*es for
breakpoints, so a mobile layout can have a dierent background color or image.
Online demo: h2p://wysiwygwebbuilder.com/support/rdwstyles.html

27.1.2016 13:16

WYSIWYG Web Builder 11

2 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Layout Grid
- New feature: Layout Grid. The Layout Grid can be used to create exible mul* column layouts that automa*cally
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 automa*cally become oa*ng. For smaller (mobile) screens all columns are stacked based on the
dened breakpoint. This is a great new way to create exible and responsive (Bootstrap-like) layouts!
Many WWB objects have been redesigned to take advantage of the layout grid. For example, if an image is
dragged into the layout grid then it will automa*cally become responsive: it uses the full width of the cell while
keeping its aspect ra*o. Text will always use the full width of the grid cell and YouTube videos can be congured to
keep a 16:9 or 4:3 ra*o while stretching.
The layout grid works great together with other oa*ng content, like page headers/footers, oa*ng layers and the
Carousel (which can now also be set to oa*ng).
Related tutorial:
h2p://www.wysiwygwebbuilder.com/layoutgrid_part1.html
Online demo: h2p://www.wysiwygwebbuilder.com/support/crea*ve.html

27.1.2016 13:16

WYSIWYG Web Builder 11

3 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Lazy Loading
- New feature: Lazing loading. Enable this op*on to delay the loading of images un*l 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.
Lazy loading is currently available for the Image object, Photo Gallery, Rollover Image and Rollover text.

FontAwesome Icon
- New feature: Added 'FontAwesome Icon' object to easily add awesome (vector) icons.
The object supports hover, backgrounds, events, links, CSS3 anima*ons and much more.

27.1.2016 13:16

WYSIWYG Web Builder 11

4 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Layer Menu
- New feature: Layer Menu.
A Layer Menu is an advanced menu where the drop down menus are layers. This is great for crea*ng advanced
mega menus with images, text, form or any other object! The drop down layer can be posi*oned leC, centered or
at the right of the bu2ons. It is also possible to make the layer full width of the page.

Breadcrumb
- New feature: Added 'Breadcrumb' naviga*on.
Breadcrumbs are used to enhance the accessibility of a website by indica*ng the loca*on using a naviga*onal
hierarchy.
You can either manually congure all links for the menu or automa*cally synchronize with Site manager. Also
supports FontAwesome icons.

Pagina on
- New feature: Added 'Pagina*on' naviga*on.
If you have a web site with lots of pages, you may wish to add the pagina*on object for easier naviga*on. You can
either manually congure all links for the menu or automa*cally synchronize with Site manager. In that case the
menu will automa*cally generate links with auto numbering and next/previous bu2ons.
This menu also works with the Content Management System.

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

Responsive Menu
- New feature: Added 'Responsive Menu' object.
This is a responsive, mul*-level menu op*mized 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 mul*-level stacked menu with the common hamburger icon. The menu supports
FontAwesome icons, ScrollSpy and Ax to give your website a modern look and feel.

5 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

6 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

ScrollSpy
- New feature: ScrollSpy is a naviga*on mechanism that automa*cally highlights the naviga*on bu2ons based on
the scroll posi*on to indicate the visitor where they are currently on the page. This feature works in combina*on
with bookmarks.
ScrollSpy is available for CSS Menu, Naviga*on Menu, Mega Menu, Slide Menu, Tab Menu, Panel Menu,
Responsive Menu and Text Menu.

Ax
- New feature: Added Ax op*on to naviga*on objects.
The Ax func*onality is oCen used with naviga*on menus to make them "s*ck" at a specic area while scrolling
up and down the page.
Ax is available for CSS Menu, Naviga*on Menu, Mega Menu, Slide Menu, Tab Menu, Responsive Menu and Text
Menu.

Related tutorial:
h2p://www.wysiwygwebbuilder.com/ax_and_scrollspy.html

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

Heading
- New feature: Added a dedicated 'Heading' object.
This is a quick way to add headings (<h1>, <h2>) without using styles. Each heading object can have its own
fonts/size/color!

7 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

8 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Blog
The blog has been redesigned to make it much more powerful. Its now a great way to quick create lists or
(responsive) grids for all types of data.
- New feature: Added 'Layout' op*on. This controls the appearance of the blog items. Includes more than 10
dierent layouts! More layouts will be available as an add-on package. You can also create your own layouts (with
HTML/CSS templates)

Here are some examples of the possibili*es:

27.1.2016 13:16

WYSIWYG Web Builder 11

9 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

27.1.2016 13:16

WYSIWYG Web Builder 11

10 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Online demo:
h2p://wysiwygwebbuilder.com/support/wb11blogdemo.html
Demo of dierent layouts in combina*on with the Layout Grid:
h2p://wysiwygwebbuilder.com/support/wb11responsiveblog.html

27.1.2016 13:16

WYSIWYG Web Builder 11

11 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added Carousel op*on to the Blog. When this op*on is ac*ve the blog items will be displayed in a
(responsive) Carousel!

- New feature: Item links now support target (new window, lightbox, popup etc), URL parameters, *tle, mailto,
SMS, phone number, le etc.
- New feature: Added possibility to insert Lorem Ispum in blog via context menu.
- New feature: Added text alignment.
- New feature: Added line-height property.
- New feature: Added op*on to specify the image width.
- New feature: Added the ability to display items in columns. This op*on is responsive so each breakpoint can
have dierent number of columns.
Related tutorial:
h2p://www.wysiwygwebbuilder.com/blog.html

27.1.2016 13:16

WYSIWYG Web Builder 11

12 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Ar cle
- New feature: Added 'Ar*cle' object. Basically the Ar*cle object is a stripped down version of the blog, with just
one 'ar*cle. The ar*cle supports the same layouts and styling op*on so that makes it a great building block for
when you need text combined with an image.

Parallax
- New feature: Added 'parallax' background mode to Layers, Forms, Layout Grid and other objects. The
background image scrolls slower than the content in the foreground, crea*ng the illusion of 3D depth.

27.1.2016 13:16

WYSIWYG Web Builder 11

13 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Online demos:
h2p://www.wysiwygwebbuilder.com/support/parallax.html
h2p://www.wysiwygwebbuilder.com/support/parallax4.html

27.1.2016 13:16

WYSIWYG Web Builder 11

14 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Label
The HTML Label Element (<label>) represents a cap*on for an item in a form (editbox, textarea, combobox,
checkbox, radio bu2on, le 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 iden*fy and use form inputs.

27.1.2016 13:16

WYSIWYG Web Builder 11

15 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

User Interface Improvements


- New feature: Added Oce 2016 color schemes: Colorful theme/Dark gray theme/White theme.

- New feature: Scrollbars and panels (site manager, toolbox, object manager, property inspector) are rendered
using the current theme colors.

27.1.2016 13:16

WYSIWYG Web Builder 11

16 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: The status bar displays loading progress when a project is loaded.

- New feature: Added 'What's New' op*on in the help sec*on of the menu. A shortcut to display the release
notes. Also added a shortcut to the Facebook page.

27.1.2016 13:16

WYSIWYG Web Builder 11

17 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

General
- New feature: Added 'Apple Touch Icon' op*on in Page Proper*es. When someone bookmarks your web page or
adds your web page to their phone's home screen this icon is used.

- New feature: Added 'Set page width and height to 100% ' alignment op*on in Page Proper*es.
This op*on is for use in combina*on with the new Full screen oa*ng layer mode.

Online demo:
h2p://www.wysiwygwebbuilder.com/support/singlepage_fullscreen.html
Related tutorial:
h2p://www.wysiwygwebbuilder.com/fullscreen.html

27.1.2016 13:16

WYSIWYG Web Builder 11

18 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

HTML
- New feature: Added an op*on to put all page specic scripts in an external (JS) le.
- New feature: Added 'Move JavaScript to the end of the page'. This will place all scripts at the end of the page.
This may result in be2er performance because the JavaScript will be executed aCer the rest of the page has been
loaded. This is also known as "Unobtrusive JavaScript".

- New feature: Added JavaScript minify op*on. Removes all whitespaces and line feeds from the code
(Tools->Op*ons->HTML->JavaScript formaOng)

- New feature: Added HTML minify op*on (Tools->Op*ons->HTML->HTML formaOng)


This op*on can be used to reduce the size of the generated HTML and may improve the performance of the page.

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added CSS formaOng op*ons: beau*fy, compact and minify.
(Tools->Op*ons->HTML->CSS formaOng).
Beau*fy formats the CSS code so it looks be2er and is easier to read. If you select this op*on then the size of the
page will slightly increase because of the extra white spaces added to the page. Compact compacts all styles
from one sec*on into one line. Minify reduces the size of the generated CSS and may improve performance. Note
however that the CSS becomes more dicult to read.

- New feature: Added the ability to insert code inside the <html> tag.
In Page HTML or via an HTML object.

19 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

20 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added Resources bu2on to the HTML object. This op*on can be used to automa*cally include
built-in scripts like jQuery. This can be useful when your code uses one of the built-in scripts but there are no other
objects on the page that load the script. For example: jquery-1.11.3.min.js, jquery.ui.draggable.min.js, ax.min.js
etc. This way to do not have to use a separate File Publisher object.

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

Image
- New feature: Added Re*na support. You can specify an (op*onal) high-resolu*on version of the image. If a
high-resolu*on variant is specied, a script will be added to swap in that image in-place on re*na displays.

- New feature: Added Full width op*on. Species whether the image is full width (responsive) of its container
(layout grid). If set to false, the image uses the xed size.
Note: This op*on is only available if the image is part of a layout grid!
- New feature: Added Maximum width op*on. Species the maximum size of the image when it is set to full
width. This prevents the image from geOng too large in responsive layouts.
Note: This op*on is only available if the image is part of a layout grid!

21 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

22 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Text
- Improved: Redesigned the implementa*on of 'line spacing'. Line spacing now also works with responsive text
and for standard text; it no longer uses divs for each line.
- Improved: Signicantly improved performance of font combo box loading.
- New feature: Added support for CSS3 mul*ple column layout. In the text proper*es you can now set the number
of columns and gap between columns - just like in news papers.
The number of columns can be dierent in breakpoints.

Online demo: h2p://wysiwygwebbuilder.com/support/columns_in_text.html


- New feature: Added 'Subset' op*on to Insert Symbol dialog. Species 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.

- New feature: Added support for Surrogates and Supplementary Characters. h2ps://msdn.microsoC.com/en-us
/library/windows/desktop/dd374069(v=vs.85).aspx

27.1.2016 13:16

WYSIWYG Web Builder 11

23 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added support for 'Miscellaneous Symbols and Pictographs' (h2ps://en.wikipedia.org
/wiki/Miscellaneous_Symbols_and_Pictographs'. This replaces the Wingdings and Webdings fonts which should
not be used in websites.

- New feature: Added support for 'Emo*cons': h2ps://en.wikipedia.org/wiki/Emo*cons_(Unicode_block)

27.1.2016 13:16

WYSIWYG Web Builder 11

24 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Toolbox
- New feature: Added a search box to toolbox to lter toolbox items. For example type 'menu' to display all menu
objects. The search box can enabled/disabled via the context menu of the toolbox.

Ready-to-use-JavaScripts
- New feature: Added 'Facebook Page Plugin' script.

27.1.2016 13:16

WYSIWYG Web Builder 11

25 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

MenuBar
- The menubar has been redesign. It no longer uses 'xed' themes, but now they can be fully customized with the
WWB menu editor. There are more than 50 predened templates available.

- New feature: Added 'Click to open submenus' op*on. Species whether the user needs to click to open sub
menus, instead of hover/mouseover. Recommended for touch screen devices where there is no mouse (so the
menu won't open on hover)

- New feature: Border color and width can now be set for all normal and hover state.

27.1.2016 13:16

WYSIWYG Web Builder 11

26 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added support for gradients and pa2ern backgrounds

- New feature: Added leC and right margin styling in main and sub menus. This makes it possible to give the
leC/right margin a dierent background style.

- New feature: Margin can have a 'shape' to indicate that the item has sub items. This is usually an 'arrow' but you
can use any of the built-in shapes!

27.1.2016 13:16

WYSIWYG Web Builder 11

27 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added border style for items. Include a special 'separator only' style which adds a single line
between all items.

27.1.2016 13:16

WYSIWYG Web Builder 11

28 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added 'Shadow' op*on for sub menus.

- New feature: Sub menus can now have dierent font.

- New feature: Added the ability to choose a dierent character for the horizontal divider.

- New feature: Added sub menu oset (x,y) op*ons.

27.1.2016 13:16

WYSIWYG Web Builder 11

29 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Panel Menu
- New feature: Added support for FontAwesome icons in menu items.

- New feature: Added the ability to set a FontAwesome icon as the bu2on image.

- New feature: Added overlay op*on (color and opacity). This fades the page background when the menu is ac*ve.

27.1.2016 13:16

WYSIWYG Web Builder 11

30 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Mega Menu
- New feature: The Mega Menu can now have its own styling (independently of jQuery UI Theme).

Bookmarks
- Improved: Replaced 'name' a2ribute with 'id'. The 'name' a2ribute is obsolete in HTML5.
- New feature: Added Smooth Scroll func*onality. When link to a bookmark is clicked the page will scroll
smoothly to the bookmark, op*onally with easing eects.

Online demo: h2p://www.wysiwygwebbuilder.com/support/scrollspy_demo.html

27.1.2016 13:16

WYSIWYG Web Builder 11

31 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Links
- New feature: Added link decora*on (underline) anima*on to hyperlink styles.

Related tutorial:
h2p://www.wysiwygwebbuilder.com/link_transi*ons.html
- New feature: Added the ability to hide/remove extension from internal links:
Tools->Op*ons->Publish & Preview. For advanced users only!

Note that the generated les will s*ll have extensions otherwise they will not be recognized as HTML/PHP les.

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

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

Editbox, TextArea
- New feature: Focus state. Removes the default outline styles and applies a box-shadow (with customizable color)
in its place.

Combobox
- New feature: Adding padding.
- New feature: Added Focus state.

- New feature: Added group op*on. Groups can be used to group related op*ons in a drop-down list. If you have a
long list of op*ons, groups of related op*ons are easier to handle for a user.

32 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

33 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

ClipArt
- New feature: Added support for FontAwesome. A simple way to turn FontAwesome icons into images with all
the special eects that are available for the ClipArt object.

- New feature: Added support for Bootstraps GlyphIcons Halings. This font is not included by default but
available as free add-on: h2p://wysiwygwebbuilder.com/free_extras.html

Shape
- New feature: Added support for Surrogates and Supplementary Characters, including 'Miscellaneous Symbols
and Pictographs' (see text). A great way to insert symbols in shapes!

27.1.2016 13:16

WYSIWYG Web Builder 11

34 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Photo Gallery
- Improved: Gallery now uses CSS instead of tables.
- Improved: The gallery automa*cally uses in memory compression when large images are loaded. This improves
the performance during design *me.
- Improved: Transi*ons are now applied to individual images instead of the en*re gallery. Great for implemen*ng
cool animated hover eects.
- New feature: Added 'Responsive' op*on for thumbnail size. When this op*on is selected the gallery can have a
dierent number of columns in breakpoints! The images in the gallery will be responsively resized based on the
available space. This means for example that when the gallery is inside a layout grid that it can be full width. Or
use a percentage of the screen size width.

- New feature: Added support for Lazy Loading.


- New feature: Added 'Text padding' op*on (replaces the confusing 'cell spacing' op*on).
- New feature: Added border radius for default frame style.

- New feature: Added the ability to set a descrip*on for images.

- New feature: Added Bootstrap frame style to create Bootstrap-like thumbnail images.

27.1.2016 13:16

WYSIWYG Web Builder 11

35 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Related tutorial:
h2p://www.wysiwygwebbuilder.com/photogallery.html
Online demo:
h2p://www.wysiwygwebbuilder.com/gallery_demo9.html

27.1.2016 13:16

WYSIWYG Web Builder 11

36 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Carousel
- New feature: Each slide can now have its own background. For example each slide can have another image, in
combina*on with the full width mode this is perfect for advanced full width slideshows!

- New feature: Add Full width and oa*ng op*on. This makes it possible to use the Carousel as part of a oa*ng
layout. For example, in combina*on with layout grids or oa*ng layers.

Online demo:
h2p://wysiwygwebbuilder.com/support/oa*ng_carousel.html

27.1.2016 13:16

WYSIWYG Web Builder 11

37 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Slide Show
- New feature: Added border-radius property.

- New feature: Added "News Paper' anima*on.

Online demo: h2p://wysiwygwebbuilder.com/support/slideshow_newspaper.html

- New feature: Added Full width op*on. Species whether the slideshow is full width (responsive) of its container
(layout grid). If set to false, the slideshow uses the xed size.
Note: This op*on is only available when the slideshow is part of a layout grid!

27.1.2016 13:16

WYSIWYG Web Builder 11

38 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added "Carousel' mode. When this mode is selected mul*ple images can be displayed per slide.

Online demo:
h2p://wysiwygwebbuilder.com/support/slideshow_carousel.html

CSS3 Anima ons


- New feature: Added new CSS3 anima*ons:
newspaper; a great eect 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.
Online demo:
h2p://wysiwygwebbuilder.com/support/wb11_anima*ons.html

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

Layer
- Improved: Rela*ve layers now use oa*ng point numbers in percentages to reduce rounding errors.
- Improved: S*cky layer now uses Bootstrap's Ax for 'Keep original posi*on...' and delay = 0.
- New feature: Added 'Box Sizing' property. The box-sizing property is used to tell the browser what the sizing
proper*es (width and height) should include. Should they include the border-box or just the content-box (which is
the default value)? The 'border-box' op*on 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 form' property. This op*on converts the layer into a form. Great for combina*on
with modal mode and other advanced layer features.

- New feature: Added 'Enable backdrop' op*on for Modal Layer. Species whether the background overlay is
enabled.
- New feature: Added 'Close on escape' for Modal Layer. Species whether pressing the 'esc' key will close the
modal layer.
- New feature: Added 'Display close bu2on' for Modal Layer. Species whether the default close bu2on should be
displayed.
- New feature: Added 'Anima*on' op*on for Modal Layer. Species whether anima*on is used to show/hide the
modal layer: None, Fade or Slide.

39 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

40 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added Bootstrap modal layer support. Unlike the jQuery UI op*on this one is responsive! If
specied, the *tle of the layer will be used in the header.

Online demo:
h2p://wysiwygwebbuilder.com/support/bootstrap_modal.html
- New feature: Added Full Screen oa*ng mode. This will set the width/height of the layer to 100% of the current
view port. This can be useful for crea*ng full screen/single page web sites.
Related tutorial:
h2p://www.wysiwygwebbuilder.com/fullscreen.html

27.1.2016 13:16

WYSIWYG Web Builder 11

41 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Table
- New feature: Added the possibility to change the font and size of text is table cells for mul*ple cells: Select
mul*ple cells -> hold down the SHIFT key and click cell proper*es.

27.1.2016 13:16

WYSIWYG Web Builder 11

42 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Login Tools
- New feature: Added responsive layout mode. In this mode input elds have 100% width (instead of a xed size),
so it can have a dierent size in breakpoints.

- New feature: All input elds are now <label> tags (instead of standard text).
- New feature: Added op*on 'Use place holders instead of labels'. Enabling this op*on results in a cleaner layout.

- New feature: Added 'padding' op*on to text input elds, bu2on and *tle.
- New feature: Added 'alignment' to *tle.
- New feature: Added border-radius op*on to input elds and bu2ons.
- New feature: Focus state. Removes the default outline styles and applies a box-shadow (with customizable color)
in its place.

27.1.2016 13:16

WYSIWYG Web Builder 11

43 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Rollover Image
- New feature: Added new anima*on: Newspaper
Online demo:
h2p://wysiwygwebbuilder.com/support/newspaper.html

Rollover Text
- New feature: Added new anima*on: Fall In. Rotate and translate text on hover
- New feature: Added new anima*on: Revolving Door. 3D transform on hover
- New feature: Added new anima*on: Translate LeC/Right. Translate and scale image to reveal text on hover
- New feature: Added new anima*on: Tunnel. Scale and fade image on hover
- New feature: Added new anima*on: Reveal. Pushes the image up or down to reveal the text. Supports easing.

Online demo:
h2p://www.wysiwygwebbuilder.com/support/wb11_rollovertext.html

27.1.2016 13:16

WYSIWYG Web Builder 11

44 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

YouTube
- Removed: Op*ons deprecated by YouTube (colors, theme and version) have been removed.
- New feature: Added 'Aspect ra*o' op*on. Keeps the aspect ra*o of the video xed 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 ra*o. When used in combina*on with 'Fill en*re browser window' this will crop the video to cover
the en*re background (removes black bands).
Note: this op*on is also available for: Vimeo and HTML5 video.

Online demo:
h2p://wysiwygwebbuilder.com/support/wb11tryouts/wb11_videobg.html

- New feature: Added 'Custom parameters' to add extra features which are not implemented in WWB (yet). For a
complete list of available op*ons please check the YouTube API documenta*on: h2ps://developers.google.com
/youtube/player_parameters.

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

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 les.
h2p://jqueryui.com/upgrade-guide/1.11/
- New feature: Added the ability to control the border-radius for individual jQuery UI widgets (replaces the theme
radius)

jQuery Date Picker


- New feature: Added 'exible' mode. This op*on makes the date picker size exible, so it can have dierent sizes
in dierent breakpoints.

jQuery ProgressBar
- New feature: Add 'Indeterminate' op*on. Enable this op*on to display an (animated) indeterminate progress bar.

45 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

46 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

jQuery Tool p
- New feature: Added possibility to insert Lorem Ispum in text editor via context menu.

- New feature: Added box-shadow op*on

- New feature: Added text alignment op*on.


- New feature: Added the ability to use custom background and border instead jQuery UI Theme.

- New feature: Added Arrow support. An arrow can be displayed at the bo2om, leC, right or bo2om of the tool*p.

27.1.2016 13:16

WYSIWYG Web Builder 11

47 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

jQuery Tab
- New feature: Added new layout modes to give the tab widget a dierent appearance.
Remove header background
Remove en*re header
Tabs like bu2on

Online demo:
h2p://wysiwygwebbuilder.com/support/wb11_tabs.html

27.1.2016 13:16

WYSIWYG Web Builder 11

48 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

jQuery ListView
- New feature: Added 'ListView object'. Create beau*ful styled (jQuery UI themable) lists with *tle, descrip*on
and image. Two modes are supported: listview and droplist. Also supports dividers to group items.

The droplist is a styled (dropdown) select menu which can either be used as menu or as form element
(combobox).

Online demo:
h2p://wysiwygwebbuilder.com/support/wb11_listview.html

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

CMS
- New feature: Most naviga*on 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 Pagina*on.

- New feature: Added support for nicEditor (h2p://nicedit.com) in CMS admin. NicEdit is extremely lightweight
and has built-in support for le uploads.

- New feature: Added support for SCEditor (h2p://www.sceditor.com) in CMS admin. SCEditor is another
lightweight editor with support for emo*cons, YouTube and much more.

49 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

50 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

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

- New feature: Added 'Upload image' op*on to WWB editor. Uses HTML5s lereader, so no PHP or special setup is
required.

- New feature: Added 'Use images for ac*ons' to CMS admin. Species whether to use images instead of text for
ac*ons.

- New feature: Added 'Search Index' to CMS page congura*on. This op*on species 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.

27.1.2016 13:16

WYSIWYG Web Builder 11

51 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Error Reports
- New feature: Error reports checks whether IDs starts with a le2er (ID cannot start with digits or dashes).

- New feature: Error reports checks whether objects are inside the viewport (including breakpoints).

Smart Guides
- New feature: Added 'center' guides. Smart guides now also works when objects are aligned centered. Also works
for the center of the page.

News Feed Ticker


- New feature: Added text alignment.

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

Lightbox
- New feature: Added support for Magnic Popup. Magnic Popup is a responsive gallery with a modern look that
can be used in the SlideShow, Photo Gallery, YouTube, Vimeo, Inline frame.

Magnic Popup can also be used as a replacement for the default Fancybox lightbox which is used in links. This can
be congured in the Page Proper*es.

Online demo:
h2p://www.wysiwygwebbuilder.com/gallery_demo9.html

Other improvements
- Improved: Events -> Show/Hide with eects now only includes eect les that are needed.
- Improved: Wingdings and Webdings fonts are no longer considered web safe. They have been replaced by
standard Unicode symbols.
- New feature: 'Glass' background style (previously only available in Shape/Banner) is now a gradient style, so it
can be used in other objects as well and makes background style op*ons consistent between all objects.

52 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

http://www.wysiwygwebbuilder.com/support/wb11.html

- New feature: Added Reset Posi*on to context menu of Object Manager. This op*on can be useful in
breakpoints when you have lost an object because its outside the viewport. Reset Posi*on moves the object to
the upper leC corner of its container.

53 z 54

27.1.2016 13:16

WYSIWYG Web Builder 11

54 z 54

http://www.wysiwygwebbuilder.com/support/wb11.html

Here are a few demos to give you an idea of the new possibili*es:
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_agency.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_blogcarousel.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_deejay.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_desktop.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_features.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_porZolio.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_services.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_sidebar.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_startpage.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_anothergrid.html
h2p://www.wysiwygwebbuilder.com/support/wb11tryouts/wb11_videobg.html

More Features
If you are upgrading from a version prior to version 10 then also check out what weve added in version 10, 9 and
8!
h2p://www.wysiwygwebbuilder.com/new_wb80.html
and
h2p://www.wysiwygwebbuilder.com/new_wb85.html
and
h2p://www.wysiwygwebbuilder.com/new_wb9.html
and
h2p://www.wysiwygwebbuilder.com/new_wb10.html

Special Oer
If you buy version 10 today you will get version 11 for free when it becomes available!
This oer is also valid for all licenses purchased within 60 days before the ocial release date.
h2p://www.wysiwygwebbuilder.com/purchase.html
Other registered users of WYSIWYG Web Builder will get a discount when upgrading to the new version.

27.1.2016 13:16

Você também pode gostar