introduce:
Your learning platform is an extension of your brand, and it should look and feel like it. With Adobe Learning Manager, footer customization goes beyond basic links to give administrators full creative control, just like modern website footers.
From simple connections to full creative freedom
Previously, the learner interface footer in Adobe Learning Manager was limited to adding a small set of clickable links, usually up to four. While this approach is useful, it doesn’t fully support organizations looking for richer, more on-brand experiences.
Basic footer
Learner view:
Admin view:
Log in as administrator > Settings > General > Footer Links
Today, things have changed.
Administrators can now design a fully customizable footer using their own HTML and CSS, allowing for a layout and design that closely resembles a corporate website footer.
Learner view:
Admin view:
Log in as administrator > Brand > Footer Customization > Enable
how it works
As an administrator, you can enable footer customization from Brand → General Settings. Once enabled, you can directly add your own HTML and CSS to design your footer exactly the way you want.
The built-in preview option lets you review your footer before publishing to ensure it matches your design expectations.
Once saved, the custom footer is immediately visible to all learners.
HTML examples to try:
/* ===== Cool glass footer ===== */
.cool-footer {
Position: relative;
Background: linear gradient (135deg, #0b1c24, #122a36, #183d4a);
Color: #ffffff;
Padding: 70px 30px 25px;
overflow:hide;
Font family: “Inter”, “Segoe UI”, system-ui, sans-serif;
}
/* ambient light */
.footer-glow {
position: absolute;
Top: -45%;
Left: 50%;
Transformation: translateX(-50%);
Width: 700px;
height: 700 pixels;
Background: Radial Gradient (
circle,
RGBA(0, 245, 255, 0.28),
RGBA(0, 245, 255, 0.08),
70% transparent
);
Filter: blur(90px);
PointerEvents: None;
z index: 0;
}
/* glass container*/
.footer content{
Position: relative;
z index: 1;
Maximum width: 1300px;
Margin: automatic;
display:grid;
gridtemplatecolumn:repeat(autosize,minmax(200px,1fr));
gap:45px;
Padding: 45px;
Border radius: 22px;
Background: rgba(255, 255, 255, 0.08);
background-filter:blur(16px);
-webkit-backdrop-filter: blur(16px);
Border: 1px solid rgba(255, 255, 255, 0.12);
Box shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}
/* Footer of page*/
.footer-section h3 {
Bottom margin: 14px;
Font size: 17px;
Font weight: 600;
Letter spacing: 0.4px;
}
.footer-section p {
Font size: 14px;
row height: 1.7;
Opacity: 0.85;
}
/* list*/
.footer-section ul {
List style: none;
padding: 0;
Margin: 0;
}
.footer-section ul li {
bottom margin: 9px;
}
.footer-section ul li a {
Color: #ffffff;
Text decoration: none;
Font size: 14px;
Opacity: 0.78;
Transitions: All 0.25s ease;
}
.footer-section ul li a:hover {
Opacity: 1;
Color: #00f5ff;
Transform: translateX(6px);
}
/* Community icon */
.socials {
display: inlineflexible;
alignitem:center;
Adjust content: center;
Width: 42px;
height: 42 pixels;
Right margin: 10px;
border radius: 50%;
Background: rgba(255, 255, 255, 0.14);
Color: #ffffff;
Text decoration: none;
Font size: 18px;
Transitions: All 0.3s ease;
}
.socials a:hover {
Background: linear gradient (135deg, #00f5ff, #6cf6ff);
Color: #001318;
Transform: translateY(-5px) scale(1.05);
}
/* Bottom of footer*/
.footer-bottom{
Position: relative;
z index: 1;
Text alignment: centered;
Top margin: 28px;
Font size: 13px;
Opacity: 0.65;
}
/* responsive*/
@media(max-width:768px){
.footer content{
padding: 35px 25px;
gap:35px;
}
}
@media(max-width:480px){
.footer content {
Grid template column: 1fr;
Padding: 30px 20px;
}
.socials {
Bottom margin: 8px;
}
}
One kick, endless possibilities
With enhanced footer customization capabilities in Adobe Learning Manager, organizations are no longer limited by predefined layouts. You have the freedom to build a footer that suits your business – visually, functionally, or strategically.
If your goal is a learning platform that truly looks like yours, footer customization is a powerful place to start.
