Search Skilljar Academy Support Center

Footer Builder — Live Configurator

Footer Builder HTML Template

Paste once into your theme's Footer section — then it appears automatically on every page. Not for individual HTML content blocks.

Theme Footer Section

Build a sitewide custom footer. Choose a Marketing footer (logo, link columns, social icons) or a Support footer (a simple help-desk style block), then copy the single code block into Theming → Themes → [Your Theme] → Footer section. Skilljar already provides its own default footer bar out of the box, so this template intentionally leaves out a separate copyright/legal bar — that would just be a redundant second one.

Footer Style
General
Logo & Tagline
Link Columns
·
Links
Links
Links
Links
Social Icons
Support Details
Support Links
·
Typography
Background
Font Sizes
Logo / Heading
Link Colors
Social Icon Colors
Layout
Section Margin (px)
Section Padding (px)
Content Spacing — below each element (px)
Live Preview
✓ Saved
Extend this template with AI Prompts

Your config handles the basics. Use these prompts to extend the sitewide footer with features the configurator can't do. Paste the generated code block plus one of these prompts into Claude or ChatGPT, then re-paste the updated code back into your theme's Footer section.

Before you paste a prompt: grab the AI context file from Lesson 1 of the AI with Skilljar course and paste it into your AI chat. This will teach it the Skilljar HTML, CSS, and JS rules.
✦
Add a newsletter signup field
Here is the HTML/CSS for a sitewide Skilljar footer, pasted into the theme's Footer section. Add a small email input and "Subscribe" button next to the link columns. On submit, just prevent the default page reload for now (no backend call) — I'll wire up the real integration later. Return the complete updated code.
Copy
✦
Collapse link columns into accordions on mobile
Here is the HTML/CSS for a sitewide Skilljar footer with link columns, pasted into the theme's Footer section. Below 768px width, turn each column title into a clickable accordion header that toggles its link list open/closed, collapsed by default. Keep the desktop layout unchanged above 768px. Return the complete updated code.
Copy
✦
Add a "back to top" pill button
Here is the HTML/CSS for a sitewide Skilljar footer, pasted into the theme's Footer section. Add a small pill-shaped "Back to top" button in the top-right corner of the footer that smooth-scrolls the page to the top when clicked. Style it to match the existing link color and hover color. Return the complete updated code.
Copy
Live Preview
Paste into: Theming → Themes → [Your Theme] → Footer section
Import generated code
Paste the code from a previous session (from the Generated Code tab, or straight from your theme's Footer section). The configurator will restore your settings from it.