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

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


New Icons

The toolbars, menus and toolbox have redesigned icons. The style is thin, lined & colored, inspired by the new icons introduced by Microsoft® Office 365® and 2019 suites.





macOS Dark Mode

- New feature: Added support for Dark Mode in macOS Mojave.





Shape Dividers

- New feature: Last year, we released the experimental ‘divider’ template, which turned out to be the most downloaded template to date. So, this year we decided to make it a standard feature! The new shape divider option is available for layers, layout grids and flex box containers. Shape dividers are SVG based shapes that can be used to separate the sections of a page.

There are more than 30 shapes you can choose from, but you can also add custom shape SVG files.  Shapes dividers can be added at the top or bottom (or both) of a layer.

The color specifies the color of the shape. The width specifies the width in percentages, this can be useful if you only want to display a smaller part of the shape, for example 200%, clips the left and right part of the shape. The height is in pixels.  Shapes can be flipped horizontally/vertically. This makes it possible to use shapes that were designed to be used at the top, also at the bottom (flip vertically). The arrangement property controls whether the shape will be displayed underneath the content or on top of content.



A few examples:



Online demo:







Unsplash Integration

- New feature: Browse thousands of free-to-use, high quality images from Unsplash directly within Quick ‘n Easy Web Builder.



Unsplash images can be inserted via the Insert Menu. The Unsplash selection dialog supports search and the ability to set the desired size.









- New feature: Toasts are lightweight notifications designed to mimic the push notifications that have been popularized by mobile and desktop operating systems. They can be displayed at page load or with delay. Multiple Toasts will automatically stack vertically.



The text can be edited just like standard text. So, the same formatting and edit tools are available, including styles, line spacing, letter spacing, bullets, find/replace, lorem ipsum, responsive fonts and link support.


Show Delay specifies the delay (in milliseconds) before the Toast is shown. Set to '-1' to initially hide the Toast, so you can control it via events (show/hide). Hide Delay, delays hiding the toast in milliseconds. Set to '0' to disable auto hide.


Tutorial: https://www.quickandeasywebbuilder.com/toasts.html





- New feature: Added the ability to add an animated preloader image to the page (in Page Properties). A preloader (also known as loading screen) is what you see on some sites before the main content of the web page is loaded.



Preloaders are simple (GIF) animations that are used to keep visitors entertained while server operations finish processing.

Quick ‘n Easy Web Builder can display a (semitransparent) overlay with animated gif when the website loading is in progress. It will disappear right after the page loads.


A collection of standard preloader images is included, but you can also add your own animations by adding a custom gif image to the 'preloader' folder.



Online demo:









Wrap Text

- New feature: Added support for floating layout, so the 'Wrap Text' can also be used inside a layout grid. This makes it possible to wrap text around images or other objects. Child elements can either float left or right.


Tutorial: https://www.quickandeasywebbuilder.com/wrap_text.html



- New feature: Added experimental support for CSS's shape-outside. This will wrap the text around the outline of a (transparent) image or shape, making it possible to wrap text around complex objects rather than simple rectangular boxes. Note that this will only work in modern browsers (Safari, Chrome, FireFox, not in IE or Edge!)




SVG Path Animation

- New feature: Shapes, Polygons, Curves, Scribble and Lines can now also be exported in SVG format.


- New feature: Added 'SVG path animation' option. This adds the ability to animate the border (stroke) of SVG shapes, polygon, curves, scribble, lines and makes it look like the shape is drawn on the web page in real-time;)


For complex shapes (with sub paths), it is possible to delay the rendering of sub paths for even cooler effects.




Tutorial: https://www.quickandeasywebbuilder.com/svg_animations.html




Card Container

- New feature: Added 'Card Container' object. This is a dedicated container for Cards to simplify laying out a series of cards.

The Card Container has the following layout options:




Online demo:






 - New feature: Added support for animations and transitions to card items. Each card item can have its own animations and transitions! Transitions can also be synchronized. This can be useful if you want to trigger all transitions at the same time when you move the mouse over the card instead of over each card item individually.



Online demo:




- New feature: Added 'Copy' button to quickly clone a card item.




- New feature: Added the ability to set the alignment for each text item individually, including justify.




 - New feature: Added the ability to add padding between border and image.



- New feature: Added the ability to add YouTube/Vimeo videos to Cards.


- New feature: Added 'HTML' card item type. This adds the ability to add custom HTML items to the card. For example, Google Maps, Facebook scripts etc.






Flex Grid

- Improved: The Flex Grid editor now displays a preview of the alignment for the selected area to get a better idea of how the settings will affect the layout.



- New feature: Added 'Easy Mode'. Many users have asked an easier way to control the flexgrid without having to deal with flexbox.

In "Easy Mode”, the flexgrid behaves just like the Layout grid.



Layout Grid

- New feature: Added 'Footer (fixed)' and 'Footer (floating)' mode. This makes it possible to use a layout grid as (fixed) footer. This also works with master pages.


Online demo:



- New feature: Added 'Sticky' mode. A sticky Layout Grid is treated as relatively positioned element until it reaches the top, at which point it is sticks to the top. This is standard HTML feature that only works in modern browsers (not in IE/Edge).



Online demo:





Flex Container

- New feature: Added 'Footer (fixed)' and 'Footer (floating)' mode. This makes it possible to use a Flex Container as (fixed) footer. This also works with master pages.


- New feature: Added 'Sticky' mode. A sticky Flex Container is treated as relatively positioned element until it reaches the top, at which point it is sticks to the top. This is a relative new HTML feature and requires a modern browser:





- Improved: The unofficial <marquee> tag has been replaced with CSS3 animations for better compatibility with (modern) browsers. W3C compliant!


- New feature: Added 'Star Wars' behavior. Implements Stars Wars-like 3D scrolling.





Style Manager

- New feature: Added 'Filter' properties. The filter property defines visual effects, like blur, brightness, contrast, grayscale, hue-rotate, invert, saturate and sepia. The effect will be applied to the object and all its children.





Online demo:




- New feature: Added 'Backdrop Filter' properties. The backdrop-filter property lets you apply graphical effects to the area behind an element.  Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.




This requires a modern browser!




Online demo:



- New feature: Added the ability to set the alpha value of the background and gradient color.






- New feature: Added 'Copy Style' and Paste Style' command to object's context menu. This make it possible to quickly copy style properties to multiple objects.







- New feature: Added 'Facebook App ID' property (fb:app_id) to Open Graph Meta Tags. Facebook App ID tags lets Facebook know the identify of your site, which provides additional benefits like social analytics, comments moderation and authentication capabilities to your site. More info: https://developers.facebook.com/docs/sharing/webmasters#markup




- Improved: 'Disable scroll transitions on small screens' in Page Properties now also disables the parallax effect for all layers/layout grids.




- New feature: Added 'Canonical URL' property. If you have different pages with similar content (for example, a page with both a mobile and a desktop version), Google sees these as duplicate versions of the same page. Google will choose one URL as the canonical version and crawl that, and all other URLs will be considered duplicate URLs and crawled less often.

More information: https://support.google.com/webmasters/answer/139066?hl=en



- New feature: Added 'hreflang' configuration. The hreflang attribute tells Google which language you are using on a specific page, so the search engine can serve that result to users searching in that language. The links will also be added to the site map.

More information: https://support.google.com/webmasters/answer/189077?hl=en




Web Icons

- New feature: Added the ability to add 32x32 and 64x64 favorite icons to support modern browsers. These icons are in standard PNG format.



- New feature: Added the ability to configure multiple Apple Touch Icons to target different devices.


Similar to the Favicon, the Apple Touch Icon is a file used for a web page icon on the Apple iPhone, iPod Touch, and iPad. When the user bookmarks the web page or adds the page to their home screen, this icon is used. Apple Touch Icons are also supported by most Android devices. Unfortunately, different devices require different image sizes. So, that is why we have now added the ability to configure multiple sizes.




Background Properties

 - New feature: Added new background repeat option: space. The background-image is repeated as much as possible without clipping. The first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images.



- New feature: Added new background repeat option: round. The background-image is repeated and squished or stretched to fill the space (no gaps).





- New feature: Added the ability to disable background image rendering in the workspace (View->Render Background Image). This will improve the overall performance of the application during design time when using large background images. This does not affect the published page.




- New feature: Added "Open the most recent used page of the project" option. When loading the project, this will open the page that was active when you last saved the project.




- New feature: Added 'AutoSave' option. This automatically saves the active project at the specified interval.




- New feature: Added 'Use grayscale images in toolbars' option.  




Responsive Web Design

- New feature: Added 'Automatically scale new objects in other breakpoints' option.

(Tools -> Options -> General)

Normally when you insert a new object, it will be inserted at the same position and with the same size as the default view.  The new option 'Automatically scale new objects in other breakpoints' is enabled, new objects will automatically scale and reposition in other breakpoints relative to the breakpoint size. It will also scale the font size of some objects when possible. This may speed of the implementation of (fixed) responsive layouts.



- Improved: The option "Include min-width in CSS3 media queries " has been replaced with “Activate breakpoints when browser window is smaller than the device width” and “Activate breakpoints when browser window is larger than the device width” to make the functionality clearer. Also, ‘max-width’ has been renamed to ‘device width’.



Object Manager

- New feature: Added 'Assets Folder' property (context menu). This adds the ability to specify a different output folder per object! For example, set the images folder for one object (gallery) to a different folder. This overrides the global publish settings.




- New feature: Added the possibility to use wildcards in Publish File types

(Tools->Options->Publish). This makes it possible to publish specific files (based on the filename, in addition to file extensions) to a different folder.



- Improved: Publish File types are now saved in the project file so they can be different for each project.




- Improved: Added 'Preview current page' option in addition to 'Preview entire website', so you can easily toggle between the two preview modes.




- New feature: Added 'self' target. When you select this as the target then QWB will automatically use the ID of the current object. This may be useful when you copy the object, so you do not have to manually edit the 'self' events.



- New feature: Added 'enable' and ‘disable’ actions. This can be used to disable/enable a form elements (button, checkbox, radio button, editbox, combobox, textarea).




Panel Menu

- New feature: Added Link transitions. This adds the ability to animate the background or border of the menu items. Includes 18 transition effects: fade, slide, scale, rotate, underline, overline etc.



Online demo:





CSS Menu

- New feature: Added Link transitions (main and sub items). This adds the ability to animate the background or border of the menu items. Includes 18 transition effects: fade, slide, scale, rotate, underline, overline etc.


Online demo:






- Improved: Using ellipse ("...") as text will disable the link.



- New feature: Added the possibility to display ellipses when synchronized with the Site Manager. Set 'Start at' to -1. Visible items specify how many adjacent pages should be shown on each side of the current page.



CSS Animations/transitions

- New feature: Added 24 new CSS easing (timing) functions, inspired by jQuery UI:
ease-in-quad, ease-out-quad, ease-in-out-quad, ease-in-cubic, ease-out-cubic, ease-in-out-cubic, ease-in-quart, ease-out-quart, ease-in-out-quart, ease-in-quint, ease-out-quint, ease-in-out-quint, ease-in-sine, ease-out-sine, ease-in-out-sine, ease-in-expo, ease-out-expo, ease-in-out-expo, ease-in-circ, ease-out-circ, ease-in-out-circ, ease-in-back, ease-out-back, ease-in-out-back



- New feature: Added 8 new animations: flip-in, flip-out, fold, unfold, turbine-in, turbine-out, swoop-in, swoop-out



Online demo:



Inline Frame

- New feature: Added "Safari Mobile fix" option. This implements a workaround for inline frames ignoring the specified height on the iPhone/iPad.




- New feature: Added horizontal accordion mode.




- New feature: Added 'Rotate' mode. This enables automatic cycle through panels with configurable duration.



- New feature: Added ‘Active panel option. This specifies the panel that will be initially displayed. Can be set to 'false' to display none at start (in combination with ‘collapsible’).




- New feature: Added ‘Active tab’ option. This specifies the tab that will be initially displayed. Can be set to 'false' to display none at start (in combination with ‘collapsible’).



- New feature: Added 'Rotate' mode. This enables automatic cycle through tabs with configurable duration.




- New feature: Added "Redirect to previous page". When this option is enabled, the user will be redirected to the previous page after successful login.




Sign Up / Password Recovery

- New feature: Added PHP Mailer support with SMTP authentication.




- New feature: Added 'html overlay' to watermark options. This adds a text overlay to the image (instead of merging the text with the image). This provides a quick way to add text on top of an image in floating layouts. Also supports hover only, which displays the text on mouse over.




Online demo:



Photo Collage

- New feature: Added 6 new animations: move up, fall, fly, flip, helix, popup



Online demo:



- New feature: Added "Lazy Load“ option. This implements ‘onscrollreveal’ functionality, so the animations will start when the gallery scrolls into the viewport.



Rollover Text

- Improved: All animations now support easing (including the CSS based animations).


- Improved: New lines in description are converted to line breaks <br>.


- New feature: Added 'Vertical alignment' for use in combination with position -> full.



- New feature: Added the ability to set background color, border and padding of the link, so you can make it look like a button.



- New feature: Added 14 new animations: lines (horizontal & vertical), flip (horizontal & vertical), flip, 3d flip (horizontal & vertical), 3d carousel (horizontal & vertical), box (move, zoom, scale).





Online demo:



Lazy Load

(Note: lazy load is available for images, rollover image, rollover text)

- New feature: $LAZYLOAD_EFFECT$ site variable. Adds the ability to set an animation for lazy load: blind, bounce, drop, fade, fold, pulsate, puff, scale, shake, slide


- New feature: $LAZYLOAD_DURATION$" site variable. Specifies the duration of the animation.





- New feature: Added 'Image Accordion' mode. Implements a horizontal image accordion, using CSS only. With animation and caption support.



Online demo:



- New feature: Added 'Fullscreen background' mode.

Enable this mode to create a full screen background slideshow. The images will cover the entire viewport. The slideshow will be fixed at the background, so it will not scroll with the rest of the content. Full screen background uses CSS3 animations, no JavaScript.


- New feature: Added 'Image Carousel' mode.

If this mode is selected multiple images can be displayed per slide. Bootstrap's (responsive) Carousel plugin will be used instead of Web Builder's own script.


- New feature: The 'Image Accordion', ‘Image Carousel’ and ‘Conveyer Belt’ have their own icons in the toolbox for a quicker way to add these features to web pages.




- New feature: Added 'Pause cycling on mouse enter' option. When enabled, this pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.



- New feature: Added new built-in navigation large arrows. To use the new arrows, enter '{' for previous and '}' for next in the filename fields.




- New feature: Added 'Fade' transition (in addition to slide) to Bootstrap Carousel. Note: all other transitions are not supported by Bootstrap!


- New feature: Added touch support to Bootstrap Carousel.




- New feature: Added "Create a responsive form using layout grids" option to the Form Wizard. The Form Wizard can now create flexible/responsive forms. The option will automatically be selected when the page already contains layout grids.



- New feature: Added 'Spacing' option to the Form Wizard. This sets the spacing between the controls of the created form.



- New feature: Added the ability to set a Dialog (jQuery UI or Bootstrap) as form target. This makes it possible to display the success or error page in a popup. Add a dialog to the page and select the ID of the Dialog in the form's target property. All the necessary code will be generated automatically!



Online Demo:






- New feature: Added new site variables to customize form error messages: $FORMERROR_EMAIL$, $FORMERROR_URL$, $FORMERROR_FILESIZE$



- New feature: Added 'Do not allow URLs in form data' option. This option may help to prevent spam by blocking messages that include links.



- New feature: Added the ability to configure the ‘From name’ for the email message. It is also possible to use a PHP variable. For example, S_POST[‘name’] where ‘name’ is the name of the input field.


- New feature: Added the ability to configure the ‘Reply To’ for the email message.

'Reply to' can be used to specify an alternative reply address. 'Reply To' can be a fixed email address 'yourname@email.com' or a PHP variable: $_POST['email'].





- New feature: Added support for reCAPTCHA v3.


reCAPTCHA has become one of the most popular solutions when it comes to preventing spam contact form submissions. reCAPTCHA v3 aims to provide the same spam-filtering capabilities as previous versions, while also staying out of the way of the user. It does so by tracking the activities of the user and assigning a score. Based on this score you can block the submission of the form or allow it to go through.


More information:






Editbox, Textarea, Checkbox, Radio Button, File Upload

- New feature: Added Bootstrap-like input validation.




- New feature: Added 'HTML5' validation. For this to work, the value of the first item should be empty.



- New feature: Added Bootstrap-like validation.



Online demo:




- New feature: Added 'Padding' property to set the spacing around the text.



- New feature: Added 'Open' and 'Close' events. The 'Open' event is fired when the dialog has been made visible to the user. The 'Close' event is fired when the modal has finished being hidden from the user.



- New feature: Bootstrap dialog - Added support for horizontal and vertical alignment.



- New feature: The Dialog can now be used as a form target. This makes it possible to display the success or error page in a popup.



- New feature: Added 'lightbox' mode. This makes it possible to display the content of the layer in a lightbox. The lightbox can be opened/closed via events (show/hide). Supported lightboxes: fancybox, magnificpopup, colorbox, lightcase, prettyphoto, swipebox, tosrus, venobox.




Online demo:





- New feature: Added "Flip Switch" object. A "Flip Switch" (also known as Toggle switch) can be used as alternative for a checkbox. Inspired by the iPhone checkbox. It is possible to use different colors (text/background/border) for checked/unchecked, add animations, conditions and events.



Online demo:





- New feature: Added the ability to use the (form) button as a link. Although the button is mainly for use with Forms, many users have requested this feature, so now it's (finally) possible.




- New feature: Added 'full width' option. When the HTML object is used in a layout grid, the div container can now be edge-to-edge.






- New feature: Added 'Count Up' script. A simple counter that starts counting when the object scrolls into view.


Online demo: https://quickandeasywebbuilder.com/support/qwb7tryouts/scripts.html



- New feature: Added 'Circular Text' script. Animated text wrapped around a circle.


Online demo: https://quickandeasywebbuilder.com/support/qwb7tryouts/scripts.html


- New feature: Added 'Bubble Text' script. Bubbling Text Effect.

Online demo: https://quickandeasywebbuilder.com/support/qwb7tryouts/scripts.html



- Improved: Added 'size' property to Facebook Like Button script.


- New feature: Added 'Facebook Save Button' script. The Save button lets people save items or services to a private list on Facebook or share it with friends.



- New feature: Added 'Facebook Share Button' script. The Share button lets people add a personalized message to links before sharing on their timeline, in groups, or to their friends via a Facebook Message.



Blog / Article

- New feature: Added 'Timeline' layout. This implements a simple vertical timeline.






Icon Libraries

- New feature: Added support for 7 new icon libraries:


Microsoft Fabric Icons


Map Icons



Weather Icons






Payment Webfont



Ico Font



Captain Icon




The icon fonts can be downloaded here:






Added 18 new templates to demonstrate some of the new features.



You can download the new templates here:




New tutorials










More Features

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