Applying a Masonry Grid
You know it can be a real problem to create a layout based on columns when you are using elements with different heights in each row. You can see that the elements are not properly aligned. This is w…
Applying a Page Preloader
You can add a preloader to your page while the page content is still loading. It can be used on both static sites and sites using dynamic data. For example it is really useful for large data sets: …
Using Animations
With Wappler you can apply different animation effects to any of the elements on the page. There are two types of anymations included - inview (or onscroll) animations, and enter/leave animations. T…
Using Lightbox
You can show images and videos hosted on your server in a Lightbox. We added App Connect and Bootstrap 4 on our page, so let’s add the lightbox component on the page as well: Click the add new compon…
Slideshow Transitions
App Connect Slideshow includes two sets of transitions, which can be applied to your images - 2D transitions and 3D transitions. they can be applied to the whole slideshow or you can set specific tran…
Responsive Slideshow
We included App Connect and Bootstrap 4 on our page. Then we created a really simple page layout and we are going to insert it inside a Bootstrap 4 column. The App Connect Slideshow is a responsive sl…
Swiper - Basic Options
The Swiper component in Wappler is a modern, touch-friendly slider which can be used with any content. It includes different options like 2D and 3D transitions, parallax effects, touch interactions, d…
Swiper - Responsive Options
You can customize the Swiper component to show different number of slides on different screen sizes. Also you can customize the spacing between slides. We added a Swiper with slides containing images…
Using Lazy Load for Image on Your Page
Lazy Load Component offers the so called “lazy loading” for the images on your page. This means, that when your page contains many images, you don’t have to wait for the page load them initially. The …
Lazy Load with Dynamic Data
You can use the Lazy Load Component with dynamic data. We have a dynamic masonry layout on our page, created from a database query. You can use any dynamic source of course - database, API data sourc…
Using Placeholder Image with Lazy Load
In some cases, where your images are huge in size it can be useful to use an image placeholder, while the original image is loading. In this tutorial we will show you how to use a low-quality version…
Responsive Fullscreen Swiper
In this tutorial we will show you how to create a fullscreen Swiper, similar to the one we created in THIS SHOWCASE. This will require us to add 4 lines of CSS through the Styles panel, but everythin…
Animation Delay Options
You can create sequential animations using the delay option of the Animate component in Wappler. We added 3 images in a row on our page and we want to animate them sequentially when they enter the vi…
Applying Parallax Effect to Images
You can apply a parallax effect to the images on your page. The parallax effect applied to each of your images can be different and there are 8 different effects you can choose from. Select your imag…
Adding Background Videos
You can easily add a responsive background video to a section/container of your page. It will auto scale to fill the available space and looks nice on any device. First, select the container you want…
Adding Typing Animation
You can add an animated typing effect to your pages (just as on the Wappler Homepage), using the Typed Component in Wappler. It can be added as a prefix or suffix in your headings, links or paragraphs…
How to Create a Video Gallery
In this tutorial, I will show you how to create a Video Gallery using YouTube videos. When the Play button is clicked, the video will automatically run in a Bootstrap modal and when the modal is close…
Adding Transitions to page elements
About Transitions Transitions are used to create a smooth animation between different states of an element. You can customize the duration, delay and the easing for your transitions. In this tutori…