SWEET SIXTEEN (teaser)

Post by **Pablo** » Sun Aug 16, 2020 7:28 am

WYSIWYG Web Builder 16 is planned for later this year, this will be a major upgrade with more than 200 new features and improvements!
This post will give you a sneak peak at some of these new features.
This topic will be updated daily to reveal new features, so make sure you don't miss anything...

The exact release date is unknown at this time. But we tell you more as soon as we know it!

*** Special Offer ***
If you buy version 15 today you will get version the next version for free when it becomes available!
This offer is also valid for all licenses purchased within 60 days before the official release date (as usual).
You will also get a 15% discount, so now you pay $49.95 instead of $59.95
http://www.wysiwygwebbuilder.com/purchase.html

Other registered users of WYSIWYG Web Builder will get a 50% discount when upgrading to the new version in the first few weeks after the release.

This cartoon was created by gadtoons

Post by **Pablo** » Mon Aug 17, 2020 6:51 am

Editable Content
Added two new CMS tools: 'Editable Content' and 'Editable Content Admin'. The new CMS tools were designed as a simple and subscription-free alternative for services like Cushy CMS and Surreal CMS. Editable Content can be used to define one or more editable sections on the page. These sections can be modified online with the 'Editable Content Admin' tool.
Multiple sections can be added per page. No database setup is required, it uses flat file storage (no mySQL). The page with editable sections does not need to be PHP, the content is dynamically loaded via javascript/ajax. 'Editable Content Admin' works with all supported editors, like tinyMCS and summernote!

Object overview:

Content editor:

Online tutorial (preview):
https://www.wysiwygwebbuilder.com/editable_content.html

Post by **Pablo** » Mon Aug 17, 2020 6:57 am

CMS
- New feature: Added 'Page list' option to CMS View. This displays a list of the last modified pages/posts. Clicking on one of the items will load the selected page.

- New feature: Added 'Popular Articles' option to CMS View. This displays a list of the pages with the most views. Clicking on one of the items will load the selected page.

- Improved: Hidden pages are no longer visible in the search results and in fixed CMS views.

- New feature: For "fixed content' you now can also specify a negative page ID. This will display nth last article (based on the creation date). For example, using -2 will display the second last CMS article. This can be useful if you want to display the last few articles on a page in different sections of the page.

- New feature: Added support for 'Summernote' editor. Summernote is a simple, clean and flexible online WYSIWYG Editor with lots of options like tables, images, videos etc. Summernote also supports plugins so you can integrate with elfinder, add a photo gallery and much more!

- New feature: Added 'Maximum items' property to CMS menus. This specifies the maximum number of items to display in a menu. This can be useful to use the CMS for a blog-like website where you only want to display recent items.

- New feature: Added 'Home label' property. When this is set, a 'Home' link will be added to the menu.

- New feature: Added the ability to customize/translate the text of the various items (headers, buttons)

- New feature: Added the ability to display CMS posts in the “News feed Ticker object”. ‘Page List’ will display the pages in the order they were last updated. Popular Articles’ will display the pages with the most views.

- New feature: Added 'Page Views' plugin. Displays the top 10 page views in a pie and bar chart.

- New feature: Added 'Blog' plugin. This implements a simple blog that can be added to CMS pages. There is also a 'summernote' version of the plugin available with advanced editing options.

Post by **Pablo** » Mon Aug 17, 2020 6:59 am

CMS Card
- New feature: Added new "CMS Card" object. This is an extended version of the Card object which can be used as part of the CMS tools. Cards are a quick and easy way display information in various ways on a website. The layout of Cards is flexible so they are great for use in responsive websites.
With the new “CMS Card” object, you can display dynamic data from the CMS database in a card layout. Variables are used to indicate which data you want to display. Variables can be used anywhere in the card: header, footer, text, buttons, and even in videos. For example, you could use the ‘extra data’ field of the CMS as the URL of a YouTube video. Each card on a page can display the content of a different CMS article.

During design time, the CMS card may look something like this:

On the published page the variables will be replaced with the content from the database:

Post by **Pablo** » Mon Aug 17, 2020 7:00 am

CMS Navigation
- New feature: Added CMS support to the Overlay Menu, Responsive Menu and Themeable Menu.

Post by **Pablo** » Mon Aug 17, 2020 8:26 pm

Pixabay
- New feature: Added Pixabay integration. Browse thousands of free-to-use, high quality images and videos from Pixabay directly within WYSIWYG Web Builder.

Post by **Pablo** » Mon Aug 17, 2020 8:28 pm

WebP Images

- New feature: Added support for WebP images. Raster image format (pronounced Weppy") developed by Google for Web graphics; designed to reduce image file sizes over standard JPEG compression while maintaining the same or similar quality; allows images to be downloaded more quickly.
https://developers.google.com/speed/webp

Post by **Pablo** » Mon Aug 17, 2020 8:32 pm

Cache Busting

- New feature: Added ‘Cache Busting’ option for external CSS and JS files.

To speed up load times, Web browsers are designed to cache CSS and JS files. The cached files are stored on the visitor’s computer, so the next time they visit a site, these files will be loaded faster. However, this may cause issues if you have made changes to the website but the browser still loads the previous (cached) version of the files. When cache busting is enabled, unique suffixes will be added to the file paths of the CSS and JS files. This forces the browser to re-load the files from the server.

Post by **Pablo** » Mon Aug 17, 2020 8:34 pm

Responsive Web Design / Breakpoints

- New feature: Added the ability to set the default font size per breakpoint (in Manage Breakpoints).

- New feature: Added 'Default breakpoints' option (Tools->Options->General) to configure default breakpoints (and font sizes) for new pages. It's also possible to set the default value for 'Activate breakpoints when browser window is smaller/larger' than the device width.

Post by **Pablo** » Mon Aug 17, 2020 8:43 pm

Morphing Shape

- New feature: Added 'Morphing Shape' object. Smoothly morph two or more shapes to create unique animations on your website. All built-in shapes, clipart and icon library are supported. You can even morph between icons of different libraries.
Animations can be triggered automatically (slideshow), on hover, on scroll with anchors or based on the current scroll position (continuous).

Demos:
https://www.wysiwygwebbuilder.com/suppo ... fixed.html

https://www.wysiwygwebbuilder.com/suppo ... croll.html

https://www.wysiwygwebbuilder.com/suppo ... inous.html

Post by **Pablo** » Mon Aug 17, 2020 8:47 pm

Snap Scroll

- New feature: Added 'Snap Scroll' object. Snap Scroll enhances one page scrolling website experience by providing snapping behavior as the user scrolls up or down the page. It also adds pagination dots with hover titles to the page for easy navigation and displaying the currently active section.

Demo:
https://www.wysiwygwebbuilder.com/suppo ... croll.html

Post by **Pablo** » Tue Aug 18, 2020 9:30 am

Motion Effects and Entrance Animations

- New feature: Motion Effects introduce a quicker and easier way to implement scroll effects and entrance animations. It provides a simplified interface without having to deal with events and transitions.

Tutorial (preview):
https://www.wysiwygwebbuilder.com/motion_effects.html

Post by **Pablo** » Tue Aug 18, 2020 9:32 am

Line

- New feature: Added 16 new line styles: arrow, cross, chevron, curl, curve, diamond, heart, square, stars, wave, zigzag and more. The new 'Stretch' property specifies horizontal scaling (in percentages) of the pattern.

- New feature: Added the ability to add text to the line.

- New feature: Added the ability to add an icon to the line.

Post by **Pablo** » Tue Aug 18, 2020 9:39 am

Shape Dividers

- New feature: Added 'Entrance Animation' option. This will animate the divider when it scrolls into the viewport.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... ation.html

- New feature: Added 'Preview' option to divider configuration window.

- New feature: Added 'Swap' button for quickly swapping the top and bottom dividers.

- New feature: Added 2 animated wave dividers. For cool dynamic wave effects!

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... waves.html

- New feature: Added 15 new dividers: lowland, wave1, wave2, curve4, skyline, graphs (4x), ramp, ramp 3d, slant mixed, pyramid 3d, water 3d, arrow 3d.

- New feature: New “Shape Dividers” add-on pack with 37 extra shape dividers.
The add-on pack will be available in 'free extras' on the release day: https://wysiwygwebbuilder.com/free_extras.html

Post by **Pablo** » Tue Aug 18, 2020 8:27 pm

Photo Gallery

- New feature: Added Filter bar functionality. This enables a filterable portfolio-style gallery of images. Assign labels to images so users can choose which images will be displayed. The filter bar has many styling options and the transition between categories can be animated.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... ilter.html

- New feature: Added 'on hover (full)' option to display full size text overlay on images.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... erlay.html

- New feature: Added support for “Unite Gallery”. A responsive gallery with many different styles, like carousel, grid, nested tiles and justified tiles.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... llery.html

- New feature: Added support for lc_lightbox. LC Lightbox is a modern lightbox focused on contents which is responsive/adaptive and support for thumbnail navigation, slideshow, title, description etc.

- New feature: Added support for Strip lightbox.
Strip is an unobtrusive responsive lightbox, which only partially covers the page. This makes it less intrusive and leaves room to interact with the page on larger screens while giving smaller mobile devices the classic Lightbox experience.

- New feature: Added support for hover animations for text overlay. More than 20 animations are available: box, fade, slide, spin, translate, zoom etc.

- Improved: Added 'Animations' tab to properties. Note that transition will be applied to individual images. This makes it possible to implement advanced hover effect like filters (blur, grayscale, contrast....) rotation, scaling etc.

Post by **Pablo** » Wed Aug 19, 2020 7:55 am

Social Login

- New feature: Added Social Login integration. With Social login users can sign-on to password protected pages using existing information from a social networking service such as Facebook, Twitter, LinkedIn or Google instead of creating a new login account specifically your website.

WWB can store the information about the user in a database such as email, name, website etc. For new accounts, an email can be sent to the webmaster with details about the user.
Besides standard information like email and name, you can also store other information specific to each social provider. For example, for Facebook you can store the user's Facebook page or avatar. It is also possible to set a 'user role' for users that use social login so they can only access specific pages only.

Online tutorial (preview):
https://www.wysiwygwebbuilder.com/social_login.html

Post by **Pablo** » Wed Aug 19, 2020 7:58 am

Flex Box

- New feature: Added the ability to set the flexbox order.
The order property specifies the order of an object in a flex container or flex grid relative to the rest of the items inside the same container. This can be useful to define a different order in breakpoints.

Post by **Pablo** » Wed Aug 19, 2020 8:01 am

Layout Grid

- New feature: Added 'stretch' to vertical alignment options.
This adds the ability to make the background of columns full height, even when the content is not the same size.

- New feature: Added a few extra column height options: 75%, 33%, 25% and 10% of the viewport height.

- New feature: Added ‘Order’ property. The order property can be used to control the display order of the columns. This can be useful to define a different column order in breakpoints.

Post by **Pablo** » Wed Aug 19, 2020 8:05 am

Layer

- New feature: Added floating mode options: 75%, 50%, 33%, 25% and 10% of the viewport height.

- New feature: The “Floating mode” property is now responsive, so you can use different heights in breakpoints.

- New feature: Added <main> tag to semantic tags. Specifies the main content of the document: https://www.w3schools.com/tags/tag_main.asp

This option is also available for Layout Grids and FlexBox containers.

- New feature: Added vertical alignment for floating layouts.

- New feature: Added the ability to set the padding, so you can add spacing around the (floating) elements in a layer.

Post by **Pablo** » Wed Aug 19, 2020 8:07 am

Page Header

- New feature: Added 'hide on scroll' mode to Page Header. Implements a popular feature where a sticky header is hidden on scroll-down and shown on scroll-up. Include supports for fade and slide animations with easing.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... ollup.html

Post by **Pablo** » Wed Aug 19, 2020 6:09 pm

HTML object

- New feature: Added 'Snippets' functionality to the HTML object to quickly insert pre-defined HTML blocks. The list is customizable, so you can define your own snippets.

Post by **Pablo** » Wed Aug 19, 2020 6:12 pm

Zip Backup

- New feature: Added the ability to password protect the generated zip. Supported encryption methods: legacy (zip 2.0), 128-bit AES and 256-bit AES.
This may be useful when you make a backup on the server and you want to protect your work, so even if someone gets access to the (zipped/encypted) project file they still cannot use it.

Post by **Pablo** » Thu Aug 20, 2020 7:25 am

Cards

- New feature: Added 'collapsible' option to header. This makes it possible to expand/collapse the card content by clicking the header.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... sible.html

- New feature: Added 'list item' type. A quick way to add a list-like item. Icon + text. The icon can be a different color and it can be positioned at the left of right side of the text.
List items also support badges.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... items.html

- New feature: Added 'maximum width' property'. This specifies the maximum width of the card in flexible layouts.

- New feature: Added 'manual' trigger mode to Card Popover.

- New feature: Added the ability to show/hide/toggle popover via events.

Post by **Pablo** » Thu Aug 20, 2020 7:27 am

Card Container

- New feature: Added 'masonry' mode. Cards will be dynamically rearranged based on the available space in the browser window. Masonry measures all of the items and rearranges them in the best way with what is spatially available. The column is responsive in breakpoints. It is also possible to set a ‘column span’ for each card via the flexgrow property.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... -demo.html

- New feature: Added 'alignment' property to card container. This specifies the horizontal alignment of cards in 'card deck' mode. This may be useful when cards have a maximum width, so they do not fill the entire row.

Post by **Pablo** » Thu Aug 20, 2020 7:29 am

SVG Animation

- New feature: Added 'Animate Fill' option. This will hide the fill (background) of the shape until the animation of the stroke is complete.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... ation.html

- New feature: Added 'manual' trigger mode. The SVG animation can now be controlled via events: 'media play' and 'media stop'. For example, to start the animation when a button is clicked or a Carousel slide becomes active.

Post by **Pablo** » Thu Aug 20, 2020 8:56 am

One of the new templates: "Blobs"

This template demonstrates how to use morphing shapes.

Preview:
https://www.wysiwygwebbuilder.com/suppo ... blobs.html

Post by **Pablo** » Thu Aug 20, 2020 9:05 am

- New template: "Wizzy"

This template demonstrates how to implement a fading/scaling header.

Preview:
https://www.wysiwygwebbuilder.com/suppo ... wizzy.html

Post by **Pablo** » Thu Aug 20, 2020 9:12 am

- New template: "Expertise"

This template demonstrates some of the new layer features. Includes "sticky' columns.

Preview:
https://www.wysiwygwebbuilder.com/suppo ... ayers.html

Post by **Pablo** » Thu Aug 20, 2020 5:29 pm

Slideshow

- New feature: Added 'Ken Burns' mode. This is a lightweight solution using CSS animations to display a slideshow of images with the Ken Burns effect.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... burns.html

- New feature: Added support for lc_lightbox.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... htbox.html

- New feature: Added support for Strip lightbox. See ‘Photo Gallery’.

- Improved: Redesigned event configuration. Events can now be configured via the image settings.

Post by **Pablo** » Thu Aug 20, 2020 5:32 pm

Panel Layer

- New feature: Added the ability to trigger the panel layer with a Panel menu button. This makes it possible to have an animated trigger button.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... igger.html

Post by **Pablo** » Thu Aug 20, 2020 5:32 pm

Panel Layer and Panel Menu

- New feature: Added 'position' property to Panel Layer. Choose between fixed or static. When fixed, the panel is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. When static, the panel will scroll with the content.

Post by **Pablo** » Thu Aug 20, 2020 5:35 pm

Dialog

- New feature: Added show/hide animations to Bootstrap dialog mode. Includes 36 new animations.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... tions.html

- New feature: Added border-radius property to button style.

- New feature: Added 'full width' to horizontal alignment' options.

- New feature: Added 'full height' to vertical alignment' options.

Post by **Pablo** » Fri Aug 21, 2020 6:38 am

Rollover Layer

- New feature: Implemented functionality to create rollover cards. When you add two cards (default and hover) and set the 'Position children' option to 'floating' then both cards will automatically get the same height so you can for example implement 'flipping cards'.

Online demo:
https://www.wysiwygwebbuilder.com/suppo ... cards.html

- New feature: Added more than 25 new CSS animations: move, flip, fold, push, cube, tilt etc.

- New feature: Added the ability to trigger the rollover layer on click instead of hover.

Post by **Pablo** » Fri Aug 21, 2020 6:40 am

HTML5 Video

- New feature: Added the ability to select a stock video from Pixabay.

- New feature: Added 'Plays inline' option. A Boolean attribute indicating that the video is to be played "inline", that is within the element's playback area. Note that the absence of this attribute does not imply that the video will always be played in fullscreen. The behavior depends on the settings of the browser.

- New feature: Added the ability to add sub titles. Subtitle data are simple text files that follow a specified format, in this case the Web Video Text Tracks (WebVTT) format. Multiple languages can be configured.

Post by **Pablo** » Fri Aug 21, 2020 6:43 am

HTML5 Audio/Video, YouTube, Vimeo

- New feature: Added 'Use Plyr' option. This adds the ability to use the 'plyr' media player instead of standard HTML5 audio/video enabling a consistent UI in all browsers.

Post by **Pablo** » Fri Aug 21, 2020 11:35 am

- New template: "Profit"

This template demonstrates Motion Effects and Entrance Animations and also uses one of the new animated shape dividers.

Preview:
https://www.wysiwygwebbuilder.com/suppo ... rofit.html

Post by **Pablo** » Fri Aug 21, 2020 11:36 am

- New template: "Doodle"

The idea behind this template was to make it look like it was manually drawn.
The doodle art was created by colorgfx. All other images were drawn by hand...

Preview:
https://www.wysiwygwebbuilder.com/suppo ... oodle.html

Post by **Pablo** » Fri Aug 21, 2020 11:37 am

- New template: "Comic Book"

The idea behind this template was to make the page look like a Comic Book.
It uses a flex grid for the layout.
Many thanks to FilosoFashion for modeling for the "pop art' images

Preview:
https://www.wysiwygwebbuilder.com/suppo ... cbook.html

Post by **Pablo** » Fri Aug 21, 2020 5:14 pm

Page

- New feature: Added 28 gradient styles to page style properties. The output will be a full-size background gradient using CSS (instead of images, like in previous versions). For backward compatibility, 'horizontal' and 'vertical' options (with image output) are still available.

- New feature: Added the ability to disable CSS animations and transitions for smaller screens.

Post by **Pablo** » Fri Aug 21, 2020 5:15 pm

Rotate

- New feature: Added the ability to rotate (almost) all basic elements. For example: line, heading, banner, media, navigation, form elements (button, combobox, editbox, text area).

Post by **Pablo** » Sat Aug 22, 2020 11:36 am

CAPTCHA

- New feature: Added the ability to set the text color of the image (in addition to using a random color).

- New feature: Added the ability to set the transparency of the text, so the background will shine through.

- New feature: Added new background effects: 'noise' and 'dots & lines'.

- New feature: Added wave effect. This will apply a wave filter to the image to make it harder to read for spam bots.

- New feature: Added 'Enable rotation' property. Specifies whether to use randomly rotated characters.

- New feature: Added the ability to specify which characters will be used in the image. Avoid using confusing characters and numbers (For example: l, 1 and i)

- New feature: It's now possible to hide the standard editbox (set offset to -99). This allows you to create your own input control to give you more control over the size, position and styling.

- New feature: Added 'math' CAPTCHA mode. This displays a (random) mathematical challenge, instead of characters.

- New feature: Added built-in support for Google’s reCAPTCHA v2 and reCAPTCHA v3.

- New feature: Added support for hCAPTCHA. hCaptcha is a free, private and secure CAPTCHA service that helps protect your forms against spam which works along similar lines to Google’s version but offers more methods of identifying and blocking bots.

- New feature: $CAPTCHA_ERROR$ site variable. This can be used to specify a custom captcha error message.

- New feature: Added support for events. The 'callback' event will be triggered when the user submits a successful response. For example, to enable the submit button.

Post by **Pablo** » Sat Aug 22, 2020 11:39 am

Form

- New feature: Normally, when a checkbox or flipswitch is unchecked then the browser will not send the value to the server. In WWB16, you can now also set a value for the ‘OFF’ state. You can set the OFF value, by using two values separated by a pipe-symbol. For example: ON | OFF

- New feature: Added support for multiple select combobox values in the MySQL script.

- New feature: The built-in form processor script can now handle multiple file uploads in combination with File Upload -> multiple.

Post by **Pablo** » Sat Aug 22, 2020 11:40 am

Advanced Button

- New feature: Added the ability to use the Advanced Button as a link. The URL of the link can be set via the ‘Link’ settings. This new feature may be useful if you want to create a multi-line link button.

Post by **Pablo** » Sat Aug 22, 2020 11:43 am

Themeable Button

- New feature: Added 'cursor' property. Specifies the mouse cursor to be displayed when pointing over the button.

- New feature: Added 'text alignment' property.

- New feature: Added 'border style' property to Themeable Button.

- New feature: Added support for padding.

- New feature: Added the ability to set the alpha value of the border color.

- Improved: Added the ability to enable/disable Themeable Buttons via events.

Post by **Pablo** » Sat Aug 22, 2020 5:18 pm

- New template: "Sinatra"

This template was inspired by the music and cover art of Frank Sinatra with some random photos of my Sinatra collection.
The color scheme was taken from the album cover "Swinging Lovers".
One of the 'highlights' of this template are the cards with song titles and animated vinyl records (triggered on mouse over).

Preview:
https://www.wysiwygwebbuilder.com/suppo ... natra.html

Post by **Pablo** » Sat Aug 22, 2020 5:38 pm

- New template: "Wedding"

This template demonstrates Motion Effects.
The animated hearts were created a standard Shape and the Particles JS script.
Another 'fun fact' about this template is that the pictures of married couple are not real people. The photos were created with artificial intelligence.

Preview:
https://www.wysiwygwebbuilder.com/suppo ... dding.html

Post by **Pablo** » Sat Aug 22, 2020 5:47 pm

- New template: "Coffee 2.0"

This template demonstrates a few new Card options and one of the new Carousel animations.

Preview:
https://www.wysiwygwebbuilder.com/suppo ... ee_v2.html

Post by **Pablo** » Sun Aug 23, 2020 5:14 pm

Tabs

- New feature: Added ‘Steps’ mode. This implements a simple 'stepper' widget. This may be useful for registration forms, payment gateways or tutorials with steps.

Online demo:
http://www.wysiwygwebbuilder.com/suppor ... epper.html

- Improved: Events can now be configured via the tab settings.

Post by **Pablo** » Sun Aug 23, 2020 5:15 pm

Accordion

- New feature: Added arrow position property. The arrow can be displayed left, right or hidden.

- New feature: Added the ability to use icons in the header (font awesome, material icons etc.). Each panel header can have its own icon.

- New feature: Added the ability to open a specific panel via bookmarks (hash).

- Improved: Redesigned event configuration. Events can now be configured via the panel settings.

Post by **Pablo** » Sun Aug 23, 2020 5:16 pm

Listview

- New feature: Added support for badges. To add a badge, place the label between curly brackets. Example: "Text {new}"

- New feature: Added the ability to display listview items in a grid. The number of columns is responsive and can be different in breakpoints.