> ## Documentation Index
> Fetch the complete documentation index at: https://help.hoopai.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Using branded templates for design

> Create a branded master page, save sections as reusable templates, and maintain visual consistency across all your funnels and websites.

export const CourseTracker = ({courseId, lessonId, videoId}) => {
  const [progress, setProgress] = useState({});
  const [expanded, setExpanded] = useState(false);
  useEffect(() => {
    setProgress(loadProgress());
    document.body.setAttribute("data-academy", "true");
    return () => document.body.removeAttribute("data-academy");
  }, []);
  const course = COURSES[courseId];
  if (!course) return null;
  const lessons = course.lessons;
  const currentIndex = lessons.findIndex(l => l.id === lessonId);
  const completedCount = lessons.filter(l => !!progress[courseId + "/" + l.id]).length;
  const percent = lessons.length > 0 ? Math.round(completedCount / lessons.length * 100) : 0;
  const isCurrentDone = !!progress[courseId + "/" + lessonId];
  const prev = currentIndex > 0 ? lessons[currentIndex - 1] : null;
  const next = currentIndex < lessons.length - 1 ? lessons[currentIndex + 1] : null;
  const totalDuration = formatTotalDuration(lessons);
  const handleToggle = () => {
    const key = courseId + "/" + lessonId;
    const updated = {
      ...progress
    };
    if (updated[key]) {
      delete updated[key];
    } else {
      updated[key] = Date.now();
    }
    setProgress(updated);
    persistProgress(updated);
  };
  const lessonPath = lesson => "/academy/" + course.dir + "/" + lesson.id;
  const videoEmbed = videoId ? <div style={{
    position: "relative",
    width: "100%",
    paddingBottom: "56.25%",
    borderRadius: "var(--ds-radius-lg)",
    overflow: "hidden",
    marginBottom: "24px",
    background: "#000"
  }}>
      <iframe src={"https://www.youtube-nocookie.com/embed/" + videoId + "?rel=0"} title="Lesson video" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen style={{
    position: "absolute",
    top: 0,
    left: 0,
    width: "100%",
    height: "100%",
    border: "none"
  }} />
    </div> : null;
  const lessonList = lessons.map(lesson => {
    const isActive = lesson.id === lessonId;
    const isDone = !!progress[courseId + "/" + lesson.id];
    const itemStyle = {
      display: "flex",
      alignItems: "center",
      gap: "8px",
      padding: "10px 16px",
      borderTop: "1px solid var(--academy-border-subtle, #f3f4f6)",
      background: isActive ? "var(--academy-active-bg, #f9fafb)" : "transparent",
      textDecoration: "none",
      cursor: isActive ? "default" : "pointer",
      color: "inherit",
      transition: "background 0.15s"
    };
    const titleStyle = {
      flex: 1,
      fontSize: "13px",
      fontWeight: isActive ? 600 : 400,
      color: isActive ? "var(--academy-text, #111827)" : "var(--academy-text-secondary, #6b7280)",
      overflow: "hidden",
      textOverflow: "ellipsis",
      whiteSpace: "nowrap",
      lineHeight: "1.4"
    };
    const durationStyle = {
      fontSize: "12px",
      color: "var(--academy-text-muted, #9ca3af)",
      whiteSpace: "nowrap"
    };
    const inner = <>
        {isDone ? <CheckCircle /> : <VideoIcon />}
        <span style={titleStyle}>{lesson.title}</span>
        <span style={durationStyle}>{lesson.duration}</span>
      </>;
    if (isActive) {
      return <div key={lesson.id} style={itemStyle}>
          {inner}
        </div>;
    }
    return <a key={lesson.id} href={lessonPath(lesson)} style={itemStyle}>
        {inner}
      </a>;
  });
  return <div className="not-prose" id="academy-course-tracker">
      {videoEmbed}
      <div className="academy-tracker" style={{
    fontFamily: "Inter, -apple-system, BlinkMacSystemFont, sans-serif",
    borderRadius: "var(--ds-radius-lg)",
    border: "1px solid var(--academy-border, #e5e7eb)",
    background: "var(--academy-bg, #ffffff)",
    overflow: "hidden",
    marginBottom: "24px"
  }}>
        {}
        <div style={{
    padding: "16px 16px 0"
  }}>
          <h3 style={{
    margin: 0,
    fontSize: "16px",
    fontWeight: 600,
    lineHeight: "1.4",
    color: "var(--academy-text, #111827)"
  }}>
            {course.title}
          </h3>
          <div style={{
    display: "flex",
    gap: "12px",
    marginTop: "8px"
  }}>
            <span style={{
    display: "flex",
    alignItems: "center",
    gap: "5px",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)",
    padding: "3px 8px 3px 6px",
    borderRadius: "var(--ds-radius-sm)",
    border: "1px solid var(--academy-border, #e5e7eb)"
  }}>
              <BookIcon /> {lessons.length} lessons
            </span>
            <span style={{
    display: "flex",
    alignItems: "center",
    gap: "5px",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)",
    padding: "3px 8px 3px 6px",
    borderRadius: "var(--ds-radius-sm)",
    border: "1px solid var(--academy-border, #e5e7eb)"
  }}>
              <ClockIcon /> Approx. {totalDuration}
            </span>
          </div>
        </div>

        {}
        <div style={{
    padding: "14px 16px 16px"
  }}>
          <div style={{
    display: "flex",
    justifyContent: "space-between",
    fontSize: "12px",
    color: "var(--academy-text-secondary, #6b7280)"
  }}>
            <span>Your progress</span>
            <span style={{
    fontWeight: 500,
    color: "var(--academy-text, #111827)"
  }}>
              {percent}%
            </span>
          </div>
          <div style={{
    height: "6px",
    borderRadius: "var(--ds-radius-full)",
    background: "var(--academy-track, #f3f4f6)",
    marginTop: "8px",
    overflow: "hidden"
  }}>
            <div style={{
    height: "100%",
    borderRadius: "var(--ds-radius-full)",
    background: "var(--academy-progress, #3b82f6)",
    transition: "width 0.5s cubic-bezier(0.4, 0, 0.2, 1)",
    width: percent + "%"
  }} />
          </div>
        </div>

        {}
        <div className="academy-lessons-desktop">{lessonList}</div>

        {}
        <div className="academy-lessons-mobile">
          <button onClick={() => setExpanded(!expanded)} aria-expanded={expanded} style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    padding: "12px 16px",
    cursor: "pointer",
    borderTop: "1px solid var(--academy-border-subtle, #f3f4f6)",
    background: "transparent",
    border: "none",
    borderTopStyle: "solid",
    borderTopWidth: "1px",
    borderTopColor: "var(--academy-border-subtle, #f3f4f6)",
    width: "100%",
    textAlign: "left",
    color: "var(--academy-text-secondary, #6b7280)",
    fontSize: "13px",
    fontWeight: 500,
    fontFamily: "inherit"
  }}>
            <span>
              {expanded ? "Hide lessons" : "Show all " + lessons.length + " lessons"}
            </span>
            <ChevronDown open={expanded} />
          </button>
          {expanded && lessonList}
        </div>

        {}
        <div style={{
    display: "flex",
    alignItems: "center",
    justifyContent: "space-between",
    borderTop: "1px solid var(--academy-border, #e5e7eb)",
    padding: "10px 16px"
  }}>
          {prev ? <a href={lessonPath(prev)} style={{
    fontSize: "13px",
    color: "var(--academy-text-secondary, #6b7280)",
    textDecoration: "none",
    display: "flex",
    alignItems: "center",
    gap: "4px"
  }}>
              ‹ Previous
            </a> : <div />}
          <button onClick={handleToggle} style={{
    fontSize: "13px",
    fontWeight: 500,
    cursor: "pointer",
    padding: "6px 14px",
    borderRadius: "var(--ds-radius-md)",
    border: isCurrentDone ? "1px solid var(--academy-border, #e5e7eb)" : "none",
    background: isCurrentDone ? "var(--academy-bg, #ffffff)" : "var(--academy-btn-bg, #111827)",
    color: isCurrentDone ? "var(--academy-complete, #10b981)" : "var(--academy-btn-text, #ffffff)",
    display: "flex",
    alignItems: "center",
    gap: "6px",
    transition: "all 0.2s",
    lineHeight: "1.4",
    fontFamily: "inherit"
  }}>
            {isCurrentDone ? <>
                <CheckCircle /> Completed
              </> : "Mark as completed"}
          </button>
          {next ? <a href={lessonPath(next)} style={{
    fontSize: "13px",
    color: "var(--academy-text-secondary, #6b7280)",
    textDecoration: "none",
    display: "flex",
    alignItems: "center",
    gap: "4px"
  }}>
              Next ›
            </a> : <div />}
        </div>
      </div>
    </div>;
};

<CourseTracker courseId="funnels-websites" lessonId="using-a-branded-templates-for-design" />

Visual consistency builds trust. When every page on your website and every funnel you publish looks like it belongs to the same brand — same colors, same fonts, same style — visitors experience your business as polished and professional. The platform's branded template system makes this achievable without rebuilding design elements from scratch for every new page.

<Frame caption="The Using Branded Templates for Design lesson in the HoopAI Academy Funnels and Websites section">
  <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-funnels-creating.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=28d21ce2a08059b0dc7abc6e718f221f" alt="Using branded templates for design article" width="1536" height="826" data-path="images/academy-funnels-creating.png" />
</Frame>

## Why this matters

Without a template system, every new funnel or website page requires rebuilding the same header, footer, button styles, and color sections from scratch. This wastes time and introduces inconsistency — your brand looks different on page 3 vs. page 7. Branded templates solve this by creating reusable building blocks that enforce your visual identity automatically across every page you build.

## Understanding the three levels of reuse

<AccordionGroup>
  <Accordion title="Global sections (within the same site or funnel)">
    A global section is a saved section that stays synchronized across all pages it is used on. If you update the global section, the change applies automatically to every page that uses it — ideal for headers, footers, and navigation bars that appear on every page of a site.
  </Accordion>

  <Accordion title="Templates (across different sites or funnels)">
    A template is a saved section or page layout that can be applied to different sites or funnels. Unlike global sections, templates do not stay synchronized — once applied to a new page, the template copy is independent. Use templates for layouts you want to replicate without linking the sections together.
  </Accordion>

  <Accordion title="Branded page (the master design reference)">
    A branded page is a single page you design to contain all your brand's core elements — header, footer, color palette applied to sections, button styles, and typography. It serves as your design reference and the source for saving global sections and templates.
  </Accordion>
</AccordionGroup>

## How to create and use branded templates

<Steps>
  <Step title="Design your branded master page">
    Create a new page (funnel or website) and name it "Brand Master" or similar. This page is for internal use only — it will never be published to visitors.

    Design all the core brand elements:

    * Header with logo and navigation
    * Footer with links and contact information
    * Button styles in your brand colors
    * Typography settings (heading font, body font, sizes)
    * A standard section layout with your color palette applied

    <Frame caption="A branded master page containing all core design elements as a single reference">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-funnels-creating.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=28d21ce2a08059b0dc7abc6e718f221f" alt="Brand master page design" width="1536" height="826" data-path="images/academy-funnels-creating.png" />
    </Frame>
  </Step>

  <Step title="Save the header as a global section">
    Click on the header section, open its settings, and click **Save as Global Section**. Give it a clear name — for example, "Brand Header." Now, when you use this global section on other pages within the same site, any update to the original will cascade to all instances automatically.
  </Step>

  <Step title="Save the footer as a global section">
    Repeat the same process for the footer. Adding global header and footer sections to every page of your website ensures consistent navigation and contact information throughout the entire site.

    <Frame caption="Saving and applying a global footer section across all website pages">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-onboarding-webchat-widget.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=66e9548553a7c885294aae986c271a46" alt="Global footer section saved and applied" width="1536" height="826" data-path="images/academy-onboarding-webchat-widget.png" />
    </Frame>
  </Step>

  <Step title="Save sections as templates for cross-funnel use">
    For sections you want to reuse across different funnels — not just pages within the same site — save them as **Templates** instead of Global Sections. Templates are available in the template library when building any funnel or website page.
  </Step>

  <Step title="Apply your templates to new pages">
    When building a new funnel or website page, open the template library and insert your saved sections. Customize the content — copy, images, specific details — while keeping the layout and style structure intact.

    <Tip>
      Build a library of 5-10 versatile section templates: hero section, feature grid, testimonials, FAQ, and CTA block. With these ready, building any new page takes minutes instead of hours.
    </Tip>
  </Step>

  <Step title="Update your brand across all pages">
    When your brand identity changes — new logo, updated colors, new contact information — edit the global sections in the brand master page. All pages using those global sections update simultaneously with no manual edits required.

    <Frame caption="Updating a global section on the master page cascades changes to all pages automatically">
      <img src="https://mintcdn.com/hoopai-84ec0cdc/gyU98wGhFXcTdqFf/images/academy-funnels-creating.png?fit=max&auto=format&n=gyU98wGhFXcTdqFf&q=85&s=28d21ce2a08059b0dc7abc6e718f221f" alt="Brand update cascading across pages" width="1536" height="826" data-path="images/academy-funnels-creating.png" />
    </Frame>
  </Step>
</Steps>

## Key points

<AccordionGroup>
  <Accordion title="Global sections vs. templates — which to use?">
    Use global sections for elements that must be identical and stay synchronized across pages in the same site — header and footer. Use templates for layouts you want to copy and customize independently in different funnels or sites.
  </Accordion>

  <Accordion title="Templates do not carry specific colors">
    When you apply a template to a new page, the layout and structure carry over but specific color values may not. You will need to apply your brand colors to the new instance of the template. Templates provide structure, not a full brand sync.
  </Accordion>

  <Accordion title="Updating global sections">
    To update a global section, edit it on any page it appears on — or on your brand master page. The change propagates to all other pages using that global section within the same site. Updating your header or footer becomes a one-step process.
  </Accordion>
</AccordionGroup>

## Key benefits

<AccordionGroup>
  <Accordion title="Instant consistency">
    Global sections ensure your header, footer, and core sections look identical across every page.
  </Accordion>

  <Accordion title="Time savings">
    Build once, reuse everywhere — no redesigning the same elements for each new page or funnel.
  </Accordion>

  <Accordion title="Error prevention">
    Fewer manual edits means fewer design inconsistencies across your pages.
  </Accordion>

  <Accordion title="Easy brand updates">
    Change a global section once and every page that uses it updates automatically.
  </Accordion>

  <Accordion title="Scalable design">
    As you build more funnels and pages, your template library grows — making each new build faster than the last.
  </Accordion>
</AccordionGroup>
