Flex Grid - NEW FEATURE
Version introduces a new way of creating flexible layouts based on the new CSS Grid Layout. CSS grid layout is a new technique in CSS that allows web developers to create complex responsive web design 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. This result in cleaner, more reliable code.
To prevent confusion with the existing (Bootstrap-based) Layout Grid object, we have named the new object Flex Grid, because its a combination of CSS Grid Layout and Flexbox..
The idea behind the Grid Layout is to divide a webpage into columns and rows. The columns and rows have named areas where you can drag & drop objects in. The definition of the layout can be different for each breakpoint. Each grid area supports its own padding, (flexbox) alignment, border and background style.
Google Fonts Manager - NEW FEATURE
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. Fonts can have different variants, like light, medium, bold, regular etc. The available variants can be enabled per font.
Cards - NEW FEATURE
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. When used in combination with a flexbox container, multiple cards with different content can have the same height, which normally would be difficult to achieve.
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.
Structured Data (schema.org) - NEW FEATURE
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.
Twitter Cards - NEW FEATURE
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 thats 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 Font Awesome and Material Icons - IMPROVED
We've implemented a new icon selection window with categories and a search option, so you can quickly find the icon you are looking for.
Icon Font Libraries - NEW FEATURE
Now you can 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 Icons, Elusive Icons, Feather, Foundation Icons, Glyphicons, Halflings, Ionicons, LineAwesome, Material Icons, Open Iconic and Linea Icons.
Master Page / Master Frame - IMPROVED
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. Note: Master Object has been renamed to Embedded Page.
Content Place Holder - IMPROVED
Support has been added for background transparency (alpha) in Content Place Holder.
CSS3 Animations - IMPROVED
A new preview feature has been added for CSS3 animations. We've also added a filter property in the transitions. This adds the ability to animate the brightness, contrast, hue, blur, invert, saturate, grayscale and sepia of an object.
Additionally, CSS3 animations include several new text animations including, Neon, Fire and Classic Movie. Now you can scale the shadow and use a transform-wobble-top, transform-wobble-center and transform-wobble-bottom. We've also added several test letterspacing to animations.
And there are more than 25 more new animation effects 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 more.
Overlay Menu - NEW FEATURE
This implements a multi-level, responsive full screen menu with 10 show/hide animations, social icons support and many styling options.
Themeable Menu - NEW FEATURE (formerly called the jQuery Menu)
Now you have the option to implement a responsive Bootstrap-inspired drop-down menu with an optional logo.
Tab Menu (Responsive Mode) - NEW AND IMPROVED
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 (Responsive Mode) - NEW AND IMPROVED
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 (Responsive Mode) - NEW AND IMPROVED
Border styles of the main menu now support for individual sides.
Panel Menu (Responsive Mode) - NEW AND IMPROVED
When the viewport gets smaller than the specified breakpoint value, the Panel Menu will switch to full screen mode (with close button). Also, we added hamburger animations to the Panel Menu. 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.
You can now add footer text to this objects as well. For example, to add a copyright message at the bottom of the menu. And we added menu padding. This sets the padding around the entire menu.
Also, we included support for Social Icons. Add a social icon set the of the menu item and leave the 'text' field empty. Plus, you can now add Dividers between menu items.
Mega Menu (Responsive Mode) - NEW AND IMPROVED
When the viewport gets smaller than the specified breakpoint value, the Mega Menu will display a hamburger icon to trigger a full screen menu. The Alignment property was added to this object so you can now align the buttons inside the menu's container. The same is now true for sub-menus. Also, an orientation property was included which gives you the ability to specify how the sub menu relates to the button (it's orientation).
Other Improved Navigation Features
- You can now add <br> in menu text allowing you to create multi-line menu items.
- Now you can synchronize your menus with another menu. 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.
Do Not Follow Links- NEW FEATURE
Enabling this option for your links by checking a box will add 'rel=nofollow' to prevent robots/search engines following the link.
Site Search - NEW AND IMPROVED
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. Also, the results font-family now supports @font-face/Google Fonts.
And we've added a new feature to Site Search called 'Include all text in search index'. This option 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.
Other Improved Site Search Features
- Display query time option: This displays the total time it took to execute the search query.
- Item padding property: This specifies the padding between result items.
- Option to make search terms bold (Term Style).
- Option to include the URL in search results (Display URL).
- 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).
- We added the ability 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.)
- We also added the ability to use the minus character before a word to exclude all results that include that word. For 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.
- And we added support for pagination (Results per page).
Blog/Article - NEW AND IMPROVED
-We added the ability to change the editor color. This can be useful if you are using white text. And now there is a Bootstrap layout option for a blog "card". Other new blog objects templates include the Clean Layout Template for text and date only, the Testimonials Template and a Quotes Template.
News Viewer - IMPROVED
You can now have transparent backgrounds and radius border and zoom and newspaper animations.
Layout Grid - IMPROVED
We've added semantic HTML5 tag support and responsive padding and responsive borders properties to columns. You now have the ability to make layout grids full screen. We've also added support for CSS Grid Layout in addition to Flexbox and Bootstrap.
Layer - IMPROVED
The BREAKPOINT property has been added to the layer object and when the viewport is smaller than the specified breakpoint value, the panel layer will become full width.
Flexbox - NEW & IMPROVED
Flexbox properties (flex grow, flex shrink, align self, flex basis) of objects are now responsive, so you can use different values in breakpoints. We've also added background image+overlay support to Flex Container.
Login Tools - IMPROVED
We added support for background and border transparency (alpha). And now there is 'User Roles' functionality. Users roles are used to create different types of users. These users will only have access to the pages that have configure this role. The roles are customizable in the properties of the Login admin.
More Login Tools Improvements
We added the ability for the user to set an avatar image. The image can be displayed on the page with the "Login Name' object.
Now has border, background, padding, vertical alignment properties and the Display Avatar option. This will display the avatar of the logged in user.
Redesigned the layout of the Login Admin for a modern look and feel and added table cell padding. Also added styling options for button and input fields. You can now use striped and hover rows and customize/translate the text of various items (headers, buttons). There is also a new search/filter option, pagination and avatar support.
Wizard Panel - NEW FEATURE
The new Wizard Panel implements a wizard like component, which can be used (for example) to create a multi-page form. The wizard can either be modal (popup) or used as a standard element. The Wizard Panel is based on the jQuery Dialog and has the same properties. The main difference is that you can add multiple pages (steps). Adding objects works the same as with other containers, simply drag & drop the objects inside the drop area. Click the 'Next or 'Previous' button to go to another step. If the Wizard is used as a form, then the 'Finish' button will act as a submit button, otherwise it will simply close the Wizard.
jQuery Dialog - NEW AND IMPROVED
We've added a border width property, box-shadow properties and animation duration and easing properties. Also, there is now a Bootstrap mode which will use Bootstrp's modal instead of the jQuery UI.
The jQuery Dialog can mow be used as a form by simply checking a box. There's also a floating mode that allows objects inside the dialog have a flexible position.
We added a Buttons properties. Buttons will be added at the bottom of the dialog and can be used to close the dialog or trigger other actions (events). This feature replaces the previous hardcoded button options. And there is now Button alignment and Button margin properties. These specify the alignment and margins of the buttons in the footer of dialog. Plus, you can now customize the style of the buttons.
The jQuery dialog now has a Breakpoint property. When the viewport gets smaller than the specified breakpoint value, the dialog will switch to full width mode. For use with floating mode.
jQuery Tabs - NEW AND IMPROVED
Yu can now animate the showing and hiding of panels. And you can now use the tabs object as a form. You can also now add a description and icon (FontAwesome or Material Icon) to the tabs.
jQuery Accordion - NEW AND IMPROVED
We added the ability to use the Accordion object as a form. And now there is support for vertical tabs: Tabs at the left and Tabs at the right.
jQuery Progress - NEW AND IMPROVED
Added the ability to show percentages in the progress bar
Themeable Button (formerly called jQuery Button)
We added a box-shadow property and the ability to set the button(s) to full width in Layout grid. This is useful for creating flexible (radio) button rows.
jQuery Spinner - NEW AND IMPROVED
We added a box-shadow property.
Property Inspector - NEW AND IMPROVED
We added 'Reset Property (RWD)'. This will reset the selected value, so will be the same across all breakpoints. And 'Reset All Properties (RWD)', which will reset all responsive values of the object. The Property Inspector now display a 'Responsive' icon if the property has different values in breakpoints, so you can quickly see whether the object has responsive properties. And we added a commands section with shortcuts to 'More properties', Events, Flexbox, Margin, Padding and Animations.
Shape Tool - NEW AND IMPROVED
Shapes in 'Insert Shape' gallery are now rendered larger and sharper. And we added Full Width mode to Shape, Text Art and Clip Art for use with SVG output mode. This makes it possible to have scalable/flexible shapes/text/clipart in layout grids.
Photo Gallery/Photo Collage - NEW AND IMPROVED
When loading new images, the gallery will now automatically use the meta data of the image (if available). We also added the ability to set a separate 'Thumbnail' image. This allows you to use a different (smaller) version of the image for thumbnails. It is also still possible to automatically generate a thumbnail image. This can be useful for example if you want a use a square image for the preview and the full-size image with normal aspect ratio. And now you can get images from a folder on the server. If the images contain description meta data, then this will automatically be used for the title (uses PHP).
We added support for Bootstrap modal in jQuery Dialog settings of the Photo Gallery. This implements a responsive modal popup.
Slide Show - NEW AND IMPROVED
When loading new images, the gallery will now automatically use the meta data of the image (if available). We added Line shape option to pagination, inspired by Bootstrap-4 Carousel indicators. There are new built-in navigation arrows, inspired by Bootstrap-4 Carousel arrows. To use the new arrows, enter < for previous and > for next in the filename fields. Also added the ability to get images from a folder on the server. (uses PHP).
For the Image/Picture setting in a Slide Show, we've added the Object-fit property. This specifies how the image should be resized to fit its container. Now you have, Fill, Contain, Cover, None and Scale-down.
Events - NEW AND IMPROVED
Carousel - NEW AND IMPROVED
We added 'Line' shape option to pagination and new built-in navigation arrows, inspired by Bootstrap-4 Carousel arrows. To use the new arrows, enter < for previous and > for next in the filename fields.
Added 'Flexible' mode. When this option is selected the child elements of the Carousel will be floating (instead of fixed). In this case the Carousel will be fully responsive and it can also be used inside layout grids. In 'Flexible mode' the Carousel can also be set to use the full height of the viewport.
Forms - NEW AND IMPROVED
We added the 'From' property to built-in form processor settings. This will set the 'from' address of email sent messages to the specified email address. If you leave the field empty then it will work like in previous versions: either the 'email' input will be used (if it exists) or the 'to' address.
We added new form conditions: 'Less than' and 'Greater than'. It is also possible to create a range (greater than/less than combined). Also new are the 'else' conditions. This can be used in combination with 'equal to', 'not equal to', 'greater than' and 'less than'.
The EditBox and Text Area form objects now have the ability to have colors in the placeholder for text.
CMS Admin - NEW AND IMPROVED
The CMS Editor now has new icons and we've added styling options for button and input fields. All plug-ins have been updated to support the new styling with support for Hover Rows, and table cell padding.
- We've added a new Countdown Days script.
- Also added Typewriter and Typewriter Deluxe scripts. The typewriter scripts simulate typing text. Typewriter Deluxe also includes a cursor and reverse mode.
- Text scripts now show a preview of the text in the workspace.
- Added support for Google Fonts.
- Added support for Global Replace (fonts and colors)