Layout · Gutenberg
Mega Footer block for WordPress
Full-featured site footer with logo, tagline, link columns, social links, and a bottom bar.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Full-featured site footer with logo, tagline, link columns, social links, and a bottom bar.
Inspector panels on this block: Logo & Brand, Link Columns, Social Links, Bottom Bar. Those titles come from index.js, not from a shared template.
Behavior controls: “Twitter/X” options: GitHub, LinkedIn, Instagram, YouTube; “Layout” options: Logo left + columns, Logo top centered.
Mega Footer has no render.php and no frontend.js. The saved Gutenberg HTML is what visitors see, plus Blockenberg layout/typography CSS.
Where to find it
Gutenberg inserter → Layout → search “Mega Footer” (block name `blockenberg/mega-footer` in block.json). Style it in the sidebar after insert.
How to use Mega Footer block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Mega Footer”, insert it. Category: Layout.
- Configure inspector controls that exist on this block. Open Logo & Brand. Set “Logo width (px)”, “Show tagline”, “Tagline”, “Column heading”.
- Publish. Save the page. Output is the saved block HTML; typography/colors follow Blockenberg shared panels.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Logo width (px) | Numeric range control in the inspector. Range 60–300. block.json default: 140. Saved as `logoWidth`. |
| Show tagline | On/off toggle in the inspector. On by default. Saved as `showTagline`. |
| Tagline | Text field in the inspector. block.json default: Building better software, together.. Saved as `tagline`. |
| Column heading | Text field in the inspector. |
| Show social | On/off toggle in the inspector. On by default. Saved as `showSocial`. |
| Twitter/X | Select control; the chosen value is saved on the block. Options: GitHub; LinkedIn; Instagram; YouTube. |
| Show bottom bar | On/off toggle in the inspector. On by default. Saved as `showBottomBar`. |
| Copyright text | Text field in the inspector. block.json default: © 2024 Your Company. All rights reserved.. Saved as `copyright`. |
| Layout | Select control; the chosen value is saved on the block. Options: Logo left + columns; Logo top centered. block.json default: logo-left. Saved as `layout`. |
| Gap (px) | Numeric range control in the inspector. Range 16–80. block.json default: 40. Saved as `gap`. |
| Padding top (px) | Numeric range control in the inspector. Range 0–120. block.json default: 64. Saved as `paddingTop`. |
| Padding bottom (px) | Numeric range control in the inspector. Range 0–120. block.json default: 32. Saved as `paddingBottom`. |
| Show divider | On/off toggle in the inspector. On by default. Saved as `showDivider`. |
| Footer bg | Color control in the inspector. block.json default: #0f172a. Saved as `footerBg`. |
| Heading color | Color control in the inspector. block.json default: #94a3b8. Saved as `headingColor`. |
| Link color | Color control in the inspector. block.json default: #cbd5e1. Saved as `linkColor`. |
| Link hover | Color control in the inspector. block.json default: #ffffff. Saved as `linkHoverColor`. |
| Tagline | Color control in the inspector. block.json default: #94a3b8. Saved as `taglineColor`. |
| Divider | Color control in the inspector. block.json default: #1e293b. Saved as `dividerColor`. |
| Copyright | Color control in the inspector. block.json default: #64748b. Saved as `copyrightColor`. |
| Social icons | Color control in the inspector. block.json default: #94a3b8. Saved as `socialIconColor`. |
When this is the right block
- Full-featured site footer with logo, tagline, link columns, social links, and a bottom bar — that is the job of Mega Footer, not a generic content block.
- Use it when you need the editor control labeled “Logo width (px)”, which exists on this block’s inspector.
- It matches pages about footer, nav, links.
- Inserter grouping: page structure, sections, and composition.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Mega Footer block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Mega Footer”. It sits under Layout. After insert, open Logo & Brand and set “Logo width (px)”, “Show tagline”, “Tagline”, “Column heading”.
What makes Mega Footer different from other Blockenberg blocks?
Full-featured site footer with logo, tagline, link columns, social links, and a bottom bar. Inspector labels on this block include “Logo width (px)”, “Show tagline”, “Tagline”, “Column heading”.
Is the Mega Footer Gutenberg block free?
Yes. Mega Footer ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Mega Footer to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Logo & Brand, Link Columns, Social Links, Bottom Bar).
Related layout blocks
Minimal Footer
Clean, minimal site footer with logo (image or text), navigation columns, social icon links, and copyright line. A lighter alternative to the mega-footer.
Mega Menu
Full-width mega menu navigation with column groups, icons, images, CTAs and rich hover panels.
Page List
A styled list of pages or links with optional icons, hierarchy, and rich color controls.
Pagination
Styled numeric pagination preview with prev/next, colors, shape and alignment controls.
Sticky Header
A fully-styled site header with logo (image or text), navigation links, and an optional CTA button. Sticks to the top on scroll with a shrink animation. Supports light, dark, glass, and gradient style variants.
Bento Grid
Modern asymmetric bento-box grid with featured large cells and smaller detail cards — perfect for showcasing features, stats, or portfolio highlights.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Mega Footer from the Gutenberg inserter.