Fügen Sie Ihrer Beschreibung auf Learn365-Schulungs-Landingpages per benutzerdefiniertem Code Branding hinzu

Der Texteditor in Learn365 gibt Ihnen die Freiheit, Inhalte für Lernende mit einer Vielzahl von Optionen zu gestalten und zu formatieren.

Durch die Formatierung der Langen Beschreibung von Kursen und Schulungen ermöglicht der Editor, einzigartige, markenkonforme Beschreibungen auf Ihren Kurs- und Schulungsplan-Landingpages zu erstellen. Dies kann entweder über die Formatierungsoptionen des Editors oder durch das direkte Anwenden von benutzerdefiniertem Code über die Option Source Code erfolgen.

In diesem Artikel zeigen wir Ihnen ein Beispiel für eine individuell gebrandete Beschreibung auf einer Landingpage, die mit benutzerdefiniertem Code über die Option Quellcode erstellt wurde. Wir stellen Ihnen außerdem den Quellcode zur Verfügung, den Sie verwenden oder anpassen können, um Ihre Kurs-Landingpages auf die Weiter-Stufe zu heben.

Beispiel für eine Kursbeschreibung mit Branding und wie dies umgesetzt wird

Im folgenden Beispiel haben wir über die Long Description des Kurses Branding zur Kurs-Landingpage hinzugefügt. Wir haben dem Bereich eine benutzerdefinierte Hintergrundfarbe hinzugefügt, eine Kopfzeile mit Logo und Titel, einen Absatz, ein Bild und am Ende ein Textfeld sowie ein Symbol.

Folgen Sie diesen Schritten, um zu sehen, wie es funktioniert:

Schritt #1

Öffnen oder erstellen Sie einen Kurs und navigieren Sie zur Langen Beschreibung auf der Seite Grundlegende Details im Kurs-Konfigurationsbereich.

Wählen Sie die drei Punkte aus, um das erweiterte Panel zu öffnen, und wählen Sie Vollbild für eine bessere Übersicht.

Schritt #2

Wählen Sie das Quellcode-Symbol aus, um den Quellcode-Editor zu öffnen.

Schritt #3

Im Bereich Source Code können Sie den Inhalt direkt im HTML-Code bearbeiten und außerdem benutzerdefinierte Stile mit dem Tag <style></style> anwenden.

Schritt #4

Der in unserem Beispiel verwendete Code ist hier aufgeführt, getrennt in zwei Code-Snippets*.

1. Style: Hier werden die benutzerdefinierten Stile definiert.
2. HTML: Dies ist der Inhalt.  

Um das Styling aus unserem Beispiel auf eine Ihrer Kurs- oder Schulungs-Landingpages anzuwenden, kopieren Sie den Code und fügen Sie ihn im Quellcode des Felds Lange Beschreibung ein. Sie können den Inhalt, das Logo und die Bilder an Ihren Kurs oder Tarif anpassen.

Sie können das Beispiel auch als Inspiration nutzen, um Ihre eigenen, gebrandeten Kurs- und Tarif-Beschreibungen zu erstellen.

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;
}
.Titel {
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">Seitentitel</div>
</div>
<hr class="new">
<div class="content">
<p><b>Hier können Sie den Kurs beschreiben.</b><br><br>Wir empfehlen Ihnen, zu skizzieren, was Lernende nach Abschluss des Kurses können werden, indem Sie die Lernziele des Kurses beschreiben.</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>Viel Spaß beim Erstellen Ihres Kurses!</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>

Sie können die Code-Snippets gerne ausprobieren, um sich mit dieser Möglichkeit, Branding zu Ihren Kursen hinzuzufügen, vertraut zu machen.

*Die hier bereitgestellte Code-Vorlage wird Ihnen zu Ihrem Komfort und als Referenz angeboten. Bitte beachten Sie Folgendes: 1. **Keine Gewährleistung**: Für den bereitgestellten Code übernehmen wir keinerlei ausdrückliche oder stillschweigende Gewährleistung. Es liegt in Ihrer Verantwortung, die Eignung und Funktionalität des Codes in Ihrer spezifischen Umgebung zu bewerten. 2. **Kein Support**: Wir bieten keinen technischen Support für den Code oder dessen Integration an. Sie sind allein verantwortlich für alle Änderungen oder Anpassungen. 3. **Verwendung auf eigene Gefahr**: Der Code wird "wie besehen" bereitgestellt. Wir übernehmen keine Verantwortung für negative Auswirkungen oder andere Probleme, die sich aus der Verwendung ergeben können. Sie erkennen an, dass Sie diesen Code auf eigenes Risiko verwenden. 4. **Kompatibilität nicht garantiert**: Wir können nicht garantieren, dass der Code mit Ihren bestehenden Systemen, Software oder Hardware kompatibel ist. Die Kompatibilitätstests liegen in Ihrer Verantwortung. 5. **Sicherheit und Compliance**: Sie sind dafür verantwortlich, sicherzustellen, dass der Code etwaigen Sicherheits-, Datenschutz- oder gesetzlichen Anforderungen Ihrer Organisation entspricht. 6. **Keine Haftung**: Wir haften nicht für direkte, indirekte, besondere, zufällige oder Folgeschäden oder -verluste, die sich aus der Nutzung oder Unfähigkeit zur Nutzung der Code-Vorlage ergeben. Durch die Nutzung dieser Code-Vorlage erkennen Sie diese Bedingungen an und stimmen ihnen zu. Wenn Sie Zweifel oder Bedenken hinsichtlich der Funktionalität des Codes haben, empfehlen wir die Beratung durch einen qualifizierten Fachmann. Bitte denken Sie daran, den Code zu überprüfen, zu testen und auf Ihre spezifischen Anforderungen anzupassen und sicherzustellen, dass er Ihren Qualitäts- und Sicherheitsstandards entspricht. Vielen Dank für Ihr Verständnis und Ihre Zusammenarbeit.