What is new in WYSIWYG Web Builder 20?

We have the latest web design trends built-in in for you.

Smart Content
- New feature: Smart Content offers a fast and easy way to update text and images on your page based on a selected category.
For example, if you've downloaded a template and want to preview it with content related to your project, simply use this feature.
Replace with Stock Photos: Instantly swap all the images on the page with relevant stock photos in just one click.
Replace Text with Category Text: Quickly replace existing text with content tailored to your chosen category.
You also have the option to use AI for text replacement, offering even more personalized results. Additionally, you can choose whether to apply changes to the entire page or only to selected elements.

Blocks
- New feature: Added 'Blocks Libraries'. Now you can switch between different block libraries. Each bloc lirnbsa ucan have its own set og blocks. For example, there you can have a dedicated library for dark blocks or ecommerce blocks.
- New feature: Added 'Favorites' to Block Manager. 'Favorites' is a dedicated library to store your favorite blocks.
- New feature: Added option to automatically fill newly added blocks with content (text and images) based on the selected category.
- New feature: Added the ability to collapse / expand all categories in the Block Manager with one click.
- New feature: Added support for dragging and dropping .wbl files (Blocks) directly onto the workspace from Windows File Explorer, offering an alternative to using the Blocks Manager.

Color Adjustments Tools
- New feature: Added Color Adjustments Tools to quickly adjust the colors of the entire page. Brightness, Contrast, Graysale, Hue, Saturation, Invert colors, Invert luminance, temperature, tint. You can also replace a specific color on the page. The tools maybe be useful if you quickly want to change colors on the page without having to manually adjust all colors separately.
- New feature: Adjust colors from image. Modify the colors of the page to match those found in the selected image.

Animated Headline
- New feature: The Animated Headline object allows you to create eye-catching and engaging website headlines. It enables you to animate headline text elements that rotate or include highlighted animation.
Additionally, this widget lets you easily customize the animation effects, speed, and styles to match your website’s design and branding.
The animation can be started automatically on page load, on scroll or via events.

Ferris Wheel
- New feature: The Ferris Wheel object is an interactive circular slider, inspired by the design of a Ferris wheel. Each gondola on the wheel can display a different icon, and clicking on a gondola reveals more details (title, description, and URL) in the center of the wheel. This feature is ideal for highlighting services or specific sections on a website in an engaging manner. Additionally, it supports images, making it a versatile alternative to a traditional slideshow.

Photo / Video Grid
- New feature: The photo / video grid makes it easy to create beautiful galleries, with just a few clicks. The photo / video grid can have mixed content, so it can contain both images and videos (mp4, youtube or vimeo).
Clicking on a thumbnail will open a large version of the image/video in a lightbox / slideshow. You can select one of the 25 built-in layouts but also create your own custom layout.

Slideshow
- New feature: 'Background' mode of the slideshow (formerly known as 'Fullscreen Background') can now be applied to container backgrounds, including layers, layout grids, cards, flex containers, and more. This enhancement allows you to add animated backgrounds to nearly any object with ease. For example, you can implement a (mini) slideshow to cards, or add a ken burns effect to the background of a layout grid.
- New feature: Added "Ken Burns" animation to 'background' mode of the Slideshow.
- Improved: The Ken Burns animation effect has been updated to eliminate the use of jQuery, resulting in a more lightweight and efficient page load.

TikTok Video
- New feature: Added support for TikTok video. You can now easily embed responsive TikTok videos on your website. Customize playback with options like autoplay, looping, controls visibility, and displaying video descriptions for a seamless integration experience.

Color Swatches
- Updated feature: The color swatches functionality have been redesigned. Now if you select a color swatch from the list it will adopt all colors on the current them automatically. Allowing you to quickly change the overall style of the page.
- New feature: Create swatch from image. This option extracts the 12 most dominant colors from an image and generates a new swatch based on those colors.

Easy Mode
- New feature: "Easy Mode" has been redesigned. When Easy Mode is enabled it loads a simplified environment where you can your website using blocks only.
This mode is aimed at new users (or existing users) that just want to quickly create a website, without the need to have full control over the layout.
It may also be beneficial for newcomers to get familiar with the user interface, before transitioning to the regular environment.

The main difference with the regular environment is that you work exclusively with blocks instead of individual objects.
Consequently, there's no object toolbox or insert menu to navigate. You're limited to inserting blocks, rather than individual objects, and the available options have been condensed for a more straightforward workflow.
You cannot drag & drop, insert, delete or copy/paste individual objects (to maintain layout integrity). But you can edit the properties of objects, just like in the regular version. Also, objects can be hidden.
Blocks can be inserted, removed, copy/pasted and re-arranged.

Color Picker
- New feature: Added new rounded color picker style. If you prefer the old look then you can set this in Tools -> Options -> User Interface.
- New feature: Added 'Eyedropper' tool. Use the eyedropper tool to quickly pick a color from the screen without have to open the color dialog first.
- Updated feature: The old 'use swatch colors' option has been replaced with a dedicated 'color picker mode' option: use web colors or use swatch colors.

Layout Grid Management Tools
- New feature: When you select a Layout Grid, the Ribbon will now display a dedicated 'Format' context tab to quickly modify properties of the Layout Grid, like background, border and arrange tools (move up, move down, move to top, move to bottom)
- New feature: Added to quickly set the background, alignment and padding of the selected Layout Gird column via the Ribbon. These option are also available via the context menu and menubar.
- New feature: Added 'Delete' option to quickly remove the selected Layout Grid column (including the content).
- New feature: Added 'Insert' option to quickly insert a new Layout Grid column.
- New feature: Added 'Move Left' and 'Move Right' options to quickly change the order of Layout Grid columns (including the content).
- New feature: Added 'Increase' and 'Decrease' options to quickly change the size of the selected column.

Preset Layouts
- New feature: Added 'Preset Layouts' option to the Insert menu. To save time when designing layouts, you can now use one out of available preset layouts. To use them, click the Insert tab > Layout > Preset Layouts. There are 25 presets based on Layout Grids. The gallery also displays all flex grid templates. These templates can be modified via the flex grid properties.

Layout Grid
- New feature: You can now set custom values for column height, allowing more flexibility in layout design. Enter values such as 66vh, 80vh, or any other valid height measurement to achieve the desired column height.
Note: this feature is also available for the Flexbox container, Flex Grid and Carousel!

Accordion
- New feature: Added the ability to set the spacing between accordion panels.

Publish
- New feature: Added the ability to set a master password for the publish data. When set, all publish data will be encrypted.
- New feature: Added new option to publish window "Publish all files except sitemap.xml/robots.txt". This allows you to publish all files with exception of sitemap.xml/robots.txt

Cards
- New feature: Added horizontal card functionality. The new 'column break' card item allows you to divide card items into columns.
- Improved: The 'Add' items drop down menu now also has icons which make it easier to identify the different card item types.

Check for Updates
- New feature: It is now possible to download and install updates directly via the 'Check for updates' dialog.

Image
- New feature: It is now also possible to use the mp4 format in the image object. This functionality was added for the new 'Image-to-video' feature, but can be used for other mp4 as well. The video will be played without audio and controls. Videos also work in combination with (HTML) watermark, stencils, shapes and other some other image specific features.
- New feature: Added 'AI Vision' tools to automatically generate titles and descriptions from images using AI. Click the 'bulb' icon to use OpenAI's AI Vision, which analyzes the image and creates a relevant title or description text for you.
- Improved: The image selection dialog will now remember the last selected folder independently from other file dialogs, such as the project open menu. This enhancement allows for a more streamlined and efficient workflow, making it easier for users to access frequently used folders without having to navigate through the directory structure each time.
- Improved: The Image slice tool has been redesign to use CSS grid instead of a table to make sliced images responsive. It also greatly simplifies the output HTML.

Stencils
- New feature: Added a 'Download More Stencils' option to the Stencils Gallery, providing quick access to the website's download page for additional stencils. There are 2 new stencils packs on the download page, with more than 50 extra stencils for use with WYSIWYG Web Builder 20!
- New feature: Added an 'Open File Location' option to the Stencils Gallery, enabling quick access to the folder where stencil files are stored.
- New feature: Added ‘Stencilize’ filter to image tools. This feature converts an image into a transparent stencil, providing a quick and easy way to create your own stencils. You can use these stencils for use with other images or videos, allowing for versatile creative effects.
- Improved: Added support for .webp stencils (in addition to .png) to reduce file sizes.
- Improved: You can now add and use custom stencils by simply placing your .png or .webp files in the following folder:
Documents\WYSIWYG Web Builder\system\stencils\

Filter
- The image filter preview dialog is now resizable, It also remembers its previous size/position and include other (speed) improvements.

Wrap Text
- New feature: Added the ability to center a floating element or shape inside the text to create magazine like layouts.
Two columns, split with . Offset with margin-top. Cards, Icon, Image

Templates
- New feature: Added 'Filter' option to filter the display template based on the specified search term. For local templates, the search is based on the template name. For online templates, you can also search by keywords such as color, topic, or functionality (e.g., gallery, form, shop).
- New feature: Added 'Online Examples' category. We've consolidated all our example projects into a new 'Online Examples' category within the "Templates" section. Over the years, we’ve created numerous example projects to demonstrate the various features of WYSIWYG Web Builder. Previously, these examples were scattered across different areas—release notes, tutorials, and downloads—making them hard to track.
Now, you can easily access all these examples in one place. While most are simple demos showcasing specific features, they can be a great starting point or a helpful resource for discovering features you might not have thought to explore. There is also a dedicated shortcut in the Help menu. More than 150 examples are currently available!

Backup Manager
- New feature: Added 'Search' option to filter the displayed backups based on their name.
- New feature: 'Restore to another location' option, to restore the selected backups to another location instead of the default documents folder.
- New feature: 'Open file location' option. This will open a new Windows Explorer with the backup folder.
- New feature: Added 'Select all' button to quickly select all item in the list.

Badges
- New feature: Added 'image' type. This allows you to use custom images as badge for endless possibilities!
- New feature: Added 6 new badge types: Certificate, Shiny Ribbon, Simple Ribbon, Folded, Folded Arrow, Bookmark Horizontal
- Improved: Geometrics (rendering, hit testing, etc) of badges assigned to rotated objects.
- Improved: Added multiline support. Use
to split lines. Not supported for Ribbons and Stripe!

AI Text
- New feature: Added more tones / communication styles: "approachable", "authentic", "authoritative", "conversational", "dynamic", "empathetic", "engaging", "formal", "humorous", "informal", "innovative", "inspiring", "nurturing", "polite", "positive", "progressive", "thoughtful", "transparent", "trustworthy".

Stability AI
- New feature: Added support for "Stability AI" as alternative for OpenAI. "Stability AI" offers a wide range of extra option compared to dali-e3.
The following image generation models are currently supported: Stable Image Ultra, Stable Image Core, Stable Diffusion 3 Large, Stable Diffusion 3 Large Turbo, Stable Diffusion 3 Medium.

AI Image Inpainting
- New feature: Added 'Undo' button (also accessible via Ctrl+Z). This makes it possible to undo each paint action individually instead of resetting all actions at once. Hold SHIFT to undo all actions.
- New feature: Added new paint mode: flood fill. The Flood Fill Tool allows you to make a selected pixel and its surrounding pixels transparent based on their color similarity. The tolerance level determines how similar the surrounding pixels need to be to the selected pixel to also become transparent. A lower tolerance will only select pixels very similar in color, while a higher tolerance will select a broader range of colors.
- Improved: The brush size selection menu has been replaced with an input box, allowing for more precise control over the brush size.

AI Image Outpainting
- Improved: When using StabilityAI for outpainting., you can select left, right, top and bottom outpaint directions, instead of centered zoom, so you have more control over which sides are expanded.

AI Image Erase
- New feature: The Erase tool removes unwanted objects, such as blemishes on portraits or items on desks, using image masks.

AI Image Search and Replace
- New feature: The Search and Replace tool is a specific version of inpainting that does not require a mask. Instead, users can leverage a search prompt to identify an object in simple language to be replaced. The tool will automatically segment the object and replace it with the object requested in the prompt.

AI Image Search and Recolor
- New feature: The Search and Recolor tool provides the ability to change the color of a specific object in an image using a prompt. The Search and Recolor tool will automatically segment the object and recolor it using the colors requested in the prompt.

AI Sketch to Image
- New feature: Sketch to Image converts a simple drawing into a dynamic image. Use the prompt to define further details of the output image.

AI Create a new image with the same style
- New feature: This tool extracts stylistic elements from an input image (control image) and uses it to guide the creation of an output image based on the prompt. The result is a new image in the same style as the control image.

AI Image Remove Background
- New feature: This feature also work with Stability AI API key, so if you have a Stability account then there is no need for remove.bg key.

AI Images
- Improved: Added 'Image Provider' section. WYSIWYG Web Builder now supports multiple APIs for image generation. You can choose between OpenAI and Stability AI as your preferred provider for generating images.
Note: This setting only affects image generation, inpainting, outpainting, and image variations. All other features, such as Erase, Search and Replace, Recolor, Sketch to Image will automatically use Stability AI, as they are not yet supported by OpenAI.
- Improved: AI tools now show a 'warning' badge to indicate that the API key has not been set.
- New feature: Added the 'AI Vision' tool for automatically generating prompts from input images using AI. Simply click the 'bulb' icon to utilize OpenAI's AI Vision, which analyzes the image and generates a relevant prompt for you. This feature is particularly useful, as many image editing tools rely on input prompts to guide the output results.

Ollama
- New feature: WYSIWYG Web Builder now integrates with Ollama, allowing you to generate, translate and improve text using AI directly on your local computer.
Ollama is a platform designed to enable local installation and use of AI language models laptops or desktops. Unlike cloud-based AI services that require internet access to connect to servers, Ollama focuses on providing private, offline, and secure access to AI capabilities. It supports interactions with large language models directly from the user's machine, which can be especially useful for maintaining data privacy and reducing dependency on remote servers. Ollama supports popular language models like Llama 3.3, Mistral, Gemma 2, and other large language models.

ComfyUI
- New feature: WYSIWYG Web Builder now integrates with ComfyUI, allowing you to generate unlimited high-quality images using AI directly on your local computer.
ComfyUI is a powerful and popular open-source tool that supports AI models like Stable Diffusion and Flux, enabling you to create stunning images. Best of all, it's completely free, meaning there are no usage fees or limitations, unlike many paid online services, allowing you to create as many high-quality images as you want without any additional costs.

Rollover Image
- New feature: Added support for video (mp4). You can either use 2 videos or an image and video for the rollover. The video should not have audio otherwise the browser may not play it automatically.

Rollover Text
- New feature: Added support for video (mp4). The video should not have audio otherwise the browser may not play it automatically.

Rollover Layer
- New feature: Added the ability to vertical align floating content in Rollover Layers.

Flex Container
- New feature: Enhanced Flex Container, Card Container, and Card Repeater components with background video support. Users can now add background videos via YouTube, Vimeo URLs, or MP4 files, bringing dynamic visual options directly into these elements.

Text
- Improved: Added 'Translate in Google' tool to the context menu of text editor.

Icons
- New feature: Added support for Material Symbols. Material Symbols is a newer version of Material Icons based of a variable font with more than 3500 icons! There are 3 versions of Material Symbol: Outlined, Sharp and Rounded.
Because Material Symbols is based on a variable font, it has support for multiple fonts weights which gives you more control over the appearance of the icons. Also, the icons can rendered both unfilled and filled states. The fill mode is animatable and can be set via the transitions properties (see demo).
- Improved: The icon picker for Font Awesome now shows all (free) icon variations (solid and regular).
Added: image, images, calendar-days, calendar-plus, calendar-minus, clipboard, folder-closed, eye-o, eye-slash-o, hand, floppy-disk, file-zipper, file-video, file-image, hand-spock, hand-pointer, hand-point-left, hand-point-right, edit, clock, newspaper, gem, registered, moon, hospital, copyright, lightbulb, keyboard, rectangle-list, hard-drive, comment-dots. All regular variants have an '-o' post fix.
- Improved: The Format context tab in the Ribbon now supports Icons, allowing you to easily adjust their color, border, or background. When using the "Edit Text" (Ctrl+E) command in this context, the Icon Picker dialog will open for quickly selecting a different icon.

Clip Art
- New feature: Implemented Windows 10/11 Font Icons (Segoe MDL2 Assets / Segoe Fluent Icons) support. You can now use the icons in the Clip Art object (2 x 1386 icons!)

Shape
- New feature: Added 10 new Polymorphic shapes.

User Interface
- Improved: Icons in the user interface, including the Toolbox, Ribbon, and Toolbars, now seamlessly adapt to dark color themes with significantly improved contrast. Similar to Microsoft Office products, the colors' luminosity is inverted, ensuring they appear clearer and more visually appealing, making them easier on the eyes in dark mode.
- Improved: Icons in Icon pickers are rendered in accent color.
- Improved: Accent color dropdown in User Interface options renders color preview.
- Improved: Shape and Badge now use a gallery style shape selection, instead of a standard dropdown menu.
- Improved: Property Dialogs are now slightly wider, with increased spacing between property names and values to enhance readability.
- Improved: Added background and border properties to the Ribbon's formatting context tab.

Panel Menu
- New feature: Added 9 new hamburger icon (SVG) animations: split, divide, slide, circle, snake, smooth, elegant, morph, sling
- New feature: Added duration and easing options for (hamburger) icon animation.
- New feature: Added the ability to set the 'Line cap' style for the hamburger icon: square or round. When selecting "round", the ends of lines are rounded.
- Improved: Added dedicated (hamburger) icon animation option selection. This replaces the special character functionality for the title property. Now if an hamburger icon animation is selected, then the title value be not be used.

Overlay Menu
- New feature: Added 9 new hamburger icon (SVG) animations: split, divide, slide, circle, snake, smooth, elegant, morph, sling
- New feature: Added more than 30 'show animations' to Overlay Menu. They can be used to animate the menu when it's triggered via the hamburger menu.
- New feature: Added duration and easing options for (hamburger) icon animation.
- New feature: Added the ability to set the 'Line cap' style for the hamburger icon: square or round. When selecting "round", the ends of lines are rounded.

Drop Down Menu
- New feature: Added support for hamburger icon animations with the same options as in the Panel and Overlay Menus.

Navigation / Links
- New feature: Added support for WhatsApp links. This feature allows you to begin a chat with someone without having their phone number saved in your phone's address book.
Use whatsapp: where the is a full phone number in international format. Omit any zeroes, brackets, or dashes when adding the phone number in international format.
- New feature: Added 'Edit' button to links. This will open a dialog where you can quickly edit the parameters of mailto, tel, sms, skype, facetime and WhatsApp links. This option will also automatically url encode the text if needed.

Shopping Cart
- Improved: The built-in PayPal shopping cart has been renamed to "Shopping Cart' because it is no longer limited to PayPal checkout.
- New feature: We've added support for discount coupons! Customers can now enter a discount coupon in their cart. These discounts can be either a flat amount or a percentage off the total. You can configure multiple coupons.
- New feature: Added the ability to set the maximum order quantity. A (user definable) message can be displayed if the quantity is too high.
- New feature: Added the ability to set the border-width, border-radius and border color of the checkout button.
- New feature: Added 'Render all funding buttons' option to 'PayPal jаvascript SDK' checkout. By default, the cart only render a single PayPal checkout button. When 'Render all funding buttons' is enabled then all eligible funding buttons are rendered. For example card, sepa, giropay, ideal, sofort etc. The available funding options are different for each region.
- New feature: Added 'Stripe' checkout.
Requirements:
- Tools -> Options -> Ecommerce -> Stripe -> publish_key.
- Enable 'CLIENT-ONLY INTEGRATION' in Stripe account.
- Add your domain to 'List the domains you want to use with Checkout in live mode'.
- In the PayPal buttons, Item ID, should be the price_ID of the product (not product ID!).
- Use PayPal 'Add to cart' buttons or Ecommerce events to add items to the cart.
- The price ID should already have been setup in your Stripe account.
- The success and error url should be set up in the PayPal buttons settings.
- Stripe does not support the built-in discount and shipping. However you can set this up in your Stripe Account.
- New feature: Added 'Paddle' checkout.
- New feature: Added 'Custom' checkout. This allows you to implement a custom checkout via your own script. For example, you can send the content of the cart to an email address, whatapp message or a third party shopping cart checkout.

Akismet anti-spam protection
- New feature: Added support for Akismet anti-spam protection. Akismet provides robust anti-spam protection, effectively blocking spam submissions in contact forms.
Akismet works by analyzing comments or form submissions using a large database of known spam patterns and behaviors. It checks things like the content, user IP, and other metadata against its database. If the submission matches patterns typically seen in spam, Akismet flags it as spam. It's essentially a real-time spam filter that learns and improves over time based on the data it processes. Akismet offers free (non-commercial) and premium pricing plans.

Photo Collage
- New feature: Added a layout preview feature in the properties, allowing you to instantly see how the layout will appear without closing the properties panel.
- New feature: Added the ability to add box shadow to thumbnail images.

Lightboxes
- Improved: The Lightbox scripts are now located in the \documents\wysiwyg web builder\system folder, making them easier to maintain. This change simplifies upgrades, configurations, and the process of moving them to another computer. Additionally, updating or modifying the scripts is now more convenient.
- Improved: magnificpopup popup lightbox now has 'Zoom effect' enabled by default. Note: Zooming only works for images.
- Improved: spotlight and glightbox are now included in page properties lightbox configuration. This means that they can be used anywhere where lightboxes are supported (links, youtube, vimeo, html video, galleries etc.)
- Improved: Added add shortcut to change the Lightbox type in Page Properties in lightbox configuration of Inline Frame, YouTube, Vimeo, Video.

Blog
- New feature: Added MySQL data source. The blog can now load blog articles from the (CMS) database. This make it possible to modify blog articles online in combination with the CMS admin tool.
You can use this to display existing articles or use it as standalone blog.
TABLE STRUCTURE
title; used for subject
content, HTML code for the blog article
url, the link for the 'Read more' button
extra_data, can be used to set the image of the blog article.


- New feature: Added "Clone' to quickly clone an existing blog item.
- Improved: The blog now uses flexbox instead of clearfixes. This simplifies the generated output code.
- Improved: Added the ability to add padding to the blog's container.

Form
- Improved: Added the ability to set a maximum file upload size for email attachments, regardless of the 'Upload files to a folder' setting.
- Improved: You can now set the maximum file upload size to ‘0’ to disable file uploads entirely, which will exclude all related PHP scripting.
- Improved: Added tooltips to the 'File Upload' section to clarify the available options.
- Improved: Added 'label', 'date picker', 'range, 'flip switch' and 'rich text area' to Form's context tab on the Ribbon.

Video
- New feature: Added 'auto' option to aspect ratios for mp4 files. This will automatically get the aspect ratio from the video.
- Improved: The video object will now display the first frame of an MP4 video in the workspace (if the format is supported), replacing the previously shown generic placeholder.
- Improved: Added the possibility to drag & drop mp4 files from Windows File Explorer to the workspace.

YouTube
- Improved: You can now enter just the YouTube video ID instead of the full URL, giving you more flexibility without being restricted to a specific URL format.

Dividers
- New feature: Added a ‘Remove’ button to quickly remove or reset dividers.
- New feature: Added support for alpha transparency. This may be useful for creating semi-transparent effects using dividers.

Login Tools
- Improved: Enhanced security by using prepared statements and parameterized queries, to prevent SQL injection.

Inline Frame
- Improved: allowfullscreen has been replaced by allow="fullscreen".

Single Page Protect
- Improved: The password is now hashed using bcrypt.