www.wysiwygwebbuilder.com

This post offers an exclusive sneak peek at some of the exciting new features coming your way in WYSIWYG Web Builder 20!

We’ll be updating this topic daily on working days to reveal more details, so stay tuned and don’t miss a thing.

The exact release date is still to be confirmed, but we’ll share more details as soon as we have them.

*** Special Offer ***
Purchase Version 19 today and get the next version for free as soon as it’s available!
As always, this offer also applies to all licenses purchased within 60 days before the official release date.

Are you new to WYSIWYG Web Builder? Enjoy an exclusive 25% discount—pay just $44.95 instead of the regular price of $59.95. There’s never been a better time to join!https://www.wysiwygwebbuilder.com/purchase.html

Registered users of WYSIWYG Web Builder can enjoy a 40% discount on upgrading to the new version during the first week after release. Don’t miss out on this limited-time offer!

Stay tuned for more information!

Color Adjustments Tools

Color Adjustments Tools help you to quickly adjust the colors of the entire page. Brightness, Contrast, Grayscale, Hue, Saturation, Invert colors, Invert luminance, temperature, tint. You can also replace a specific color on the page.
The adjustments apply to elements like backgrounds, text, borders, and shapes, but they do not affect the colors within images.

These tools are ideal for quickly changing colors on the page without the hassle of manually adjusting each one. For instance, if you find a template you like but want to use different colors, these options make it easy to customize your design.



You can see the color changes in live preview.




Brightness / Contrast
Use this tool to adjust the lightness (Brightness) and the difference between light and dark areas (Contrast) on the page. Increase brightness to make the page lighter, or adjust contrast to enhance or soften visual details.




Grayscale
Convert the colors on the page to shades of gray, removing all color and leaving only black, white, and gray tones. This can be useful for a simpler, monochromatic view.


Hue / Saturation
Adjust the overall color tone (Hue) and the intensity of colors (Saturation) on the page. Use Hue to shift colors across the spectrum, and Saturation to make colors more vibrant or muted.



Invert Colors
Reverse all the colors on the page, turning each color into its opposite on the color spectrum. This creates a high-contrast, negative-like effect.


Invert Luminance
Flip the brightness levels on the page, making light areas dark and dark areas light, while keeping the original colors intact. This can create a striking visual contrast.


Temperature / Tint
Adjust the color balance of the page. Use Temperature to make colors warmer (more orange) or cooler (more blue), and Tint to shift colors towards green or magenta for fine-tuning.




Replace Color
Select and replace a specific color on the page with a new one. This tool allows you to target and change individual colors without affecting the rest of the design.




Sepia
Apply a warm, brownish tone to the page, giving it a classic, vintage look reminiscent of old photographs.


Adjust colors from image
Easily match the colors on your page to those in a selected image. This tool helps you create a cohesive color scheme by extracting tones directly from the image and applying them to your design.

How It Works:
Imagine you like the "Beauty Salon" template but want to use different images and colors. In this example, we replaced the template’s images with AI-generated comic art. Then, using the "Adjust Colors from Image" tool, we selected one of the new images to automatically adapt the page's colors to match, creating a harmonious and visually appealing design.

Color Swatches

The color swatches functionality has been revamped. Now, when you select a color swatch from the list, it will automatically apply the swatch's colors across the entire page, including various shades. This update replaces the previous system, where only exact color matches were affected by the swatch change. You can think of this feature as an enhanced "colorize" option.


Create swatch from image.
This option extracts the 12 most dominant colors from an image and generates a new swatch based on those colors.

Animated headline

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.

Highlight Text
Emphasize specific parts of your text by adding a dynamic highlight effect. This mode draws attention to key phrases or words, making them stand out and enhancing readability.

The following effects are available:
• Box
• Burst
• Circle
• Curly
• Delete
• Diagonal
• Double underline
• Scribble
• Strikethrough
• Underline
• Zigzag

Demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_highlight.html




Animate Text
Add dynamic movement to your text characters to capture attention and create visual interest.
Customize the animation style, duration, and effects to enhance your website's engagement.

The following animations are available:
• Disappear
• Drop
• Flip
• Heartbeat
• Jellow
• Neon
• Party
• Rotate
• Scale
• Swing
• Wave
• Wiggle
• Wobble

Demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_animate.html

Smart Content

Smart Content allows you to quickly and easily update text and images on your page based on a chosen category. This feature is especially useful when previewing templates with content relevant to your project. For instance, if you've downloaded a template with generic web design images, but want to see how it looks with content tailored to the 'Real Estate' category, Smart Content lets you make these changes in just a few clicks.



This feature is ideal for:
• Previewing templates with project-relevant content.
• Streamlining the design process without manually searching for images or writing placeholder text.
• Quickly generating context-specific content for presentations, client demos, or mockups.

With Smart Content, you can focus more on design and creativity, knowing that your page will be filled with accurate, relevant content in just a few clicks.

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.

The category can be set in the page properties or via the dropdown menu.




Example
In this example, we've used the 'Anime Salon' template to start with and set the category to 'Automotive.'
As a result, all images and text have been updated to reflect a car-related theme in just a few clicks!
Additionally, note that 'Smart Content' will automatically adjust the aspect ratio of the stock images to fit the design!
The option "Adjust colors from image' (Color Management Tools) was used to update the colors of the template based one of the images.




Note:
Using 'Smart Content' will generate different results each time you select it. If you're not happy with the outcome, feel free to try again.
If you discover a combination you love, make sure to save your project, as you won’t be able to recreate that exact mix of text and images later.

Blocks

Introducing 'Blocks Libraries'.
Now you can easily switch between different block libraries. Each block library can have its own set of blocks.
For example, you can have a dedicated library for dark blocks or eCommerce blocks.




We've added over 250 new blocks! to inspire you to create even more stunning websites.
These new blocks feature a modern design, incorporating large, easy-to-read fonts and generous spacing to enhance readability and create a clean, polished look.




- 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 smart content (text and images) based on the selected category. See also smart content .




- New feature: Added the ability to collapse / expand all categories in the Block Manager via the context menu.




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

Easy Mode

"Easy Mode" has been completely redesigned.
When Easy Mode is enabled, it loads a simplified environment where you can create your website using blocks only.
This option 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.

Photo / Video Grid

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.




The Photo Grid also offers several unique layouts, often referred to as "split screens." These layouts enable you to display images in creative, non-traditional formats, such as dividing two images diagonally for a striking visual effect.






Online demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_photogrid.html

Here is a preview of a new 'IT Solutions' template that uses the Photo Grid.




Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_itsolutions.html

Ferris Wheel

The Ferris Wheel object is an interactive circular slider, inspired by the design of a Ferris wheel. Each item (gondola) on the wheel can display a different icon, and clicking on an item 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.







Demos:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_ferriswheel_icons.html

https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_ferriswheel_images.html

Slideshow

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




Demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_backgroundslideshow.html


- Added "Ken Burns" animation to 'background' mode of the Slideshow.




- The Ken Burns animation effect has been updated to eliminate the use of jQuery, resulting in a more lightweight and efficient page load.

Photo Collage

- Added a layout preview feature in the properties, allowing you to instantly see how the layout will appear without closing the properties panel.




- Added the ability to add shadows to thumbnail images.

Lightboxes

- The built-in magnificpopup popup lightbox now has 'Zoom effect' enabled by default.




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




- Added add shortcut to change the Lightbox type in Page Properties in lightbox configuration of Inline Frame, YouTube, Vimeo, Video.




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

Here is a preview of a new 'Prismatica' template that uses the new lightbox zoom functionality.




Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_prismatica_index.html

Offline AI Integration. Self-Hosted AI Tools for Text and Images

Last year, we introduced OpenAI integration, bringing powerful AI functionality to WYSIWYG Web Builder.
Over the past year, AI technology has evolved significantly, and it's now even possible to run AI services directly on your local computer!

With version 20, we've taken this to the next level by integrating with a selection of robust local AI tools:
- Ollama for text generation
- ComfyUI for image creation (supporting Flux, Stability AI, and more).

Best of all, these tools are completely free, meaning there are no usage fees or limitations, unlike many paid online services, allowing you to create as many high-quality images and text as you want without any additional costs!

Ollama Integration (beta)
WYSIWYG Web Builder 20 now integrates with Ollama, enabling you to generate, translate, and enhance 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.

Note: This functionality requires a modern, fast computer for optimal performance!

Most OpenAI-related text features introduced in version 19 last year are compatible with Ollama. This means you can now access these powerful tools without needing an OpenAI account.






ComfyUI Integration (beta)
WYSIWYG Web Builder 20 also 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.

• Free and Open-Source: ComfyUI is completely free, with no usage fees or limitations.

• Full Customization: It offers detailed control over every step of the image generation process, allowing for deeper customization that many online platforms don't provide.

• Offline Use: You can run it locally on your computer, so you don't need internet access and avoid server downtimes or restrictions.

• Privacy: Since everything runs on your machine, there's no need to upload data or prompts to external servers, protecting your privacy.

• No Usage Limits: ComfyUI doesn’t limit the number of images you can generate, unlike online services that often cap usage based on credits or subscriptions.

• A fast computer/GPU is required to run ComfyUI effectively!





Note: This feature is intended for advanced users. You'll need a powerful computer and will have to set up ComfyUI on your own.
However, ComfyUI offers exceptional capabilities, which is why we've included it as an alternative to paid services like OpenAI and Stability AI.

Currently ComfyUI can be used to generate images and remove backgrounds.
It does not yet offer features such as outpainting, inpainting, or variants.
However, these features will be included in a future update.

These images were generated by ComfyUI and the popular ‘Flux’ model. Flux is currently one of the best image generation models.



Also, all images from the new templates (25+) were generated with ComfyUI/Flux.

Stability AI

Local AI tools may not be suitable for everyone. For instance, if you have a slower computer or prefer not to run these tools locally, we've got you covered with new options powered by third-party services.

To provide more flexibility, we've added support also for Stability AI as an alternative to OpenAI.
Stability AI offers an extensive range of image-related features, surpassing what OpenAI's DALL-E 3 currently provides.






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




AI Image Search and Replace
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
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 Image Upscale
Image Upscale can be used to improve the quality of existing images.
There are 3 modes: Fast, Conservative and Creative.

Fast Upscaler, Enhances image resolution by 4x using predictive and generative AI. This lightweight and fast service is ideal for enhancing the quality of compressed images, making it suitable for social media posts and other applications.
Conservative Upscale, Upscale and image to 4K resolution while minimizing alterations to the image.
Creative Upscale, This is probably the most exciting choice, because it will transform a low quality, low resolution image into a stunning work of art with intricate details at 9mp resolution - regardless of the input resolution. Provide an input image of poor quality and add a prompt that describes the desired output. High creativity (up to 0.35) will yield dramatic changes to the image.



Note: Most AI upscalers work by first making the image larger, then smoothing out artifacts and sharpening edges. They don't add anything to your image.
The Creative Upscaler is different. It uses a text prompt in conjunction with your image to create new details that weren't there before.

This is an AI generated image in CGI-style.



And below are the results of creative upscaling with different creativity values.




AI Image to Video
Generate a short video (approximately < 5 seconds) based on an initial image. The video can be used as background or just to add some motion to your website.





Online demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_imagetovideo.html

The functionality is described here:
https://huggingface.co/stabilityai/stab ... img2vid-xt


AI Sketch to Image
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
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 Variations (Stability AI)
Stability AI is also good in creating variations of existing images.




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.

Stability AI offers significantly higher quality compared to OpenAI.

Other AI Improvements

AI tools show a 'warning' icon to indicate the API key has not been set.




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, title or description for you.






AI Image Inpainting
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.




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.






The brush size selection menu has been replaced with an input box, allowing for more precise control over the brush size.




AI Image Outpainting
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 Text
Added more tones / communication styles: "approachable", "authentic", "authoritative", "conversational", "dynamic", "empathetic", "engaging", "formal", "humorous", "informal", "innovative", "inspiring", "nurturing", "polite", "positive", "progressive", "thoughtful", "transparent", "trustworthy".




AI Image Remove Background
This feature now also works with a Stability AI API key and ComfyUI (local), so if you have a Stability account or use ComfyUI, then there is no longer need for remove.bg key.

Website Wizard

- Added hundreds of new layout variations to the wizard for even more unique websites. The layouts are based on the new ‘modern‘ blocks.

- Added 25 new categories, including: Accountant, Astrology, Band, Barber, Catering, Charity, Coaching, Cryptocurrency, Dance Studio, Dietitian, Driving School, Electrician, Florist, Gardening, Hairstylist, Handyman, Influencer, Logistics, Mechanic, Music Teacher, Parenting, Personal Trainer, Plumber, Tailor, Tattoo Artist, Wellness. These new categories empower the wizard to generate tailored text and stock images, helping you create even more relevant and engaging content.

All categories from the Website Wizard are also available for “Smart Content”.

Layout Grid Management Tools

We've added some new tools to quickly modify the properties of Layout Grids, like background, border and arrange tools (move up, move down, move to top, move to bottom).
Now when you select a Layout Grid, the Ribbon will now display a dedicated 'Format' context tab.




There are options to set the background, alignment and padding of the selected Layout Grid column via the Ribbon.
These options are also available via the menubar. So, it’s no longer needed to open the Layout Grid properties and then select the column and the click “style”.



Delete: Removes the selected Layout Grid column along with its content.

Insert: Adds a new Layout Grid column at the selected position.

Move Left / Move Right: Adjusts the order of Layout Grid columns, moving the selected column (and its content) left or right.

Increase / Decrease: Modifies the size of the selected column.




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!


Preset Layouts
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 (custom) flex grid templates.
The flexgrid templates can be modified via the flex grid properties.

Dividers

Added support for alpha transparency. This may be useful for creating semi-transparent effects using dividers.



Here’s an example where the divider colors fades into the background using gradient background mode.




Added a ‘Remove’ button to quickly remove or reset dividers.
So, you do not have to set the type to ‘none’ manually.

Horizontal Cards

Added horizontal card functionality. The new 'column break' card item allows you to divide card items into multiple columns.








Demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_horizontalcards.html


Additionally, the 'Add' items drop down menu now also has icons which make it easier to identify the different card item types.

Badges

Added 'image' type. This allows you to use custom images as badge for endless possibilities.



Also, added 6 other new badge types: Certificate, Ribbon Glossy, Ribbon Simple, Folded, Folded Arrow, Bookmark Horizontal




Demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_badges.html

Here is a preview of a new 'Web Developer' template that uses the new Ferris Wheel slider.



Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_webdeveloper.html

Here is another preview of a new 'Toony Christmas' template which is a remake of the "Santa Lina" design from a few years ago.

We've swapped out the original photos for cartoon images generated with help of the new AI tools (ComfyUI/Flux).
All cartoon poses were inspired by Irena's original photos, with help of the AI Vision functionality.
This is just a demonstration to showcase the level of control you have over the results of AI-generated images.



Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_toonychristmas.html

Shopping Cart

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.








Added the ability to set the maximum order quantity. A (user definable) message can be displayed if the quantity is too high.






Added the ability to set the border-width, border-radius and border color of the checkout button.




Added 'Render all funding buttons' option to 'PayPal JavaScript 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.




The built-in PayPal shopping cart has been renamed to "Shopping Cart' because it is no longer limited to PayPal checkout.

- Added 'Stripe' checkout to the Shopping Cart




Added 'Paddle' checkout to the Shopping Cart




Added 'SnipCart' checkout to the Shopping Cart




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.

Here is a preview of a new 'Vinyl Watch' template. This demonstrates the use of discount coupons.




Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_vinylwatch_index.html

Blog

Added MySQL data source. The blog can now load blog articles from the (CMS) database. This makes 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.




Added "Clone' to quickly clone an existing blog item.




Added the ability to add padding to the blog's container.




The blog now uses flexbox instead of clearfixes. This simplifies the generated output code.

Forms

Akismet anti-spam protection
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.




Added 'label', 'date picker', 'range, 'flip switch' and 'rich text area' to Form's context tab on the Ribbon.




File Upload

Added the ability to set a maximum file upload size for email attachments, regardless of the 'Upload files to a folder' setting.

You can now set the maximum file upload size to ‘0’ to disable file uploads entirely, which will exclude all related PHP scripting.

Added tooltips to the 'File Upload' section to clarify the available options.

Login Tools

All login scripts have been rewritten for enhanced security by using prepared statements and parameterized queries, to prevent SQL injection.




Single Page Protect
The password is now hashed using bcrypt (protection method: PHP).

Templates

Over the years, we've developed a wide range of example projects to showcase the features of WYSIWYG Web Builder.
Previously, these examples were spread across release notes, tutorials, and various downloads, making them difficult to find. To simplify access, we've gathered all the example projects into a dedicated 'Online Examples' category within the "Templates" section: File -> New website from Template.

More than 150 examples are currently available!




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.




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 topic, or functionality (e.g., gallery, form, shop, flexbox).




With every major upgrade, we dedicate considerable time to testing both new and existing features to ensure they work properly before releasing the software.
To thoroughly test functionality, we usually create dozens of example websites and templates. As a result of these tests, we’ve created a variety of new templates that will be available when the new version is launched. This year we have more than 25 new designs.




More new template previews will be revealed later...

Icons, Clip Art, Shapes

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 be rendered both unfilled and filled states. The fill mode is animatable and can be set via the transition properties (see demo).

Online demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_materialsymbols.html


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
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!). These are standard system icon fonts.




Shape
Added 10 new Polymorphic shapes, which can be useful as backgrounds behind text or other elements.

Here is a preview of a new 'Spa' template. This is another demonstration of images generated with the ComfyUI integration using the "flux dev" model.




Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_spa_index.html

The following items are related to images and video.

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




Stencils
Added support for .webp stencils to reduce file sizes.

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\

This new feature allows greater flexibility and personalization, enabling you to easily integrate your own designs into your projects.

We've expanded the stencil collection with 12 brand-new built-in designs to give you even more creative possibilities.




Added an 'Open File Location' option to the Stencils Gallery, enabling quick access to the folder where stencil files are stored.



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!




Rollover Image
Added support for video (mp4). You can either use 2 videos or an image and video for the rollover.






Demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_rolloverimage.html


Rollover Text
Added support for MP4 video to the Rollover Text object, to easily add overlay text onto videos. Perfect for adding captions, or contextual information directly to your videos without the need for using multiple tools.






Demo:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_rollovertext.html


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






Flex Container
Flex Container, Card Container, and Card Repeater components now also have background video support.
Users can now add background videos via YouTube, Vimeo URLs, or MP4 files, bringing dynamic visual options directly into these elements.




Video
Added 'auto' option to aspect ratios for MP4 files. This will automatically get the aspect ratio from the video.



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.

Also, added the possibility to drag & drop MP4 files from Windows File Explorer to the workspace. When an MP4 file is dropped on the workspace, an HTML5 video object will be automatically created.


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

Here is a preview of a new 'Online Courses' template. Just having some fun with AI generated images




Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_onlinecourses.html

Links
- 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:<number> where the <number> is a full phone number in international format. Omit any zeroes, brackets, or dashes when adding the phone number in international format.




- Added 'Edit' button to links. This will open a dialog where you can quickly edit link parameters of
mailto
tel
sms
skype
facetime
WhatsApp

This option will also automatically url encode the text if needed.






Panel Menu

- Added 9 new hamburger icon (SVG) animations: split, divide, slide, circle, snake, smooth, elegant, morph, sling

- Added a dedicated (hamburger) icon animation option section. This replaces the special character functionality for the title property. Now if a hamburger icon animation is selected, then the title value is not used.




- Added duration and easing options for (hamburger) icon animation.



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






Overlay Menu
- Added 9 new hamburger icon (SVG) animations: split, divide, slide, circle, snake, smooth, elegant, morph, sling




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




- Added duration and easing options for (hamburger) icon animation.



- 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
- Added support for hamburger icon animations with the same options as in the Panel and Overlay Menus.

Wrap Text
- Added the ability to center a floating element or shape inside the text to create magazine like layouts. Previously only left and right were possible.








Demo’s:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_wraptext_card.html

https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_wraptext_shape.html


Accordion

- Added the ability to set the spacing between accordion panels.






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

Here is a preview of a new 'Christmas in London' template. This template uses some new features, like rounded hamburger icon and overlay animation.




Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_christmasinlondon.html

Dark Mode

- Icons in the user interface, including the Toolbox, Ribbon, and Toolbars, now 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.

Also, the dark color schemes now have better contrast and various other improvements.




- The Visual Studio visual themes now reflect the updated color schemes from Visual Studio 2022.




Color Picker
You may have already noticed this in previous screenshots;)

- Added new rounded color picker style. If you prefer the old look then you can set this in Tools -> Options -> User Interface.





- Added 'Eyedropper' tool. Use the eyedropper tool to quickly pick a color from the screen without having to open the color dialog first.




User Interface
- Accent color dropdown in User Interface options renders color preview.




- Icons in Icon pickers are rendered in accent color.




- Shape and Badge now use a gallery style shape selection, instead of a standard dropdown menu.




- Added background and border properties to the Ribbon's formatting context tab.




Also, Property Dialogs are now slightly wider, with increased spacing between property names and values to enhance readability.


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

Publish

- Added the ability to set a master password for the publish data.
This feature allows you to set a master password to secure your publishing data. Once enabled, all FTP account passwords stored in Documents\WYSIWYG Web Builder\system\publish.dat will be encrypted using PBES2 encryption for enhanced security.




- 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




Backup Manager
- Added 'Search' option to filter the displayed backups based on their name.




- 'Restore to another location' option, to restore the selected backups to another location instead of the default documents folder.




- 'Open file location' option. This will open a new Windows Explorer with the backup folder.




- Added 'Select all' button to quickly select all item in the list.

We’re nearing the end of unveiling the exciting new features of WYSIWYG Web Builder.
Next week, we’ll share a few more previews of new templates and provide more in-depth details about the upcoming features.

In the meantime, we’re fine-tuning the final release with the latest adjustments to ensure everything is just right...

Here are 5 more previews of the new templates for version 20.

Magic Template



Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_magic.html


Cyberpunk Template



Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_cyberpunk.html


Perfume Template



Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_perfume_index.html


Music Producer Template



Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_musicproducer.html


Time Template



Preview:
https://wysiwygwebbuilder.com/support/wb20tryouts/wb20_time.html

As we prepare WYSIWYG Web Builder for its release, you can explore more details about some of the new features through these tutorials:

Color Adjustment Tools
https://wysiwygwebbuilder.com/coloradjustmenttools.html

Animated Headline
https://wysiwygwebbuilder.com/animatedheadline.html

Smart Content
https://wysiwygwebbuilder.com/smartcontent.html

Ferris Wheel
https://wysiwygwebbuilder.com/ferriswheel.html

Photo Grid
https://wysiwygwebbuilder.com/photogrid.html

Easy Mode
https://wysiwygwebbuilder.com/easymode.html

Stability AI
https://wysiwygwebbuilder.com/stabilityai.html

Use ComfyUI for AI Image Generation
https://wysiwygwebbuilder.com/comfyui.html

Use Ollama for AI Text Generation
https://wysiwygwebbuilder.com/ollama.html

Examples
https://wysiwygwebbuilder.com/examples.html

How to Add a Video to Your Web Page
https://wysiwygwebbuilder.com/add_video.html

Please note that these tutorials are still under construction.

We've received a lot of positive feedback on the new features, and can't wait to make WYSIWYG Web Builder 20 available to all users.
If all goes smoothly, we’re aiming for a release sometime around the first or second week of 2025.

Happy New Year!

Just a few more days...

January 7, 2025