You can also upload from your media library the process is easy but requires a few more steps: The animation should render on your page. Add your Lottie animation by choosing 'External URL' as the file source and copy and paste the link to the JSON file. The left-hand sidebar will change from the widget directory to the Lottie Animations widget editor. Drag and Drop Lottie Animationsĭrag the widget into the section you want to incorporate your design. You'll notice 2 options are returned we'll be using the ‘Lottie Animations’ widget. Search your widgets by typing 'Lottie' into the search query at the top of the toolbar. To get started, we need to find our new Lottie page element from Premium Addons for Elementor. The animation will attract users to that area of the page and bring life to an otherwise boring section. We will add our Lottie animation just above the contact information text. Navigate to the page you want to edit we are working on the Contact Us page for this tutorial.Ĭlick 'Edit with Elementor,' and you will be redirected to the page builder. Now your WordPress site will be able to handle and manipulate JSON-based animations. If you enter 'premium addons' into the search query, it will show, as you can see below.Ĭlick the 'Download' button, then click 'Activate' when it appears. You'll have access to free templates and a ton of features like the Lottie Animation widget. Hover over the 'Plug-In' button on your WordPress toolbar and click 'Add New.' The plug-in we are adding is Premium Addons for Elementor if you are new to Elementor, we highly suggest trying the plug-in before upgrading to Pro. If you use Elementor Pro, there is a built-in Lottie animation page element that essentially functions like our plug-in. The free and Pro versions accommodate Lottie, but we will have to download a plug-in if you aren't paying to use Elementor. Now we can get into WP to add our newly customized Lottie animation.įor this method to work, you'll need to use Elementor as your page builder. This will make more sense once we get into Elementor. But for this tutorial, you only need the URL. If you are embedding into HTML or a custom code editor, you'll want the entire code snippet. The plug-in we're using only allows us to enter the JSON URL connected to the Creattie's server or upload a JSON file. You can adjust the size, delay, speed, and animation trigger, but they won't render in Elementor. Once you click 'Embed,' a pop-up will appear. Once you've adjusted the design's color (and stroke width if you choose), click 'Embed.' 3. We want a dark grey that will pop in front of a light grey background for the primary. We're using the orange directly from the webpage to match the branding for our secondary color.Ĭreattie allows you to enter the code or choose manually from a complete color spectrum. But don't worry, the widget editor is highly intuitive and will give you more options once your Lottie animation is added to the page. Because of how our Elementor plug-in will handle the animation, you can only make changes to the color and stroke width at this point. Today we're going to use a contact page as our example, so we'll use the Support Icon to increase engagement on our WordPress page.Ĭreattie allows you to customize color, speed, size, trigger, stroke width, and delay directly from the library. To find a free design, click the 'Free' toggle and browse the options or use the search bar to find an option that fits your needs. We will use a free icon for this tutorial, but Creattie has an extensive library of premium designs in industry-specific collections available for a low monthly fee. This way is preferred for the pre-sale question and is not such handy for the post-sale technical questions.The first step is navigating to Creattie and choosing a Lottie animation. The third way Contact form on Ĭhoose the necessary department, fill out the required fields and submit the request. You have a contact form at the right bottom section (you must be logged into your TF account to send us a message). The second way Using private message via profile's page Also include a link to your site, temporary Dashboard access if possible. Provide as much detail about the issue/question as possible, even if necessary, the screenshots for better understanding. Follow the links below to create an account and submit a topic. Remember that we are opened to customers’ requests and we always do our best to find the best way to assist our clients. Our support experts will be able to help in short terms and provide helpful solutions. Our professional team of support experts is accessible 24/7. Popup added to cart (Add any product to your cart).Cart progress bar ( Add any product to your cart and check then ).Cart countdown ( Add any product to your cart and check then ).Cart/Checkout advanced ( Add any product to your cart and check then ).
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |