Web Builder Tutorial Article and Video

Overview 🔎

Creattie is a JSON-based animation library for web developers, marketing agencies, and freelance designers. I've been working with the company for over a year, writing 100% of the articles on the blog. This post focuses on walking readers through the process of incorporating the designs from Creattie's animation library into the popular web builder, Elementor. I also recorded a video tutorial covering each step of the process.

Problem & Solution 🤝

Creattie needs web traffic to increase its user base. The article/video tutorial accomplishes this by offering value to web designers who use Elementor and appears on page one of Google's search results when users search for terms like 'add Lottie to Elementor.'

Goals/Requirements: • Write step by step tutorial that explains in detail how to use Lottie animations on an Elementor website. • Incorporate keyword phrases in the title, meta description, and throughout the text without diminishing the value of the article. • Add images and a step-by-step video tutorial to guide readers through the process.

Process 🛣

I've used Elementor in the past to build websites and post articles but hadn't incorporated Lottie animations. I've done other tutorials for Creattie on Shopify, React, Wix, and Divi. We'll continue to add more platforms to feed the Google algorithm and offer more value to Creattie users.

The first step is always learning for myself. Then, I can go through the entire process and take screenshots along the way. After I structure the article, I write each section and submit it for review. Creattie's marketing manager will request revisions or approve the article.

We recently decided to incorporate a video for all our tutorials. I go through the same process but record my screen. The Creattie production team edits the video and adds an AI voice to make the video sound polished.

Results 🎁

The article is a polished tutorial that is equally valuable to Elementor veterans and beginners. We published in January, and it is already showing up on page one of Google.

Takeaways 📣

Each web builder has limitations when working with new technologies like Lottie animations. Moving forward, I will make a note of what is possible within the builder. For example, changes to color can't be made once the animation has been uploaded to the web page. This was a surprise to the client, which could have been avoided if I would have outlined the capabilities of Elementor before submitting the article.