How To Use Canva Embed Code On A Squarespace Website
Using Canva Embed Code On Squarespace Websites
Canva is an incredible platform that gives you access to thousands of customizable graphic arts templates you can use to help develop your brand. They're perfect for spicing up your blog, adding engaging graphics to your social media, creating a logo, poster, or flyer, give your resume some pop, creating web banner ads, and much more.
Using Canva graphics on your Squarespace website is now easier than ever. You can embed the images directly onto your Squarespace website, and because they are an embedded image, whenever you change an element on Canva, for example changing dates on an event flyer, your Squarespace website is automatically updated. Embeds allow you to easily share content and automatically update not only on Squarespace but across the web.
You can display fully functional Tweets, share a YouTube video, on embed almost anything on your blog or Squarespace website. It offers you incredible flexibility and can save you plenty of time when creating and sharing new content.
Here's why and how to use Canva 2.0 and Canva 1.0 embed code on your Squarespace website.
Why Use Canva Embed Code on Your Squarespace Website?
What we love about embeds is that they're easy to start using them. They are flexible, and you can develop them and build up functionality as you go and your technology evolves. Start by allowing users to copy an iframe tag with your website, then you can build up the user experience and performance as needed. One of the significant added benefits – spreading your brand on the web and acquiring more users. Depending on how you implement embeds, you can also enjoy analytics and SEO advantages.
Click Here To Learn How To Design a Call To Action On Canva
Embeds use will continue to grow as they embrace the concept of being entirely web-based. Because they do not rely on the user's file system, but actually stream directly from the source, embeds offer incredible functionality. The web is moving towards a service provider based platform, for example, Dropbox for file sharing, Instagram for sharing photos, and Canva for graphic design. Each service focuses on doing one task well, and by connecting through these sites, designers and business owners can let each do what they do best.
Canva Features Scalable IFrames
The magic in embed code comes from the <script> code. This tag runs a script on the embedded website that dynamically inserts the iframe onto any page where it is placed. While this doesn't have any real advantage other than keeping the embed code a bit shorter, by having a script on the embed website we can make the content responsive to the container the embed is on.
Unlike an image which rescales based on the viewing device, iframes don't neatly scale to the dimensions of the content that is within them. To make sure that our image is the right size, we detect the width of the container that the embed is in and then calculate the dimensions of the embed using the ratio of the design.
This is how we can achieve an edge-to-edge image with rounded corners. Every time the container or window is resized, we merely need to recalculate the style, taking advantage of the “data-height-ratio” defined on the HTML e3lement.
Using Canva Embed Code on Your Squarespace Website
Creating a design on Canva gives you incredible control over the elements of your website. Canva embeds provide your visitors with a dose of interactivity. You can convert content into presentations for your readers to engage with or interesting infographics that can be changed in Canva and will update in real-time wherever you have them, on your website, in your Twitter feed or on your social sites. Basically, Canva embeds allow you to transform static designs into engaging, interactive, high-powered content.
If you have a “Pro” paid version of Canva, using embed code on your website is simple. Just copy and paste your designs embed code onto your Squarespace site.
Here's how to share your Canva design using embed code:
Too embed a Canva design on Squarespace, click “the three dots in the upper right hand corner.”
You will see multiple options to share your design. Choose the “Embed” option in the “Share” box.
A new window will open with a button that says “Embed.” Click on the button.
Look for “Your HTML Link”. Click on the button next to the code that says copy.
Now that the code is copied, paste the code onto your Squarespace website following the instructions below.
If you modify your design, it will automatically update on your site
In Squarespace, you'll need to paste the embed code into the HTML viewer. Here are the steps:
Add a Code Block to your web page. (Click here for instructions)
Click on the pencil icon on the Code button, this will open the HTML viewer window.
The code block should be set to HTML. Delete the code that says… <p>Hello, World!</p>
Paste the HTML code you copied from Canva by pressing Command/CTRL + V into the Squarespace HTML viewer window.
Click “Apply,” and your embed code is inserted into your Squarespace page.
Using Canva as a design tool can add another layer of functionality to your Squarespace website design. It's the perfect way to add design elements that can increase engagement with your content, drive conversions, and provide your visitors with an excellent user experience. Adding Canva embed codes to your website is fast, easy and flexible. Changes made in Canva are updated in real-time meaning you'll spend less time updating your content, freeing up time for core business tasks. It's a win-win proposition!
Tips On Using The Squarespace Website Builder
About Michael Conway
I'm the owner of Means-of-Production, a marketing firm that builds Squarespace websites. I design sites that help you get found online, attract better prospects, and capture leads. If you need help with a Squarespace site that you're working on click here to view my calendar and schedule a call. I am a Squarespace Specialist and Authorized Trainer. Together we can improve your site so that it grows your business.