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.
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:
- Stripe Integration Part 1 — Customer Creation: Learn how to create a customer using the Stripe API.
- Stripe Integration Part 2 — Listing Customers: Learn how to retrieve and list customers from Stripe.
- Stripe Integration Part 3 — Retrieving a Customer Object: Learn how to retrieve details about your Stripe customers.
Latest Docs & Guides
- Using the Design Panel: Learn how to use the new Design Panel in Wappler.
- Using the Dropzone Component: Learn how to use the new Dropzone Component
- URL Rewriting with Wappler: Learn how to use the new routing options in Wappler.
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.
