WWB14 Coming soon... (teaser)

[Pablo]

The next version of WYSIWYG Web Builder 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 regularly updated with new information, 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 12 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.

[Pablo]

Flex Grid
The Flex Grid introduces a new way for creating flexible layouts based on CSS Grid Layout (https://www.w3schools.com/css/css_grid.asp).
The CSS grid layout allows web developers to create complex responsive web layouts more easily and consistently across browsers.
'CSS Grid Layout' is a two-dimensional grid system that is native to CSS. It does not rely on floats or other hacks.

The idea behind the Flex Grid is to divide a web page into columns and rows. The columns and rows have named areas where you can drag & drop object in. The layout can be different in breakpoints. Each grid area supports its own padding, (flexbox) alignment, border and background styling.



The Flex Grid object has a grid editor so you can visually define the layout (grid areas) and behavior of the grid.



The size for each column/row can be set in pixels, percentages or the ‘fr’ unit.

‘fr’ stands for ‘fraction of available space’. You can think of this as percentages for available space after you've taken off fixed-sized and content-based columns/rows. This allows you to create layout that previously were not possible with standard HTML/CSS!



Example:
http://www.wysiwygwebbuilder.com/support/flexgrid/

[Pablo]

Google Fonts Manager
Adding Google Fonts to your website has never been easier. Google Fonts no longer have to be manually downloaded/installed from the Google website, the Google Font Manager takes care of this!
Fonts that are installed via the Font Manager will be added to the ‘web safe' fonts list and the necessary CSS code will be generated automatically when you preview or publish the website.
Font can have different variants, like light, medium, bold, regular etc. The available variants can be enabled per font.

[Pablo]

Cards
A Card is a lightweight, flexible content container. It includes options for headers and footers, a wide variety of content, styling, and powerful display options. The Card object was inspired by Bootstrap's v4 Card component.



Popover
Cards can also be used as Popovers, this basically uses the Card as an advanced tooltip/pop-up box that appears when the user clicks or hovers on an element. Popovers can be placed at the top, right, bottom of left of the container object and can be activated via click, hover or focus.



Demo:
http://www.wysiwygwebbuilder.com/support/cards/

[Pablo]

Structured Data (schema.org)
Added support for Structured Data (JSON-LD). Provide a better browsing experience for users on your website and in search engines, and improve your SEO with the built-in JSON-LD generator.
The following schemes are currently supported: Event, Review, Person, NewsArticle, SoftwareApplication, Product, Organization, Recipe, Restaurant, VideoObject, MusicAlbum, MusicPlaylist.

[Pablo]

Twitter Cards
With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. If you add Twitter Card meta tags to your webpage, users who Tweet links to your content will have a “Card” added to the Tweet that’s visible to their followers. This is very similar to sharing a link on Facebook which automatically displays a preview with title, summary, and thumbnail of your page content when using Open Graph Meta Tags.

More information:
https://developer.twitter.com/en/docs/t ... outs-cards

The following Cards types are supported:
• Summary
• Summary with large image
• Player

Twitter specific meta tags can be configured in the Meta Tags section of the Page Properties.

[Pablo]

Font Awesome/Material Icons
Implemented a new icon selection window with categories and a search option, so you can quickly find the icon you are looking for.




Icons Fonts
Added support for custom Icon Fonts Libraries. Add your own icon libraries or third-party icon sets. Extra Icon Fonts support the same styling options as the built-in Font Awesome.
Icon fonts add-ons packages are available for:
- Drip Icon
- Elusive Icons
- Feather
- Foundation Icons
- Glyphicons Halflings
- Ionicons
- LineAwesome
- Material Icons
- Open Iconic
- Linea Icons
- Font Awesome 5

[Pablo]

Animations and Transitions

Added preview for animations.




Added support for ‘filter’ property in transitions and CSS animations. This adds the possibility to animate brightness, contrast, hue, blur, invert, saturate, grayscale and sepia!




Added 'Neon' text animation.



Added 'Fire' text animation.



Added several text letterspacing animations. For example: ‘letterspacing focus in’ and ‘letterspacing expand’.



Plus, more than 25 other new animations, including:
• animate-border-fade
• background position
• focus-in / focus-out
• jello
• ken-burns
• pop
• push
• shadow-top-bottom / shadow-left-right
• slide-in-elliptic/ slide-out-elliptic
• text-popup
• transform diagonal
• and many others

Animation demos (just a few):
http://wysiwygwebbuilder.com/support/an ... index.html
http://wysiwygwebbuilder.com/support/an ... lters.html

[Pablo]

Overlay Menu
Added new 'Overlay Menu' object. This implements a multi-level, responsive full screen menu. With 10 show/hide animations. social icons support and many styling options.





Themeable Menu (previously known as ‘jQuery Menu’)
Added ‘Bootstrap’ menu type. This option implements a responsive Bootstrap-inspired drop-down menu with an optional logo.





Tab Menu
Added responsive mode. When the viewport gets smaller than the specified breakpoint value, the Tab Menu will switch to stacked (vertical) mode so it can also be used on smaller screens.




Text Menu
Added responsive mode. This works in combination with Layout->Type->Responsive. When the viewport gets smaller than the specified breakpoint value, the Text Menu will switch from horizontal to vertical.




CSS Menu
Border styles of the main menu now support for individual sides.




Panel Menu
Added responsive mode. When the viewport gets smaller than the specified breakpoint value, the Panel Menu will switch to full screen mode (with close button).




Added 'hamburger animations'. By using special characters, the Panel Menu button will display a hamburger menu symbol instead of text. When clicked, the bars will animation into a close symbol. 12 animations are available.



- Added the possibility to add footer text. For example, to add a copyright message at the bottom of the menu.
- Added the possibility to add a logo to the menu.
- Added menu padding. This sets the padding around the entire menu.
- Added support for 'Social Icons'. To add a social icon set the of the menu item and leave the 'text' field empty.
- Added support for dividers. Set the text to '---' to insert a divider.



Demo:
http://wysiwygwebbuilder.com/support/pa ... index.html


Mega Menu
Added responsive mode. When the viewport gets smaller than the specified breakpoint value, the Mega Menu will display a hamburger icon to trigger a full screen menu.





And more...
You can now use <br> in menu text, which makes it possible to have multi-line text. Note that this mainly useful for menu items that do not have the same size like sub menu, panel/overlay menu items.



Added 'Synchronize with another menu" option. Enabling this option will synchronize the links of the menu with the specified menu. This may be useful when you have multiple menus on the page, for example a desktop and mobile menu. So, you will have to change the link(s) only once.



Added 'Do not follow this link' option to links. Enabling this option adds 'rel=nofollow' to prevent robots/search engines following the link.

[Pablo]

Master Page

Added a new (easier) way to implement master pages. In addition to Master Frame you can now also use another page as background template. This does not require a content place holder.
Basically, the master page will be used as 'background' of the content page and you place all other objects on top of this. If the master page includes a footer then it will automatically be moved based on the content.




Demo of the master page:
http://www.wysiwygwebbuilder.com/suppor ... index.html

Demo of the master page with breakpoints:
http://www.wysiwygwebbuilder.com/suppor ... x-rwd.html

Demo of the master page with Layout Grids:
http://www.wysiwygwebbuilder.com/suppor ... tgrid.html

[Pablo]

Site Search

- Added 'Include all text in search index' option in Search Index settings. This will use all text from the page instead of just unique words. This will increase the size of the search index, but the search results will look better and it makes it possible to search for phrases.



- Added 'Display query time' option. This displays the total time it took to execute the search query.
- Added item padding property. This specifies the padding between result items.
- Added option to make search terms bold (Term Style).
- Added option to include the URL in search results (Display URL).
- Added an option to set maximum number of characters to display in the results. The description text contains the context of the keyword within the text (Max. length).
- Added the possibility to use quotes in the search queries to search for an exact phrase. Example: 'open source'. To make this useful, the option 'Include all text in search index' should be enabled!



- Added the possibility to use the minus character before a word to exclude all results that include that word. Example: web -designer
- In addition to jQuery Dialog, you can now also display the results in a Bootstrap modal: Show results in jQuery Dialog->Settings->Layout mode->Bootstrap.



- New feature: Added support for pagination (Results per page).



- Most search related code is now part of wb.sitesearch.min.js, this makes it possible to share the code between multiple page and results in a smaller footprint.
- Results font-family now supports @font-face/Google Fonts.

[Pablo]

Blog / Article

- Added the ability to change the editor color. This can be useful if you are using white text.
- Added ‘bootstrap’ layout template. A Bootstrap-like card layout.
- Added ‘clean’ layout template. A simple template with text and date only.
- Added ‘testimonial’ layout template.



- Added ‘quote’ layout template.

[Pablo]

Layout Grid

- Added semantic HTML5 tag support.



- Added padding properties to columns. Padding is responsive.



- Added border properties to columns. This make it possible to configure borders for each column. Border properties are responsive.



- Added the ability to make layout grids full screen: Column height->100vh (100% of the viewport height).



- Added support for 'CSS Grid Layout' (in addition to Bootstrap and Flexbox).

[Pablo]

Box Shadow

Added support for shadow type: inset. This changes the shadow from an outer shadow (outset) to an inner shadow.

[Pablo]

Borders

Borders are now rendered with all properties (style, radius, individual borders) in the workspace.



Added support for transparent borders (alpha).



Demo:
http://wysiwygwebbuilder.com/support/ba ... index.html