BETA
Get notified 🔥
Updates right into your inbox when a new tutorial drops.
Get notified
Working with Embeds
Apr 15, 2023
Working with Embeds
Embedding forms and other HTML elements can be quite effective. Learn how to easily and effectively create embeds in Framer
Setting up the content
Today, we're going to have some fun with embeds. The opportunities are endless; you just need to unleash your creativity. In this tutorial, I will show you how to build a simple tracklist of your favourite songs using embeds.
1. While building a favorite track list, I realized I needed a stylish component for displaying the songs. So, I chose to showcase the album covers and incorporate a delightful animation for the play button.
Create your design
2. Creating variables for the artist, song, and album covers is straightforward. Simply duplicate as many songs as you need to display and modify the variables accordingly. In the video, I opted to copy and paste existing data to expedite the process.
Adding the Embed
3. Creating an embed is rather simple. Just tap to open the overlay and press "I" on your keyboard. Then search for "Embed." This will allow you to drag and drop an Embed element onto the canvas. Simply paste your URL or HTML embed code, and you're done!
That's all there is to it! Now, let's see what you can come up with.
Table of contents