In some way, we could say that Customizer is the heart of the Astra theme and your website. This is where you will find many important website settings and special Astra options for 3rd party plugins like WooCommerce and LearnDash.
The Customizer settings provide you with the easiest way to customize your website and make it stand out. In this guide, weโll cover the basics of using the Customizer and the options available with the Astra Theme.
Astra Theme Walkthrough Docs:
- Astra Theme Walkthrough
- This Is Your Customizer (currently reading)
- Style Your Website With Global Settings
- Build Your Header
- Find the Way With Breadcrumbs
- Set Up Your Blog
- Add Your Sidebars
- Build Your Footer
- Host Google Fonts Locally โ Performance Is the Key
- See Other Customizer Options
- How To Build Quick Sites With Astra?
- Getting the Most Out of Astra Theme
Astra Options
Astra provides a dedicated settings page in your WordPress dashboard under Astra. ย You can manage all controls related to the Astra theme and Astra Pro Addon here.
The Astra theme comes with a list of additional plugins and options specifically made to expand the theme’s functionality. You can activate only the options you need, which results in better website performance. Once activated, these options and settings will be available in the Customizer.
Since version 3.0.0 the Astra theme comes with the Header and Footer Builder. You can choose to use the legacy (old) header and footer or the new Header and Footer Builder by using the switch available at Astra Options. You can find more details with an explanation of all options available in this article.
Working with the Customizer
Your Customizer is located at Dashboard > Appearance > Customize.
On the top of the customizer in the left corner, you will find โXโ icon which closes the Customizer.
In the right corner, the โPublishโ button is located. Notice here that when you make any changes, a small โcogโ symbol will appear next to this button. Clicking on this symbol will give you options to publish, save the draft (and share a preview), or schedule the date when your new customizer settings will go live.
At the bottom, there is an option to hide the Customizer and see the website changes you made in full width. Also, here, you will find options to switch between desktop, tablet, and mobile simulators.
Switching your view allows you to see how your website will look on different devices. But, more importantly, it gives you the possibility of adjusting your Customizer settings for each view separately and make your website perfectly responsive.
Icons
Pencil – these icons are located on different elements in your Customizer preview. is a shortcut leading you directly to the Customizer settings for that element.
Back to default – these icons are located next to a certain option in the Customizer. Clicking on this icon will restore the default theme value for that option.
Responsive editing – these icons are located next to a certain option in the Customizer and they symbolize that responsive editing is available for this option. Clicking on it will circle between different views (desktop/tablet/mobile) allowing you to set separate values for each view.
Link Values Together – you can find these icons usually next to margin and padding options. Having this option active will sync all sides (top, right, bottom, left) to use the same value. To edit sides individually, deactivate this option.
Unit icons – many values can be used with different units. When these icons are present, they allow you to choose which unit would you like to use. For example, using 20 PX (pixels) of padding will always add the same space on all screens. Switching it to 20% will add space which will adjust to the size of the screen/element being used.
