The Simplest Way to Animate WordPress Web sites: BeBuilder + Lottie


Web Development


This sponsored write-up was made by our articles partners, BAW Media. Thank you for supporting the partners who make SitePoint probable.

Animation is not like other world-wide-web style and design traits that arrive and go. For the past couple several years, this pattern has demonstrated how practical it is in increasing the user practical experience. From engagement to enjoyment, there’s a good deal that can be performed with animation on a website.

World-wide-web designers presently have a range of strategies to animate WordPress websites, like CSS animations and embedded GIFs. So why has BeTheme extra a new Lottie animation feature inside its BeBuilder?

There are many strengths to making animations with Lottie over other solutions. In this put up, we’re heading to explore why Lottie is the finest way to make beautiful and partaking animations these days and how its integration with BeBuilder and BeBuilder has created it even more accessible to WordPress people.

Why Lottie Animation is the Very best Way to Animate WordPress Internet websites

Lottie is a single of the latest and most successful means to produce animations for your WordPress internet sites. What particularly will make it far better than other animation techniques? Let’s have a appear at the core rewards of Lottie animation.

1. No code is desired to operate with Lottie

You’d never ever know by hunting at it, but you will not have to publish a solitary line of code in get to develop Lottie animations. For illustration, here’s what Lottie animations seem like on the BeLottie pre-built internet site.

For starters, you don’t want to know how to use Adobe Immediately after Outcomes to make or edit Lottie animation files. You can get premade Lottie animations from sources like LottieFiles and IconScout.

When you have your Lottie animations, BeBuilder helps make it easy to insert them into your WordPress site.

Adding Lottie animations to your WordPress site

Simply identify the Lottie component from the record of UI aspects. Drag-and-fall it into the visual builder. Then, use the Articles options on the left to possibly add the Lottie file to your WordPress media library or pull in the animation from an exterior link.

There’s no have to have to study HTML, CSS, or After Outcomes in buy to make highly developed animations for WordPress. BeBuilder’s no-code webpage builder and the Lottie animation element make it simple to create animations applying intuitive equipment for designers and non-designers alike.

2. Lottie animations are effortless to customize

There are a amount of explanations you might want to customise your Lottie animation. For starters, you want the animation to match your website’s branding.

If you get your Lottie from LottieFiles, it arrives with an editor that allows you to personalize:

  • animation pace
  • background shade
  • layer shades
  • interactivity

The LottieFiles editor

So you can edit the content of the Lottie animation ideal from the supply.

In addition, you can use BeBuilder’s settings to customise how the Lottie animation works. For instance, you can modify options relevant to:

  • animation result in
  • begin and stop position
  • ahead or backward route
  • alignment
  • track record
  • responsive visibility

Lottie has turn out to be just as effortless to edit as all of the other UI factors inside BeTheme.

3. Lottie is superior for overall performance

Sometimes when we animate websites, we have to do so at the price tag of a little something else.

For instance, some animation strategies are resource-intensive and bring about world wide web webpages to load far more gradually than they would in any other case. Other animation approaches may possibly guide to glitchy or grainy-on the lookout animations, which compromise the over-all physical appearance of the internet site.

Lottie is a JSON-centered animation file. It’s a lot like SVG in that the two are vectorial file formats — tiny in size and excess weight although also being thoroughly scalable. This would make Lottie the great animation file format for general performance.

Let us glance at a fast example. This is a JPG “Download” button readily available on a no cost resources internet site.


A equally developed button can be located on LottieFiles, only it is animated.

Animated download icon

The distinction concerning these two data files goes over and above aesthetics. The JPG from Vecteezy is 57KB. The JSON from LottieFiles is 15KB.

Of program, other elements effects how huge a file is, like the output sizing. Nevertheless, these are equivalent graphics and, in spite of the animation in the Lottie, it weighs substantially significantly less.

In addition, Lottie seamlessly integrates with BeBuilder, the speediest page builder for WordPress. So you will not have to get worried about a gradual concept or web site builder plugin interfering with Lottie’s native speed and high-quality when you use the two with each other.

4. Lottie is entirely responsive

Although BeBuilder gives people the choice to hide their Lottie components on particular products, this is a location you won’t have to have to use.

Lottie files are vector-dependent, which indicates they’ll scale to any sizing screen. For instance, let’s say we embed a walking taco Lottie into the dwelling webpage for BeFoodTruck 2.

When we open up up responsive method and change the perspective from desktop to tablet to mobile, the animation file responds appropriately to the new display screen size. No adjustments are wanted on your finish to resize or reposition the Lottie.

Thinking about how essential responsive layout is to today’s makes and shoppers, Lottie is an extremely valuable animation software in responsive design and style. When you pair it with BeTheme’s responsive pre-designed internet sites as nicely as BeBuilder’s responsive webpage builder, you are going to have the total responsive powerhouse for WordPress at your disposal.

5. The Lottie/BeTheme combo elevates the person knowledge

A strolling taco animation certain is a great deal of enjoyable to search at, but we can do a lot far more with animations than just entertain site visitors. By programming microanimations to reply to visitors at the suitable position and the right time, we can inspire them to get motion.

Let us use the contact-to-motion block on the BeCarRental3 site as an case in point.


There is a green motor vehicle/smiley experience icon future to the words “Customer friendly company”, just higher than the contact-to-action button. Though this belief mark is eye-catching, some people could scroll much too speedily earlier the entire static area to notice it.

What you could do is incorporate motion to the portion. Just one possibility would be to swap out the Reserve a motor vehicle button for an animated Lottie. This microanimation would draw visitors’ awareness right to the button and get a lot more of them to halt and take into account the invitation to “Book a car”.

A different possibility is to swap the have faith in mark with a scroll-activated Lottie graphic.

In this article we see what happens when the automobile coverage gives loading website page animation is repurposed for our call-to-action block.

Rather of the Lottie participating in on a loop, the animation slows down and moves in sync with the visitors’ movements. We ended up in a position to do this by changing a single location inside of of BeBuilder, updating the Set off from default to on scroll.

Even though the button continues to be unchanged, the addition of motion to this part — and straight above the button — will help raise engagement.

Lottie Animations are Just Just one Additional Rationale to Make BeTheme Your Go-to WordPress Topic

Lottie is a severe activity changer when it will come to web site animation. And that’s just on its have.

When you combine Lottie with BeTheme and BeBuilder, you are going to have all the applications you have to have to get your styles — and person ordeals — to the subsequent stage. What is extra, you won’t have to maximize the cost, time to launch, or effort and hard work needed to animate your BeTheme websites. Everything has been designed as intuitive and seamless as achievable for you.

Leave a Reply

Your email address will not be published. Required fields are marked *