6/6/2023 0 Comments Gifmation on wixYou can describe the icon or utilize a keyword to give your page a bump in SEO. Wix offers a cool feature allowing users to include alt text with their animation. Make sure it includes the “” tag along with the tag and click “Update.” Include Alt Text with Keywords Ensure the "Code" radio button is selected and paste your code from Creattie into the field. Once you click "Embed a widget," the toolbar will disappear, and you will notice a resizable square in your Strip titled "HTML."Ĭlick "Enter Code" to paste in your Lottie animation.Ī new pop-up titled "HTML Settings" will appear. We choose to cover how to "Embed a widget" because we feel the "Custom element" feature is redundant, and you are really only repeating the process done in the Creattie library on a separate UI. Also, making changes will be done in a form rather than directly in the code, making the process easier for users uncomfortable with writing code. Because you will enter the JSON URL, colors can be changed within the Wix interface. Using the "Custom element" feature does have advantages. However, you will have to copy and paste parts of the code into a form, making the process a little repetitive. The "Custom element" feature is a tool built into the builder that allows users to customize the animation without manipulating the code directly. We will show you how to use the "Embed a widget" feature but paid accounts with a designated domain name can also use the "Custom element" to add Lottie to a Wix webpage. Here's where we can see one of the differences between the free and paid versions of the Wix website builder. You'll see a toolbar appear on the left side of the screen, navigate down and click "Embed." Embed a Widget or Custom Element You can add a Lottie animated icon anywhere you can include an element.įirst, add a strip to your Wix webpage. Wix has become one of the top no-code web builders because of its easy-to-use drag-and-drop interface. However we will briefly show you the other option, but honestly, it's more work than necessary, especially if you have even the slightest knowledge of HTML. There are two options for incorporating Lottie into Wix for this demo, we will thoroughly cover how to add Lottie animations using the free plan. Style="width:400px background-color: transparent"> You can use the code below to try our FREE customized Start-Up animated icon. You will have to go back into Creattie to make color adjustments because it is stored on the server rather than in the code.Ĭlick “Copy” once you are satisfied with the icon. The only aspect of the animation that can't be changed by changing the embedded code is the color. Instead of rendering a file, Lottie animations are built with code allowing designers to make changes at any point. Changes are made to the code that alters the animation, making Lottie much more flexible than GIF animations. While this is a great place to make adjustments, you can still customize the animation within the web builder. Once your animation looks right, click "Embed." You will see a pop-up with a static version of your animation, fields for size, delay, and trigger, and the code snippet. The changes are altering the JavaScript of the animation, so what you see in the preview will be precisely the same in Wix. You will notice the icon preview as you make adjustments. These two metrics control how fast the animation will play once it is on the webpage. Select an appropriate animation speed and frame rate. Next, choose the stroke width by clicking the up or down arrows this will increase or decrease the width of the lines in the animation. Choose Stroke Width, Speed, and Frame Rate We're going with neutral colors because the site we are editing is black and white. Start by changing the colors to match your aesthetic. Once you've selected the perfect icon for your designs, it's time to customize. It a very versatile icon that can be used as a logo, CTA button, or icon demonstrating growth. You can choose from thousands of high-quality designs, but we will select a free option for the tutorial.įor reference, we picked The Start-Up icon. First, head to Creattie's Lottie icon library.
0 Comments
Leave a Reply. |