How to Embed Custom Code to your WixStudio Site

The attention span for website visitors is fleeting now with today’s content-saturated market. Standing out with an interactive website is essential in improving overall user experience; as users now seek engaging and personalised digital experiences. From fun animations, to cards and hover effect on buttons, interactive elements are a great way to engage users and encourage them to take action. Remember, the longer a user stays on your site, the higher your SEO rankings are boosted.

This tutorial includes elements from uiverse.io. Uiverse is a great resource where designers and developers can create and download fun interactive elements to add to their website. These elements will help users’ navigate more easily during their visit.

Adding a Uiverse Element to your WixStudio SIte

1. Open uiverse.io and browse through their collection, select the element you want to add
2. Toggle to the “html” tab and click on “copy” to copy the html code

3. Open your WixStudio editor and navigate to the (+) “add elements” > embedded & social > embedded code and add the html code that was copied.

4. Back to uiverse.io, toggle to the “css” tab and click on “copy” to copy the custom code. To add the code, use the <style> “code” </style> tag.

5. Adjust the size and position of the embedded element in WixStudio as needed and preview the site to make sure it looks good.

6. Done! Publish your website with your cool interactive element.