How to Create a Custom Footer with Contact Info and Social Links in Gutenberg

by

Creating a custom footer for your WordPress website can enhance user experience and provide easy access to contact information and social media links. Using the Gutenberg editor, you can design a footer that fits your brand and needs without any coding skills.

A well-designed footer helps visitors find important information quickly. It can include your contact details, social media profiles, and quick links to other parts of your website. Customizing your footer also gives your site a professional appearance and improves navigation.

Follow these simple steps to add a personalized footer to your WordPress site using Gutenberg blocks.

Start by creating a new page or editing your existing footer area if your theme supports footer widgets. Use the Gutenberg editor to add a new block, typically a Group block, to serve as your footer container.

2. Add Contact Information

Within the Group block, add a Paragraph block for your contact details. Include your phone number, email, and physical address if applicable. Use bold or italics to highlight important info.

Example:

Contact Us: (123) 456-7890
Email: [email protected]
Address: 123 Main Street, City, Country

Next, add a Social Icons block or create custom links using Button blocks or a List block with icons. Link each icon to your social media profiles like Facebook, Twitter, Instagram, etc.

Use the block settings panel to customize colors, spacing, and alignment. Consider adding a background color or border to make your footer stand out.

Publish and Add to Your Site

Once satisfied with your footer design, publish the page or save the block. To display it site-wide, you may need to add it to your theme’s footer area via a widget or a theme builder that supports Gutenberg blocks.

By following these steps, you can create a professional and functional footer that improves your website’s usability and brand presence.