What is new in Quick ‘n Easy Web Builder 3.0?
This document provides a brief overview of what you can expect in this major new release. Quick ‘n Easy Web Builder 3.0 has more than 100 new features/improvements. Thousands of new options and possibilities! Here’s a list of some of these new features.
Responsive Web Design
With the increase in popularity of browsing on mobile phones and tablets it is becoming essential to create web sites that are optimized to the needs of these users. Previously you had to create different versions of the website and use scripts to redirect the visitor to the mobile version of the page. Quick ‘n Easy Web Builder 3 introduces 'Responsive Web Design' which allows you to create a single HTML page containing different variants of the layout, each optimized for specific device widths. Your website will dynamically respond to the screen size of the visitor and display the layout most appropriate to their device. These different variants are called 'breakpoints' and this concept is based on CSS3's media queries.
A breakpoint is separate 'view' of the page in Quick ‘n Easy Web Builder. A page can have multiple breakpoints, each one optimized for a specific screen width. For example, you can have the standard desktop layout, one for tablets (1024 px) and another one for mobile phones (320 px).
To add, edit or switch between breakpoints click the 'Manage Breakpoints' option in the Page menu.
You can also use the ‘Breakpoints’ toolbar at the bottom of the screen to switch between breakpoints . To go back to the default layout, select 'Default'.
CSS3 animations and transitions
- New feature: Added CSS3 animation and transition support!
Related tutorials:
http://www.quickandeasywebbuilder.com/animations.html
http://www.quickandeasywebbuilder.com/transitions.html
- New feature: Added Animation Manager. This can be used to define animation (with key frames) for CSS3 animations. With more than 90 predefined animations to get you started.
- New feature: Added support for animations and transitions in the Style Manager.
- New Feature: Added 'Animation timeline'. This can be used to display all animations on the page, so you can easily add, edit and remove animations.
- New Feature: Transform objects with animations and transitions (for example onmouseover): skew, translate, rotate, scale. flip etc.
Header / Footer
- New feature: Added Page Header object. An easy way to add a full width header to your website. Supports 'fixed' and 'fullscreen with animations' mode.
- New feature: Added Page Footer object. An easy way to add a full width footer to your website. Supports 'fixed' and 'fullscreen with animations' mode.
Timer Object
- New feature: Added 'Timer' object. Trigger actions based on timer events. For instance show or hide an object after X milliseconds. Timers can also start/stop other timers! All event actions are supported.
Wrapping Text
- New feature: Added 'Wrapping text' object. This object makes it possible to wrap text around objects!
Panel Menu
- New feature: Added 'Panel Menu'. A Panel Menu is initially invisible, but can slide from the right or left side of the page by clicking the menu button. Many modern web sites use this type menu.
Blog
- New feature: Added 'Blog' object. The Blog object provides an easy way to implement a basic blog on your website without special requirements of the web server.
General features
- New feature: The user interface was redesigned. It has now a more modern look with flat toolbars and new (flat) icons.
- New feature: Added page name to the statusbar, it also displays the current breakpoint (for RWD).
- New feature: JavaScript functions now always use an external (minified) file: qwb3.min.js
- New feature: Added 'Events' and 'Animations' buttons to toolbar for quick access to these features.
- New feature: Added a shortcut menu item to insert Google Analytics code in the <head> section of the page.
- New feature: Added 'Defaults' in Page Properties. Here you can set the default font (family/size/color) for new objects in the current page.
- New feature: Added support for background-size (CSS3) in for background images (include page background). This makes it possible to size/stretch background images in layers, forms, buttons etc. Supports contain, cover, pixels and percentages!
- New feature: Added 'Margin’ option to Image, Shape, Logo, RollOver, SlideShow and others. The margin clears an area around an element (outside the border). Unlike padding, the margin does not have a background color, and is completely transparent. This can useful for objects in wrapping text to add some spacing around objects.
- New feature: Included (optional) support for jQuery 2.0. This version of jQuery is faster and smaller, but does not support Internet Explorer 6, 7, or 8. jQuery 1.11 and 1.7.1 are also still supported.
Find and Replace
- New feature: Added 'Find and Replace' tool. This tool can be used to quickly change the color, font, url or filename for all objects (or a selection) on the page or entire website.
Publish
- New feature: Added "Publish files of modified objects only'. When this option is selected 'publish' will only upload the files of objects that have been modified.
For example you selected a different image. Then only this image will uploaded.
Links
- New feature: Added FaceTime link option. Launch the FaceTime app and initiate a call to the specified user.
- New feature: Added Phone Number link option. Call the specified number.
- New feature: Added SMS link option. Send an SMS.
- New feature: Added Skype link option. Launch the Skype app and initiate a call to the specified user.
Text
- New feature: Added Lorum Ipsum Text generator to the text object! Available in the 'Edit' menu and the context menu in text edit mode.
- New feature: Added new output format to text properties: 'Include line-height in text styles', in many cases this creates perfectly aligned text with a small code footprint;)
- New feature: Added support for 'text-shadow' in the Style Manager. This allows you to add shadows to text (in supported browsers). For performance reasons the text will not be rendered with shadow in design view. You must preview or publish the page!
YouTube
- New feature: Added 'Show Controls' option. Uncheck this to hide the player controls.
- New feature: Added 'Fill entire browser window' option to use the YouTube video as page background.
Vimeo
- New feature: Added 'Fill entire browser window' option to use the Vimeo video as page background.
Ready-to-use-JavaScripts
- New feature: Added predefined script for Google Maps.
- New feature: Added alignment (left/center/right) to all text based scripts in Ready-to-use-JavaScripts.
Forms
- New Feature: All PHP scripts now use MySQLi database functions. You can still use (deprecated) MySQL functions by selecting 'PHP4' in the page properties.
- New feature: Added support for PHP mailer in form processor. You can now select the mail engine 'default', 'mail', 'qmail', 'sendemail' and 'smtp'!
Events
- New feature: Added 'onanimationstart', 'onanimationend' and 'onanimationiteration' events. Can be used to trigger actions based on the animation state. Great for chaining animations!
- New feature: Added 'ontransitionend' event. Can be used to detect the end of a transition.
- New feature: Added 'Rotate' action to events. Now you can rotate any object (or even forms, layers, etc!)
- New feature: Added 'Angle' property to Animate in events. Rotate objects with animation!
- New feature: Added 'Toggle' event action. Useful to toggle the visible state (show/hide) on an object. Triggering the event again will restore the previous state. Support animations.
- New feature: Added 'Toggle Style' event action. Toggle between the current style and another style while animating the style changes. Triggering the event again will restore the previous style.
- New feature: Added 'Timer start' and 'Timer stop' event actions.
- New feature: Added events to jQuery Accordion and jQuery Tabs
- New feature: Added events to Carousel
Shapes
- New feature: Added more than 50 new shapes, including basic flow charts shapes.
Layer
- New feature: Added 'Anchored Layer' mode. This makes it possible to anchor one or more sides of the layer to the sides of the page (useful for strechable layers).
Related tutorial: http://www.quickandeasywebbuilder.com/anchored_layers.html
- New feature: Added 'Floating Layer' mode. This will make the layer 'float' instead of having a fixed position.
- New feature: Added 'Modal Layer' mode. This will position the layer on top of everything. Other items on the page will be disabled until you close the layer.
- New feature: Added 'Keep original position until layer is about to be hidden' to sticky layer.
- New feature: Added 'Panel Layer' option to Layer. A Panel Layer is initially invisible, but can slide from the right or left side of the page by using events (show/hide).
Slideshow
- Improved: The 'Blocks' effect has been redesign and now uses the standard fx engine of jQuery.
- New feature: Added 'Curtain' animation to Slideshow
- New feature: Added 'Fountain' animation to Slideshow
- New feature: Added 'Random Bars' animation to Slideshow
- New feature: Added 'Wave' animation to Slideshow
- New feature: Added 'Explode' animation to Slideshow
- New feature: Added 'Bounce' animation to Slideshow
- New feature: Added ‘Blast’ animation effect to slideshow.
- New feature: Added ‘Shuffle’ animation effect to slideshow.
- New feature: Added ‘Rotate’ animation effect to slideshow.
- New feature: Added ‘Rain’ animation effect to slideshow.
- New feature: Added ‘Swirl’ animation effect to slideshow.
- New feature: Added ‘Square’ animation effect to slideshow.
- New feature: Added ‘Bars' animation effect to slideshow.
- New feature: Added Random effect mode. If this mode is selected then each image will have a different animation.
- New feature: Added 'Count' option to Horizontal Bars/Vertical Bars/Curtain/Foutain/Random Bars/Wave animations. Specifies the number of bars that will be used for the effect.
- New feature: Added the ability to display navigation buttons on the slideshow (supports the same features as the Carousel object).
- New feature: Added 'full screen mode' to the Slide Show.
- New feature: Added support for the 'activate' event to SlideShow. This event will be triggered when another image becomes active. This can be useful to show/hide objects, start animations and timers or synchronize with objects.
Roll Over Image
- New feature: Added Flip animation (CSS3) to Roll Over Image!
- New feature: Added Bars (Horizontal/Vertical) animation.
- New feature: Added Blast animation.
- New feature: Added Blinds Horizontal/Vertical animation.
- New feature: Added Blocks animation.
- New feature: Added Clip Horizontal/Vertical animation.
- New feature: Added Drop animation.
- New feature: Added Fold animation.
- New feature: Added Puff animation.
- New feature: Added Rain animation.
- New feature: Added Rotate animation.
- New feature: Added Swirl animation.
- New feature: Added Squares animation.
- New feature: Added Track Mouse animation.
Rollover Text
- New feature: Added 'alignment' to rollover text.
- New feature: Added 'padding' property to rollover text (specifies padding from object's border)
- New feature: Added 'spacing' property to rollover text (specifies spacing between title, description and link)
- New feature: Added 6 amazing new CSS3 animations to Roll Over text. fly in, spin, zoom and more
jQuery Menu
- New feature: Added 'Add Divider' option to jQuery Menu (only works for vertical mode).
- New feature: Added 'Context Menu' option to jQuery Menu, makes it possible to create a popup menu on right click!
CSS Menu
- New feature: Added 'stretch' mode to CSS Menu. This will make the width of the buttons variable based on the (full) width of the menu.
- New feature: Added 'Responsive' layout mode to CSS Menu. If you select this option then the menu will automatically switch from horizontal to vertical mode if the screen width is smaller than 320 pixels. This can be useful when the CSS menu is used in Responsive Web Design.
Other Navigation
- New Feature: Added 'Use hover state style to indicate the current page' to Text Menu.
- New Feature: Added 'Use hover state style to indicate the current page' to Slide Menu.
- New Feature: Added 'Use active state style to indicate the current page' to Mega Menu.