How to convert Google Slides into H5P presentation? Step-by-step tutorial

January 7, 2021 0 By admin
How to convert Google Slides into H5P presentation?  Step-by-step tutorial

This post explains what to do to re-use your Google slides in an H5P presentation.  It is a step by step tutorial showing how to change slides aspect ratio, how to download your slides and how to upload them into  the H5P presentation.

Converting Google Slides into H5P presentation. 

You can watch the video explaining what to do step-by-step what to do to reuse your google slides for H5P presentation, or read the transcript below the video. 

The good news is – I am going to walk you step by step through this process. The not so good news is that there is no easy way  and  you need to export all slides as images and then add each slide  in to H5P- one by one either as an image or as background.

Think if you have any particular reason to make your presentation H5P – like using some of the functionalities not available in traditional Google slides pr PPT. There is a bit of manual work, and it simply might not be worth all the effort – especially if your presentation is a hundred slides long. However, if you still want to learn how to do it, stay with me, and I will guide through this process step by step. 

So let's get to it and see how to convert google slides into H5P presentation. 

Unfortunately, at the time of posting this, there is no option to import or migrate google slides into h5p, and we will need to migrate each slide one by one. This can be time-consuming, so think carefully if it is worth your effort. 

And here is the process step by step.

Step 1.  Change Google Slide aspect ratio to match H5P ratio

So the first thing is to make sure that the slides aspect ratio matches that of H5P. 

  • H5P slide ratio is 2:1 
  • Google Slides Default size is 16:9 

Before downloading your slides make sure they have the same ratio as H5P slides – otherwise, you will get an image that doesn't fit perfectly into your H5P slide, or if uploaded as H5P background will be stretched like this one here.

Google Slides allows you to change the aspect ratio of your presentations, choosing between Standard (4:3), Widescreen (16:9), Widescreen (16:10) and custom size.  

How to change the size of Google slides to make them compatible with H5P

  1. On your computer, open a presentation in Google Slides.

  2. Click File > Page setup.

  3. Choose your custom ratio – in this case you need to select a custom ratio.

    • Below “Custom," enter the size and pick a measurement unit (inches, centimetres, points, or pixels). 

    • I usually go by pixels. The height is 1080px, so I make the width twice that – 2160px.

  4. Click Apply.

You see you get that extra space here after resizing slides – now you will need to fix anything that doesn't fit the new resized slide. And remember this change affected all slides so you need to fix graphics on all of them. 

Step 2. Save Google slides as images

When you are happy with the slides ratio and their layout and composition, you can start downloading selected slides from your presentation one by one as images. 

Bare in mind that you will lose any transitions you might have in your slides when you download them as static PNG or JPG images. 

How to download google slides as images

  1. Click on the slide to save as an image.
  2. Click File.
  3. Select Download.
  4. Choose JPEG or PNG

Unfortunately, you need to do it slide by slide. I was mentioning earlier that it can be time-consuming, so have a good reason to do that. 

Step 3. Upload visuals to the H5P presentation as images or backgrounds

You can upload an image as images appearing on the slides or background art. 

To upload an image to the slide click on an image Icon, fill in required details and click done. 

Images uploaded to the slides can be resized in H5P while editing slides. 

Background, on the other hand, are fixed and fill in the entire space of the slide.  Downloading images in the correct 2:1 ratio is particularly important if you plan to use slides as backgrounds. 

To upload background click on the icon with the paint bucket below the slide. 

You can now choose whether you want the same background for the entire template or for just one slide. 

I usually add images as the background because I prefer that they are in a fixed position and when adding additional functionality and interactions, there is no risk of accidentally moving or resizing them. 

Ok, so that's how you create the H5P presentation from Google slides. 

Just one final note – If your presentation is long, consider using H5P for smaller chunks of your content – some section of your presentation perhaps. Think whether your learners would benefit from some interactivity, additional functionality that your google slides don't have – and I don't mean adding video or audio – this all can be easily created in Google slides. Think about the functionality that can be achieved only or more comfortable in H5P (built-in quiz, scenario or some other functionality of H5P slides – I have discussed them here in the post about How you can do H5P slides to make your presentations more engaging and effective).  

Thanks for watching, I hope it was useful. Let me know if there are any topics you would like to be covered in my future videos. 

And don't forget to show  your support by liking and subscribing to my YouTube  channel. If you are interested in topics I post about, join my newsletter – you can subscribe right below this post! 

Join my network, stay connected, get in touch!

Join my network!


You might be interested in…

Recording audio for online courses – a few technical tips

As we all continue to experience vast advances in technology and social media advertising, blogs, websites and the like, audio…

Read more
Recording audio for online courses – a few technical tips
How to use videos in H5P presentations – combining video and slides.

How to use videos in H5P presentations – combining video and slides.

In this post, I will share a few ideas for combining videos with H5P slides to create more engaging and…

Read more