Astra 3.7 - Global Color Palette, Button & Typography Presets

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:

Global Color Palette – A new dynamic color system: Create palettes and control colors across your entire website from one place.
Typography Presets: Choose from beautiful and effective typography combinations and apply them to the entire website with a single click.
Button Presets: Pre-built designs to style up your website buttons quickly and easily.

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.

Default Global Color Palette Settings

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. 

Global Color Palette - Linking Colors and Settings

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. 

Gutenberg editor with Astra color palette

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

Astra Global Color Palette and Elementor

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

Astra 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

Astra Button Presets

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!

Join 635,020 Subscribers

Get exclusive access to new tips, articles, guides, updates, and more.

3 comments

  1. Great update, especially on the color palette!

    Question about the buttons – If I want to use several different button style presets, like the Regular Button and CTA button? How would I go about saving several presets and using them as needed on the same page?

Leave a Comment

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

Scroll to Top

Download is Just A Click Away!

Be among the first to try the beta version of Astra’s Header Footer Builder. Filling the form will ensure you’ll be the first to learn about updates and features.

Download is Just A Click Away!

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