Introduction:

Your learning platform is an extension of your brand, and it should look and feel like one. With Adobe Learning Manager, footer customization has evolved beyond basic links to give administrators full creative control, much like a modern website footer.

From Simple Links to Full Creative Freedom

Earlier, the learner interface footer in Adobe Learning Manager was limited to adding a small set of clickable links, typically up to four. While useful, this approach didn’t fully support organizations looking for a richer, more branded experience.

Basic Footer

Learner View:

Admin view:

Login as Admin > Settings > General > Footer Links

Today, that’s changed.

Administrators can now design a fully customizable footer using their own HTML and CSS, enabling layouts and designs that closely resemble a corporate website footer.

Learner View:

Admin View:

Login as Admin > Branding > Footer Customization > Enable

How It Works

As an administrator, you can enable footer customization from the Branding → General settings. Once enabled, you can directly add your own HTML and CSS to design the footer exactly the way you want.

A built-in preview option lets you review the footer before publishing, ensuring it aligns with your design expectations.

Once saved, the customized footer is instantly visible to all learners.

Sample HTML to try out:

/* ===== Cool Glass Footer ===== */
.cool-footer {
position: relative;
background: linear-gradient(135deg, #0b1c24, #122a36, #183d4a);
color: #ffffff;
padding: 70px 30px 25px;
overflow: hidden;
font-family: “Inter”, “Segoe UI”, system-ui, sans-serif;
}

/* Ambient glow */
.footer-glow {
position: absolute;
top: -45%;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 700px;
background: radial-gradient(
circle,
rgba(0, 245, 255, 0.28),
rgba(0, 245, 255, 0.08),
transparent 70%
);
filter: blur(90px);
pointer-events: none;
z-index: 0;
}

/* Glass container */
.footer-content {
position: relative;
z-index: 1;
max-width: 1300px;
margin: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 45px;
padding: 45px;
border-radius: 22px;

background: rgba(255, 255, 255, 0.08);
backdrop-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 sections */
.footer-section h3 {
margin-bottom: 14px;
font-size: 17px;
font-weight: 600;
letter-spacing: 0.4px;
}

.footer-section p {
font-size: 14px;
line-height: 1.7;
opacity: 0.85;
}

/* Lists */
.footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}

.footer-section ul li {
margin-bottom: 9px;
}

.footer-section ul li a {
color: #ffffff;
text-decoration: none;
font-size: 14px;
opacity: 0.78;
transition: all 0.25s ease;
}

.footer-section ul li a:hover {
opacity: 1;
color: #00f5ff;
transform: translateX(6px);
}

/* Social icons */
.socials a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
margin-right: 10px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.14);
color: #ffffff;
text-decoration: none;
font-size: 18px;
transition: all 0.3s ease;
}

.socials a:hover {
background: linear-gradient(135deg, #00f5ff, #6cf6ff);
color: #001318;
transform: translateY(-5px) scale(1.05);
}

/* Footer bottom */
.footer-bottom {
position: relative;
z-index: 1;
text-align: center;
margin-top: 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-columns: 1fr;
padding: 30px 20px;
}

.socials a {
margin-bottom: 8px;
}
}

One Footer, Endless Possibilities

With Adobe Learning Manager’s enhanced footer customization, organizations are no longer constrained by predefined layouts. You get the freedom to build a footer that works for your business—visually, functionally, and strategically.

If your goal is a learning platform that truly feels like your platform, footer customization is a powerful place to start.