Astra 3.1 – Experience The Modern Customizer and Enhanced Header Footer Builder

Astra 3.1 – Revised Customizer and Enhanced Header Footer Builder

Astra 3.1 Improvements

A few weeks back we launched Astra 3.0 – our biggest update yet. It bought a new visual Header Footer Builder and a customizer that works 70% faster than the previous version.

We were overwhelmed by the response from the community. Users loved the ease the new Header Footer builder brought to the workflow as well as the impressive customizer performance. 

As we promised in our last update, we are here with new options in Header Footer builder along with exciting improvements to the customizer. 

What’s New in the Astra 3.1?

Most beautiful customizer yet – Experience the new UI/UX in the customizer that will make your designing process easy and fast.
More control over Header Footer builder elements – You can now easily clone(duplicate) and delete elements in Header Footer builder. 
Language Switcher element – Display multilingual website navigation in style with the new Language Switcher element.
New options in the cart, button, and search elements – Many exciting options are added to elements like flyout in cart element, size options in button, and more controls in search.

Let’s dig into Astra 3.1 

Presenting Most Beautiful and Modern Customizer Yet!

With Astra 3.1, the customizer has a new look and feel. You should immediately notice the  new design for customizer controls. 

Our previous customizer was designed back in 2017 when we first launched Astra. With some major updates like Astra 2.0 and Astra 2.6, we reinvented the customizer and made it better. With this update, we have polished the customizer to make it modern and beautiful. 

The new UI in Astra 3.1 will improve your experience in working with the customizer. You will see color options in a new form, a sleek design for tabs, checkboxes replaced with toggle buttons, and an overall improved look. 

The new version of the customizer will reduce clicks and scrolls while navigating and customizing settings making the entire design process faster and more efficient. 

Let’s see what else is new – 

1. Enhanced Color Options

You will now find the color option easily with distinct controls for normal and hover. This removes the previous separate tab-like structure and serves all controls at a glance.

This enables you to set any color in the customizer and make your designing process faster.

Astra 3.1 - Color options

2. Blog Meta Structure Options

Bringing a better meta-structure for blog options so you can manage and understand the fields better.

Astra 3.1 - post structure options

3. Checkboxes Replaced with Toggle Buttons 

All checkboxes will be replaced with default WordPress toggle controls. You can enable or disable options with ease.

Astra 3.1 - checkbox converted to toggle

4. Dropdown is Converted to Multi-buttons

All dropdown choices are now presented as tabs so you can easily select your preferred option.

Astra 3.1 - dropdown is converted to multi-button

Here is a detailed doc that explained what all has changed in the new customizer. 

Easily Clone and Delete Elements in Header Footer Builder

Astra Header Footer builder is a new way to visually design navigation for your website. With this drag-drop builder, you can easily add elements to the header and footer, and change their position. 

Previously you were able to add multiple elements to the header and footer. Now with Astra Pro 3.1 you can easily clone and delete elements as required. 

When you hover over an element in the header/footer builder, you will see new options to clone or delete the element.

Cloning Element 

This option lets you duplicate any element. The new cloned element will be a perfect duplicate with all the design and other settings from the original element. This stops you having to create a similar element again from scratch.

You can design elements in one place and use them in multiple positions by cloning!

Here is a video that shows how easily you can clone elements.

Delete Element 

In case you accidentally added an extra element or wish to remove unused elements completely from the customizer, you can use the delete option. Deleting unused elements can reduce customizer load.

To delete, just hover over the element and click on the bin icon.

Read more about cloning and deleting elements here.

New Header Footer Element – Language Switcher

The Header Footer builder already provides a range of useful elements. In addition to this, we are now introducing a new element – Language Switcher.

Multilingual websites are essential to growing business as users are much more comfortable browsing websites in their regional language.

The current process of adding navigation to the header/footer needs an external plugin, a lot of effort, and has limited styling options. Using extra resources ultimately increases page load.

Astra Pro 3.1 offers a native Language Switcher element inside both the header and footer. You can now easily add navigation for your website in different languages and change the position of the element across the header/footer easily with just drag-n-drop.

You don’t need to add any extra CSS or worry about responsive design as it’s all taken care of for you!

This element provides in-built support for the WPML plugin while you can connect any of your favourite translation plugin easily. You just need to pass the URL for the translated site and can set the language switcher anywhere in the header or footer.

You can add required language, set a custom label, assign a URL, enable flags, and manage the layout of all languages too!

Here is a detailed document that explains more about using Language Switcher element.

New Options in Cart, Button and Search Elements

With Astra 3.1 there are impressive improvements in existing Header Footer builder elements. These are considerable changes that will add more flexibility to your designs.

Here is a quick list of what’s new –

1. New flyout option in cart element – If you have the WooCommerce plugin activated, you can see the cart element available in the header builder.

This is a quick way to display a cart with all items in it. With this, a user can quickly navigate to the cart and place an order. The cart element is fully responsive and can work within your existing design.

A new flyout option is added for the cart element as default. That means when the user access cart from the responsive device and clicks on the cart icon, a cart window will appear as a flyout.

This will add a wow effect on responsive devices. With this option, you can show cart elements in the impressive fly-out popup which can elevate any eCommerce website.

2. Size option for button element – Get new control to set the size of the button to – small, medium, or large. This will save you time manually adjusting the button height and width. 

Button size option in virtual builder

3. More color options to the search element – You will observe new options like search icon hover color, background hover color, placeholder color and box height.

Astra search design options

Update Astra Now!

We always try to keep Astra at the #1 position and deliver the best features in the industry. Astra 3.1 is another step towards making it even better. 

Update Astra theme and Astra Pro plugin to version 3.1 today. Experience the new clean and sleek customizer, super useful clone and delete element features, and the brand new language switcher element. 

We are working on many new exciting features and further speed improvements that you can see in upcoming updates. Stay tuned for more!

If you have any questions, contact us through the support portal.

Until next time – cheers!

Disclosure: This blog may contain affiliate links. If you make a purchase through one of these links, we may receive a small commission. Read disclosure. Rest assured that we only recommend products that we have personally used and believe will add value to our readers. Thanks for your support!

About The Author

1 comment

  1. Sourabh Profile Pic

    I am trying to create a header and footer same as yours can you please tell me the guide to create something the same as yours.

Leave a Comment

Your email address will not be published. Required fields are marked *

Astra is Free. Now & Forever.

We believe creating beautiful websites should not be expensive. That's why Astra is free for everyone. Get started for free and extend with affordable packages.



Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form
Scroll to Top
Now choose your preferred
page builder addon
Choose your preferred page builder addon

Download is Just A Click Away!

Enter your email address and be the first to learn about updates and new features.

Download Free Astra Theme - Modal Popup Form