1/4/2023 0 Comments Wordpress using unpkgThe SRC can be the URL of any Lottie JSON. #Wordpress using unpkg code#Then, in a code block HTML section, paste in the following: You'll need to enable JSON uploads: here’s how. First, take the JSON file, and upload it to your WordPress website. If you're simply looking to add a basic Lottie, or Lottie with hover effects, it's actually relatively simple. Step 2: Adding A Lottie To Oxygen Builder Once you've installed these scripts, it's time to add a lottie to your website. If you're looking for performance, self hosting the script by downloading it, uploading it to your WordPress website, and then either using a script tag or enquing it into your site is the best way to do this. You can copy paste these scripts from our Oxygen Builder Lottie Cheatsheet. The second library is only required if you are going to be implementing interactive effects, like animating the lottie as the user scrolls down the page. The first library is mandatory, and is the webplayer library, which registers a new HTML element used to add lotties to your site. We recommend using Advanced Scripts to do this, but you can also use Code Snippets. This example uses a CDN, so simply insert this CDN script link into the header of your WordPress website. This is done in the same way that any third party JavaScript library is included in WordPress. The first step is adding the applicable libraries to your WordPress website. #Wordpress using unpkg how to#With that said, Here's how to add a lottie to your oxygen builder website by using a simple JavaScript library and easy to implement HTML. However, if you're looking for more functionality, Scroll down to the last section of this article which will introduce you to the Bodymovin integration method. The Web Player method also allows for simple interactive effects. That’s because that method is much more complex, and if you’re simply looking for a way to add a lottie to Oxygen Builder, there are easier ways. Note: we are using the Web Player method for most of this article, not the Bodymovin JS libraries, which is the official way to add a lottie to a web property. So no cheatsheet, no matter how much I plug it in this article and video - SORRY!). Also, check out the Cheatsheet (UPDATE: unfortunatly I lost the cheatsheet. Best of all, when compared to a video and gift, the impact on performance is utterly negligible. #Wordpress using unpkg professional#This article is going to cover how to add a basic looping animation, make the animation interactive in regards to the scroll position on your page, only play it when hovering over it with your mouse, and even toggle the lottie animation on click.Īs you'll see, it's relatively easy to add a lottie to your website built with oxygen, and it adds a unique touch that makes the end product alot more professional and interesting to your users. Instead, we're going to use a code block, two JavaScript libraries, and some simple copying and pasting to integrate lotties into our website. Unlike other page builders, Oxygen Builder does not have a native integration too easily add lotties to your website. In this blog post, we're going to be discussing how to add lotties to your Oxygen Builder website. It's very lightweight, and as a modern and professional touch to any website. Lottie are a type of animation that is created to replace GIFs and videos.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |