אחד האתגרים הראשונים שהיינו צריכים לפתור עבור הארגון היה כל הנושא של פרוטוקולי "קרא וחתום" – אותם נהלים שעובדים מחוייבים לקרוא ולהעיד שהם עברו עליהם.
במערכת הלמידה הישנה שלהם, התהליך היה הכי בסיסי שיש: מעלים מסמך PDF או Word, העובדים מסתכלים עליו וחותמים. אבל עם המעבר ל-Docebo, הארגון דרש סטנדרט אחר. היה להם חשוב שהכל ידבר באותה שפה, שהכל יהיה ממותג ומדויק יותר.
והאמת היא שממש הבנתי אותם. להעלות סתם מסמך PDF לא באמת משדר חוויה של מערכת למידה – זה מרגיש יותר כמו תשתית לניהול ידע.
זכרתי איך בעבר, בפלייטיקה, פתרנו דברים דומים עם Articulate Rise. התוצאה הייתה יפה, אבל כל תיקון קטן של שגיאת כתיב חייב אותנו לייצא ולהעלות את התוכן מחדש. וכשעבדנו על חלק מהתכנים עם ספק חיצוני, זה בכלל הפך למורכב וייצר עלויות נוספות על כל שינוי.
הפעם, ניסיתי למצוא פתרון שיהיה הרבה יותר נכון ואורגני למערכת. ככה נחשפתי לאפשרות של עיצוב CSS עבור HTML Training Material.
מדובר בכלי רב עוצמה. כשמשתמשים בו נכון, הוא מייצר נראות אחידה לכל התוכן במערכת ויכול לקצץ עבודה של ימים לכמה דקות. תוסיפו לזה שילוב של AI שמייצר את קוד ה-HTML עצמו, והדבר הזה הופך למפלצת של יצירת תוכן.
אז אמנם למסמכי ה"קרא וחתום" יצרנו משהו מאוד מינימלי ונקי, אבל מיד הבנתי שאפשר לקחת את זה לשלב הבא (וזה מה שאני חולק איתכם היום). בעצם, אפשר לייצר עמוד אינטראקטיבי, מעוצב היטב ומותאם לחלוטין למובייל, שעם מעט התאמות יכול להחליף לחלוטין קובץ Rise.
נקודה שחשוב להכיר כאדמינים: הדיווח והתיעוד בשיטה הזו הם בסיסיים יותר. ברגע שהעובד נכנס לעמוד ה-HTML, המערכת מסמנת לו השלמה (Complete). אבל היתרונות של התחזוקה והעיצוב הם כל כך גדולים, שאם אתם חייבים לוודא שהתבצע תהליך למידה אמיתי – פשוט תוסיפו מבחן קצר (Quiz) מיד אחרי העמוד.
ואם כבר מדברים על מורכבות, צריך לשים את הדברים על השולחן: ה-HTML לא נועד להחליף את הכל. כשמדובר בפיתוח מורכב יותר, עם אינטראקציות מתקדמות, תרחישים או מעקב (Tracking) ברזולוציה גבוהה על כל קליק של הלומד, שם נכנס לתמונה Docebo Create. הארכיטקטורה הנכונה היא לדעת מתי להשתמש במה: תבניות HTML מהירות וממותגות לנהלים, עדכונים, ו"קרא וחתום", ו-Docebo Create עבור לומדות העומק.
הפוטנציאל פה הוא אדיר. אני שקלתי להעביר את תבניות ה-HTML האלו ישירות למומחי התוכן (SMEs) בארגון כדי שיוכלו לייצר תוכן מעוצב במהירות ובעצמאות, ואני מניח שבימים אלו זה בדיוק מה שהם עושים במובילאיי.
הכנתי גם סרטון קצר שמדגים בדיוק איך עושים את זה צעד אחר צעד במערכת:
ארגז הכלים
הנה התבניות והפרומפט שאני משתמש בהם כדי לייצר את הדפים האלה. תרגישו חופשי להעתיק אותם ישירות ולהשתמש בהם.
1. תבנית עמוד מותאם ל-Docebo (קובץ HTML)
<!-- ============================================================
DOCEBO CUSTOM PAGE TEMPLATE
This entire block goes inside the Docebo page HTML editor.
Everything between <!-- and --> is a comment — Docebo will
ignore it completely. It is only here to guide you.
============================================================ -->
<div class="dcbo-custom-page">
<!-- ────────────────────────────────────────────────────────────
HERO HEADER
This is the main page header.
Replace [Main Title Here] with your page title.
Replace [Extra text here] with a short subtitle or
one-line description of what this page is about.
──────────────────────────────────────────────────────────── -->
<div class="dcbo-hero">
<h1>[Main Title Here]</h1>
<p>[Extra text here]</p>
</div>
<!-- ────────────────────────────────────────────────────────────
INFO BOX ("What's in it for me?")
This is a highlighted text box. Use it to list what
learners will gain from this page/lesson.
You can COPY this entire <div class="dcbo-wiifm">
block and paste it again below if you need a second
info box.
- Replace [Box Title Here] with a title like
"What you will learn".
- Each <li> is one bullet point. Add or remove <li>
lines to change the number of items.
──────────────────────────────────────────────────────────── -->
<div class="dcbo-wiifm">
<h3>[Box Title Here]</h3>
<ul>
<li>[Object 1 text]</li>
<li>[Object 2 text]</li>
<li>[Object 3 text]</li>
<!-- To add another bullet, copy one <li> line above
and paste it here, then change the text. -->
</ul>
</div>
<!-- ────────────────────────────────────────────────────────────
VIDEO SECTION
This embeds a YouTube video directly on the page.
BEFORE THIS WORKS you must allow iframes in Docebo:
Admin > Pages > Settings > turn on "Allow iframes".
How to get the YouTube video ID:
Open the video on YouTube. The URL looks like:
https://www.youtube.com/watch?v=dQw4w9WgXcQ
The ID is the part after "v=" → dQw4w9WgXcQ
Paste that ID in place of [PUT_YOUTUBE_ID_HERE].
── To add a SECOND video ──────────────────────────
Copy everything from the line that says
<h2>[Video Section Title]</h2>
all the way down to the CLOSING comment below
that says "END OF VIDEO BLOCK"
and paste it again right after that comment.
──────────────────────────────────────────────────────────── -->
<h2>[Video Section Title]</h2>
<div class="dcbo-video-wrapper">
<div class="dcbo-video-container">
<iframe
src="https://www.youtube.com/embed/[PUT_YOUTUBE_ID_HERE]"
title="YouTube video player"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
<!-- END OF VIDEO BLOCK — duplicate from <h2> above to here
if you want to add another video. -->
<div class="dcbo-content">
<!-- ────────────────────────────────────────────────────────────
INTERACTIVE CARDS (flip/hover cards)
These are clickable tiles arranged in a grid.
When a learner hovers over a card, the hidden
text is revealed behind the title.
- Replace [Cube N Title] with a short label
(shown all the time).
- Replace [Hidden text for Cube N] with the text
that appears on hover.
To add more cards, copy one entire
<div class="dcbo-card"> … </div> block and
paste it before the closing </div> of the grid.
──────────────────────────────────────────────────────────── -->
<div class="dcbo-grid">
<div class="dcbo-card">
<h4>[Cube 1 Title]</h4>
<p>[Hidden text for Cube 1]</p>
</div>
<div class="dcbo-card">
<h4>[Cube 2 Title]</h4>
<p>[Hidden text for Cube 2]</p>
</div>
<div class="dcbo-card">
<h4>[Cube 3 Title]</h4>
<p>[Hidden text for Cube 3]</p>
</div>
<div class="dcbo-card">
<h4>[Cube 4 Title]</h4>
<p>[Hidden text for Cube 4]</p>
</div>
<!-- Paste additional dcbo-card blocks here -->
</div>
<!-- ────────────────────────────────────────────────────────────
CALLOUT / HIGHLIGHT BOX
Use this to draw attention to one key idea,
a tip, a warning, or an important fact.
Replace [Highlight Title] and [Highlight Text].
The word "dcbo-info" gives it a blue/info style.
You can change it to dcbo-warning or dcbo-success
if those styles exist in your CSS.
──────────────────────────────────────────────────────────── -->
<blockquote class="dcbo-callout dcbo-info">
<strong>[Highlight Title]:</strong> [Highlight Text]
</blockquote>
<!-- ────────────────────────────────────────────────────────────
COMPARISON TABLE
Use this to compare two (or more) things side
by side — for example two tools, two approaches,
or two time periods.
Structure:
• <thead> holds the header row (column titles).
• <tbody> holds all the data rows.
To add a new COLUMN:
In <thead>, add another <th>[Column Name]</th>
In every <tr> inside <tbody>, add another
<td>[value]</td> in the same position.
To add a new ROW:
Copy one <tr>…</tr> block inside <tbody>
and paste it below, then change the text.
──────────────────────────────────────────────────────────── -->
<h2>[Table Title]</h2>
<div class="dcbo-table-wrapper">
<table class="dcbo-compare">
<thead>
<tr>
<th>[Column 1]</th>
<th>[Column 2]</th>
<!-- Add more <th> here for extra columns -->
</tr>
</thead>
<tbody>
<tr>
<td>[Row 1 - Column 1]</td>
<td>[Row 1 - Column 2]</td>
</tr>
<tr>
<td>[Row 2 - Column 1]</td>
<td>[Row 2 - Column 2]</td>
</tr>
<!-- Copy a <tr>…</tr> block above to add more rows -->
</tbody>
</table>
</div>
<!-- ────────────────────────────────────────────────────────────
LESSON SUMMARY
This is the closing section of the page.
Use it to recap the main takeaways.
- Replace [Summary Title] (e.g. "Key Takeaways").
- Replace [Summary explanation text] with one or
two wrap-up sentences.
- Each <li> is one key point. The <strong> tag
makes the label bold.
Add or remove <li> lines as needed.
──────────────────────────────────────────────────────────── -->
<div class="dcbo-summary">
<h2>[Summary Title]</h2>
<p>[Summary explanation text]</p>
<ul>
<li><strong>[Key Point 1]:</strong> [Text]</li>
<li><strong>[Key Point 2]:</strong> [Text]</li>
<!-- Add more <li> lines here for extra key points -->
</ul>
</div>
</div><!-- end dcbo-content -->
</div><!-- end dcbo-custom-page -->
2. קוד ה-CSS הגלובלי (Docebo Bulletproof CSS)
/* =========================================
Docebo BULLETPROOF CSS v3.2
(Full Layout + Neon Video Glow)
========================================= */
.dcbo-custom-page {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #333333;
line-height: 1.6;
max-width: 900px;
margin: 0 auto;
padding: 20px;
direction: ltr;
}
/* Hero Section */
.dcbo-hero {
background-color: #0056D2;
color: #ffffff;
padding: 40px 30px;
border-radius: 12px;
text-align: center;
margin-bottom: 25px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.dcbo-hero h1 {
margin: 0 0 10px 0;
font-size: 32px;
color: #ffffff;
font-weight: bold;
}
.dcbo-hero p { margin: 0; font-size: 18px; opacity: 0.9; }
/* WIIFM Section */
.dcbo-wiifm {
background-color: #F8FAFC;
border: 1px solid #E2E8F0;
border-radius: 8px;
padding: 20px 25px;
margin-bottom: 40px;
}
.dcbo-wiifm h3 { color: #0056D2; margin-top: 0; font-size: 18px; margin-bottom: 12px; }
.dcbo-wiifm ul { list-style: none; padding: 0; margin: 0; }
.dcbo-wiifm li { padding-left: 28px; position: relative; margin-bottom: 10px; font-size: 15px; }
.dcbo-wiifm li::before { content: "🎯"; position: absolute; left: 0; top: 0; }
/* --- NEON VIDEO CONTAINER --- */
.dcbo-video-wrapper {
margin: 40px 0;
text-align: center;
}
.dcbo-video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 Ratio */
height: 0;
overflow: hidden;
border-radius: 15px;
border: 3px solid #0056D2;
box-shadow: 0 0 20px rgba(0, 86, 210, 0.7),
0 0 40px rgba(0, 86, 210, 0.3),
inset 0 0 15px rgba(0, 86, 210, 0.4);
background: #000;
}
.dcbo-video-container iframe {
position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;
}
/* Headings */
.dcbo-custom-page h2 {
color: #0056D2;
border-bottom: 2px solid #EBF3FF;
padding-bottom: 10px;
margin-top: 40px;
font-size: 24px;
}
/* 2x2 Grid Layout */
.dcbo-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin: 30px 0;
}
.dcbo-card {
background-color: #FFFFFF;
border: 1px solid #E0E0E0;
border-radius: 8px;
padding: 25px;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
transition: all 0.3s ease;
min-height: 140px;
}
.dcbo-card h4 { color: #0056D2; margin: 0; font-size: 19px; transition: transform 0.4s ease; }
.dcbo-card p { opacity: 0; max-height: 0; visibility: hidden; transition: all 0.5s ease; margin: 0; }
.dcbo-card:hover { background-color: #FAFCFF; box-shadow: 0 6px 15px rgba(0,0,0,0.08); }
.dcbo-card:hover h4 { transform: translateY(-5px); }
.dcbo-card:hover p { opacity: 1; visibility: visible; max-height: 300px; margin-top: 10px; }
/* Table */
.dcbo-table-wrapper { overflow-x: auto; margin: 30px 0; border-radius: 8px; border: 1px solid #E0E0E0; }
.dcbo-compare { width: 100%; border-collapse: collapse; text-align: left; background: #ffffff; }
.dcbo-compare th, .dcbo-compare td { padding: 16px; border-bottom: 1px solid #E0E0E0; }
.dcbo-compare th { background-color: #EBF3FF; color: #0056D2; font-weight: bold; }
/* Callouts */
.dcbo-callout { padding: 20px; border-left: 5px solid; border-radius: 8px; margin: 25px 0; }
.dcbo-info { background-color: #E8F4FD; border-color: #2196F3; }
/* Summary */
.dcbo-summary { background-color: #0056D2; color: #ffffff; border-radius: 12px; padding: 30px; margin-top: 50px; }
.dcbo-summary h2 { color: #ffffff; border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 15px; margin-top: 0; }
.dcbo-summary ul { list-style: none; padding: 0; margin: 20px 0 0 0; }
.dcbo-summary li { position: relative; padding-left: 35px; margin-bottom: 15px; }
.dcbo-summary li::before { content: "✅"; position: absolute; left: 0; top: 0; }
@media screen and (max-width: 768px) {
.dcbo-grid { grid-template-columns: 1fr; }
}
3. הפרומפט ליצירת התוכן
**Role & Context**
You are an Expert Instructional Designer and Docebo LMS Specialist. Your goal is to transform raw content (YouTube videos, text, PDFs, or Word documents) into a highly engaging, methodologically sound, and visually structured e-learning unit.
**The Task**
I will provide you with raw content and an HTML template designed specifically for Docebo. You must analyze the content, extract the key learning objectives, and structure a micro-learning unit using ONLY the provided HTML template.
**Instructional Design Methodology**
When analyzing the content and writing the copy, follow these principles:
1. **Hook & Relevance:** Start with a compelling title and a clear "What's In It For Me?" (WIIFM) section so learners know exactly what they will gain.
2. **Cognitive Load Theory:** Chunk the information logically. Avoid walls of text. Use concise bullet points, tables for comparison, and interactive cards for digestible concepts.
3. **Active Learning:** Structure the content to encourage reflection. If applicable, highlight key takeaways, surprising facts, or crucial warnings using callout boxes.
4. **Clear Synthesis:** Always end with a strong summary that recaps the core concepts.
**HTML Implementation Rules (Strict)**
You must use the provided Docebo Custom Page HTML template. DO NOT invent new CSS classes or break the HTML structure. You may duplicate existing blocks (like cards, table rows, or list items) as needed.
* `<div class="dcbo-hero">`: Use for the main title and a one-sentence engaging subtitle.
* `<div class="dcbo-wiifm">`: Use to list 3-5 clear learning objectives or benefits.
* `<h2>` and `<div class="dcbo-video-wrapper">`: Use if a video link is provided or if video embedding is relevant. (Extract the YouTube ID correctly).
* `<div class="dcbo-grid">` & `<div class="dcbo-card">`: Use these flip/hover cards for terminology, steps in a process, or distinct concepts. Ensure the title is short and the hidden text is explanatory.
* `<blockquote class="dcbo-callout dcbo-info">`: Use for a "Pro Tip", "Did you know?", or an important emphasis.
* `<table class="dcbo-compare">`: Use if the content contains comparisons, pros/cons, or structured data categories.
* `<div class="dcbo-summary">`: Use for the final recap.
* **Language & Formatting:** Write the content in English. DO NOT use emojis anywhere in the generated output.
**Input Workflow**
1. I will provide the raw content.
2. (Optional) I will provide the Docebo HTML template (if you don't already have it in context).
3. You will output ONLY the final HTML code, fully populated with the instructional content, ready to be copy-pasted into the Docebo HTML editor.
**Are you ready? Please confirm you understand these instructions, and I will provide the first piece of content.**