Footer · Big type

A newsletter field and three columns of links, a bar with the copyright and social links, and the brand name in giant letters across the bottom, cut by the edge of the page.

See it live: Footer · Big type on fancybricks.co — the live preview, and the button that copies it.

Or open the preview on its own — narrow the window to see it on a phone — and in dark mode.

In the builder

Preview on the front end. Scripts don't run inside the builder, so here you only see the layout: nothing is missing: the fit-to-width script only acts with data-fbk-fit on .fbk-fbig (on by default), and only on the front end. Save and open the page to see the full result.

Structure

This is what the Bricks Structure panel shows after you paste the template. Component instances say which component they are.

Footer big type
  Container
    Footer
      Columns
        Newsletter
          Newsletter · Title
          Newsletter · Text
          Newsletter form
        Menu · Studio   (FBK Link list)
          Links · Menu Studio
        Menu · Services   (FBK Link list)
          Links · Menu Services
        Menu · Legal   (FBK Link list)
          Links · Menu Legal
      Bottom bar
        Copyright
        Social   (FBK Social)
      Brand mark
        Brand word (home link)
      Brand word · fit to width (JS, only with data-fbk-fit)

The template also pastes a dashed note above the section, with the short version of this page. It only shows inside the builder, never on the published page — see Builder notes.

How to adjust

Every step is the same move: pick the element in the Structure panel, change its Properties.

Where are those panels?

How to adjust a template shows every one of them in a screenshot of the real builder: the Structure and Properties panels, the classes on an element, a component's style families and the field where a CSS variable goes.

The classes this element carries, in the Bricks panel.

This template's own component, with its Style group open.

1. Paste the template in Bricks first — see Copy and paste.
2. Select Menu · Studio, Menu · Services, Menu · Legal (FBK Link list) › Properties: Title, Title tag, Hide title · Style group: Layout, Look, Tone, Shape, Size, Hover effect, Alignment, Background.
3. Select Social (FBK Social) › Properties: Networks group: Facebook link, Instagram link, X link, LinkedIn link, YouTube link, TikTok link, Hide Facebook, Hide Instagram, Hide X, Hide LinkedIn, Hide YouTube, Hide TikTok · Style group: Look, Tone, Shape, Size, Show names, Hover effect, Background.
4. Select Newsletter form › Content › Fields (add, remove, required), Submit button and Actions (Email: recipient and subject; success message).
5. Select Links · Menu Studio, Links · Menu Services, Links · Menu Legal › Content › Menu: pick your WordPress menu (Appearance › Menus).
6. Select Brand word (home link) › Content › Logo: your site logo (or Settings › Theme Styles › Logo).
7. Spacing, sizes, color and timing with no property of their own: the CSS variables below.

CSS variables

These are the only values in the template meant to be changed by hand. Copy the block, paste it, edit the numbers.

The Custom CSS field of this template's own element, with one of its variables as a real example.

/* «Footer» · class .fbk-fbig */
.fbk-fbig {
  /* The brand word: size (shorter words can go bigger), color at rest and on
     hover */
  --fbk-t-word-size: min((100vw - var(--space-xl)) * 0.2, var(--h1) * 4.2);
  --fbk-t-word-color: color-mix(in srgb, var(--heading-color) 45%, transparent);
  --fbk-t-word-hover: var(--fbk-accent);
}

Paste the block in the element's Style → CSS field (the selector is already in it), or set the same variables on the class itself to change every copy at once. The values are your framework's variables, so they follow your site: Choosing a framework.

Requirements

• Code execution. Needs "Execute code" enabled for the role in Bricks → Settings → Custom code, or the JS block shows as plain text instead of running.

What each requirement is, and how to set it up once for the whole site: Requirements.

Finish by hand

• The giant name is a Bricks Logo element with text: write yours in Brand word (home link) (Logo › Text); like any logo, a click takes the visitor to the home page. At rest it shows about two thirds of its height (translateY in .fbk-fbig--rise). Its size is --fbk-t-word-size on .fbk-fbig (made for about nine letters: raise it for a shorter word, lower it for a longer one); colors: --fbk-t-word-color and --fbk-t-word-hover.
• Fit to width: on by default (Footer › Attributes has data-fbk-fit) so the word never gets cut, whatever its length or your framework's font. The code block Brand word · fit to width measures it and sets --fbk-t-word-size; remove the attribute to go back to the fixed CSS size.
• The rise on hover is the optional class .fbk-fbig--rise on .fbk-fbig (Custom CSS: .fbk-fbig__mark:hover .fbk-fbig__word): remove it and the word sits whole and still.
• Menus: a Bricks Nav Menu with a WordPress menu in the Links slot of each FBK Link list (each one names its own nav: Studio, Services, Legal): pick your menus in their settings.
• Newsletter: connect it to your list with the form's Mailchimp or Sendgrid action (the demo uses Email).
• The form is the Bricks Form element in the Fancy Bricks house style (class fbk-form: one row, the label kept for screen readers (fbk-form--inline), primary submit with the Sweep hover): set its fields, actions and messages in the Form element. While a field has focus the field rises a little and casts a shadow (class fbk-form--lift); remove the class for a still form. Other looks: add fbk-form--line (underline) or fbk-form--float (floating label).
• This is a Footer template: set where it shows in Template settings → Conditions (for example, the entire website).

On phones

The template is designed desktop first, the Bricks default, and only changes at the two widths the library uses:

• 991px and below — .fbk-fbig__columns.
• 767px and below — .fbk-fbig__bar, .fbk-fbig__columns, .fbk-section.

Those changes live in Bricks' own breakpoint fields, so you edit them where you always do: pick the breakpoint in the toolbar and the same fields follow.

Careful with the classes shared by the whole library (fbk-section, fbk-intro, the component classes): a change there shows up in every template that uses them.

If your site's breakpoints are set up mobile first, copy the mobile-first variant of the template instead — see Copy and paste.

Accessibility

In this template, keyboard focus is visible on every interactive piece; movement is cut back when the visitor's system asks for less motion; the state screen readers need is already set (aria-hidden, aria-label).

What is checked on every template, and what depends on your own palette: Accessibility.

Dark mode

This section is dark on purpose (class fbk-section--dark), so it looks the same whether your site is in light or dark mode.

How the library follows your site's color scheme: Dark mode and preview.