Almost 18... (teaser)

[Pablo]

Panel Menu

- Added 'Reveal' type (in addition to 'overlay' and 'push'). In reveal mode, the panel menu will initially show the icon only and when the mouse is over the menu, it will expand to its full width. Note that this only works when the menu is at the left/right edge of the page.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu_reveal.html








- Added 'Fixed' type (in addition to 'overlay', 'push' and 'reveal'). In fixed mode, the panel menu will always be visible. Note that this only works when the menu is at the left/right edge of the page.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu_fixed.html




- Added 'Blur' property. This adds a backdrop blur filter to the overlay background.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_panelmenu.html




- Added dropdown menu to select the hamburger icon animation. (https://wysiwygwebbuilder.com/support/panelmenu-animations/index.html)




- Added the ability to set the size for icons in menu items. Previously the icon size was the same as the size of button icon. Now the icons can have a different size. Note: the spacing between the icon and text is determined by the padding.




- It is now possible to hide the menu on smaller screens via the breakpoint property by specifying a negative value. For example, '-768' will hide the menu on screens smaller than 768 pixels.




- Added support for predefined styles.



Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html

[Pablo]

Responsive Menu

- Added 'Underline' property.




- Added support for predefined styles.



Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html

[Pablo]

CSS Menu

- Added 'space between' size mode. The items are evenly distributed. The spacing between each pair of adjacent items is the same.





Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_cssmenu.html


- Added support for predefined styles.



Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html

[Pablo]

Mega Menu

- Added 'Icon Offset' property for sub menu items. This specifies the offset from the left (or right) side of the menu item. Note that if you increase this value then you may also need to increase the padding otherwise the icon will overlap the text.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_megamenu.html






- The properties dialog of the Mega Menu has been redesigned to be more consistent with other menus, for quicker access to properties and making them easier findable.




- Added support for predefined styles.



Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html

[Pablo]

Themeable Button

- Added 2 new icon align options: inline left and inline right. This will align the icon inline with the text instead of at the left or right side of the button.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_themablebutton.html






- Added the ability to set the 'icon size'. Previously the icon size was the same as the text size. Now the icon can have a different size.






- Button icons can now also be published as SVG (Tools -> Options -> HTML -> Publish navigation icons as SVG).

- 'button set' type no longer uses jQuery's control group, it uses flexbox instead, resulting in cleaner and faster code.

[Pablo]

This is a preview of a new template for WWB18: "Light Bulb".



The light bulb demonstrates a few of the new progress bar variants and also uses sections for the overlapping shapes.

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_lightbulb.html

[Pablo]

Animations

- Added 'Alias' functionality. This makes it possible to give animations an easier to remember name. Over the years we have added many new animations. Most animations have technical names like 'transform-lightspeed-in' or 'transform-swing'. By using an alias, they can now be displayed as 'Lightspeed In' and 'Swing'. Internally, the software will still use the original name (because renaming the animation name would break existing websites, that use that animation).
So, an alias is only to make it easier to identify the animation. It does not affect the published page.






Note: when 'display aliases in user interface' is enabled then animations without an alias will not be displayed. Which can also be useful to hide less frequently used animations without removing them completely!




- Added 'Copy / Paste' functionality. This makes it possible to copy/ paste animations and transitions between objects.

[Pablo]

Google Fonts
- Added more than 350 new fonts!

- Added the ability to host Google fonts locally for better performance and privacy.




Normally, Google Fonts are loaded from Google servers. This means that an extra CSS file needs to be loaded and two extra DNS lookups (fonts.googleapis.com and font.gstatic.com).
When you do host Google Fonts locally, all the requests will come from the same domain as your other assets.

Also, there may be privacy concerns when using Google services as described here: https://blog.runcloud.io/google-fonts-gdpr/
By hosting the fonts locally, Google will not be able to track your visitors.

Note that this feature is pretty complicated behind the scenes, so using local fonts may not always work exactly the same as when using Google Font services. For example, Google generates a stylesheet that only contains the fonts specifically for the browser the page is viewed in. Obviously, WWB does not know which browser the visitor of the website has at design time. So, therefor it generates CSS for different font types (woff, woff2).

During publishing WWB will scan the page for used Google Fonts. It will first download the CSS to figure out the font files for different browsers. Then the CSS files of these different types are combined. Next, WWB will download the fonts locally and update the location(s) in the HTML file. The (local) fonts will be published together with the page. All files are cached, so this process is only done once for each font variation.

[Pablo]

Events

- Added 'Set Value' action. This can be used to set the value of a specific object. For example, set the value of a progressbar or input box.
'Set value' currently supports the following objects: Editbox, Text Area, Select, Checkbox, Radio Button, FlipSwitch, Spinner, Slider, Range, Button text, Heading text, Label text.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_events_setvalue.html




- Added 'Toggle Dark Theme' action. This makes it possible for the user to toggle between dark and light mode. For this to work, dark theme mode (in Tools -> Options -> HTML) should be set to 'manual'.

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_events_darkmode.html




- The 'Set Class' action (previously named 'Set Style') has been redesigned. It now applies the class to the same element as the 'class' property, which makes working with styles easier and more logical.



Demos:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_style_switcher_buttons.html


- Added 'Clone' button to quickly add a copy of the selected event.

[Pablo]

Conditions

- Added 'Set Class' action. This can be used to set a class (style) for specific conditions. For example, based on the selected item in a 'select' object in case of a "style switcher".

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_conditions.html




- Added 'Clone' button to quickly add a copy of the selected condition.

[Pablo]

This is a preview of a new template for WWB18: "Vintage".




The "Vintage" template was inspired by a retro website that I stumbled on. I specially liked the old school color scheme.

It demonstrates two undocumented features of WWB18:
- The layout grid of the 'feature' cards has two different background colors at the top and bottom. This makes it look like the cards in the layout grid overlap to the next layout grid. The effect was implemented using a new 'rectangle' shape divider.
- The social media icons at the bottom have a double border. The outer border was created with (negative) box shadow blur. A negative blur radius, uses 'spread' instead of 'blur'.




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_vintage.html

[Pablo]

HTML Widget

- Added the ability to set the font size of the editor.

[Pablo]

Blog

- Blog Carousel now uses Bootstrap 5. No longer depends on jQuery.

[Pablo]

Sitemap

- Holding down the SHIFT key while changing the frequently or priority will apply the new value to all pages in the project.
This may be useful if you want to change the value for all pages without having to update it for each page individually.

[Pablo]

Ready-to-use-Javascripts

- Added 'WYSIWYG Web Builder' logos (light and dark).

[Pablo]

- Version 18 also has many internal optimizations. And although this release has more than 150 new features, the size of the executable has not increased!

[Pablo]

When using the new Office 2022 theme, the 'tell me' search box is located on the Ribbon caption.
The input field will be minimized when it does not have the input focus.

[Pablo]

This is a preview of a new template for WWB18: "Band".

This template demonstrates the new "space between' mode of the CSS menu.
A simple way to implement a scalable menu without the need for breakpoints.




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_band.html

[Pablo]

This is a preview of a new template for WWB18: "Ice Cream".

Another template to demonstrate the use of sections.
The ice cream template was inspired by a dutch ice cream truck named 'Pablo's ijscobar'
The colorful ice cream images are from the Freepik website: https://www.freepik.com/
The ice cream logo was specially created for this template...




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_icecream.html

[Pablo]

This is a preview of a new template for WWB18: "Artificial Art".



As you may have seen in another templates, I have done some experiments with AI for both text and images.
Unfortunately, the technique is currently too expensive to integrate in the software, but this is certainly something that is considered for future development!

All the text and images in this template were created with Artificial Intelligence (AI).
The text was generated with GPT-3, as alternative for Lorem Ipsum text.
The images were created with Stable Diffusion and DALI-E 2
The layout uses 'classic' absolute/fixed positioning with breakpoints, to have full control over the layout.

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_artificial_art.html

[Pablo]

This is another variant of the "Artificial Art" template: "Christmas Art"
The main difference is that this one is using Christmas themed images...




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_christmas_art.html

[Pablo]

This is a preview of a new template for WWB18: "Planets".
This template is an extended version of the 'planets' demo that was created to demonstrate mouse effects in sections.




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_planets.html

[Pablo]

This is a preview of a new template for WWB18: "Bakery".
This multi-page template is based around bakery images from Unsplash.
The text (like in most other templates) was generated with GPT-3: https://openai.com/api/




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_bakery.html

[Pablo]

A preview of a new template for WWB18: "Coffee and Cakes".
This template is based on AI generated coffee and cakes images...




Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_coffee_and_cakes.html

[Pablo]

More than 25 new templates for WYSIWYG Web Builder 18 will available at the release date.
As usual these are just some random ideas, to showcase what you can do with the new tools...

[Pablo]

Here is an overview of new tutorials for version 18:
https://www.wysiwygwebbuilder.com/autocomplete.html
https://www.wysiwygwebbuilder.com/customscrollbars.html
https://www.wysiwygwebbuilder.com/darkcolorscheme.html
https://www.wysiwygwebbuilder.com/dialog.html
https://www.wysiwygwebbuilder.com/login_embedded_db.html
https://www.wysiwygwebbuilder.com/mouseeffects.html
https://www.wysiwygwebbuilder.com/progressbar.html
https://www.wysiwygwebbuilder.com/protected_content.html
https://www.wysiwygwebbuilder.com/section.html
https://www.wysiwygwebbuilder.com/style_switcher.html
https://www.wysiwygwebbuilder.com/tooltip.html

The following tutorials have been updated:
https://www.wysiwygwebbuilder.com/paypal_shoppingcart.html
https://www.wysiwygwebbuilder.com/ribbon.html
https://www.wysiwygwebbuilder.com/seo_assistant.html

[Pablo]

And to conclude this teaser, here's the (almost) complete list of new features for WYSIWYG Web Builder 18.
https://www.wysiwygwebbuilder.com/support/wb18.html

WYSIWYG Web Builder 18 will be available soon...