How to Use the Drag-and-Drop Certificates Designer in OSCampus Pro

The OSCampus extension has a powerful drag-and-drop designer for certificates. You can create as many certificates as you need, and then assign them to different classes.

Creating a custom certificate using the drag-and-drop designer in OSCampus Pro is a four step process:

  1. Check the data for your custom certificate.
  2. Create a custom image for your custom certificate.
  3. Create a custom certificate.
  4. Assign the new custom certificate to a class.

Step #1. Check the data for your certificate

Your OSCampus certificate can include the following data fields:

  • Student: the name of the student the certificate is awarded to. 
  • Class/Lesson: the title of the class completed by the student. 
  • Default Provider: the URL of your Joomla website. 
  • Teacher: the teacher of the class completed by the student. 
  • Date Completed: the date when the student completed the class. 
  • Custom Text: any custom text you see fit to add to your custom certificate. 

the data fields


Step #2. Create a custom image for your custom certificate

You can create a custom image for your custom certificate in two ways:

  • From scratch, with a graphic design editor of your choice
  • Using an already created template image.

Feel free to use any of these two methods. For the purpose of this tutorial, we assume that you don't have graphic design skills. You decided to use one of the templates provided for free at canva.com:

certificate templates from canva com

Here is a certificate image template I selected in canva.com:

the image template i selected

As you can see, this template already contains placeholders for nearly all fields I determined to include in my custom certificates. In particular, it contains the following fields:

  • The student's name
  • The class title
  • The name of the teacher
  • The date of the class completion.

The only missing placeholder in my selected template image is for the "Default Provider" data field. I need to create it. Here is the same template with this missing data placeholder created:

the image selected with the course provider placeholder

  • Once finished, in your Joomla site, go to "Content" > "Media" and upload your custom certificate image to your site.

Excellent! At this point, we have the custom image with all the data placeholders for the required data fields.

Now would be a good time to move to the OSCampus drag-an-drop certificate designer. You are ready to drag-and-drop data items on this custom image to create a custom certificate.


Step #3. Create a custom certificate

  • In your Joomla administrator panel, go to "Content" > "Media" and upload your custom certificate image to your site.
  • Go to "Components" > "OSCampus Pro".
  • This will bring you to the "OSCampus Pro: Classes" screen. In the left menu, click "Certificates":

click certificates

  • You will see the "OSCampus Pro: Certificates" screen. In the top left corner, click "New":
  • This will bring you to the "OSCampus Pro: Create Certificate" screen, as you can see in the next image. Enter a title in the "Title" field.
  • Click the "Select" button:

enter title and click select button

  • Select your new custom certificate image that you uploaded to your Joomla site in Step #2. Click the "Insert" button:

insert the custom certificate image

  • You will see that your custom certificate image has replaced the default certificate image:

the custom image replaced the default image

Good job. Now will be a perfect time to drag and drop the certificate data fields onto the image.

  • Point your mouse to the little cross icon of the "Student" data field:

point your mouse to the cross icon of the student data field

  • Left-click your mouse and drag the "Student" data field to the certificate image near its data placeholder:

drop the student field onto the image

  • Click the "Preview" button to preview your certificate with the "Student" data:

click the preview button

  • You will see the "Certificate Preview" modal box displaying student's data on your custom certificate:

the student data on the custom certificate

  • Repeat this step with the rest of the fields, except for the "Custom Text".

Note: enter required custom text in the "Custom Text" data field before dropping it to your custom certificate image:

enter text in the custom text field before dragging it

  • Click the "Preview" button. If necessary, adjust the positions of your data fields on your custom certificate image. Once you are happy with the certificate preview, click "Save" or "Save & Close".

Step #4. Assign the custom certificate to a class

You can assign your newly created custom certificate to any number of your OSCampus classes.

  • Open up your required class for editing and set the "Certificate" parameter to your new custom certificate:

set the custom certificate for your class

  • Click "Save" or "Save & Close".

When your student will finish this class and go to the "My Certificate" front end page, your custom certificate will be available for download:

certificate for the course