Add branding to your description on training landing pages via custom code

The text editor in Learn365 gives you the freedom to style and format learner-facing content using a wide array of options.

By formatting the Long Description of courses and training plans, the editor allows you to create unique, branded descriptions on you landing pages for courses and training plans. This can be done by either using the formatting options of the editor or by applying custom code directly via the Source Code option.

 

 

In this article, we'll show you an example of a custom branded description on a landing page that is created with custom code applied via the Source Code option. We'll also provide you with the source code behind this for you to use or adjust to take your course landing pages to the next level.

 

Example of a branded course description and how it's done

In the following example, we've applied branding to the course landing page via the Long Description of the course. We've added a custom background color to the area, a header with a logo and title, a paragraph, an image and at the end, a text field, and an icon.

 

 

Follow these steps to see how it's done:

 

Step #1

Open or create a course and navigate to the Long Description on the Basic details page of the course configuration panel.

Select the three dots to open the extended panel and select Fullscreen to get a better overview.

 

 

Step #2

Select the Source code icon to open the source code editor.

 

 

Step #3

In the Source Code panel, you can edit the content directly in the HTML code and also apply custom styles using the <style></style> tag.

 

 

Step #4

The code used in our example is listed here, separated into two code snippets*.

1. Style: This is where the custom styles are defined.
2. HTML: This is the content.  

To apply the styling from our example to one of your course or training landing pages, copy the code and insert it in the Source code of the Long Description field. You can edit the content, logo, and images to suit your course or training plan.

You can also use the example as inspiration to create your own branded course and training plan descriptions.

 

Style

<style>
.description-content {
font-family: Arial, sans-serif;
background-color: #FEE9DD;
margin: 0;
padding: 0;
max-width: 40rem;
line-height: normal;
}
.topbar {
color: #000;
text-align: left;
padding: 20px;
}
.logo {
width: 75px;
height: 75px; 
vertical-align: middle;
}
.title {
display: inline-block;
margin-left: 10px;
font-size: 28px;
font-weight: bolder;
vertical-align: middle;
}
.content {
text-align: left;
padding: 20px;
}
.content p {
font-size: 18px;
margin: 20px 0;
}
.content img {
max-width: 100%;
height: auto;
border-radius: 20px;
}
.endQuote {
text-align: center;
padding: 20px;
}
.endQuote p {
font-size: 22px;
font-weight: bolder;
margin: 20px 0;
}
.endQuote img {
max-width: 70px;
}
hr.new {
border-top: 1px dashed white;
}
</style>

 

HTML

<div class="description-content">
<div class="topbar"><img class="logo" src="https://lms365.com/wp-content/uploads/2022/12/cropped-lms365-favicon-180x180.webp" alt="Logo">
<div class="title">Page Title</div>
</div>
<hr class="new">
<div class="content">
<p><b>This is where you can describe the course.</b><br><br>We recommend that you outline what the learner will be able to do after completing the course by describing the learning goals for the course.</p>
<img src="https://assets-usa.mkt.dynamics.com/9c949386-c0e0-4279-9d35-d0027dc8c8f2/digitalassets/images/17645e26-3c73-ee11-9ae7-000d3a98501d?ts=638338380797926295" alt="Image"></div>
<div class="endQuote">
<p>Happy course building!</p>
<img src="https://assets-usa.mkt.dynamics.com/9c949386-c0e0-4279-9d35-d0027dc8c8f2/digitalassets/images/8fcf2ab0-3273-ee11-9ae7-000d3a99892e?ts=638338340141222402" alt="Thumbs up icon"></div>
</div>

 

Feel free to use the code snippets to play around and get familiar with this way of adding branding to you courses.

 

 

 

 

*The code template provided here is offered for your convenience and reference. Please be aware of the following: 1. **No Warranty**: We do not provide any warranties, whether express or implied, for the code provided. It is your responsibility to assess the suitability and functionality of the code in your specific environment. 2. **No Support**: We do not offer technical support for the code or its integration. You are solely responsible for any modifications or customizations. 3. **Use at Your Own Risk**: The code is provided "as-is." We are not responsible for any adverse effects or other issues that may result from its use. You acknowledge that you use this code at your own risk. 4. Not Guaranteed for Compatibility**: We cannot guarantee that the code will be compatible with your existing systems, software, or hardware. Compatibility testing is your responsibility. 5. **Security and Compliance**: You are responsible for ensuring that the code complies with any security, privacy, or legal requirements applicable to your organization. 6. **No Liability**: We are not liable for any direct, indirect, special, incidental, or consequential damages or losses arising from the use or inability to use the code template. By using this code template, you acknowledge and agree to these terms. If you have any doubts or concerns about the code's functionality, we recommend consulting with a qualified professional. Please remember to review, test, and adapt the code to your specific requirements and ensure it meets your quality and security standards. Thank you for your understanding and co-operation.