How to Create a Site Footer in GeneratePress & GenerateBlocks

Creating a custom site footer can add a unique touch to your website, making it stand out and better reflect your brand. With GeneratePress Premium and GenerateBlocks, you can easily design a footer that fits your style. Here’s how to create your own custom footer using these tools.

Step 1: Create a New Element for Your Footer

1. Go to your WordPress dashboard.
2. Navigate to Appearance > Elements.
3. Click “Add New Element” and select “Block”.

This will be the foundation of your custom footer. Title the element “Site Footer” and make sure to select Site Footerunder Element Type on the right-hand side. This ensures your custom design will replace the default footer.

Step 2: Build the Footer Layout

Now, it’s time to start designing your footer. You can approach this just like any other page layout using GenerateBlocks.

1. Insert a Container block as your outermost container.
2. Add an Inner Container block within it to control the width of your content.

For padding, you might want to set values such as 40px for top and bottom and 20px for left and right to create a balanced layout.

Adding a Grid

1. Insert a Grid block within the inner container and select a four-column layout.
2. Adjust the horizontal gap between columns for spacing—20px usually works well.

Step 3: Add Content to Each Column

Now that your grid is set, you can start adding content to each column.

Column 1: Logo

1. Insert an Image block and upload your logo.
2. Resize the logo to around 150px in width.

Column 2: Quick Links

1. Add a Headline block and create a list of links like “About,” “Contact,” and “Services.”
2. Adjust the font size to around 22px and link each item to the appropriate page.

Column 3: Contact Information

1. Insert a Headline block and add contact details.
2. Use Icon blocks for phone and email, adjusting the size and color to fit your design.

Column 4: Social Icons or Newsletter Signup

1. Insert Button blocks for social icons or a form block for a newsletter signup.
2. Customize the button style—remove the text, keep only the icon, and adjust colors to match your brand.

Step 4: Add Styling

To make your footer visually distinct, consider adding some styling elements:

1. Add a border to the top of your outer container (e.g., 3px solid blue).
2. Set a background color to the outer container to differentiate the footer from the rest of the site. A light gray often works well.

Step 5: Set the Footer to Display Site-Wide

Once your design is ready:

1. Go to the Location settings for your element.
2. Choose “Entire Site” to make sure your custom footer appears on every page.
3. Hit Publish.

Step 6: Review Your Footer

After publishing, visit your homepage and scroll to the bottom to see your new custom footer in action.

Conclusion