WordPress Header & Footer Customization with Astra & Elementor

Two Ways to Customize Your WordPress Header and Footer

Every WordPress site ships with a default header and footer that, frankly, looks pretty generic. You get a plain-text site title up top, a basic menu, and a footer that proudly announces "Powered by [Your Theme]." Not exactly the professional look you're going for.

The good news is you have two solid paths to fix this. The first is using your theme's built-in customizer options — in this case, the Astra theme, which gives you a surprising amount of control without touching any code. The second is using a page builder like Elementor Pro, which lets you design pixel-perfect headers and footers with a drag-and-drop interface. Both approaches have their place, and understanding when to use each one will save you a lot of time.

Setting Up Your Navigation Menu in WordPress

Before diving into header customization, you need a proper navigation menu in place. Head to Appearance > Menus in your WordPress dashboard to create one. Give it a name like "Primary Menu" and start adding your pages — About Us, Blog, Contact, whatever makes sense for your site.

The menu builder lets you drag and drop items to reorder them, and you can nest pages as sub-menu items by dragging them slightly to the right. Once your menu structure looks good, the critical step most people miss is assigning the menu to a location. Jump into the WordPress Customizer, find the Menus section, and make sure your new menu is set to the "Primary" display location. Without this step, your theme won't know which menu to actually show.

You can also build and rearrange menus directly inside the Customizer with a live preview, which is a more recent addition to WordPress. Either approach works — the Customizer just gives you the advantage of seeing changes in real time.

Customizing the Header with Astra's Theme Options

The Astra theme makes basic header customization straightforward through the WordPress Customizer. One of the first things you'll want to do is swap out that plain-text site title for your actual logo. Click the pencil icon next to your site title in the Customizer, upload your logo image, and adjust the width slider until it looks right — somewhere around 170 pixels tends to work well for most logos.

Don't forget to toggle off the site title text after adding your logo, otherwise you'll end up with both displaying side by side, which looks cluttered. These theme-level options are quick wins that can make a noticeable difference in just a few minutes. The trade-off is that you're limited to what Astra's customizer exposes — you can't easily add things like a top bar with contact info or social icons without stepping up to a page builder.

Building a Custom Header with Elementor Pro's Theme Builder

When you need more control, Elementor Pro's theme builder is where things get interesting. Navigate to Templates > Theme Builder, click Add New, and select "Header" as the template type. Elementor offers a library of pre-built header templates that give you a strong starting point — many include features like a top bar with phone numbers, email addresses, business hours, and social media icons.

The template library is smart enough to pull in your existing site logo and primary menu automatically, which saves setup time. From there, you can fine-tune everything visually. Want to adjust the logo size? Click it, go to Style, and set the width. Need to match hover colors to your brand? Click the menu element, switch to the Hover state under Style, and paste in your exact hex code.

A handy tip: install the free ColorZilla Chrome extension to grab exact colors from any element on your page. Just click the eyedropper, hover over the color you want, and paste the hex code directly into Elementor's color picker. It's a small tool that saves a surprising amount of guesswork when matching brand colors.

Don't Forget the HTML Tag for SEO

Here's a detail Elementor doesn't handle by default that's worth knowing about. When you build a custom header, the outer section wrapper doesn't automatically use the semantic <header> HTML tag. This matters because search engines like Google use these tags to understand the structure of your page.

To fix it, click on the section that wraps your entire header content, find the HTML Tag setting, and change it to "header." It's a small tweak that takes two seconds but helps your site's SEO by giving crawlers proper context about what that section of the page represents.

Removing the "Powered By" Footer Text

That "Powered by Astra WordPress Theme" text in the footer is one of the most common annoyances for new WordPress site owners. Removing it is simple — open the WordPress Customizer, scroll down to the footer area, and click the pencil icon on the powered-by text. Delete the unwanted text and hit Publish.

Keep in mind that whatever you put in this footer area shows up on every single page of your site. So stick to universally relevant information like copyright notices, not page-specific content. If you want more control over the footer layout, you're better off building a custom one in Elementor.

Creating a Custom Footer with Elementor Pro

Building a custom footer follows the same workflow as the header. Go to Templates > Theme Builder, add a new Footer template, and browse the template library. You'll find options with search boxes, navigation links, social icons, and logo placements that look far more polished than what the default theme provides.

One thing to watch out for is logo contrast. If your site logo is dark and the footer background is also dark, the logo won't stand out. In that case, swap it out for a white or light version of your logo instead of using the default site logo widget. Just delete the site logo element, drag in a standard Image widget, and upload your alternate logo file.

Set the display condition to "Entire Site" when publishing, and your custom footer will replace the default one across every page. A nice touch in Elementor is that when you hover over the header or footer on the front end, you get a quick-edit button that opens the template editor directly — no need to navigate back through the dashboard.

Building a Custom Blog Archive Layout

While you're in the theme builder, it's worth setting up a custom blog archive page too. By default, WordPress blog pages often have awkward sidebar layouts and minimal styling. Elementor Pro lets you design a proper archive template that controls how your post listings look.

First, make sure you've assigned a page as your Posts page under Settings > Reading in WordPress. Then head back to the theme builder, choose Archive as the template type, and pick a layout. The templates typically display your featured images, post titles, excerpts, and category tags in a clean grid or list format. Set the display condition to "All Archives" and publish.

Don't forget to add featured images to your posts — they're set in the right sidebar of the post editor under "Featured Image." Without them, your archive page will have empty placeholder spaces that look unfinished. With everything in place, you'll have a cohesive site where the header, footer, and blog layout all match your brand.

Theme Customizer vs. Page Builder: Which Should You Choose?

Both approaches have genuine advantages. The theme customizer route is faster, requires no additional plugins beyond your theme, and works well if your design needs are straightforward — a logo, a menu, maybe some footer text. It's the right choice when you want something clean and functional without overthinking it.

Elementor Pro's theme builder is the better option when you want full creative control. Custom top bars, branded color schemes, unique footer layouts with search boxes and call-to-action areas — all of that becomes possible with drag-and-drop simplicity. The trade-off is the added complexity of another plugin and the learning curve that comes with it.

For most small business sites and blogs, starting with theme options and upgrading to a page builder as your design needs grow is a practical path. You don't need a fully custom header on day one, but knowing the option exists means you won't feel stuck when your site outgrows the basics.

Watch the Full Video

Prefer watching to reading? Check out the full video on YouTube for a complete walkthrough with live demos and commentary.