Online Tutorials

Thanks for choosing WYSIWYG Web Builder!

In this section we will give an introduction to many of the exciting features.

General

• First steps: Getting started with WYSIWYG Web Builder
• An introduction to the basic functionality of WYSIWYG Web Builder
• An introduction to the Ribbon Interface
• New: Easy Mode: Website Building Made Simple
• Site Manager
• Object Manager
• Setup guide borders, rulers and grid
• Adding text to a web page
• Adding an image to a web page
• New: Adding videos to a web page
• Linking your pages together (Creating links)
• Saving your web site
• Adding a Navigation Bar to your web site
• Adding a Menu Bar to your web site
• Using templates
• Importing an existing HTML page in to Web Builder
• An introduction to the SlideShow
• An introduction to jQuery UI Widgets
• An introduction to the Photo Gallery
• An introduction to the Blog object
• An introduction to Blocks
• Using Web Fonts and Google Fonts
• Navigation / menus
• Icons Libraries
• Borders
• Updated: Color Swatches
• Insert an Unsplash Photo
• Enable Page Preloaders
• Shape Dividers
• Pixabay
• Horizontal Line / Divider
• Image Hotspots
• Tables
• Custom Scrollbars
• Dark Color Scheme
• Getting started with Themes
• New: How to Make Your Website Accessible?
• New: Color Adjustment Tools
• New: Photo Grid
• New: Discover Inspiration with Example Projects

Artificial Intelligence

• Updated: Artificial Intelligence FAQ
• Getting started with Artificial Intelligence
• Example prompts for creating AI Art
• Translate text using AI
• Using the Website Wizard
• New: Smart Content
• New: Stability AI
• New: Locally generate AI Text using Ollama
• New: Locally generate AI Images using ComfyUI

Preview and Publish

• Publish FAQ
• Preview a page in your Browser
• Publishing your web pages
• Local Server Preview
• FTP Manager

Layout

• How to use Inline Frames
• How to use Master Pages
• How to use Embedded Pages
• How to use Master Frames
• Using Layers
• How to create a draggable window using layers
• More useful layer features
• Creating a Full Screen / Single Page Layout
• How to add a parallax scroll effect to your pages?
• Updated: Cards
• Sections
• How to use the Dialog widget

Responsive Web Design

• Responsive Web Design FAQ
• Introduction to Responsive Web Design - The Basics
• Responsive Web Design in WYSIWYG Web Builder
• How to create Responsive Text?
• Updated: An introduction to the Layout Grid
• Advanced Layout Grid Features
• Layout Grid FAQ
• Getting started with FlexBox
• Recommended: Responsive Web Design - Design Techniques
• An Introduction to Flex Grid
• Responsive Web Design - Tools

Forms

• Updated: Form FAQ
• Updated: Creating a form
• How to use the Form Wizard?
• Updated: Form input validation
• Form conditions and calculations
• Building a PHP Shopping Cart using WYSIWYG Web Builder
• How to use PHP to collect Form data
• Creating a Form with a popup confirmation
• Form Input Fields
• Input Mask
• Auto Complete
• New: Anti spam features in forms
• New: Rich Text Area

Search Engine Optimization (SEO)

• Add Rich Snippets to your website using Structured Data (schema.org)
• SEO Assistant
• Adding robots.txt to your website
• Adding a sitemap to your website
• Table of Contents
• New: Website Accessibility

Carousel

• How to use the Carousel?
• Create a 3D Carousel with reveal.js
• Using the Carousel to create an animated slideshow
• Create a Full Page website using the Carousel
• How to use the Carousel to create a multi-page form?

Login Tools

• Getting started with the Login Tools
• Adding a login to your web site (Login basics)
• Customizing the Signup Form of the Login Tools
• Social Login
• User Roles (groups)
• Creating protected pages without a database
• Protected content and Protected Menu Items

Ecommerce

• Adding a PayPal Buy Now button to your website
• Creating a basic PayPal Shopping Cart
• Building a PHP Shopping Cart using WYSIWYG Web Builder
• Ecommerce Integration
• Ecwid Shopping Cart
• Vibracart Pro
• Updated: PayPal Shopping Cart
• Ecommerce Cards

Events

• Updated: Using events to create a roll over image with sound
• Using events to display popup information for a specific item
• An introduction to Timers
• How to reveal objects on scroll with bookmark events?

Animations and Transitions

• An introduction to CSS3 animations
• Start and stop CSS3 animations with Events
• An introduction to CSS3 transitions
• Using CSS3 transform to zoom an image
• Animate text with the Banner object
• Link transitions
• Using Scroll Transitions
• SVG Path Animation
• Motion Effects
• Lottie Animations
• Mouse Effects
• New: Text Effects and Animations
• New: Animated Headline

Content Management

• Getting started with the CMS Tools
• How to dynamically expand the CMS View based on the content of the page?
• Using CMS plug-ins
• How to integrate Cushy CMS?
• How to integrate Surreal CMS?
• Editable Content

Miscellaneous

• Using the Style Manager
• Change the color or style of a text link
• Updated: Adding custom HTML or Javascript to a web page
• Using the jQuery Slider
• Updated: Adding a lightbox gallery to your website
• Implementing a global lightbox gallery
• Do more with styles: Pseudo classes.
• How to use Affix and ScrollSpy?
• Updated: How to add a parallax scroll effect to your pages?
• How to add a site search to your website?
• An introduction to Toasts
• Wrap text around images and other objects
• Extension Manager
• Morphing Shape
• Snap Scroll
• Progressbar
• Tooltips
• Implementing a Style Switcher
• Badges
• New: Ferris Wheel

What's Next?

More (video) tutorials, FAQ and support