Elementor Footer Template with 4 Columns
This Elementor footer template puts your logo, a short company mission, and social icons on the left, with four link columns beside them and a copyright line at the bottom. Footer 4 Column with Company Mission is a free, responsive block shared as a JSON file and built only with native Elementor widgets.
What's Inside the Block
- A left column with a logo (36 px high), a short mission sentence, and five social icons: Facebook, Instagram, TikTok, WhatsApp, and YouTube.
- Four link columns, each with an H3 title and a list of links: Our Range (5 links), Support (3), Company (4), and Legal (3).
- The left column takes about one third of the width, and the four link columns share the rest, with 2 rem between them.
- A thin bottom line with a copyright text, set apart by a light divider.
- The whole block is wrapped in a
footerHTML tag, with Inter font on a white background.
Tip: Keep link titles short and group them by what visitors look for, such as products, help, company, and legal pages. Always include your privacy policy and terms pages if you collect data or sell online.
Requirements
- A recent version of Elementor with Flexbox Container and Grid Container available.
- No Elementor Pro required.
- The Inter font available on your site (otherwise a fallback font is used).
- Your own logo file and the URLs of your pages and social profiles.
Note: The logo Image widget is empty, so Elementor shows its default placeholder until you choose your own logo. All links, including the social icons, point to #, and the social links are set to open in a new tab, so add your real URLs. The mission text, link names, and "Your Shop Name Co." are sample content, and the copyright year is typed by hand, so update it each year. The main column width uses a custom grid value, so on an older version of Elementor the layout may differ. If a social icon does not show, choose the icon again from Elementor's icon library. Back up your page before importing a template into an existing layout.
Widgets Used
| Element | Purpose | Pro? |
|---|---|---|
| Grid Container | Main layout and the groups of link columns (4 in total) | No |
| Flexbox Container | Footer wrapper, brand column, link columns, and copyright bar (7 in total) | No |
| Image | Logo (1 in total) | No |
| Heading | Mission text, column titles, and copyright (6 in total) | No |
| Social Icons | Facebook, Instagram, TikTok, WhatsApp, and YouTube links (1 in total) | No |
| Icon List | Link lists in each column (4 in total) | No |
Frequently Asked Questions
How do I import this Elementor JSON template?
First, download the JSON file using the button above and don't unzip or edit it. Second, open your WordPress dashboard, go to Templates, and choose Saved Templates. Third, click Import Templates, select the JSON file, and wait until the template appears in the list.
Fourth, open the page you want to edit with Elementor and click the folder icon to open the template library. Fifth, open the My Templates tab, choose this template, and click Insert. The block is added to your page and can be edited like any other Elementor container.
How do I change the link names and URLs?
Select an Icon List widget and open its Content tab. Click an item to change its text and set its link, then repeat for the other items. Each column is its own Icon List widget, so edit all four.
How do I add my logo and change the mission text?
Select the Image widget at the top left, open its Content tab, and choose your logo. The widget is set to 36 px high, so a wide logo works best. To change the mission sentence, click it and type your own text.
How do I change the social icons?
Select the Social Icons widget and open its Content tab. Click an item to change its icon or add your profile URL. You can add or remove items, and the spacing between icons is kept.
How do I add or remove a link column?
Each column is a container with a heading and an Icon List. Duplicate one to add a column, or delete one to remove it. Because the columns sit in a grid with two columns per group, the layout is best with an even number of columns, so check how it looks after you change it.
How does the footer change on tablet and mobile?
On tablet, the left column sits above the four link columns, with 4 rem of space between them. On mobile, the link columns become two columns, and the two lists in each column stack on top of each other.
How do I use this as my site-wide footer?
If you have Elementor Pro, you can use the Theme Builder to create a footer and insert this block into it. Without Pro, you can insert the block at the bottom of each page, or use a footer built into your theme and copy the content there.
Do I need Elementor Pro?
No. The block only uses native Image, Heading, Social Icons, and Icon List widgets inside Flexbox and Grid containers. Elementor Pro is only needed if you want to apply it as a site-wide footer with the Theme Builder.
Why won't the file import?
Make sure the file has a .json extension and hasn't been unzipped or edited. If it still fails, check your hosting upload size limit or any security plugin that may block file uploads.
Why do the Flexbox or Grid settings look different or missing?
Update Elementor to the latest version. On older versions, the Flexbox Container and Grid Container features may need to be enabled first in Elementor's feature settings.
Why does the font look different?
The block uses the Inter font. If it isn't available on your site, change the font family in the Style tab of each widget.
Looking for more footer sections? Browse all Elementor footer templates, or see every free block in Elementor Templates.
Comments
Post a Comment
Post a Comment