How to Add Canva Templates to Google Sites

If you're balancing the creative and technological aspects of your web design, you'll love learning how to add a Canva template to Google Sites. This marriage of user-friendly tools results in stunning, engaging websites without requiring advanced coding skills. Let's dive into the process step-by-step.

the words how to create a free website with canva on top of a desk
the words how to create a free website with canva on top of a desk

Before we begin, ensure you have a Canva account with at least one designed template ready to be inserted into your Google Site. Once that's sorted, let's get started!

How to Make a Free Website Using Canva (The Easiest Way)
How to Make a Free Website Using Canva (The Easiest Way)

Exporting Your Canva Design

To use your Canva template on Google Sites, you must first export it as an HTML file. Here's how:

Convert Canva To Google Slides – Step By Step
Convert Canva To Google Slides – Step By Step

  1. Open your Canva template.
  2. Click the 'Share' button, then select 'Download.'
  3. Choose 'HTML' from the dropdown list and click 'Download.'

Preparing the HTML Export

an open laptop computer sitting on top of a desk with the words building website using canvas
an open laptop computer sitting on top of a desk with the words building website using canvas

Once downloaded, the HTML file might contain raw codes that aren'tosite-friendly. Here's how to clean it up:

  • Open the HTML file in a text editor like Notepad++ or Sublime Text.
  • Remove any unwanted styles, scripts, and references that might not be needed on your Google Site.
  • Save the cleaned-up HTML file.

Uploading to Google Drive

Use Google Forms to Create a Website Contact Form: Canva Cheat Sheet
Use Google Forms to Create a Website Contact Form: Canva Cheat Sheet

To use the HTML file on Google Sites, you must first upload it to Google Drive.

  1. Go to Google Drive and sign in.
  2. Click the '+ New' button and select 'File upload.'
  3. Upload your cleaned HTML file.

Adding Canva Template to Google Sites

10 Canva Hacks You NEED to Know ✨ | Beginner to Pro Design Tips
10 Canva Hacks You NEED to Know ✨ | Beginner to Pro Design Tips

Now that your HTML file is on Google Drive, it's time to add it to your Google Site.

  1. Open your Google Site in edit mode.
  2. Click the '+ Add' button in the upper-right corner.
  3. Choose 'More' from the dropdown menu.
  4. Select 'Embed code.'
How to create 🎨 a ✨FREE✨ website in Canva! | Canva tips | Canva tips and tricks | Canva tips |
How to create 🎨 a ✨FREE✨ website in Canva! | Canva tips | Canva tips and tricks | Canva tips |
Is Canva Compatible With Google Slides? (Yes — Sort Of)
Is Canva Compatible With Google Slides? (Yes — Sort Of)
Google Site Template
Google Site Template
Canva Website Google Review Widget: Canva Layout Ideas
Canva Website Google Review Widget: Canva Layout Ideas
How to Make a Multi-Page Canva Website (Step-by-Step)
How to Make a Multi-Page Canva Website (Step-by-Step)
Create a Free Canva Website Contact Form: Canva Design Ideas for Digital Media
Create a Free Canva Website Contact Form: Canva Design Ideas for Digital Media
Creating a Classroom Website - Google Sites
Creating a Classroom Website - Google Sites
How to use canva🤍
How to use canva🤍
Canva Website: How To Create A Website In Canva For Free
Canva Website: How To Create A Website In Canva For Free

Pasting the HTML Code

Now, let's insert the HTML code from your file.

  1. Click inside the 'Embed code' panel that appears.
  2. Paste your HTML code into the panel.
  3. Click 'OK' to add the content.

Formatting and Styling

Your Canva template should now appear on your Google Site. To finalize, you might need to adjust the formatting and styling:

  • Use the formatting tools on the right sidebar to adjust alignment, add margins, etc.
  • Customize the styling with Google Sites' built-in themes or by adding custom CSS.

Congratulations! You've successfully added a Canva template to your Google Site. This combinations allows for stunning, user-friendly websites with minimal effort. Happy designing!