Introducing Astra 3.7 with Global Color Palette, Button & Typography Presets

The most significant update of the Astra 3.0 series is here!

The Astra theme is loved by millions of WordPress users as it allows you to build beautiful, feature-rich websites in minutes. With Astra 3.7 we aim to further our mission of making web design easy by introducing three powerful new features that provide streamlined visual controls site-wide.

Here at Astra, a core part of our DNA is offering a solid framework to build fast, high-performance websites. This update is another demonstration of that.

We hope these improvements will significantly cut down the time that you would otherwise invest by making manual changes to design elements such as fonts, colors, and buttons.

We are so excited to introduce the first beta of Astra 3.7 with powerful controls!

Those controls include:

Furthermore, the Astra Theme is one of the first default themes to implement theme.json for Gutenberg Color Palette. We are sure that you will love designing your website with these new controls and appreciate the ease they bring to your workflow.

Let’s take a deeper look at this update.

Build Your Own Color Palette and Use It Globally 

Let your colors do the talking!

Colors play an important role in building brand identity. Sometimes we might have more than one color scheme to match the website concept. 

But while applying colors in the traditional way you can choose only one color scheme. 

If you want to add your own custom colors, you have to manually add the color codes all over your theme to make it work. 

Well, all that changes with the Global Color Palette!

With this new dynamic way of applying colors, you can: 

• Curate your own color palette and use it across your site – Not only in Astra customizer but also in Gutenberg editor and Elementor editor. 
• Change a global color in one place and see it reflected on all the elements using that color.

How Global Color Palette can help you improve your workflow:

• It gives you the ability to create more than one color scheme for your website. Use one scheme for one area, another scheme for another, and so on
• Helps you to preset different colors for client websites
• Set a fresh look for your website for special events like Christmas
• Set attractive colors during sales 

Global Color Palette is very flexible to use and a huge time saver. You can set and customize the colors of your website easily from one place. 

Creating and Using Color Palettes  

With Astra 3.7, you can save your theme colors and apply them globally across the entire website. 

That could be dark colors, shades of your main color, festive colors for Christmas, or anything you like. 

You can create multiple color palettes and they will be available throughout the customizer color settings. You don’t have to remember the exact shade or color code. Just choose a color from your palette to complete the design faster. 

How to Create a Color Palette

Step 1: Visit the Astra customizer and go to Global > Colors > Base Colors.

Here you will see 3 color palettes with default colors. Each palette has 9 different colors. 

Step 2: Choose Palette and add your colors.

You can try creating palettes with different colors. Then you can choose different palettes with just a click and your website will instantly have a new look. 

Done! 

Link Static Colors To Global Colors 

With a color palette, you can set global colors and these will be available with all color settings in the customizer. 

You can also link color settings for various elements with global colors. So when you change global color, the connected element color will also be changed. 

How to Link Static Color on Global Elements 

Step 1: Consider we have set a static color for the headings. Edit the setting, and choose the color you want from the color palette.

As soon as you choose the color you will see a globe icon near it. This means your color is now connected to global color. 

Step 2: When you change a global color, it will change the color of all headings on your website. 

Astra Global Color Palette Inside Gutenberg and Elementor Editor 

Your chosen global color palette will also be available in the Gutenberg editor. So wherever you have color options in Gutenberg blocks, the Astra color palette will be available. 

Similarly for Elementor editor. The Astra color palette will be available with Elementor global colors.  

Read more about Global Color Palette here.

Set Up Website Typography in No Time With Presets 

Typography is another essential part of any website design. Suitable fonts create a better user experience as it impacts readability and it reflects your brand.

That’s why Astra now brings extra typography options to the customizer. You will find the new options in the customizer under Global > Typography > Presets. 

You can now quickly change the font family, size, and weight with just a click of a button and apply it globally in a matter of seconds.

Typography Presets include:

• Font Family
• Font Weight
• Font Size
• Line Height
• Text Transform

Read more about typography presets here.

Style Your Website Buttons With Presets 

Ever wanted to change the default button shape and style? Now you have prebuilt designs to do just that!

Astra integrates Button Preset that will make setting the style for buttons quick and simple.

In the customizer find the option under Global > Buttons. 

You can set styles from the Buttons section and all buttons throughout the site will have this style. 

Here’s a sneak peek of how it will work in the customizer.

Read more about button presets here.

Try Astra 3.7 Today! 

Astra Global Color Palette is a powerful control that makes color application easier than ever. 

Whether you are a beginner that wants to play around with different colors or a professional who wants to present different color schemes to clients, this feature is very useful. 

Typography and button preset are equally strong controls to manage the look and feel of your website in one place. 

With all these features, Astra makes it easy to maintain website color, typography, and button design. You can now edit designs faster and with less effort than before. 

Upgrade your Astra theme to v3.7 and Astra Pro to v3.6 today and try these awesome features! 

For any questions, reach out to our support portal. 

Let us know how you like this update in the comments below. 

Cheers!