Disclosure: This post contains affiliate links. We will receive a commission if you make a purchase through our affiliate link at no extra cost to you. We are a participant in the Amazon Services LLC Associates Program, which is an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com. As an Amazon Associate I earn from qualifying purchases. This website is independently owned and operated. We are a website which receives compensation from the companies whose products and/or services we review. The opinions expressed here are our own. Please read our full disclaimer here.

Transcript of Video:

Today we’re going to be looking at Astra global features.

Now at this point, I assume you have installed Astra and may even have imported a starter site from the Astra plugin. If you haven’t done this already, please check out my other video on how to install Astra.

One thing you may have noticed if you install a starter site, is that some of the global options are set once you have selected your template for your website. For instance, the colors and fonts you can import from the template itself, or you can make adjustments as you are installing it.

To get to the global options for Astra, you can either select customize at the top of the web page itself if you are previewing it, or if you are in the WordPress dashboard you can click on appearance and then customize.

Once you’re in the customize section, scroll down to global.

We’ll take a moment to browse the typography options here. Notice there are presets that change all of the text options on the site.

If you scroll down, you’ll see options to change the body font, which is essentially the paragraph font, where you can play with each option to see what you prefer. There are adjustments for text size, the spacing between lines in a paragraph, the weight or thickness of the font, and options to transform the text with capitalization, all uppercase or all lowercase lettering.

The headings option allows you to change all of the heading settings at one time. So any main titles and subtitles on your page is what this adjusts all at once. So as you can see both the small heading above “Let’s Bring the Spring to Your Home” as well as the title itself and “New Plants” down below have all capital letters.

Now if you want to change each individual heading setting, you can click on the edit pencil for each one listed below. So for example, I’ll go into H2 heading and edit just this one, and you’ll see the adjustments I’m making where it says “New Plants.” I can adjust the size, thickness, transform the text or alter the line spacing within this option, and it will only affect the H2 heading across my site.

Going back to the global options, let’s take a look at colors. There’s a couple of presets that are already imported from the starter template, and all the colors below can be adjusted individually.

Changing the colors in the color palette should also change these colors listed below as long as you see the globe symbol. That means that particular thing, the theme color, link color, etc. is attached to that color listed in the global palette.

So for instance let’s adjust this first color in the global palette, and scroll down the page until you see where it adjusts. We see here it adjusts the colors in this section, so I’m going to make this black. This second color here, we can see it changes the color of the button over to the right. And this third color changes the font color for the products below, and the fourth one changes the color of the price. If we scroll down, we can see it also adjusts the text in the paragraph below as well as these headers.

Now let’s take a look at the button options. There are button presets where you can choose to have either a dark or light background color, and square, slightly rounded, or round edges. Then the text color is pretty self-explanatory, as well as the background color. Now you may wonder what the difference is between the two circles listed for each. The left circle is what it looks like without you hovering over the button with your cursor. The right circle is the color it will be if you hover over it with your mouse. We can see it change by hovering over the button like this.

Changing the border width adjusts that space around the button, and if I want to make it look like the button has a shadow, I can leave the border width boxes empty for top and left, and change the bottom and right settings. I’m going to change the border color down here so you can see a bit more clearly how it adjusts that space.

Adjusting the border radius creates that rounded shape. So in case you aren’t keen on the button presets, you can adjust that look here. And now we can adjust all the different font options in this space below. We can change the actual font style, transform the text to all caps if we wanted, and adjust the line height and letter spacing.

Next is the padding around the text within the button itself. You can adjust for these similarly to adjusting for the border around the button.

The block editor has presets for block padding, and you can go into custom to set specific sizes for the paddings of these blocks. You may not see the legacy option listed and that’s okay, if you are a new user you might just see the other options listed here.

And then finally if we go into the container settings, we can adjust the width and layout of your pages and posts.

Now keep in mind for the sake of this video, I have been using the FREE Astra version along with their plugin for Starter Templates. If you want to have more customization options for your website, be sure to check out my link below for Astra Pro. They give you a 14 day money back guarantee (at the time of this post), so be sure to check them out in my affiliate link below.

And if you are new to the blogging world, be sure to check out my FREE ebook, Website & Blogging Basics: Tech Edition, where I cover the basics of hosting, domains, and website terminology. I’ll put a link in the description below. Thanks for watching!

Scroll to Top