Page 1 of 1

Quick 'n Easy Web Builder 7.0 released!

Posted: Mon Sep 09, 2019 10:16 am
by Pablo
Quick 'n Easy Web Builder 7.0 is a major new release with more than 100 new features and improvements and thousands of new options and possibilities!

You can find more details and screenshots here:

What's new in Quick 'n Easy Web Builder 7.0?

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

Shape Dividers
- Added Shape divider to layer, layout grid and flex box container. Shape dividers are SVG based shapes that can be used to separate the sections of a page.
There are more than a dozens shapes you can choose from, but you can also add custom shape SVG files.

Unsplash Integration
- Browse thousands of free-to-use, high quality images from Unsplash directly within WYSIWYG Web Builder.

macOS Dark Mode
- Added support for Dark Mode in macOS Mojave.

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

- Added the ability to an animated preloader image to the page (in Page Properties). 10 (gif) animation are included, but you can also add use own images.
A preloader (alos 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.

Wrap Text
- Added support for floating layout, so the 'Wrap Text' can 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.
- 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, Chome, FireFox, not in IE or Edge!)

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

- Added 'Copy' button to quickly clone a card item.
- Added the ability to set the alignment for each text item indivually, including justify.
- Added the ability to add YouTube/Vimeo videos to Cards.
- Added 'HTML' card item type. This adds the ability to add custom HTML items to the card. For example, Google Maps, Facebook scripts etc.
- Added the ability to add padding between border and image of a card item.
- Added support for animations and transitions to card items. Each card item can have its own animations and transitions! Transitions can also be synhronized. This can be useful if you want to trigger all transtions at the same time when you move the mouse over the card instead of over each card item individually.

Flex Grid
- 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.
- The Flex Grid editor now displays a preview of the alignment for the selected area to get a better idea of result.

Layout Grid
- 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.
- 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).

Flex Container
- 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.
- 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:

- The unofficial <marquee> tag has been replaced with CSS3 animations for better compatibility with (modern) browsers. W3C compliant!
- Added 'star wars' behavior. Implements Stars Wars-like 3D scrolling.

Shape / Polygon / Curve / Scribble / Line
- Shapes can now also be exported in SVG format.
- Added 'SVG path animation' option. This adds the ability to animate the border (stroke) of SVG shapes, textart, clipart. This makes it look like the shape/text is drawn on the web page in real-time;)

- Added 'Copy Style' and Paste Style' command to object's context menu. This make it possible to quickly copy style properties to multiple objects (in addition to the format painter).

Style Manager
- 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 obejcty and all its children.
- 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.
- Added the ability to set the alpha value of the background and gradient color.

- 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.
- 'Disable scroll transitions on small screens' in Page Properties now also disables parallax effect.

- 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: ... 9066?hl=en
- 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: ... 9077?hl=en

Web Icons
- Added the ability to add 32x32 and 64x64 favorite icons to support modern browsers. These icons are in standard PNG format.
- Added the ability to configure multiple Apple Touch Icons to target different devices.

- 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.
- Added 'AutoSave' option. This automatically saves the active project at the specified interval.
- 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.

Response Web Design
- 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.
- The option "Include min-width in CSS3 media queries " has been replace 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 more clear. Also, ‘max-width’ has been renamed to ‘device width’.

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

- 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.
- Publish File types are now saved in the project file so they can be different for each project.

- Added 'Preview current page' option in addition to 'Preview entire website'.

- Added 'self' target. When you select this as the target then WWB 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.
- Added 'enable' and ‘disable’ actions. This can be used to disable/enable a form elements (button, checkbox, radio button, editbox, combobox, textarea).

Panel Menu
- 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.
- Added the ability to configure the colors of the button separately from the menu items.

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

- Using ellipse ("...") as text will disable the link.
- Added the possibility to display ellipses when synchronized with the Site Manager. Set 'Start at' to -1. Visible items specifies how many adjacent pages should be shown on each side of the current page.

CSS Animations/transitions
- Added 24 new easing 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
- Added 8 new animations: flip-in, flip-out, fold, unfold, turbine-in, turbine-out, swoop-in, swoop-out

Inline Frame
- Added "Enable Safari Mobile fix" option. This implements a workaround for inline frames ignoring the specified height on the iPhone/iPad.

- 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
- Added PHP Mailer support with SMTP authentication.

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

Background Properties
- 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, andwhitespace is distributed evenly between the images.
- Added new background repeat option: round. The background-image is repeated and squished or stretched to fill the space (no gaps).

Photo Collage
- Added 6 new animations: move up, fall, fly, flip, helix, popup

Lazy Load
(Note: lazy load is available for images, photo gallery, rollover image, rollover text)
- $LAZYLOAD_EFFECT$" site variable. Adds the ability to set an animation for lazy load: blind, bounce, drop, fade, fold, pulsate, puff, scale, shake, slide
- $LAZYLOAD_DURATION$" site variable. Specifies the duration of the animation.

- Added 'Fullscreen background' mode.
- Added 'Image Carousel' mode.
- Added 'Image Accordion' mode. Implements a horizontal image accordion, using CSS only. With animation and caption support. The 'Image Accordion' also has its own icon in toolbox for quick access.

- Added 'Pause cycling on mouse enter' option. If enabled this pauses the cycling of the carousel on mouseenter and resumes the cycling of the carousel on mouseleave.
- Added 'Fade' transition (in addition to slide) to Bootstrap Carousel. Note: all other transitions are not supported by Bootstrap!
- Added touch support to Bootstrap Carousel.
- Added new built-in navigation large arrows. To use the new arrows, enter '{' for previous and '}' for next in the filename fields.
- Bootstrap carousel - Upgraded to Bootstrap 4.

- 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 if the page already contains layout grids.
- Added 'Spacing' option to the Form Wizard. This set the spacing between the controls of the created form.
- 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!
- Added new site variables to customize form error messages: $FORMERROR_EMAIL$, $FORMERROR_URL$, $FORMERROR_FILESIZE$
- Added 'Do not allow URLs in form data' option. This option may help to prevent spam by blocking messages that include links.
- 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.
- 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 '' or a PHP variable: $_POST['email'].

Editbox, Textarea, Checkbox, Radio Button, File Upload
- Added Bootstrap-like input validation. Note: for checkbox, Radio Button, File Upload 'use default browser style' should be unchecked!

- Added 'HTML5' validation. For this to work, the value of the first item should be empty.
- Added Bootstrap-like validation.

- Added support for reCAPTCHA v3.

- 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.
- Bootstrap dialog - Upgraded to Bootstrap 4.
- Bootstrap dialog - Added support for horizontal and vertical alignment.

- Added horizontal accordion mode!
- Added 'Rotate' mode. This enables automatic cycle through panels with configurable duration.
- 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’).

- Added 'Rotate' mode. This enables automatic cycle through tabs with configurable duration.
- 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’).

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

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

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

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

Rollover Text
- All animations now support easing (including the CSS based animations).
- New lines in description are converted to line breaks <br>.
- Added the ability to set background color, border and padding of the link, so you can make it looks like a button.
- Added 'Vertical alignment' property for use in combination with position -> full.
- Added 14 new animations: lines (horizontal & vertical), flip (horizontal & vertical), flip, 3d flip (horizontal & vertical), 3d carousel (horizontal & vertical), box (move, zoom, scale)

- Added 'size' property to Facebook Like Button script.
- Added 'Count Up' script. A simple counter that starts counting when the object scrolls into view.
- Added 'Circular Text' script. Animated text wrapped around a circle.
- Added 'Bubble Text' script. Bubbling Text Effect.
- 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.
- 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
- Added 'Timeline' layout. This implements a simple vertical timeline.

Horizontal Line
- Added 'alpha' property to set the transparency of the line.

Icon Libraries
- Added support for 7 new icon libraries:
- Microsoft Fabric Icons, ... cons#icons
- Map Icons,
- Weather Icons,
- Devicon,
- Payment Webfont,
- Ico Font,
- Captain Icon,

- Added 18 new (free) templates to demonstrate some of the new features.

New tutorials

You can find more details and screenshots here:

Where can I download Quick 'n Easy Web Builder 7.0?

How can I buy Quick 'n Easy Web Builder 7.0?

How can I upgrade from a previous version?

Note that existing customers will now get a 50% discount!!! This is a limited time offer.

Have fun with this new version!
I'm sure there will be minor issues in the first few days, but we will try to fix them a.s.a.p.

Thank you for supporting Quick 'n Easy Web Builder,

Quick 'n Easy Web Builder 7.0 released!

Posted: Tue Sep 10, 2019 8:38 pm
by Pablo
Version 7 is now also available in the Mac App Store: ... 1479404851

Quick 'n Easy Web Builder 7.0 released!

Posted: Sun Sep 15, 2019 11:46 am
by Pablo
Version 7.0.1 update
- Fixed: Issue with image rendering on master page.
- Fixed: Issue with master page when switching between breakpoints.

Version 7.0.2 update
- Fixed: Issue with font weight in Text object.

Version 7.0.3 update
- Fixed: Issue with editing text on Retina display (Mac Only).