With Simplylearn you can create custom course certificates. These certificates can be assigned to a course or a test. This article will walk you through the certificate creation process.
With every Simplylearn subscription, you get access to a standard Simplylearn certificate.
But you can also create a certificate designed to match the design of your site/business.
How to create a custom certificate
- Navigate first to SIMPLYLEARN > Certificates
- Click the "Add new" button.
You’ll be directed to a new screen where you can start creating your certificate. Here’s an overview of each type of information that can be added to your certificate.
- Title: The certificate title is only for internal use. Create a title that helps the administrator understand which certificate this represents.
- Featured image. Adding a featured image is the way in which you apply a design, or style, to your certificate. You must use .jpg images, no more than 1MB in size. Think of the featured image as the background of the certificate. Below is an example of the featured image Simplylearn uses for a standard course certificate. We can help you create a custom certificate for a fixed price, contact us here.
- Content. Your certificate content will mostly consist of dynamic fields that are generated for each individual user who is awarded a certificate. This dynamic fields will represent the user's name, the course title, date of completion, etc. These types of fields are inserted via shortcodes.
The shortcodes that are used most frequently are:
- [usermeta field="first_name"] – Displays a user’s first name
- [usermeta field="last_name"] – Displays a user’s last name
- [courseinfo show="course_title"] – Displays the course title
- courseinfo show="completed_on"] – Displays the date the course was completed
The following sections are advanced. We would not recommend you to perform these adjustments if you don't have any experience with HTML. You can hire one of our consultants to do this.
You might want to insert the course title at the top of a certificate, the user’s name in the middle, maybe at a completion date at the bottom, etc. One of the best ways to control vertical spacing, and move content up or down on your certificate, is to use the line-height property.
Wherever you need to insert some blank vertical space, you can use the following code:
Horizontal Spacing (Indentation)
There are a few ways to go about horizontal spacing.
If you need to center your text in the middle of the certificate, you can use text-align:center;. Here’s an example of the user’s first name, centered horizontally:
<p style="text-align:center;">[usermeta field="first_name"]</p>
By default, all text will be aligned to the left edge of the certificate (right edge for RTL languages). If you need to indent something, you can use the text-indent property. Here’s an example of the course completion date being pushed vertically towards the bottom of the page, then indented to move it to the far-right corner.
<p style="text-indent:200px;">[courseinfo show="completed_on" format="F j, Y"]</p>
You’ll need to adjust the 150px and 200px values to match up with your certificate image.
You can also adjust the font size of any text. Let’s say you wanted your user’s first & last name to be quite large (30px), then a small vertical space (10px), and then the course title not quite as large as the name (20px), you could do this:
<p style="font-size:30px;">[usermeta field="first_name"] [usermeta field="last_name"]</p>
<p style="font-size:20px;">[courseinfo show="course_title"]</p>
Different computers come pre-installed with different fonts. Some users will have a font installed, and others might not. So there isn’t a ton of flexibility with using custom fonts in certificate creation. However, you can switch between serif and sans-serif fonts, as both should work for most of your users. Here’s an example using a generic serif font:
You can adjust the color of any text on your certificate. If your image has a dark background, you can use the color property to make your text white.
You can combine multiple properties at the same time. If you wanted to indent the user’s first & last name, adjust the font size, and change the color to red, it would look like this:
<p style="text-indent:20px;font-size:30px;color:red;">[usermeta field="first_name"] [usermeta field="last_name"]</p>
There are a few additional options you can set for your certificate.