Quick ‘n Easy Web Builder 11

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

Introducing Quick ‘n Easy Web Builder 11, the latest and greatest upgrade yet, packed with an impressive array of new features and powerful tools to help you craft stunning websites. This release boasts over 100 enhancements and additions that will elevate your web design experience to new heights!

Explore the following highlights of our latest innovations. In addition to detailed screenshots, we've provided links to online examples and tutorials showcasing these new features in action, making it easier than ever to grasp their full potential.

Artificial Intelligence

- New feature: Improve your online presence easily with the help of Quick ‘n Easy Web Builder's AI-powered tools. Make your website content better, reach a global audience by translating it, create eye-catching visuals to impress your visitors, and generate custom code for your web projects with ease. Quick ‘n Easy Web Builder AI combines all these important features in one place, giving you a complete platform to take your web design projects to new levels.

The AI tools in Quick ‘n Easy Web Builder are implemented using the OpenAI API. You will need an OpenAI API key in order to use this functionality. If you do not already have an OpenAI account then you can create it here: https://platform.openai.com/signup

Text Generation and Enhancement: Create text, headings, articles, and more by entering custom prompts or choosing predefined ones. You have the flexibility to modify text length, tone, grammar, and overall style to suit your needs.

In the dialog, you can enter a custom prompt or choose one of the pre-defined prompts from the Suggestions drop down list. After inputting your prompt, simply click the 'Generate' button.

Once you're satisfied with the generated text, you can click the 'Use Text' button to save it. However, you also have the flexibility to enhance or refine the text further. This includes the ability to adjust its length, modify the tone (casual, professional, confident, friendly), streamline it for clarity, improve grammar, or even translate it into a different language!

Tone, Change the tone of the text (casual, professional, confident, friendly)

Simplify, Simplify the language of the text

Make Longer, Add more details to increase content length to the text

Make Shorter, Shorten the text

Fix spelling, Fix spelling and grammar of the text. This may be useful for text you have inserted yourself.

For most text-based objects (text, heading, card, label, wrap text etc.), you can use the Artificial Intelligence button on the Toolbar to open the "Generate Text with AI" dialog. Or via the menu: Edit -> Artificial Intelligence -> Write with AI.

Predefined prompts can be modified via the Prompt Manager.

Multilingual Translation: Translate text into over 25 languages, such as English, Spanish, French, German, and Italian, making it a valuable resource for communication across language barriers.

Image Generation and Manipulation: Generate new images based on text input, create variations of existing images, and enhance images using in-painting techniques. You can specify desired changes, such as adding objects, replacing screen content, or altering hairstyles. Anything you can think of!

Image Expansion: Expand images beyond their original borders by providing descriptions of the desired changes. Also known as out-painting. The zoom slider allows you to adjust the frame size according to your preferences.

For the image object, you can access the Artificial Intelligence option via the menu: Format -> Artificial Intelligence (Images)

Custom Code Writing: For web development and coding tasks, you can utilize AI functionality within HTML objects, Object HTML, and Page HTML. This includes adding scripts, HTML, CSS, PHP, and more, making it a useful tool for developers.

Online tutorials:

https://www.quickandeasywebbuilder.com/ai.html

https://www.quickandeasywebbuilder.com/ai_prompts.html

Translate Text

- New feature: This is part of the new AI tools, but also available as separate tool.

The translate tool can be accessed via the Page menu in the Tools section.

The translation language can be selected from the 'Language' dropdown menu.

The 'Translate selection' option will translate the selected objects. This can be useful if you only want to translate specific items on the page.

‘Translate Page’ allows you to generate a translated replica of an entire webpage. In contrast to the 'Translate Selection' function, it won't modify the content on the current page. Instead, it generates a new page that maintains the original layout while translating all the text. The new page's name will incorporate the language code corresponding to your selected language. For instance, if you translate 'index' into Spanish, it will become 'index-es'.

Sometimes you may want to exclude some elements on the page from thew translation. For example, navigation, SEO or extensions. This can be configured in Tools -> Options -> Artificial Intelligence -> Translation.

Online tutorial:

https://www.quickandeasywebbuilder.com/translation.html

Remove background with AI

- New feature: Added AI powered background removal functionality for images.

This feature automatically detects a person or object in an image and replaces the background with a transparent one. Unlike traditional background removal methods, this tool works 100% automatically. You don't have to manually select the background/foreground layers to separate them - just click 'Remove Background' and it instantly generates a new image with the background removed!

AI background removal is a complex process that involves a myriad of techniques and algorithms. To implement this powerful functionality seamlessly, we have integrated the third-party web service, Remove.bg. This ensures you get top-notch results while keeping the process user-friendly and accessible.

You will need to request an API key, to us this service.

https://www.remove.bg/dashboard#api-key

The first 50 images are free, after the quota has passed you can choose to upgrade to a paid plan and continue your use of the API on pay-as-you-go basis.

Website Wizard

- New feature: Added 'Website Wizard' to quickly create a new project. With the assistance of the 'Website Wizard,' you can effortlessly initiate a new project. You have the flexibility to begin with a template as the foundation for your new project or customize its content and style through a step-by-step process. Moreover, there are options available to harness AI-driven content generation, tailored to your specified description, and incorporate (random) stock images relevant to your selected category. These features empower you to craft a distinct and unique website every time you utilize the wizard. The generated website will exhibit fresh variations with each run of the wizard!

With ‘Create a new website based on a template’, you can quickly start a new project based on an existing template. The generated project will be exactly the same as the original template, so there are no choices to make other than which template you want to use. Of course, you can fully customize the website after you are finished with the wizard.

Online tutorial:

https://www.quickandeasywebbuilder.com/website_wizard.html

When choosing the "Create a new website using a wizard" option, the wizard will prompt you with a series of questions to determine the desired look and feel of your new website. The resulting website will feature a distinct design, generated based on your selections. Consequently, each time you utilize the wizard, you'll receive a one-of-a-kind website.

Badges

- New feature: Added 'Badge' object. A "badge" is a small graphic, text or symbol that can be used to add additional information to the web site elements. For example, showing if a product is available, promoting a discount, displaying a user's achievements, or indicating how popular a product is. A Badge can be applied to almost any QWB object.

The Badge object has 8 different types: Arrow, Bookmark, Bootstrap-like badge, Flag, Stripe, Triangle, Ribbon and Shape (with more than 200 shape types!). Badges can include both text and icons, and they can also incorporate animations to capture the visitor's attention.

Online tutorial:

https://www.quickandeasywebbuilder.com/badges.html

Theme Manager

- New feature: The Theme Manager has been revived. QWB has supported themes for a long time, however previously they were only useful for jQuery UI widgets.

Themes have been updated to support almost all objects. Unlike jQuery UI widgets which require a pretty large CSS set. The new themes only have a small footprint.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_themes.html

Online tutorial:

https://www.quickandeasywebbuilder.com/themes.html

- New feature: Added 25 new themes inspired by BootSwatch. Each of the new themes also has a dark theme variation, which allows the visitors of the website to choose between a light and dark theme. Just like you can with styles.

- New feature: Added 'Invert colors' button to invert all colors of the current theme. This may be useful if you want to quickly create a dark variant of the theme.

- Improved: Added dark variants of the following themes: blitzer, cupertino, eggplant, excite-bike, flick, hot-sneaks, humanity, overcast, pepper-grinder, redmond, smoothness, south-street, start, sunny, ui-lightness, vader.

Cards

- New feature: Added support for Affix to keep the card visible while scrolling.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_cardaffix.html

- New feature: Added ecommerce functionality to cards. Via the new 'ecommerce' item you can add checkboxes, radio buttons, select /dropdown lists, price and quantity fields to the card. These items can then be used to adjust the price. For example, the size of a t-shirt, gift wrapping, glossy printing paper etc.

Extra options can increase or decrease the final price. Calculations are done automatically so there is no need to implement events or conditions!

Available options:

Checkbox
A checkbox adds a simple toggle button to enable a specific option.
Radio button
A radio button presents multiple choices, allowing the selection of only one option at a time.
Select / dropdown
A select dropdown serves the same purpose as a radio button but offers a distinct visual presentation. It showcases a list of options from which users can make a selection.
Price
The 'Price' item can be used to display the calculated price. The value is dynamically updated based on the selections made by the user.
Quantity
This option enables users to modify the quantity of items in their order.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_ecommerce_card.html

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

- New feature: Added support for shapes in Cards. This feature is identical to the shapes available in Sections.

- New feature: Added the ability assign a link to Card text items.

- New feature: Added support for events to Card text items.

- New feature: Card items can be selected individually. This makes it possible to quickly update the font-family, font size, style or color via the formatting toolbar, without having to open the properties dialog.

- New feature: Added ‘Minimum height’ property for Text items.

When working with text in cards, variations in text length often result in varying text heights, creating challenges when aligning other elements within the card, such as buttons placed at the bottom. To address this, you can now set a minimum height, ensuring consistent and predictable text heights for improved alignment.

Card Repeater

- New feature: Added 'Card Repeater' object

A Card Repeater operates similarly to a Card Container, with a key distinction: all cards within it share the same layout and style. This means that any modification made to one card will automatically propagate to all other cards within the same container. Of course, the text can be different for each card!

For instance, if you add a button to one card, it will simultaneously appear in all the other cards. Removing an item will have the same effect, as it will be removed from every card within the repeater. Similarly, adjustments to the style attributes, such as font size, background color, or borders, will be uniformly applied to all cards.

Furthermore, duplicating a selected card is a breeze – simply click the clone button to create an identical copy.

Example 1 – Changing the colors of one card will affect all cards.

Example 2 – Add a new item to one card, will add the item to all cards!

Initially, the images will be the same for all cards, but you can set a different image for each card, if you want.

Card Container

- New feature: Cards that are inside a Card container now have a 'clone' button.

So, you can easily duplicate the selected card.

- New feature: Added support for HTML5 semantic tags.

Section

- New feature: Added the ability to add links to text and shapes.

- New feature: Added ecommerce functionality (see card for more details).

Templates

- New feature: Added 'Online Gallery' to 'select template' dialog. This allows you to select a template from the online gallery without the need to manually install it first!

You can also preview the template online directly via the context menu.

Events

- New feature: Added "Print Document' and 'Print Element' actions.

Print Document prints the contents of the current window.

Print Element prints the contents of the specified object.

- New feature: Added the ability to select a target (ID) for the JavaScript action. This makes it possible to use the selected ID in the code. For example: alert('$ID$') will result in alert('wb_Heading1'). This means that you no longer have to use a hardcoded ID. If you change the ID of the object in the project, then the code will automatically be updated.

- New feature: Added ‘ondocumentready’ to object events.

$(document).ready() is a function used in jQuery, to specify a piece of code that should be executed when the HTML document is fully loaded and the DOM (Document Object Model) is ready for manipulation.

Previously, the 'ondocumentready' event was only accessible through Page events. But there may be situations where you prefer to associate the event directly with an object. This approach can facilitate actions such as seamless copying and pasting of objects with associated events across different pages, or preserving the object as an integral part of a block, which does not include page events.

The new functionality is demonstrated is this example:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_events.html

Forms

- New feature: Added Honeypot Anti-Spam option. The anti-spam honeypot is a hidden form field that bots can’t avoid filling, but it’s invisible to human users. If the hidden field is filled in, it’s a sign of spambot activity and can be blocked. If the field is not filled in, it indicates that the form was filled in by a human user as intended. The name of the Honeypot Anti-Spam field name can be set in Form Properties -> Advanced -> Miscellaneous.

We've also created a new 'anti-spam' tutorial that provides an overview of the anti-spam features available in Quick ‘n Easy Web Builder:

https://www.quickandeasywebbuilder.com/forms_antispam.html

- New feature: Added "Include timestamp in form data" option. This specifies whether to include the time stamp in the form data. Previously this was always included and could not be turned off.

- New feature: Added "Include browser information in form data" option. This specifies whether to include the browser information in the form data. Previously this was always included and could not be turned off.

File Upload

- New feature: Added 'Bootstrap' type. This will style the file input with Bootstrap aesthetics using pure CSS. Unlike the jQuery UI version that requires JavaScript, this offers a lightweight alternative for streamlined functionality.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_fileupload.html

Note: there is currently no way to control the button text when using CSS only.

Spinner

- New feature: Added 'Bootstrap Simplified' mode. This will render a simplified spinner without visible button borders, frequently used in eCommerce websites.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_spinner.html

- New feature: Added 'Border width’ property. To control the size of the spinner’s border. Previously this was fixed to 1.

Transitions / Animations

- New feature: Added 'font-variation-settings' property. This adds the ability to animate properties of variable fonts, like weight, width, slant etc.

- New feature: Added 'font-stretch' property to animate the compactness of the characters in a font. This property may be specified as a single keyword value (semi-condensed, condensed, extra-condensed, ultra-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded) or a percentage value.

Note: these new options only work with variable fonts!

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_variablefonts_animation.html

- New feature: Added 'backdrop-filter’ property. This lets you apply graphical effects such as blurring or color shifting to the area behind an element.

Note: Because it applies to everything behind the element, to see the effect you must make the element or its background at least partially transparent.

Timer

- New feature: Introducing the new 'Visits' option. This feature enables you to trigger a timer after a specified number of visits, making it perfect for showcasing introductory dialogs or special offers to new visitors. By default, the timer activates only once, but you also have the option to use a negative number. In this scenario, the count resets after every 'x' visits, allowing for repeated activations as needed.

- New feature: Introducing the new 'Days' option. You can now set up timers to activate after a specified number of days following the user's initial visit. By default, the timer activates only once, but you also have the option to use a negative number, which will restart the timer at regular intervals of 'x' days.

- New feature: Added 'Date Range' option. This feature allows you to activate a timer within a specific date range, making it perfect for showcasing special offers or managing your store's operations during holidays and other designated periods.

- New feature: Added 'Time Range' option. This feature enables you to set up timers for specific time ranges, making it perfect for delivering personalized welcome messages such as "Good morning" or "Good afternoon" at the right times of day.

Note: The state of these new features will be stored in local storage. If you want to reset the state while testing the website, you can access this via the browser's debugger console (Application -> Local Storage).

Images

- New feature: Added 'Artificial Intelligence’ tools. Generate new images based on text input, create variations of existing images, and enhance images using in-painting and out-painting techniques and more! See the 'Artificial Intelligence’ section earlier in this document for more details.

- New feature: AV Vision. This is an experimental feature and currently only available for users who have an OpenAI account with access gtp4.

AI Vision can recognize what's in an image and lets you ask questions like, "What's in this image?", "Identify all the food items in the image." or "Write a caption for this image for use on a website". But you can also use it to extract text or translate the text from the image to a different language.

This feature can be useful for web design to create titles or detailed descriptions for SEO purposes. But you can also use it to create a text prompt from an image and use that to create a new image. The results of this tool are already very impressive, and we can’t wait to come up with more features that use this functionality...

- New feature: Added quick menu icon to the selected image. This can be used to open a quick menu with image tools, so you do not have to open the properties dialog.

- New feature: Added 'Replace image' command to replace an existing image with a new one without losing the current settings.

- New feature: Added 'Stock Photo' command to image tools to quickly replace the current image with a stock photo.

Slideshow

- New feature: Added support for 'Swiper'. Swiper is a modern mobile friendly (slider) slider with hardware accelerated transitions (no jQuery): fade, slide, cube, coverflow, flip, cards and creative.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_swiper.html

- New feature: Added quick menu icon to quickly replace the images in the slideshow.

- New feature: Added 'Thumbnail Gallery' option: A lightweight, responsive image slider accompanied by carousel-style thumbnail navigation. This feature is particularly useful as an 'eCommerce gallery,' enabling you to elegantly display various product images for showcasing your merchandise. But of course, it can also be used to display any images you like.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_thumbnailgallery.html

- New feature: Added support for ‘Spotlight’ lightbox. Spotlight (https://github.com/nextapps-de/spotlight) is modern, lightweight image gallery with great performance and no dependencies (no jQuery or other libraries).

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_spotlight.html

- New feature: Added support for ‘Litebox’ lightbox. Litebox (https://andreasremdt.github.io/litebox/index.html) is a simple lightweight lightbox to showcase your images with no dependencies (no jQuery or other libraries).

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_litebox.html

Rollover Image

- New feature: Added quick menu icon to quickly replace the rollover images. It is possible to select two images at once.

Photo Gallery

- New feature: Added support for ‘Spotlight’ and ‘litebox’ lightboxes.

See also ‘slideshow’ notes.

- New feature: Added quick menu icon to quickly replace the images in the gallery.

Accordion

- New feature: Added the ability to configure the arrow size.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_accordion.html

Tab

- New feature: Added ‘Bulma Tabs’ type. This renders a minimalistic version of the tab control featuring simple text and subtle underlines, drawing inspiration from the tabs found in the Bulma CSS framework.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_tabs.html

Heading

- New feature: Added the ability to output the heading as paragraph <p>.

- New feature: Added 'Bookmark' properties. This makes it possible to use the heading as bookmark with animations.

Icons

- New feature: Added built-in support for Font Awesome 6 (free). Font Awesome 6 has a modern look and includes 600 new icons!

New projects will automatically use the new version. For older projects, you can select the new version in the Preferences -> Fonts

- Improved: QWB11 now Includes the latest version of the ‘Material Icons’ library with 390 new icons!

Flex Grid

- New feature: Added 'Visual grid editor'. The visual flex grid editor provides a user-friendly interface for effortlessly arranging grid items in specific row or column structures. You can easily add rows and columns using the '+' and '-' buttons located at the right and bottom of the grid, respectively. When you hover over an item, controls appear, allowing you to manage its appearance within the grid.

Adding new grid items is as simple as clicking the '+' button, while existing items can be resized using arrow buttons. Furthermore, removing an item is quick and convenient with the 'Delete' button. The displayed arrows indicate to which sides the grid items can be expanded.

If you rather use the old way of editing the grid, then you can easily switch back to the classic editor by unchecking the ‘Enable Visual Grid editor’ option.

- New feature: Added 'Bookmark' properties. This make it possible to use the flexgrid as bookmark with animations.

Panel Layer

- New feature: Added 'fixed' display mode to Panel Layer. In fixed mode, the panel layer will always be visible.

Sticky Layer

- New feature: Added 'z-index' property to Sticky Layer. This makes it possible to overwrite the automatically generated z-index. For example, if you want to show the sticky layer to be on top of everything else. Leave the field empty for the default behavior.

- New feature: Added 'Synchronize MySQL settings between login objects' option (Preferences -> Miscellaneous). When this option is enabled, any updates made to MySQL properties will automatically apply to all login objects. Additionally, new login objects created in the project will inherit the same settings as existing objects. This eliminates the need to configure each object individually, streamlining the process and ensuring consistent settings across all login objects.

- New feature: Added 'Newest member' option. This displays the newest member from the USERS table on the web page.

- New feature: Added 'Total members' option. This displays the total number of members in the USERS table on the web page.

- Update: 'Login Name' object has been renamed to 'Login info' to better reflect its purpose.

- Improved: The ‘Login Info’ object now has all the generic background and border styling options, like gradients, patterns, background images, border styles etc.

- Improved: The signup form will automatically refill the (text) input fields in the event of an error. So, the user does not have to re-enter the values.

Content Management System

- New feature: Added integration with 'SunEditor'. SunEditor is a lightweight, flexible, customizable WYSIWYG text editor with many features like pasting from Microsoft Word/Excel, advanced tables, media embed, images upload and much more: https://github.com/JiHong88/SunEditor

SunEditor is available in the CMS Admin and Editable Content Admin.

- New feature: The software now has the capability to automatically install any missing CMS editors, eliminating the need for manual file copying on your part.

Rich Text Area

- New feature: Added 'Rich Text Area' object. The built-in Content Management System (CMS) tools within Quick ‘n Easy Web Builder come equipped with support for various third-party WYSIWYG text editors such as Summernote, Sunedit, Sceditor, Trumbowyg, and more.

We often get the question if the editors can also be used separately (for example as part of a form), so now we've made them available as a standalone object!

The Rich Text Area object is designed primarily as an advanced input field and doesn't inherently support content loading or saving functionality, which sets it apart from the CMS tools. When integrated into a form, any content entered into it will be transmitted as HTML.

Additionally, the Rich Text Area object serves as a valuable tool for offline testing. It enables users to experiment with various editor settings without the requirement of publishing the page online for each change.

Note:

Rich text editors are typically not the most common choice for this use with contact forms, because they usually require a simpler input field for users to enter their contact information, such as name, email address, message, and possibly some checkboxes or radio buttons. Rich text editors are more suited for tasks where users need to format text extensively, such as composing emails, creating blog posts, or editing content for websites. However, if you have a specific use case where you want users to provide formatted text within a contact form (for example, if you want users to submit detailed inquiries or comments with rich formatting options), you can integrate a rich text editor into your contact form. Just keep in mind that it might add complexity to the form and might not be necessary for most standard contact form submissions.

Demos:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_richtextarea.html

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_richtextarea_more.html

Online tutorial:

https://www.quickandeasywebbuilder.com/richtextarea.html

PayPal Buttons

- New feature: Added 'JavaScript SDK' option as alternative for the Legacy Payment Button (https://developer.paypal.com/sdk/js/reference/).

Notes:

PayPal's JavaScript SDK does not provide 'Add to cart' and 'View Cart' functionality. It only supports 'Buy Now'. Alternatively, you can use the Paypal Shopping Cart object which has also been updated to support the JavaScript SDK.

Also, the subscription button needs to be setup in the PayPal account.

When using the 'JavaScript SDK', you will need to use the 'Client ID' instead of the PayPal email address! This can be set globally in Tools -> Options -> eCommerce.

PayPal Shopping Cart

- New feature: Added 'Checkout API' property. This specifies whether to use the Legacy Payment Button or JavaScript SDK for checkout.

- New feature: Added the ability to set a custom icon for the ‘Remove’ button. This can be any icon from the selected Icon Library.

- New feature: Added the ability to set the border width and color of the shopping cart popup.

Drop Down Menu

- New feature: Added 'overflow' mode. There are times when the drop down has many menu items, and they begin to wrap (undesirable) as the page width decreases. Using overflow mode, you can automatically collapse the extra menu items into a dropdown menu on the right. When the viewport is wide enough, the menu items return to the horizontal menu. When there are no overflowing items, the dropdown menu is hidden.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_menuoverflow.html

Overflow menus are represented by a 'kebab' button, as the user clicks on the kebab, a horizontal list will appear with additional options to click.

- Improved: No longer uses <b> tags for arrows to improve WCAG compliance.

Navigation

- New feature: Added 'synchronize with bookmarks'. This feature can dynamically update the menu based on bookmarks on the same page. This can be useful to automate the menu items of navigation objects on 'single page' websites.

The text that will be used for the automatically generated menu items can be set via the new 'menu name' property available for all objects that support bookmarks: Bookmark, Layer, Layout Grid, Flex Grid, Flex Container and Heading.

- Improvement: The 'Anchor' object has been renamed to 'Bookmark.' This adjustment aligns its naming with that of WYSIWYG Web Builder, ensuring consistency across the products.

- New feature: Added the ability to select multiple rel values in links.

For example, nofollow noopener

- New feature: Added 'text-transform' properties (uppercase, lowercase, capitalize). This feature allows you to easily control the capitalization of text. This can be useful when managing menu items, as it enables swift changes in casing without the need to manually update each item. Moreover, when employing synchronization with the Site Manager, the text can automatically be made uppercase, lowercase or capitalize, streamlining the process further.

This option is available in Breadcrumb, CSS Menu, Dropdown Menu, Go Menu, Layer Menu, Mega Menu, Menu bar, Navigation Bar, Overlay Menu, Panel Menu, Pagination, Responsive Menu, Tab Menu, Text Menu

- New feature: Added 'synchronize with another menu'.

Slide Menu

- New feature: Added transition duration and easing properties.

- Improved: 'Enable uppercase folder names' has been replaced with 'text-transform'. It now also supports lowercase and capitalize.

- Improved: Script has been converted to vanilla JavaScript (no longer uses jQuery) and moved to wb.slidemenu.min.js, to minimize duplicated code.

Overlay Menu

- New feature: Added 'hamburger icon’ animations. When the hamburger icon is clicked, the bars will animation into a close symbol. There are 13 animation types.

- New feature: Added “Popup position” property. When the overlay menu is in ‘popup mode’, this specifies the alignment of the popup menu.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_overlaymenu_popup.html

- New feature: Added the ability to hide the standard ‘close’ button of the fullscreen overlay menu. This may be useful when using a ‘sticky’ hamburger icon. In which case, the same button can be used to show/hide the overlay menu.

This functionality is demonstrated in this demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_overlaymenu.html

- New feature: It is now possible to open the Overlay menu via the 'Show' event.

This can be useful to trigger the menu via an icon, button, image or any other element that supports events.

Responsive Menu

- New feature: Added ‘Icon Offset’ property. This specifies the spacing between the icon and the text.

- New feature: When the menu only has one item and the alignment is set to ‘center’, then the menu will behave as a single button. A use case for this feature could involve designing a vertical menu where the icon appears above the text. This distinctive layout is presently unachievable with any of the other navigation tools.

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_responsivemenu.html

- Improved: Script has been converted to vanilla JavaScript (no longer uses jQuery).

- Improved: No longer uses <b> tags for arrows to improve WCAG compliance.

Panel Menu

- New feature: Added ‘multiply’ animation. This animates the hamburger icon into a ‘close’ icon.

Mega Menu

- New feature: All colors are now customizable. Previously the Mega Menu could only be styled via themes.

- New feature: Added the ability to set a different font size for the column headings.

- New feature: Added 'border radius' to button and sub menu properties.

Preview of border radius and header font-size:

- New feature: Added transition duration and easing properties.

- Improved: The layout of the Mega Menu is now implemented using CSS grid. This enhancement significantly streamlines the resulting HTML code.

- Improved: Scripts for the MegaMenu have been rewritten in vanilla JavaScript (no longer requires jQuery)

Demo:

https://quickandeasywebbuilder.com/support/qwb11tryouts/qwb11_megamenu.html

Breadcrumb

- New feature: Added First level (no folders) option to Synchronize with Site Manager. This adds the ability to ignore folders in the site structure.

Site Manager

- New feature: When you clone a page where the page name ends with a number, the cloned page will have the same name with the next higher number. For instance, if you change 'product1' it will turn into 'product2'.

Gradients

- Improved: CSS output is now supported for all built-in gradients, eliminating the need for image fallbacks in the following styles: Linear from Center, Linear to Center, From Corner (down/right), From Corner (down/left), From Corner (up/right), From Corner (up/left). This results in cleaner and more efficient HTML output, enhancing performance.

The gradient styles were also added to all objects that previously did not support these styles: CSS menu, Layer menu, Mega menu, Overlay menu, Panel menu, Slide menu, Tab menu and styles.

Toolbar

-New feature: Previously the format toolbar could only be used for text, but now it can be used for most built-in objects that use text (headings, form elements, menus etc.), so you can quickly update the font-size, font-family, change case, text color etc.

-New feature: Added Grow and shrink font commands to quickly increase or decrease the font size of the selected object.

-New feature: Added the ability to set lorem ipsum for text based objects like heading, cards, buttons, etc. Previously this was only available for standard text.

- New feature: The formatting tools can also be used for individual card and section items. The items can be selected/highlighted to update font-family, size, color etc. without having to open the Card properties.

Ready to use JavaScripts

- New feature: Added the ability to add a preview image. This will be displayed in the workspace as a place holder, instead of the text-based place holder.

Without preview image:

With preview image:

Note that the image will not be published. It is only used during design time.

- New feature: Added ‘Google Maps Embed’ script. This makes it possible to embed Google Maps without the need for an API key.

How does this work?

Go to the Google Maps website (https://www.google.com/maps/) and search for the location you want to display on your map.
Click on the share button and then click on the "Embed map" tab.
Copy the URL from the iframe code provided. Not the complete code, just the URL!

For example:

https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d38363.15117278844!2d-73.9604497834648!3d40.78602151620618!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c2589a018531e3%3A0xb9df1f7387a94119!2sCentral%20Park!5e0!3m2!1sen!2snl!4v1697018235872!5m2!1sen!2snl

Paste the URL code into the ‘URL’ property of the 'Google Maps Embed' script.

Asset Manager

- New feature: Added the ability to rename files via the Asset Manager.

In the past, updating a file's name required a two-step process: manually renaming the file on the disk and then replacing it within the project.

Now, you can effortlessly rename files directly from the Asset Manager. This action not only changes the file's name on the disk but also automatically updates all references within the project. So, if the file is used by multiple objects or pages, then it will be updated for all instances!

Favorite Icon

- New feature: Added the ability to use SVG files in the icons section of the Page Properties. Recently browsers have allowed use of SVG, a vector format. SVG is able to scale up and down without quality loss, and can potentially be very small in size, they can also have embedded CSS, even embedded media queries. For example, to support light and dark themes.

SVG

- New feature: Added experimental support for SVG images (Image, Photo Gallery, Slideshow, Background Image, etc.)

The built-in SVG rendering engine currently has the following limitations:

Text elements are not supported.
SVG 1.1 filters are not supported.

Affix

- Improved: Affix script (previously part of Bootstrap), has been updated so it no longer uses jQuery. Also, the script is now initialized via data attributes instead of JavaScript which reduces the amount of generated code.

Blocks

- Improved: 'Save as block' will remember the last selected category.

Other

- Removed support for PHP4 because most built-in features require a newer version anyway. The minimum supported version is now 5.6.

Language Support

- The user interface now includes supports for German (DE), Spanish (ES), French (FR) and Italian (IT), Hungarian (HU) and Dutch (NL).

The language can be selected in Preferences -> Miscellaneous -> Language