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

Quick ‘n Easy Web Builder 8 has more than 150 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 feature: Added Pixabay integration. Browse thousands of free-to-use, high quality images and videos from Pixabay directly within Quick ‘n Easy Web Builder.



Online tutorial:




Morphing Shape

- New feature: Added 'Morphing Shape' object. Smoothly morph two or more shapes to create unique animations on your website. All built-in shapes, clipart and icon library are supported. You can even morph between icons of different libraries.

Animations can be triggered automatically (slideshow), on hover, on scroll with anchors or based on the current scroll position (continuous).








Online tutorial:




Snap Scroll

- New feature: Added 'Snap Scroll' object. Snap Scroll enhances one page scrolling website experience by providing snapping behavior as the user scrolls up or down the page. It also adds pagination dots with hover titles to the page for easy navigation and displaying the currently active section.




Online tutorial:



 Motion Effects and Entrance Animations

- New feature: Motion Effects introduce a quicker and easier way to implement scroll effects and entrance animations. It provides a simplified interface without having to deal with events and transitions.





Online tutorial: https://www.quickandeasywebbuilder.com/motion_effects.html

Cache Busting

- New feature: Added ‘Cache Busting’ option for external CSS and JS files.


To speed up load times, Web browsers are designed to cache CSS and JS files. The cached files are stored on the visitor’s computer, so the next time they visit a site, these files will be loaded faster. However, this may cause issues if you have made changes to the website but the browser still loads the previous (cached) version of the files. When cache busting is enabled, unique suffixes will be added to the file paths of the CSS and JS files. This forces the browser to re-load the files from the server.





HTML object

- New feature: Added 'Snippets' functionality to the HTML object to quickly insert pre-defined HTML blocks. The list is customizable, so you can define your own snippets.


Editable Content

- New feature: Added 'Editable Content' and 'Editable Content Admin'. These new CMS-like tools were designed as a simple and subscription-free alternative for services like Cushy CMS and Surreal CMS. Editable Content can be used to define one or more editable sections on the page. These sections can be modified online with the 'Editable Content Admin' tool. Multiple sections can be added per page. No database setup is required, it uses flat file storage (no mySQL). The page with editable sections does not need to be PHP, the content is dynamically loaded via javascript/ajax. 'Editable Content Admin' works with all several popular editors, like tinyMCS and summernote.


Object overview:

Content editor:


Online tutorial:





- New feature: Added 16 new line styles: arrow, cross, chevron, curl, curve, diamond, heart, square, stars, wave, zigzag and more. The new 'Stretch' property specifies horizontal scaling (in percentages) of the pattern.



- New feature: Added the ability to add text to the line.



- New feature: Added the ability to add an icon to the line.


Content Management System

- New feature: Quick 'n Easy Web Builder now has a built-in Content Management System to allow basic online content editing (requires PHP/mySQL).


The CMS has several individual 'design blocks' to give you lots of control over the layout, so you can easily integrate the tools into your existing layouts.


Online tutorial: https://www.quickandeasywebbuilder.com/cms_tools.html

- New feature:
Added Content Management System adminstrator Panel to add/edit/copy and remove pages. The administrator panel supports several popular editors like CKEditor, TinyMCE, CLEditor, summernote and more. It also has a simply built-in editor. You can make hide pages from the menu structure which currently under construction.


- New feature: Added "CMS View" object, which is a place holder for the online content.


- New feature: Added "CMS Menu" object, which can be used to navigate between online pages. The menu has many customizable options.


- New feature: Added "CMS Search" object, which can be used to search online content.


- New feature: Added "CMS Label" object, this can be used to display the title of the page, the creation date, author, page views etc. anywhere on the page.


- New feature: The CMS supports (optional) AJAX to allow the user to quickly navigate between pages without have to reload the whole page.


- New feature: Added "CMS Card" object. This is an extended version of the Card object which can be used as part of the CMS tools. Cards are a quick and easy way display information in various ways on a website. The layout of Cards is flexible so they are great for use in responsive websites. With the new “CMS Card” object, you can display dynamic data from the CMS database in a card layout.  Variables are used to indicate which data you want to display. Variables can be used anywhere in the card: header, footer, text, buttons, and even in videos.  For example, you could use the ‘extra data’ field of the CMS as the URL of a YouTube video. Each card on a page can display the content of a different CMS article.


- New feature: The CMS supports external pages, so you can mix online content with standard pages. Or even pages from other websites.


- New feature: The CMS has plugin support, for example: user manager, comments, discussion, downloads, file manager, form, guestbook, photo album, tell-a-friend, blog etc. The plugins are standard PHP scripts so advanced users can modify the behavior if needed.





Online tutorial:







- New feature: Added 28 gradient styles to page style properties. The output will be a full-size background gradient using CSS (instead of images, like in previous versions). For backward compatibility, 'horizontal' and 'vertical' options (with image output) are still available.



- New feature: Added the ability to disable CSS animations and transitions for smaller screens.


Arrange Toolbar

- New feature: Added a new toolbar for quick access to the arrange tools.

The arrange toolbar includes quick links for alignment, spacing, sizing, arrange, lock/unlock and flexbox properties.




The toolbar can be enabled via Menu -> View -> Arrange toolbar

 Photo Gallery

- New feature: Added Filter bar functionality. This enables a filterable portfolio-style gallery of images. Assign labels to images so users can choose which images will be displayed. The filter bar has many styling options and the transition between categories can be animated.


Online demo:









- New feature: Added 'on hover (full)' option to display full size text overlay on images.




Online demo:



- New feature: Added support for “Unite Gallery”. A responsive gallery with many different styles, like carousel, grid, nested tiles and justified tiles.






Online demo:



- New feature: Added support for lc_lightbox. LC Lightbox is a modern lightbox focused on contents which is responsive/adaptive and support for thumbnail navigation, slideshow, title, description etc.





- New feature: Added support for hover animations for text overlay. More than 20 animations are available: box, fade, slide, spin, translate, zoom etc.


- Improved: on hover now uses CSS instead of jQuery.


- New feature: Added support for Strip lightbox.

Strip is an unobtrusive responsive lightbox, which only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience.






- New feature: Added 'Ken Burns' mode. This is a lightweight solution using CSS animations to display a slideshow of images with the Ken Burns effect.



Online demo:




- New feature: Added support for lc_lightbox.




Online demo:



- New feature: Added support for Strip lightbox. See ‘Photo Gallery’.



- New feature: Added the ability to set the background color for watermark text. Also added padding for controlling the spacing around the text.





- New feature: Added 'full width' option to horizontal alignment.


Rollover Image

- New feature: Added support for borders.



- New feature: Added more than 25 CSS animations: move, flip, fold, cube, tilt etc.



Online demo:



- New feature: Added the ability to trigger the rollover image on click instead of hover.



- Improved: Fade and zoom animations now use CSS transitions instead of jQuery.


Shape Dividers

- New feature: Added 'Entrance Animation' option. This will animate the divider when it scrolls into the viewport.



Online demo:




- New feature: Added 2 animated wave dividers. For cool dynamic wave effects!



Online demo:



- New feature: Added 15 new dividers: lowland, wave1, wave2, curve4, skyline, graphs (4x), ramp, ramp 3d, slant mixed, pyramid 3d, water 3d, arrow 3d.




SVG Animation

- New feature: Added 'Animate Fill' option. This will hide the fill (background) of the shape until the animation of the stroke is complete.



Online demo:



- New feature: Added 'manual' trigger mode. The SVG animation can now be controlled via events: 'media play' and 'media stop'. For example, to start the animation when a button is clicked or a Carousel slide becomes active.






- New feature: Added support for hCAPTCHA. hCaptcha is a free, private and secure CAPTCHA service that helps protect your forms against spam which works along similar lines to Google’s version but offers more methods of identifying and blocking bots.




- New feature: $CAPTCHA_ERROR$ site variable. This can be used to specify a custom captcha error message.




- New feature: Normally, when a checkbox or flipswitch is unchecked then the browser will not send the value to the server. In QWB8, you can now also set a value for the ‘OFF’ state. You can set the OFF value, by using two values separated by a pipe-symbol. For example: ON | OFF



- Improved: Added support for multiple select combobox values in the MySQL script.


- Improved: The built-in form processor script can now handle multiple file uploads in combination with File Upload -> multiple.






- New feature: Added ‘Steps’ mode. This implements a simple 'stepper' widget. This may be useful for registration forms, payment gateways or tutorials with steps.




Online demo:


- New feature: Added the ability to open a specific tab via bookmarks (URL hash).




- New feature: Added the ability to add a description and icons to tabs.




- Improved: Upgraded HTML/CSS/JS to Bootstrap 4.


- New feature: Added the ability to use icons in the header (font awesome, material icons etc.). Each panel header can have its own icon.




- New feature: Added the ability to set individual colors for accordion header background.



- New feature: Added arrow position property. The arrow can be displayed left, right or hidden.



- New feature: Added the ability to open a specific panel via bookmarks (hash).



Step 1

Set the active panel to ‘#’.

This indicates that the Accordion monitors the URL for hash changes.


Step 2

Use the ID of the panel in the URL:

For example:


where ‘Accordion1’ is the ID of the accordion and ‘collapse3’ is the third panel.


You can also use an absolute URL:





- New feature: Added 'collapsible' option to header. This makes it possible to expand/collapse the card content by clicking the header.




Online demo:



- New feature: Added 'manual' trigger mode to Card Popover.



- New feature: Added the ability to show/hide/toggle popover via events.

- New feature: Added 'list item' type. A quick way to add a list-like item. Icon + text. The icon can be a different color and it can be positioned at the left of right side of the text.

List items also support badges: Text{255,#FFFFFF,#000000}

where 255 is the badge label, The first color specifies the text color in HEX format and second color specifies the background color.



Online demo:




- New feature: Added 'maximum width' property'. This specifies the maximum width of the card in flexible layouts.




- New feature: Added 'padding' properties to text item.


- Improved: Upgraded popover HTML/CSS/JS to Bootstrap 4.




- Improved: Upgraded scrollspy HTML/CSS/JS to Bootstrap 4.


Card Container

- New feature: Added 'masonry' mode. Cards will be dynamically rearranged based on the available space in the browser window. Masonry measures all of the items and rearranges them in the best way with what is spatially available. The column is responsive in breakpoints. It is also possible to set a ‘column span’ for each card via the flexgrow property.




Online demo:



- New feature: Added 'alignment' property to card container. This specifies the horizontal alignment of cards in 'card deck' mode. This may be useful when cards have a maximum width, so they do not fill the entire row.


Flex Box

- New feature: Added the ability to set the flexbox order.



The order property specifies the order of an object in a flex container or flex grid relative to the rest of the items inside the same container. This can be useful to define a different order in breakpoints.



Note: If the element is not inside a flex container or flex grid, the order property has no effect.

Panel Layer and Panel Menu

- New feature: Added 'position' property to Panel Layer. Choose between fixed or static. When fixed, the panel is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. When static, the panel will scroll with the content.




Panel Layer

- New feature: Added the ability to trigger the panel layer with a Panel menu button. This makes it possible to have an animated trigger button.

Requirements: the panel menu has one link and this link is a bookmark to the layer.



Online demo:





- New feature: Added floating mode options: 75%, 50%, 33%, 25% and 10% of the viewport height.



- Improved: The “Floating mode” property is now responsive, so you can use different heights in breakpoints.


- New feature: Added <main> tag to semantic tags. Specifies the main content of the document: https://www.w3schools.com/tags/tag_main.asp


This option is also available for Layout Grids and FlexBox containers.



- New feature: Added vertical alignment for floating layouts.



- New feature: Added the ability to set the padding, so you can add spacing around the (floating) elements in a layer.




Online demo of some of the new layer features:





Modal Layer

- New feature: Added 'Orientation' property to set horizontal and vertical alignment of the popup. The margin properties can be used to set an offset.



- New feature: Added animations to Bootstrap modal mode. Includes 36 new animations.




Rollover Layer

- New feature: Implemented functionality to create rollover cards. When you add two cards (default and hover) and set the 'Position children' option to 'floating' then both cards will automatically get the same height so you can for example implement 'flipping cards'.


Online demo:



- New feature: Added more than 25 new CSS animations: move, flip, fold, push, cube, tilt etc.



- New feature: Added the ability to trigger the rollover layer on click instead of hover.



Page Header

- New feature: Added 'hide on scroll' mode to Page Header. Implements a popular feature where a sticky header is hidden on scroll-down and shown on scroll-up. Include supports for fade and slide animations with easing.



Online demo:





- New feature: Added 36 show/hide animations to Bootstrap dialog mode.



Online demo:



- New feature: Added border-radius property to button style.



- New feature: Added 'full width' to horizontal alignment' options.


- New feature: Added 'full height' to vertical alignment' options.


Layout Grid

- New feature: Added 'stretch' to vertical alignment options.

This adds the ability to make the background of columns full height, even when the content is not the same size.


Note that vertical alignment options are only available if the grid system is set to flexbox or css grid.



- New feature: Added a few extra column height options: 75%, 33%, 25% and 10% of the viewport height.



- New feature: Added ‘Order’ property. The order property can be used to control the display order of the columns. This can be useful to define a different column order in breakpoints.








- Improved: Events window displays first 25 characters of JavaScript.



- Improved: Using show/hide with effect with lightbox, dialog, modal, toast, panel will automatically use show/hide instead because these features do not support effects.




- New feature: Added animation properties: animation-name, animation-duration, animation-delay, animation-iteration-count, animation-direction, animation-timing-function, animation-fill-mode. This can be used (for example) to set the animation of the object on hover. Example: select animation, set duration and iteration count.



Scroll Transitions

- New feature: Added the ability to use predefined animations for scroll transitions. The keyframes of the selected animation will automatically be converted to scroll transitions, so the animation is played frame by frame while the objects scrolls through the viewport.



Online demo:




- New feature: Added support for standard events (onclick, onmouseover etc).



- New feature: Added dedicated Toast events. 'show' fires immediately when the show action is called. 'shown' is fired when the toast has been made visible to the user. 'hide' is fired immediately when the hide action has been called.  'hidden' is fired when the toast has finished being hidden from the user.



HTML5 Video

- New feature: Added 'Plays inline' option. A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen. The behavior depends on the settings of the browser.



- New feature: Added the ability to add sub titles. Subtitle data are simple text files that follow a specified format, in this case the Web Video Text Tracks (WebVTT) format. Multiple languages can be configured.




HTML5 Audio/Video, YouTube, Vimeo

- New feature: Added 'Use Plyr' option. This adds the ability to use the 'plyr' media player instead of standard HTML5 audio/video enabling a consistent UI in all browsers.





 Themeable Button

- New feature: Added 'cursor' property. Specifies the mouse cursor to be displayed when pointing over the button.



- New feature: Added 'border style' property to Themeable Button.


- New feature: Added support for padding.


- Improved: Added the ability to enable/disable Themeable Buttons via events.




Login Tools

- New feature: Added 'Hash Algorithm' property. This adds support for improved password hashing use bcrypt (as alternative for md5). Passwords will be upgraded automatically when the user logs in. Note that you may need to increase the length of the database field (to 127 or 255).




Login Tools: Delete Account

- New feature: Added 'Delete Account' object. This allows users to delete their account. This option is also referred to as unsubscribe or opt-out.






Login Tools: Logout

- New feature: Added standard background and border options. This replaces the 'button' type property which only supported solid background and image.




- New feature: Added 'cursor' property. Specifies the mouse cursor to be displayed when pointing over the button.


Login Tools: Signin

- New feature: Added support for RecaptchaV2, RecaptchaV3 and hCaptcha. The new options can be configured via the 'Captcha Settings' property.



- New feature: Added 'Password Strength' property. Specifies a regular expression to validate the password strength.



Please see the help for examples.

Overlay Menu

- New feature: Added direction property (left-to-right/right-to-left).



- New feature: Added 'layout mode' property. Supports 'drilldown' or 'expandable'.




- Improved: Added the ability to use multiple instances of the overlay menu per page.


- Improved: Added overflow-y so if the menu is larger than the viewport the user can scroll up/down.


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



- New feature: Added the ability to display the menu as a 'popup' or 'inline' menu in addition to 'fullscreen'.



Inline mode can also useful for creating fancy panels or sidebars in combination with the Panel layer.




- Improved: Overlay now uses flexbox for alignment.


Online demo:




CSS Menu

- New feature: Added 6 new button animations: delayed left, delayed right, delayed top, delayed bottom, delayed middle and pulse






Themeable Menu

- New feature: Added orientation property to control the position of the sub menu: top start,top end,right start,right end,bottom start,bottom end,left start,left end




- New feature: Added the ability to show sub menus on 'hover' instead of 'click'. Uncheck 'Click to Open Submenus'.


- New feature: Added button spacing property. Specifies the spacing between buttons.


- New feature: Added support for 'scrollspy'.


- New feature: Added support for 'affix'.


- New feature: Added support for 'highlight current page'.



Responsive Menu

- New feature: Added the ability to set border (width and color) for main or sub items. It's also possible to set a border around the around whole menu by using a negative value.




- New feature: Added 'spacing' property. This specifies the spacing between main items, so you can create separate buttons.


- New feature: Added 'Mobile alignment' property. This specifies the text alignment when the menu is in mobile mode.




Pagination Menu

- New feature: Added the ability to display circular items. Set the border radius to 500 and use a negative value for the right padding to add spacing between items.





Go Menu

- Improved: Optimized generated code for Go Menu. No longer requires jQuery.



- New feature: Added 40 new transitions (slide, flip, fold, push, cube, tilt etc.) to the Bootstrap Carousel (full width = flexible).



Online demo:






 Find and Replace

- New feature: Added 'Breakpoints' option to Find and Replace scope. This specifies whether to replace values in all breakpoints or in the current breakpoint only.



Structured Data

- New feature: Added URL and Social Media Profiles (sameAs) properties to “Organization” and “Person” types in Structure Data.



More information:




News Feed Ticker

- New feature: Added 'Marquee' mode. Scroll the news items from left to right or right to left like a marquee. Note: use a negative direction to scroll from left to right.




Online demo:




- New feature: Added 'calendar' date type. This displays the date like a calendar. Notes: margin sets spacing between date and text. Text/background specific the color of the months. The title color will be used for date.



Online demo:




- New feature: Added margin property for date and title. This specifies the spacing at the bottom of the title/date.


- Improved: Added all standard background and border style options.


- Improved: Redesigned 'Ticker' mode. The first item will slide out at the top, while moving the rest of the items up.

- New feature: Added 'Date' property to manually set the date of a headline. Previous versions always used the current date.



- New feature: Added 'divider' properties. This make it possible to insert a divider between items.



- New feature: Added support for CSV data source.

Example: "index.html",Heading,01/01/2020,Description


- New feature: Added support for JSON data source.

As online data editor you can use the CSV CRUD extension.


- New feature: Added support for MySQL data source.



Clip Art

- New feature: Added 'Clip Art' object. Clip Art is a combination of Icon Fonts and Shapes. You can select an icon from any of the supported icon libraries.

Clip Art has the same features as a Shape:





- New feature: Added 16 new speech balloon shapes.



Icon Fonts

- Improved:  The FontAwesome and Icon Fonts widgets have been merged, making it easier to switch between icon libraries and reduce duplicate options.






- New feature: Added 'Sound Cloud Player' widgets. The SoundCloud widget embeds audio clips from SoundCloud.



Online demo:



- New feature: Added "Adapt Container Width" option to FaceBook Page Plugin. Try to fit inside the container width.


- New feature: Added 'FaceBook Post Plugin". Put public posts - by a Page or a person on Facebook - into the content of your web site.


- New feature: Added 'Facebook comments counter' script. Displays the number of comments on a given URL on your webpage.


- New feature: Added 'Facebook comments plugin' script. Lets people comment on content on your site using their Facebook account.


- New feature: Added 'Facebook quote' script. The quote plugin lets people select text on your page and add it to their share, so they can tell a more expressive story.


- New feature: Added 'Facebook video plugin' script. Add Facebook videos and Facebook live videos to your website.








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

More Features

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