Almost 18... (teaser)

All the latest news about WYSIWYG Web Builder can be read in this section

*** Current version: WYSIWYG Web Builder 19.1.2 ***


User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

CAPTCHA

Post by Pablo »

CAPTCHA

- Added 'Full Width' property. Specifies whether the element is full width when used in a Layout Grid.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Image Comparison

Post by Pablo »

Image Comparison

- Added 'compare' mode to Rollover Image.
This mode adds a comparison slider to the images for comparing before and after images. For example, it could be used to compare images before and after compression or editing or to demonstrate the effect of a product or service etc.

Image

Image


The Image Comparison option has its own icon in the toolbox for easy access.

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_rolloverimage.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Rollover Text

Post by Pablo »

Rollover Text

- Added 'show always' option (to animation list). When this option is selected, then the text will always be displayed.

Image


- Added 'hide on hover' option (to animation list). When this option is selected, then the text will initially be displayed, but hides when the mouse hover over the image (inverse rollover).

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_rollovertext.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Banner

Post by Pablo »

Banner

- Added the ability to control text animation of a Banners with Events.
• "Media Play" will start the animation from the beginning.
• "Media Stop" will stop the animation. Characters will be hidden.
• "Media Pause" will stop the animation. Characters will remain visible (depending on the current state). Pressing "pause' again will continue the animation where it left off.

This feature can be useful for use in a carousel, to make sure the text animation always starts from the beginning when the slide becomes active.

Image

Or you can control the animation via the click of a button:

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_banner.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Stock Photo

Post by Pablo »

Stock Photo

- Added integration with 'Pexels'.
WWB already supported Unsplash and Pixabay, and now you can also easily use free stock photos, royalty free images & videos shared by creators on Pexels.com

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Photography Template Preview

Post by Pablo »

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

Image

This is a basic template created with Layout Grids.
What makes this template special is that it uses transparent PNG images to force the aspect ratio of the grid cells.
This trick makes it relative easy to create flexible layouts with images, without the need for breakpoints.
Another fun fact is that the images were specially created for WYSIWYG Web Builder by Ukrainian photo model 'Irena'.

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_photography.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Image

Post by Pablo »

Image

- Added the ability add a text-stroke (outline) to watermark text (like sub-titles in movies).

Image

Image

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_image_watermark.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Image Hotspot

Post by Pablo »

Image Hotspot

- Added 'auto' placement option to Tooltip properties. When auto is specified, it will dynamically reorient the tooltip.

Image


- Added the ability add a border (width / color) to the tooltip.

Image

Image


- The tooltip arrow is now relatively sized based on the tooltip font-size.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Picture

Post by Pablo »

Picture

- Added the ability to apply a shape to the picture. This works just like the shape feature of a standard image, however in this case CSS's clip-path will be used, instead of a modifying the image. Which means that the quality of the original image will not be affected. Also, it looks much better because the edges will not be blurred.

Image


- Added the ability to apply a stencil/mask to the picture. This works just like the stencil feature of a standard image, however in this case CSS's mask-image will be used, instead of a modifying the image. Which means that the quality of the original image will not be affected.

Image


- The 'Add/Remove frame' menu can now also be used on Pictures.

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_picture.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Photo Gallery / Slideshow

Post by Pablo »

Photo Gallery / Slideshow

- Added support for third party GLightbox script. GLightbox (https://github.com/biati-digital/glightbox/) is a pure javascript lightbox (no jQuery!).
It can display images and videos with optional autoplay for YouTube, Vimeo and self hosted videos.


Image

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_glightbox.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Shapes

Post by Pablo »

Shapes

- Shapes with output format 'CSS' now use clip-path, so CSS shapes are no longer limited to rectangles and ellipses only!

Image


- Background patterns of SVG shapes are now exported in vector format (instead of an image), so they take up less space and look nicer.

Image


- Most gradients styles now have a decent fallback for SVG , so they look the same (or better) as image based shapes.


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_shapes.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Clip Art / Text Art

Post by Pablo »

Clip Art / Text Art

- Added output format 'CSS'. This will output the element with clip-path and SVG. When using CSS as output, the border and background can be styled with Styles.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Polygon / Curve/ Line / Scribble

Post by Pablo »

Polygon / Curve/ Line / Scribble

- Added output format 'CSS'. Basically, this generates the same output as SVG, but when using CSS it is possible to use styles. In this case, the 'text color' controls the fill of the shape.

Image


Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_drawing_tools.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Shape / Clip Art / Text Art / Polygon / Curve

Post by Pablo »

Shape / Clip Art / Text Art / Polygon / Curve

- Added new background size option ‘cover' (in addition to ‘tile’ and ‘stretch’). Unlike stretching, ‘cover’ scales the image to be as large as possible so that the background area is completely covered by the image without affecting the aspect ratio.

Image

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Polygon / Curve

Post by Pablo »

Polygon / Curve

- The Polygon / Curve object can now be part of a layout grid. When the output is set to SVG or CSS, the polygon/curve is also responsive and scalable!

Image

Image


Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_polygons.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

YouTube

Post by Pablo »

YouTube

- Added 'Mute' property. Specifies whether to mute the audio of the video.
This can be useful if you want to automatically play without user interaction, because most browsers will block autoplay if the video has audio.

Image


- Added 'Trigger' functionality. This can be used to start the video based on a 'trigger'. For example, then the video is scrolled into the viewport.
This also supports scroll continuously which plays the video frame by frame based on the scroll position of the scrollbar.

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_youtube.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Vimeo

Post by Pablo »

Vimeo

- Added 'Mute' property. Specifies whether to mute the audio of the video. This can be useful if you want to automatically play without user interaction, because most browsers will block auto play if the video has audio.

- Added 'Show controls' property. Specifies whether to show/hide all elements in the player (play bar, sharing buttons, etc.).

Image


- Added 'Trigger' functionality.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

HTML Video

Post by Pablo »

HTML Video

- Added integration with 'Pexels' via the 'Select stock video' button.

Image

Image


- Added 'Trigger' functionality. This can be used to start the video based on a 'trigger'. For example, then the video is scrolled into the viewport.
This support, scroll continuously this plays the video frame by frame based on the scroll position of the scrollbar.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

"Purple Fantasy" Template Preview

Post by Pablo »

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

Image


A basic template created with Layout grids and Sections. It also uses floating labels and custom scrollbar colors.
The art work in the template was created with the help of Artificial Intelligence (Stable Diffusion).

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_purplefantasy.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Upgraded to Bootstrap 5

Post by Pablo »

Upgraded to Bootstrap 5

All built-in Bootstrap widgets have been rewritten to use Bootstrap 5. Bootstrap 5 no longer uses jQuery and has many other improvements.
Also, many jQuery UI objects now have a Bootstrap alternative. For example, tooltips, progress bar, checkbox, radio button etc. More details will be available later in this post.

What is the difference between Bootstrap and jQuery UI?
Bootstrap is a modern UI framework based on modern browser functionality.
jQuery UI is an older UI framework based on JavaScript, uses themes. jQuery UI relies on jQuery, and jQuery UI themes and uses JavaScript for animation so it has more impact on the performance of the page. Bootstrap is lightweight and only uses JavaScript when necessary, it uses CSS styling and for animation.

jQuery UI size: approx. 424 KB (jQuery, jQuery UI and theme files)
Bootstrap size: approx. 77 KB (bootstrap.min.js, popper.min.js)

Also, Bootstrap is actively maintained, jQuery UI is no longer under development.

jQuery UI website: https://jqueryui.com/
Bootstrap website: https://getbootstrap.com/
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Progressbar

Post by Pablo »

Progressbar

- Added Bootstrap progress bar. This uses Bootstrap's progress bar instead of jQuery UI. The Bootstrap progress bar does not use JavaScript for rendering and is therefore much smaller.
https://getbootstrap.com/docs/5.2/components/progress/

Image

Image


- Added Circle type. This renders a circular progress bar. The value can also be rendered as pie!

Image

Image


- Added 'stripes' property. This applies diagonal stripes to the background of the value. The stripes can also be animated.

Image

Image


- Added the ability to display text, instead of percentages.

Image


- Added transition properties. This specifies the transition timing and duration when the value changes.

Image


- Added 'border width' property to set the border size of the object.

Image


- Added 'trigger' functionality. This can be used to trigger the value at a specific moment. For example, then the progress bar is scrolled into the viewport or via events. Also supports scroll continuously this changes the value of the progress bar based on the scroll position of the scrollbar.

Image


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

https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_progressbar_trigger.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Auto Complete

Post by Pablo »

Auto Complete

- Added Bootstrap inspired auto complete mode. This offers a lightweight alternative for jQuery UI's bulky script.

Image


- Added support for 'disable', 'auto focus' and 'read-only' properties.

- Added 'focus color' property.

- Added 'place holder color' property. Specifies the text color of the place holder text.

Image


- Added the ability to set the text alignment.

- Added the ability to set padding of the auto complete list items.

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_auto_complete.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Tooltip

Post by Pablo »

Tooltip

- Added support for Bootstrap tooltips as alternative for jQuery UI. https://getbootstrap.com/docs/5.2/components/tooltips/

Image

Image


- Bootstrap tooltips can be triggered via hover, click, focus or manually. With more than 35 available 'show' animations!

Image


- Added the ability to show/hide/toggle tooltips via events.

Image

This option can be useful, for example, to show a hint on how to display the menu. You may have already seen this feature in action in some of the template previews...

Image


- Added 'justify' to alignment options.

Image

Image


- Added the ability to set the background mode (transparent, solid, gradient, image, pattern, texture). Previously only solid was supported.

Image

- Added 'Maximum width' property. This specifies the maximum width of the tooltip (before text wraps to the next row).

Image

Image


- Added 9 new animations to jQuery UI tooltip: blind, bounce, drop, fold, highlight, puff, pulsate, scale, shake. Also, the slide animation is now direction aware, which means that it moves in the direction of the tooltip's arrow.

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_tooltips.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Droplist

Post by Pablo »

Droplist

- Added a dedicated 'droplist' icon in the toolbox.

Image


'Droplist' is an option of the listview widget. However, this option is often over-looked, although it can be very useful. For example, to create dropdown selection list with images.

Image


- The size of the dropdown arrow is now relative to the font-size.

- The dropdown arrow now use SVG instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_droplist.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Listview

Post by Pablo »

Listview

- 'listview' mode is now CSS only. So, it no longer depends on jquery.min.js, jquery-ui.min.js and listview.min.js for markup!

- Added the ability to set the border width of the list items.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Spinner

Post by Pablo »

Spinner

- Arrows now use SVG images instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.

Image


Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_widgets.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Toast

Post by Pablo »

Toast

- Toast now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency.
https://getbootstrap.com/docs/5.2/components/toasts/
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

"Digital Agency" template preview

Post by Pablo »

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

Image


The main purpose of this template is to demonstrate the use of Tooltips in combination with Sections in the 'Our Team' block.

Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_digitalagency.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Layout Grid

Post by Pablo »

Layout Grid

- It is now possible to set the left and right margin of the layout grid!
This may be useful to make the outer spacing of the grid the same as the gutter.

Image

Image


- Added support for rounded corners (border-radius).

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Flex Container

Post by Pablo »

Flex Container

- Implemented responsive height. The height property can now have a different value in breakpoints.

Image


- Added support for rounded corners (border-radius).

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Flex Grid

Post by Pablo »

Flex Grid

- Added new height options: 75vh, 33vh, 25vh and 10vh (vh = viewport height).

- Added support for events, animations, transitions and motion effects.

- Implemented responsive height. The height property can now have a different value in breakpoints.
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

"Pretty" template preview

Post by Pablo »

This template uses a Flex Grid to create an irregular image grid.

Image


Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_pretty.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Carousel

Post by Pablo »

Carousel

- Added the ability to use icon libraries for navigation controls. With properties for icon color, alpha value and icon size. Icons are published in SVG format. Also, all navigation properties are now on a separate property page.

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


Image

Image


- Added new height options to flexible carousel: 75vh, 33vh, 25vh and 10vh (vh = viewport height).

Image


- In flexible mode it's now also possible to set the position of the navigation controls (left, right, top, bottom and offset in percentages)

Image


- Added the ability to the set the alpha value of the icon colors normal/hover. This can be useful, for example, to reduce the opacity of the icons when the mouse is not inside the navigation area.

Image


- Carousel / flexible now uses Bootstrap 5. No longer depends on jQuery. https://getbootstrap.com/docs/5.2/components/carousel/

- If a Carousel is added to a page with flexible layout (a page that already has a layout grid, flexbox or flex grid) then the type is automatically set to 'flexible'.

- 'Predefined style' is now also available in the Style section of the Carousel.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Slideshow

Post by Pablo »

Slideshow

- Added the ability to use icon libraries for navigation controls. With properties for icon color, alpha value and icon size. Icons are published in SVG format.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Dialog

Post by Pablo »

Dialog

- Added 'one-time popup' functionality via the 'Cookie Expire Days' property. A cookie is stored on the visitor’s browser to only show the dialog once across multiple visits. Use '0' to disable cookie functionality.

Image


- Dialog now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency. https://getbootstrap.com/docs/5.2/components/modal/


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_dialog_cookie.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Tabs

Post by Pablo »

Tabs

- Tabs / Bootstrap type now uses Bootstrap 5. No longer depends on jQuery. https://getbootstrap.com/docs/5.2/compo ... tabs/#tabs

- Added 'deactivate' and beforedeactivate' events. These events will be triggered when a panel gets deactivated. This can be useful, for example, to hide other elements on the page.

Image


Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_tabs.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Accordion

Post by Pablo »

Accordion

- Added 'deactivate' and beforedeactivate' events. These events will be triggered when a panel gets deactivated. See also the image under the ‘tabs’ section.

- Accordion now uses Bootstrap 5. No longer depends on jQuery. All code has been rewritten to remove the jQuery dependency.
https://getbootstrap.com/docs/5.2/components/accordion/

- Accordion arrows now use SVG images instead of PNG bitmaps. This makes coloring/theming the arrows easier and also improves the quality.

- Accordion (Bootstrap) full header is now clickable (instead of just the text)

Image

Demo:
https://wysiwygwebbuilder.com/support/wb18tryouts/wb18_accordion.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Simplified Ribbon

Post by Pablo »

Simplified Ribbon

WWB18 has a new redesigned ribbon mode: Simplified Ribbon. The Simplified Ribbon is a mix between the classic toolbar and ribbon. It shows the commands in a single line which not only brings a modern interface to WWB but also frees up space to show more of the page you are working on.

Image

Image

Image


Because there is less space available, all buttons might not be visible. If you want to switch back to the classic ribbon where you can see more commands, simply click the downward pointing arrow in the lower right corner of the ribbon to expand it. Use this arrow control to switch between the simplified and classic ribbon.

Image


It's also possible to switch between ribbon, classic menubar/toolbars and simplified ribbon in Tools -> Options -> User Interface -> User interface

Image


- Added Office 2022 inspired visual themes (Colorful, Dark Gray, White and Black).

Image

Image

Image

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Page

Post by Pablo »

Page

- Added a quick and easy way to rearrange floating layers (layout grids, flex containers etc.) via the vertical ruler bar. When a floating layer is selected, the ruler will show 'move up' and 'move down' arrows.

Image


- Added 'New Page' tab to user interface. This adds a quick way to add new pages.

Image


By default, the new page tab only contains the ‘+’ sign, but you can change the text of the tab in Tools -> Options -> User Interface. If you leave the field empty then the new page tab will be hidden.

Image


- Added the ability to rename the page by double clicking the tab.

Image


- Added the ability to set a minimum font size for 'Automatically scale new objects in other breakpoints'. Previously, if the base font size was small then the scaled font could become too small to read, so now it can be limited to a more practical size.

Image


- Error Reports checks for invalid page alignment in flexible layouts. The page alignment in flexible layouts should be set to 'do not center this page'. Double click the error to open the Page Properties.

Image

Image


- Enabled 'Rotate Left 90', 'Rotate right 90' and flip commands for all rotatable objects. Previously these commands only worked for Shapes and Images.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

User Interface

Post by Pablo »

User Interface

- Added support for Windows 11 Snap Layout. When the maximize/restore caption button is hovered, the layout popup menu will appear near this button.

Image


- Many property dialogs are now resizable. Also, the software will remember the window placement, so the next time you open the properties it will have the same position and size.

Image


- Added the ability to automatically hide scrollbars in the workspace. When a scrollbar is inactive (the mouse cursor is not located inside it), only compact (thin) thumb box will be drawn. When you move the mouse inside the scrollbar, the bar will be fully drawn.

Image


You can control this behavior in Tools -> Options -> User Interface -> Automatically Hide Scrollbars.

Image


- Added ‘Open file location’ to the context menu of the Toolbox.
When an extension is selected, then this will open extensions folder in Windows Explorer.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Global Replace

Post by Pablo »

Global Replace

- Added the ability to replace the 'class' property (style) for all pages/objects.

Image
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

"Barber Shop" template preview

Post by Pablo »

This template was inspired by the website of my barber;)
Specially, the price list which uses flex containers to implement dotted lines with dynamic lengths (no script, just flexbox!).

Image


Preview:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_barbershop.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Dropdown Menu

Post by Pablo »

Dropdown Menu

- Added 'Dropdown Menu' item in the toolbox. The dropdown menu is a simplified version of the themeable menu without jQuery. Dropdown Menu uses Bootstrap 5 and does not depend on jQuery (unlike the themeable menu).
Note: The themeable menu (with jQuery UI support) is now hidden in the Toolbox by default, but you can still access it via the Insert menu or manually add it back to the toolbox (via customize toolbox)

Image

Image


Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Snap Scroll

Post by Pablo »

Snap Scroll

- Added support for horizontal scrolling!

Image


Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_medieval_town.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Overlay Menu

Post by Pablo »

Overlay Menu

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

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

Image

Image


- Added support for predefined styles.

Image

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Panel Menu

Post by 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

Image

Image

Image


- 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

Image


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

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

Image


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

Image


- 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.

Image


- 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.

Image


- Added support for predefined styles.

Image

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Responsive Menu

Post by Pablo »

Responsive Menu

- Added 'Underline' property.

Image


- Added support for predefined styles.

Image

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

CSS Menu

Post by Pablo »

CSS Menu

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

Image

Image

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


- Added support for predefined styles.

Image

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Mega Menu

Post by 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

Image

Image


- 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.

Image


- Added support for predefined styles.

Image

Demo:
https://www.wysiwygwebbuilder.com/support/wb18tryouts/wb18_styles_navigation.html
User avatar
Pablo
 
Posts: 21583
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Themeable Button

Post by 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

Image

Image


- 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.

Image

Image


- 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.

Image

Image
Locked