New in 2022!

WYSIWYG Web Builder 17 has some major new features like the SEO assistant, robots.txt, Ecommerce integration, Table Of Contents, Lottie Animations and much more.

This template demonstrates some of the smaller (but useful) new features in version 17

Tell Me More!

Vertical Shape Dividers

Now you can rotate dividers! This makes it possible to add divider to the left or right side of a layer, layout grid etc.

Responsive Image Hotspots

In WYSIWYG Web Builder 17, image hotspots are responsive.
It's now also possible to add icons and tooltips!

Shape Divider with offset (50%)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.
Nulla facilisi. Integer lacinia sollicitudin massa. Cras metus. Sed aliquet risus a tortor.

Shape Divider with offset (66%)

Class aptent taciti sociosqu ad litora torquent
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero.

Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Nam nec ante. Sed lacinia, urna non tincidunt mattis, tortor neque adipiscing diam, a cursus ipsum ante quis turpis. Nulla facilisi. Ut fringilla. Suspendisse potenti. Nunc feugiat mi a tellus consequat imperdiet. Vestibulum sapien. Proin quam. Etiam ultrices. Suspendisse in justo eu magna luctus suscipit. Sed lectus.

Layout Grid with Fixed Columns

The left and right columns have a fixed size of 250 pixels. The center column is flexible.

Fast Service
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis.
Support
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis.
Great Performance
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis.
Increase Revenue
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur aliquet quam id dui posuere blandit. Vivamus magna justo, lacinia eget consectetur sed, convallis.

Cards with shape dividers

Added support for shape dividers in Cards. Another great way to decorate your cards!

Card 1
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Read More
Card 2
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Read More
Card 3
Do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Read More

Shape-Inside

WWB17 adds experimental support 'shape-inside' ellipse text.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sodales ligula in libero. Sed dignissim lacinia nunc. Curabitur tortor. Pellentesque nibh. Aenean quam. In scelerisque sem at dolor. Maecenas mattis. Sed convallis tristique sem. Proin ut ligula vel nunc egestas porttitor. Morbi lectus risus, iaculis vel, suscipit quis, luctus non, massa. Fusce ac turpis quis ligula lacinia aliquet. Mauris ipsum. Nulla metus metus, ullamcorper vel, tincidunt sed, euismod in, nibh. Quisque volutpat condimentum velit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Multi-color Icons

In WYSIWYG Web Builder 17, we've added the ability to use multiple colors for icons. Each part of the icon can now have a different color (for SVG output format).

Text Stroke

The Heading object has a new 'text-stroke' border style, using this option adds an outline to the text (instead of a border around the element)

WYSIWYG Web Builder

WYSIWYG Web Builder

Background Clip

The 'background-clip' specifies the painting area of the background. This may be useful in combination with transparent borders.

background-clip: border-box

'border-box' clips the background to the border box. When using a transparent border, the background will be visible behind the border.

background-clip: padding-box

'padding-box' clips the background to the padding box (excluding the border). The background behind the border will be transparent.

background-clip: text

The Heading object also support background-clip:text". In that case, the background (color, image, gradient etc.) is clipped to the foreground text.

Clip Path Animation

The 'clip-path' property allows you to create shape-based animations.

spotlight

rotate

star

chevron

Cascading Dropdown List

The new 'set choices' action in Conditions lets you "chain" multiple form combo boxes (select lists) together so that the selection in a "parent" list can tailor the options available in a "child" list.

Input Mask

An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers etc.

dd/mm/yyyy
mm/dd/yyyy
(999) 999-9999
[9-]AAA-999

... and Much More!

WYSIWYG Web Builder 17 has more than 100 new features and improvements. Check out the full list of all new features here: