Master CSS Design and Bootstrap 4 layouts Visually in Wappler

or How to Become a Web Design Wizard

Visual CSS design is getting more and more popular for creating your own website. Thankfully, visual CSS design is implemented extremely well in Wappler. With our latest update there have been some great improvements to help make designing your site even easier.

Wappler 1.9.5: Updates & New Features

Get ready for some brand-new powers that have been added to Wappler! With the latest update comes tons of new features such as a Gradient Generator that makes it possible to create your own gradients. In this update we have greatly improved and expanded the Design Panel to improve the visual CSS design.

Gradient Generator

With the new Gradient Generator you can choose any colors you’d like for your background. You can decide on the type of gradients that suits your page the best, whether that’d be linear or radial gradients! Both of these options have multiple color stops and the generated CSS gradient code is cross browser compatible.

Gradient Generator

Design Panel Color Coding

Another great addition on to the Design Panel is Color Coding, where different colors are used to visualize the CSS inheritance within Wappler. You can see which rules in which file are applied to the selected element:

Flex Layout Controls

Smart flexbox controls have also been added to the Layout section in the Design Panel:

Class Selector

The Design Panel now has a class selector that is fully integrated in Wappler. Now you can define your own classes with styles and reuse them:

Dropzone control

Another new feature is the Dropzone. The Dropzone displays an area where a user can simply drop their files to upload. By dropping the files into the dropzone, thumbnails will appear in their place.

Hard-Apotheke Website

Featured User Showcase

This is a website built for a local pharmacy in Basel, Switzerland. Besides the fresh new design the site includes an easy to use CMS, an intranet for the employees and dynamic opening hours app. The site was built entirely in Wappler and uses its components such as: server connect, app connect, routing, masonry, swiper, light box, page loader, security, mailing and many more!

Silver Coast Surf School Website

Featured User Showcase

This is the website of Silver Coast Surf School in Peniche, Portugal. This visually simple, responsive website includes a vertical menu, high-quality photos and booking options. Many of our Wappler components were used — App Connect, Bootstrap 4, Server Connect, Swiper, Pre-loader, Google Maps, Notifications, Form Designer and more.

Ecommerce with Wappler

Thanks to the Wappler API tools it’s now possible to build Ecommerce solutions for your clients. Check the documentation created by our community expert Brian to see how easy it is to build an ecommerce website, without writing a single line of code:


Latest Docs & Guides

You can find these docs and more in our Wappler Documentation.


Not using Wappler yet?

Download Wappler here, and don’t forget to join our community forum! Share your experience, get help, showcase your work or just have nice chat with others.