Quick 'n Easy Web Builder 5.0 is a major new release with more than 100 new features and improvements and thousands of new options and possibilities!
What's new in Quick 'n Easy Web Builder 5.0?
General
- Improved: Using 'Center in page' on objects inside a layer/form will center the object inside its container.
- Improved: Drag selection in the workspace no longer includes lock objects. Note that you can stil select locked objects with click or select all.
- New feature: Added 'Center in page -> Both', to quickly center one or multiple objects in the center of the page.
- New feature: Added 'Make width same as page width', to quickly make the width of an object the same as the page width. This can be useful for full width layers/carousels etc.
- New feature: Added 'Display all objects in Links->Bookmark' option. When this option is enabled then the Bookmark dropdown menu in Links will display all objects (instead of just bookmarks and layers). This basically makes it possible to turn any object into a bookmark!
- New feature: Added 'Include partially selected objects in lasso selection' to Guide settings. This option specifies whether partially selected objects will be included in lasso (net) selection. If this option is disabled, then the entire object needs to be inside the lasso to be selected.
Blocks
- New feature: Version 5 introduces the "Blocks' toolbox. Blocks are building blocks trhat make it possible to quickly creates a website by dragging predefined blocks to the workspace. Blocks are basically just groups of standard WWB objects so once dragged to the page you can fully customize the behavior and apprance of the content.
WWB includes a dozen of standard blocks to help you get started, but you can also create your own blocks (by saving a group of objects as 'Block'), so you can reuse them in other pages or projects.
Open Graph Meta Tags
- New feature: Added support for Open Graph Meta Tags in Page Properties->Meta tags. These settings make it easy to add Open Graph meta tags to a page to enable it to be come a "rich" social object. For instance, Facebook uses this information to work out how to preview shared content in a user's Facebook profile..
The following properties are supported: og:url, og:title, og::description, og::image and og::type
https://developers.facebook.com/docs/sh ... ers#markup
Asset Manager
- New feature: Added the posibility to move orphan files to another folder (instead of just removing the files).
Object Manager
- New feature: Added 'Hide in other breakpoints' option. Use this option to hide the selected object in other breakpoints (but not in the current view) .
- New feature: Added 'Unhide in all breakpoints' option. Use this option to unhide the selected object in all breakpoints (including the current view) .
- New feature: Added 'Restore position' option. This can be used to restore the original position of the object (and make it the same as in the default view).
Error Reports
- New feature: Error Reports displays a warning when the page name is the same as the project name. because this may cause a conflict with style sheets.
- New feature: Error Reports detects missing fonts. If an object uses a font which not installed then an error message will be displayed.
- New feature: Added the posibility to hide warnings for specific objects via the context menu. Also an option 'Show hidden warnings' have been added to restore the warnings.
Global Replace
- Improved: Replacing URLs now includes support for tel, email, facetime, sms and skype links.
HTML
- Improved: Made beautify/minify options ASP compatible.
- New feature: Added 'CSS in media query' option. This make it possible to add breakpoint specific CSS styles. This can be useful if you need different styles in breakpoints.
HTML/CSS
- New feature: Added the ability to use semantic HTML5 tags. Tools->Options->HTML->Use HTML5 Semantic Tags. When this option is enabled WWB will automatically output semantic HTML5 tags instead of divs. For example page header <header> page footer <footer>, navigation <nav>.
- New feature: Added 'Move external CSS style sheets to the end of the page'. This is often recommended by Google PageSpeed Insights to improve the performance of the page. Please read the help for more details! Note however that this also may affect the way to page is rendered beucase styles are loaded after the contnet has been load, resulting in flicker. Also some scripot may bnot support this becuase they exccpet style to be between the head tags.
- New feature: Added 'CSS visibility property' (visibility vs display) HTML/CSS options. This option controls the way objects are hidden. When using 'visibility:hidden' hidden objects will not be visible but they still affect the layout (just like in previous versions of WWB). On the other hand 'display:none' removes the object from the layout so it no longer affects the size of the page. This can be useful when hiding objects that are not inside the page boundaries in breakpoints.
jQuery
- New feature: Added support for jQuery 3. This version promises to be slimmer and faster.
jQuery UI
- Improved: Upgraded to the latest version. All jQuery UI scripts are combined in one file (jquery-ui.min.js instead of jquery.ui.widget.min.js, jquery.ui.accordion.min.js, jquery.ui.effect.min.js etc). This reduces the number of generated files which may help speed up loading of your pages.
All internal scripts have been updated. If you have created custom theme you will need to upgrade them to make sure they work with the new version.
- New feature: A new jQuery UI theme ‘base’ has been added.
- New feature: Added the ability to customize colors of the jQuery UI widgets independently of the jQuery UI theme.
Carousel
- New feature: Added 'News Paper' and 'Flip Horizontal/Vertical' animations.
- New feature: Added 'CSS3 animation' option. Select animations created with the Animation Manager. A different animation can be selected for 'show' and 'hide' to create sophisticated animation effects.
- New feature: Added 'Full Page' support. An easy way to create fullscreen scrolling websites (also known as single page websites or onepage sites). This option uses the great 'fullPage.js' jQuery plugin.
Tabs
- New feature: Tabs can now be part of a layout grid!
- New feature: Added the ability to align the navigation tabs in the header.
- New feature: Added support for Bootstrap tabs.
- New feature: Added floating mode to Tabs. When this option is enabled objects inside the tabs float instead of having a fixed position. This is recommended for flexible layouts with layout grids.
Accordion
- New feature: Accordions can now be part of a layout grid!
- New feature: Added support for Bootstrap Accordion.
- New feature: Added floating mode to Accordion. When this option is enabled objects inside the panels float instead of having a fixed position. This is recommended for flexible layouts with layout grids.
jQuery Dialog
- Improved: The jQuery Dialog can now have sizes and different layouts in breakpoints.
Layer
- New feature: Added ‘Position children’ option. By default, child elements of the layer use absolute positions so you can place them anywhere you want. By using 'floating' mode the objects inside the layer will float instead of having a fixed position. This can be useful when using floating layers which are set to 'Relative horizontal sizing' to create fluid layouts.
- New feature: Added ‘100vh’ to floating mode options. This will set the height of the layer to 100% of the viewport. This can be useful to create floating layers with a relative horizontal size. For example, to create full height columns.
- New feature: Added background alpha support. This makes it possible to create semi transparent backgrounds without affecting the opacity of the child elements.
- New feature: Added background overlay option. This uses the specified background color (and alpha value) to add and an overlay to the background image.
- New feature: Added the ability to use a video as background. Supported are Youtube and Vimeo URLs. This is especially useful for full width/full screen layers.
- New feature: Added option to select semantic HTML5 tag instead of generic <div>. Available options: <article>, <aside>, <footer>, <header>, <nav>, <section>
YouTube
- New feature: Added 'Enable JS API' option. This option enables the player to be controlled via JavaScript Player API calls. Only works in modern browsers! http://caniuse.com/#search=postMessage
- New feature: Added support for YouTube events (play, pause, ended etc). Requires 'Enable JS API'.
- New feature: play, pause actions in events can now be used to control the YouTube video. Requires 'Enable JS API'.
Vimeo
- New feature: Added support for Vimeo events (play, pause, ended etc).
- New feature: play, pause actions in events can now be used to control the Vimeo video. Requires 'Enable JS API'.
SlideShow
- New feature: Added 'Flip Horizontal' and 'Flip Vertical' animations (uses CSS3 transforms).
- New feature: Added 'Fan' and 'Block Scale' animations.
- New feature: Added 'CSS3 animation' option. Select animations created with the Animation Manager. A different animation can be selected for 'show' and 'hide' to create sophisticated slideshow.
- New feature: Added Instagram integration. This makes it possible to feed the slideshow with images from your Instragram account.
Photo Gallery
- Improved: Now includes galleria 1.5.4, which makes it possible to use the lightbox/galleria in responsive layouts.
- New feature: The Photo Gallery uses <figure> and <figcaption> tags when ‘Use HTML5 Semantic Tags (in Tools->Options->HTML) is enabled.
- New feature: Added Instagram integration. This makes it possible to feed the photo gallery with images from your Instragram account.
Photo Collage
- New feature: Added 'Photo Collage' object. Introduces a cool new way to display your images. More than 30 layout variants are available.
The Photo collage object is flexible so it can be used in layout grids and responsive layouts. Also supports lightboxes, instragram integration, load animations and more.
RollOver Image
- New feature: Added 'Flip Horizontal' and 'Flip Vertical' animations (uses CSS3 transforms).
FontAwesome
- New feature: Added 'Publish as svg' option. This will output the icon as embedded SVG (scalable vector image) instead as font. This greatly reduces the overal size of the website if you only use a few fontawasome icons.
Material Icons
- New feature: Added support for Google's Material Design Icons(https://material.io/icons/). Adds more than 900 new icons. The Material Icon object supports the same featutes as FontAwesome.
Forms
- Improved: Maximum file size is now set in the script instead of using an hidden form field for better security.
- Improved: It is now also possible to use variables in the subject of the email message (PHP Mailer or rich text must be enabled).
- New feature: Added the ability to set ID property for hidden fields.
- New feature: Added option to include page name/refferer in form data.
- New feature: Added option to configure the auto responder email input field.
- New feature: Added 'Full Width' option to Editbox, TextArea, Combobox, Label and Button. This makes it possible to switch between block (100%) and inline mode (fixed width) when used in a Layout Grid.
- New feature: Added the ability to send form data to an email address based on the selection in a combobox. Users can select a 'department' from a dropdown menu, and have the email sent to just that department's email address.
Form Conditions and Calculations
- New feature: Added 'Conditions'. This makes it possible to show/hide/enable/disable other objects based on the value or selection of an form input field. For example you can disable the form's submit button until the user checks a box.
- New feature: Added the posibilty to do calculations in form fields. Calculations are available in the 'Conditions' section of input fields. They can be used to calculate a value based on values or selections of other input fields. For example to calculate the total price of an item in a webshop based on the selected options.
Conditions/calculations options are available for Editbox, TextArea, Combobox, Checkbox and Radio Button.
File Upload
- New feature: Added 'Accept multiple files' option. To select multiple files, hold down the CTRL or SHIFT key while selecting.
- New feature: It is now possible to customize the style of the File Upload object. The button and editbox each can have their own styling. This new behavior can be disabled with the 'use default browser styling' (This is enabled for older projects for backwards compatibility).
- New feature: Added 'Padding' option. Note: left padding will be used for the editbox and the right padding for the button.
- New feature: Added 'Place Holder' option. Specifies a short hint to help the user to fill out the input field.
- New feature: Added "Button text' option. This makes it possible to customize the text of the button.
Editbox/Text Area
- New feature: Added "Spellcheck' option. The HTML5 spellcheck attribute specifies whether the element is to have its spelling and grammar checked or not.
Checkbox/Radio Button
- New feature: It is now possible to customize the style (and size) of the Checkbox/Radio Button object to override the default browser appearance. This also make the Checkbox/Radio Button responsive so it can have a different size (and color) in breakpoints. This new behavior can be disabled with the 'use default browser styling' (This is enabled for older projects for backwards compatibility).
Login Tools
- New feature: Added 'Enable error reporting' to Login Admin for debugging purposes.
- New feature: Added 'checkbox' option to custom profile fields.
Layout Grid
- New feature: Added background overlay option. This uses the specified background color (and alpha value) to add and an overlay to the background image.
- New feature: Added the ability to use a video as background. Supported are Youtube and Vimeo URLs.
- New feature: Added 'Use Flexbox' option. When this option is enabled, the grid will use CSS flexbox layout. This results in cleaner code and also enables some extra features like vertical alignment and entire column will be filled with the background.
Note that this is a relative new CSS feature, it is not supported by older browsers (< IE11). http://caniuse.com/#feat=flexbox
- New feature: Different column widths in breakpoints
- New feature: Different column counts in breakpoint
- New feature: Added the ability to hide columns in breakpoints.
- New feature: Added 'overflow' option. This determines what happen when columns that do not fit in the current row. Overflow columns can be hidden, 100% or have custom value.
- New feature: Added vertical alignment option to columns. Note this only works when CSS flexbox is used!
- New feature: Added the ability to set the layout grid fixed to the top of the page.
Flex Container
- New feature: Add support for CSS flexbox! The flexbox container is a great new way to implement layouts.
Master Object/Page
- New feature: Master objects can now be used inside a Layout Grid. The object becomes flexible/floating when it's part of a layout grid. Note that the objects on a master page should also be floating for the best results.
Events
- New feature: Added 'CSS3 Animate' action. This will trigger a CSS3 animation from the animation manager. So it's no longer necesarry to manually create a seperate style for this (WWB will do this automatically).
- New feature: Added 'onscrollreveal', 'onscrollhide' and 'onscrollrevealpartial' events to most objects. These events were previous only available for the bookmark object. Note: these events do not work for hidden objects becuase if an object is hidden then it has an undefined position in the HTML document, therefor it's not possible to determine whether the object is inside the viewport.
CSS3 Animations and Transitions
- New feature: Added 10 new CSS3 animations to the Animation Manager: animate-rotate-in-left, animate-rotate-in-right, animate-rotate-out-left, animate-rotate-out-right, heartbeat-1, heartbeat-2, transform-peek, transform-scale-in, transform-scale-out, transform-shiver
- New feature: Added background, border (short hand), display and position properties to animatable properties. These may be useful for scroll transitions.
- New feature: Added scroll transitions. This allows you to animate CSS properties of objects depending on the horizontal scrollbar position. For example you can set the opacity (fading) of an object based on the scroll position. Of move/rotate/scale objects into place when it scrolls into view.
Image
- Improved: WWB now preserves the original filename when using filters (instead of generating a unique name).
- New feature: Added ‘Color overlay’ filter to the image object. Often used in websites to create a ‘dim’ effect.
Picture
- New feature: Add 'Picture' object. The HTML5 <picture> element is a container used to specify multiple images for different viewport or screen resolutions. The browser will choose the most suitable image according to the current layout of the page and the device it will be displayed on.
You can specify different images for breakpoints. It also supports high resolution displays using pixel density descriptors such as 1x, 1.5x, 2x, and 3x. For example you can include different versions of the image by using names like: filename@1.5x.png, filename@2x.png
The picture object supports rotation using standard CSS3 transforms. Plus expirimental support for CSS3 filters (blur, contrast, brightness, hue, saturation, negative, sepia, grayscale)
Rollover Layer
- New feature: Add 'RollOver Layer' object. A RollOver Layer works just like the RollOver image, but instead of just images you can now use any type of objects. In additional to fixed mode (where you can place obejct anywhere you want), the object also supports floating mode so it can be used in Layout grids.
Responsive Menu
- New feature: Added the possibility to set the menu alignment.
Breadcrumb Menu
- Improved: CSS3 Transitions are now applied to the menu items. For example, to rotate, scale or modify the style of an item on hover.
- New feature: Added the possibility to set the menu alignment.
- New feature: Added ‘Full Width’ property so the menu can be stretched to the full width of its container (when used inside a layout grid).
Line
- New feature: Added support for line styles: solid, dotted, dashed, double, groove, ridge.
Scale
- New feature: Added ‘Scale’ to the Arrange tools. This tool may be useful for optimizing the layout in breakpoints. Basically, it takes the size and position of the selected object(s) on the default view and scales it to the current breakpoint width. For example: let's say the default view is 960 pixels and you are now working in the 480 breakpoint. This makes the scale factor 2, so using the Scale tool will make the objects 50% smaller.
Publish
- New feature: Added ‘Make a backup of the project on the server' option to the publish dialog.
You can find more details and screenshots here:
http://www.quickandeasywebbuilder.com/new_features.html
Where can I download Quick 'n Easy Web Builder 5.0?
http://www.quickandeasywebbuilder.com/download.html
How can I buy Quick 'n Easy Web Builder 5.0?
http://www.quickandeasywebbuilder.com/purchase.html
How can I upgrade from a previous version?
http://www.quickandeasywebbuilder.com/howtoupgrade.html
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,
Pablo
Quick 'n Easy Web Builder 5.0 released!
Re: Quick 'n Easy Web Builder 5.0 released!
Note that existing customers will now get a 40% discount!
This is a limited time offer.
Please read this information for more details:
http://www.quickandeasywebbuilder.com/howtoupgrade.html
This is a limited time offer.
Please read this information for more details:
http://www.quickandeasywebbuilder.com/howtoupgrade.html
Re: Quick 'n Easy Web Builder 5.0 released!
Version 5 is now also available in the Mac App Store:
https://itunes.apple.com/us/app/quick-n ... 7307?mt=12
https://itunes.apple.com/us/app/quick-n ... 7307?mt=12