What is new in Quick ‘n Easy Web Builder 4?

Quick ‘n Easy Web Builder 4 has more than 125 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.


Responsive Web Design

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



- New feature: Responsive styles in objects. Many objects now can have different fonts in breakpoints. These objects can also have different backgrounds and text colors. Some objects like the photo gallery and the blog can have different columns in breakpoints.


- New feature: Responsive background styles in pages. You can configure different background properties for breakpoints, so a mobile layout can have a different background color or image.

Online demo: http://www.quickandeasywebbuilder.com/support/rdwstyles.html


- New feature: Added 'Responsive fonts' option to Text object. This make it possible to use different fonts in breakpoints.



Layout Grid

- New feature: 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!


Many QnEWB 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 automatically become responsive: it uses the full width of the cell while keeping its aspect ratio. Text will always use the full width of the grid cell and YouTube videos can be configured to keep a 16:9 or 4:3 ratio while stretching.

The layout grid works great together with other floating content, like page headers/footers, floating layers and the Carousel (which can now also be set to floating).


Related tutorial:



Online demo: http://www.quickandeasywebbuilder.com/support/qwb4tryouts/qwb4_creative.html




FontAwesome Icon

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


Lazy Loading

- New feature: Lazing 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.

Lazy loading is currently available for the Image object, Photo Gallery, Rollover Image and Rollover text.





- New feature: 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. ScrollSpy is available for CSS Menu, Navigation Menu, Mega Menu, Slide Menu, Tab Menu, Panel Menu, Responsive Menu and Text Menu.




- New feature: Added Affix option to navigation objects.

The Affix functionality is often used with navigation menus to make them "stick" at a specific area while scrolling up and down the page. Affix is available for CSS Menu, Navigation Menu, Mega Menu, Slide Menu, Tab Menu, Responsive Menu and Text Menu.



Related tutorial:



Layer Menu

- New feature: 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! The drop down layer can be positioned left, centered or at the right of the buttons. It is also possible to make the layer full width of the page.




- New feature: Added 'Breadcrumb' navigation.

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. Also supports FontAwesome icons.




- New feature: Added 'Pagination' navigation.

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.



Slide Menu

- New feature: Added 'Full width' option to Slide Menu. If the menu is part of a layout grid, then it will use the container width. Also expanding the menu will push all elements below it downwards.




Responsive Menu

- New feature: Added 'Responsive Menu' object.

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.



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





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.






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


- New feature: 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 are some examples of the possibilities:






Online demo:



Demo of different layouts in combination with the Layout Grid:


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




- New feature: Added text alignment.


- New feature: Added line-height property.


- New feature: Added option to specify the image width.


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


Related tutorial:




- 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, creating the illusion of 3D depth.



Online demos:



- New feature: 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.



- New feature: Added 'Set page width and height to 100% ' alignment option in Page Properties.

This option is for use in combination with the new ‘Full screen’ floating layer mode.



Online demo:



Related tutorial:






- New feature: Added an option to put all page specific scripts in an external (JS) file.


- 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 better performance because the JavaScript will be executed after the rest of the page has been loaded. This is also known as "Unobtrusive JavaScript".


- New feature: Added JavaScript minify option. Removes all whitespaces and line feeds from the code (Tools->Options->HTML->JavaScript formatting)



- New feature: Added HTML minify option (Tools->Options->HTML->HTML formatting)

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



- New feature: Added CSS formatting options: beautify, compact and minify.

(Tools->Options->HTML->CSS formatting).

‘Beautify’ formats the CSS code so it looks better and is easier to read. If you select this option 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 section into one line. ‘Minify’ reduces the size of the generated CSS and may improve performance. Note however that the CSS becomes more difficult to read.



- New feature: Added the ability to insert code inside the <html> tag.

In Page HTML or via an HTML object.





- New feature: Added Retina support. 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.



- New feature: Added ‘Full width’ option. Specifies whether the image is full width (responsive) of its container (layout grid). If set to false, the image uses the fixed size.

Note: This option is only available if the image is part of a layout grid!


- New feature: Added ‘Maximum width’ option. Specifies the maximum size of the image when it is set to full width. This prevents the image from getting too large in responsive layouts.

Note: This option is only available if the image is part of a layout grid!






- New feature: Added 'Facebook Page Plugin' script.


- New feature: Added 'scroll wheel' option to Google Maps script. If false, disables scrollwheel zooming on the map.





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



- New feature: Added 'Click to open submenus' option. Specifies 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.




- New feature: Added support for gradients and pattern backgrounds



- New feature: Added left and right margin styling in main and sub menus. This makes it possible to give the left/right margin a different 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!


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



- New feature: Added 'Shadow' option for sub menus.


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



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




- New feature: Added sub menu offset (x,y) options.





Panel Menu

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




- New feature: Added overlay option (color and opacity). This fades the page background when the menu is active.



- Improved: Replaced 'name' attribute with 'id'. The 'name' attribute is obsolete in HTML5.


- New feature: Added 'onscrollreveal' and 'onscrollhide' events to Anchor object. This makes it possible to trigger actions based on the scroll position.



- New feature: Added ‘Smooth Scroll’ functionality. When link to a anchor is clicked the page will scroll smoothly to the anchor, optionally with easing effects.



Online demo: http://www.quickandeasywebbuilder.com/support/scrollspy_demo.html


- New feature: Added 'transition' option to hyperlink styles to animate color changes of links.


- New feature: Added 'text-shadow' option to hyperlink styles.


- New feature: Added link decoration (underline) animation to hyperlink styles.




Related tutorial:




 Site Manager

- New feature: Synchronize with Site Manager in navigation objects. When this option is enabled, Web Builder automatically synchronizes the item with the content of the Site Manager. For example, when you add a new page, then a button is automatically added to the Navigation bar or if you rename a page the text of the button will also be updated.

- New feature: Added the ability to clone folders in the Site Manager.



Site Variables

- New feature: Added 'Site variables' to Page menu. Variables will be replaced during publishing by the specified value. Great to quickly update the copyright or other values that frequently change. Site variables can also be used to override a few built-in global settings ($PARALLAX_SPEED$, $GOOGLEFONTS_PREFIX$, $VIMEO_PREFIX$, $LAZYLOAD_THRESHOLD$, $LAZYLOAD_FADE$).


Google fonts

- New feature: Added $GOOGLEFONTS_PREFIX$ site variable. This makes it possible to overwrite the 'http:' prefix. You can replace it with 'https:' or leave the value empty.


Form Wizard

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




- Improved: If 'Accept Charset' of a form is set to UTF-8 then mysql_set_charset('utf8') will be added to MySQL database code.


- New feature: Added PHP7 option in Page Properties->Miscellaneous->PHP version. This will make PHP mail compatible with PHP7. This affects forms and the login tools.



Editbox, TextArea

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


- New feature: Added "Auto focus' option.



- New feature: Adding padding.


- New feature: Added Focus state.

- New feature: Added "Auto focus' option.




- New feature: Added support for reCAPTCHA 2 (I'm not a robot).



Photo Gallery

- Improved: Gallery now uses CSS instead of tables.


- Improved: The gallery automatically uses in memory compression when large images are loaded. This improves the performance during design time.


- Improved: Transitions are now applied to individual images instead of the entire gallery. Great for implementing cool animated hover effects.


- New feature: Added 'Responsive' option for thumbnail size. When this option is selected the gallery can have a different 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' option (replaces the confusing 'cell spacing' option).


- New feature: Added the ability to set a description for images.


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



Related tutorial:



Online demo:




- New feature: 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!





- New feature: Add ‘Full width and floating’ option. This makes it possible to use the Carousel as part of a floating layout. For example, in combination with layout grids or floating layers.




Online demo:




Slide Show


- New feature: Slideshow can now be used as 'Random Image'. Set Type to 'Random' and 'Pause time' to '0'


- New feature: Added support for captions/titles


- New feature: Added "News Paper' animation.


Online demo: http://www.quickandeasywebbuilder.com/support/slideshow_newspaper.html


- New feature: Added ‘Full width’ option. Specifies whether the slideshow is full width (responsive) of its container (layout grid). If set to false, the slideshow uses the fixed size.

Also works for Conveyor Belt mode.


Note: This option is only available when the slideshow is part of a layout grid!



CSS3 Animations

- New feature: Added new CSS3 animations:


Online demo:




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


- New feature: Added 'Relative sizing' option to Floating layer.


- New feature: Added the ability to use a Layer, Layout Grid and Page Header/Footer as Bookmark. This can be useful for flexible/full width layouts. In the new 'Bookmark' property section you can set animation properties just like a regular bookmark!

- 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 Bootstrap modal layer support. Unlike the jQuery UI option this one is responsive! If specified, the title of the layer will be used in the header.




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


Related tutorial:




Login Tools

- New feature: 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.


- New feature: All input fields are now <label> tags (instead of standard text).


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



- New feature: Added 'padding' option to text input fields, button and title.


- New feature: Added 'alignment' to title.


- New feature: Added border-radius option to input fields and buttons.


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


- New feature: Added the ability to change the Login Admin title.

Rollover Image

- New feature: Added new animation: Newspaper


Online demo:




Rollover Text

- New feature: Added new animation: Fall In. Rotate and translate text on hover


- New feature: Added new animation: Revolving Door. 3D transform on hover


- New feature: Added new animation: Translate Left/Right. Translate and scale image to reveal text on hover


- New feature: Added new animation: Tunnel. Scale and fade image on hover


- New feature: Added new animation: Reveal. Pushes the image up or down to reveal the text. Supports easing.




Online demo:





- Removed: Options deprecated by YouTube (colors, theme and version) have been removed.

- New feature: 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.


Online demo:




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





- New feature: Added $VIMEO_PREFIX$ site variable. This makes it possible to overwrite the 'http:' prefix. You can replace it with 'https:' or leave the value empty.




jQuery General

- Upgraded to jQuery 1.12.3 and 2.2.3.


- 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 'flexible' mode. This option makes the date picker size flexible, so it can have different sizes in different breakpoints.




jQuery ProgressBar

- New feature: Add 'Indeterminate' option. Enable this option to display an (animated) indeterminate progress bar.


jQuery Tab

- New feature: Added new layout modes to give the tab widget a different appearance.






Error Reports

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



Smart Guides

- New feature: Added 'Smart Guides'. Smart guides are guidelines that appear when you move objects into alignment with each other. Smart guides also work when objects are aligned centered or in the center of the page.





- New feature: 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.



Online demo:








Other improvements


- New feature: Added 11 new gradient styles: Radial Top, Radial Right, Radial Bottom, Radial Left, Radial Top Left, Radial Top Right, Radial Bottom Left, Radial Bottom Right, Pipe Vertical, Pipe Horizontal and Shiny Glass.



- New feature: Added ‘Reset Position’ to context menu of Object Manager. This option can be useful in breakpoints when you have ‘lost’ an object because it’s outside the viewport. ‘Reset Position’ moves the object to the upper left corner of its container.





- Improved: The Linux version now also generates real transparent (alpha) images for shapes, polygons etc. This also affects Carousel navigation, menu bar arrows and other dynamically generated images.









Here are a few demos to give you an idea of the new possibilities:














More Features

If you are upgrading from a version prior to version 3 then also check out what we’ve added in version 2 and 3!







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

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


Other registered users of Quick ‘n Easy Web Builder will get a discount when upgrading to the new version.