Welcome to the WordPress video thumbnail generator. This tool is designed to help generate visuals for different types of video, audio, and event materials created by the WordPress community.
In this tool, you’ll find several branded templates, in a 16:9 aspect ratio. On the right you’ll see a quick view of all available visuals, including WP Briefing, Developer Hours, Online Workshops, and a generic one for WordPress events such as meetups.
0:19 So let’s see how to generate the visuals to generate an image.
0:24 The first step is to decide which template works best for your video.
0:28 On the generator page you can see a preview of the four color palettes that each template has.
0:34 We have Pomegranate gradient, Light gradient, Blue, or Dark blue.
0:41 Most templates have text but some also have a main image and avatarAvatarAn avatar is an image or illustration that specifically refers to a character that represents an online user. It’s usually a square box that appears next to the user’s name. faces for speakers and guests.
0:49 The series templates were made for a very specific type of content and they only have one palette.
0:56 There is one template made for WordPress events that don’t have a brand identity or a way of creating special thumbnail images in general.
1:05 Try to avoid using templates that only have text.
1:08 Most index pages also show the video title next to the thumbnail images.
1:12 So showing the same text twice might not look good to start using a template.
1:18 You first need to pick the color, select the template.
1:21 And on the design panel on the right hand side, click on the dropdown to select one for the text.
1:28 And depending on the template, you can have one or multiple fields, click on the template and replace the text areas on the right side to replace the horizontal or vertical image.
2:00 Expand the Figma component by clicking on the arrow on the left-hand panel, click on the image layer itself and then on the right-hand side, click on image and replace it with one from your computer for the faces.
2:27 Some templates allow you to change how many you want to see.
2:30 So you can select the number you want.
2:32 While in other templates, you can hide the faces completely to replace an image.
2:42 Expand the Figma component on the left-hand panel and replace the image as in the previous step and finally select your template or multiple templates by keeping the shift key pressed and click on “Export.”
3:39 That’s it.
3:40 I hope this generator is useful if you have any questions or suggestions, drop them in the #design channel on SlackSlackSlack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/..
If you’re new to Figma, we take a look at the learning resources listed below before diving in this file. If you’ve used Figma before, skip to the next section and learn how to generate your thumbnail images ✨
To use this generator, replace the sample info – text and images – in the templates you want to use. The generator then automatically updates the visuals ready to be exported.
If your video is not part of one of an existing series – such as WP Briefing, Developer Hours, or Online Workshops – take a look at the set of templates displayed on the intro page and decide which you’d like to use.
Each of the general templates has four color palette variants: Pomegranate gradient, Light gradient, Blue, and Dark blue. You can apply your desired color variation while editing the template. Consider where your video will be submitted and select a template that makes the index page more dynamic in terms of color and text content. Also keep in mind that not all videos need to have the title included in the thumbnail.
If the template you edited looks correct, select it and click the “Export” button in the design panel on the right.
You can export several templates at once by selecting each, while keeping the shift key (⇧) pressed, and then clicking the “Export” button in the design panel on the right.
You must be logged in to post a comment.