Astra 文档

Disable Debug Mode – Starter Templates

While importing Starter Templates, does the popup says – 「Disable Debug Mode「. If yes, here』s why and how you can clear it.

Why?

This notice pops up if you have WordPress debug mode enabled on your website. This mode helps to catch all errors, notices, and warnings on your website. This might interrupt the import process.

How to Clear?

You can clear this by simply disabling debug mode on your website. To disable it, just add the following line of code in the wp-config.php file. Please add this code before the 「That』s all, stop editing! Happy publishing」 line:

define('WP_DEBUG', false);

Save the file and refresh the Starter Templates interface on the frontend. Try importing the template again.

What Is a Child Theme and How To Install It for Astra?

What Does Child Theme Mean?

A child theme is the exact replica of the parent theme that en-queues all functionalities and styles from the parent theme. The main use of the child theme is to allow customization in the theme files. Any changes you make on the theme files directly will be erased when you update the theme.

That is why we recommend using a child theme when you need to override any theme templates or add code for custom functionality. When you use the child theme, any theme customizations you make there will not be affected by the theme updates.

How To Install Astra Child Theme?

With Astra, you will get a ready-to-use child theme, so there is no need to create it yourself. To download and install your Child Theme, all you need to do is visit Child Theme Generator follow these steps:

Step 1 – Enter the name you wish to give your child the theme;

Step 2 – If you want to add your own branding, click on advanced options and where you can edit the Theme name, version, author, author URL, description, folder name, and screenshot;

Step 3 – Once done, click on Generate. The child theme you just generated gets downloaded on your computer as a .zip file.

Let』s Install Your Astra Child Theme Now:

Step 1 – Now that you have your child』s theme file, log in to your website Dashboard and navigate to Appearance > Themes > Add New;

Step 2 – Click on the 「Upload Theme」 (located on the top of the page), choose the .zip file of your child theme, and click on the 「Install Now」 button;

Step 3 – Activate the Child Theme. Keep in mind that though the Child Theme is the active theme, it can』t work without its parent theme – Astra. Thus, you need to have both themes (Astra theme and your Child theme) installed.

Feel free to copy any necessary Astra theme files in this child theme and customize them as you need, as not all of these will automatically be transferred to the Child Theme (for example, Additional CSS you might have added to your parent theme).

Here is a nice video made by Davinder on Learn @ BasicWP that explains the steps in detail.

Some Pro Tips:

If you would like to learn more about the child themes in general, check this nice article on Smashing Magazine.To load unminified files of the Astra theme, use SCRIPT_DEBUG Constant.

Related Links:

How to add custom code to child theme』s functions.php?How to edit style.css in a child theme?

How to use RGBA color picker?

There are several color formats you can use with the Astra Theme. Though you might be most familiar with HEX codes (e.g. #FFFFFF for white color), you might have noticed that your color picker offers also RGBA format (Red, Green, Blue, Alpha). We have added an RGBA color picker for most of the Customizer settings, to help you add transparency easily.

You can use the RGBA color picker on any color setting that supports it with just a few clicks:

Step 1 – Navigate to the desired setting that you wish to edit, and click on it to open the color picker;

Step 2 – Click on the icon for circling between the available color formats and set it to RGBA;

Step 3 – Once your format is set to RGBA, you can add your color by adding the color values or by dragging the picket on the color scale:

Note:

The selected color doesn』t change when you change the color format. When you change the color format, the color will be automatically shown in the selected format. For example, if you set the white color in HEX format it will be shown as #FFFFFF. If you switch to RGBA the white color will be shown as rgba(255, 255, 255, 1)

Step 4 – You can add transparency to your color by either sliding the transparency bar or by modifying the Alpha (a) value between 0 and 1:

Note:

Sliding the transparency bar will automatically switch your color format to RGBA.

Keep in mind that setting the Alpha value to 0 will make it completely transparent and not visible, while setting the value to 1 will remove the transparency.

Feel free to check the video below to see this feature in action:

Backup Your Website in Less than 10 Minutes!

Backups have an essential role in making sure that you never lose your website. Before major updates, customizations, or lodging a support ticket — we highly recommend you backup your website. So in case if something goes wrong, you will be able to restore it quickly.

Though most web hosting services offer backups, these are often out of your control (most often done periodically).

It』s important to be able to create a backup when you need it. This is especially true if you』re not using a staging environment (which we also recommend) to do WordPress, theme, or plugin updates or to test new features on your website – making a backup before any of these actions is highly recommended.

Below is a quick video walkthrough that explains how to backup & restore your WordPress website with UpdraftPlus. There is a free and paid version of the plugin. For this document, we will be using a free version.

Add Updraft Plus To Your Website

We』ll start by installing and activating the UpdraftPlus plugin:

Step 1 – Log in to your website and navigate to Dashboard > Plugins > Add New;

Step 2 – Search for 「updraft plus」 in the search bar on the top right side of the screen;

Step 3 – Install and activate the plugin.

Set Up The Plugin

Navigate to the Dashboard > Settings > UpdraftPlus Backups to set it up and start creating your first backup.

Let』s set up the plugin:

Step 1 – Click on the Settings tab;

Step 2 – Decide if you wish to schedule your backups for automatic updates or do you want to do it manually. You can also set how many previous backups you wish to retain. This is available for both 「File Backup Schedule」 and a 「Database Backup Schedule」;

Step 3 – Now you need to choose your remote storage option. This means that your backup will be exported to the remote location you choose (e.g. Dropbox, Google Drive, etc.). You are free to choose any available option;

Note: Though e-mail is an available option, we don』t recommend using this option as backups can become quite large.

Step 4 – Scroll down to the bottom of the page and click 「Save Changes」.

Depending on the remote storage option you choose, you might need to do an additional authorization step. If this is the case, you will get a notification with the authorization link on Step 4. The authorization is needed to confirm that the plugin has the right to access and save files to your remote storage.

Authorize the Remote Storage

If you chose the remote storage option that requires authorization, follow the instructions mentioned here to finish the setup.

In this example, we used a free Dropbox account that comes with 2 GB of free storage (at the moment of writing). Another free alternative is Google Drive which comes with 15 GB of storage.

Step 1 – Log in to your Dropbox account. If you don』t have one, you can easily create it;

Step 2 – Click on the link in the notification popup (mentioned previously). This will start the authorization process;

Step 3 – Click on the 「Allow」 button. This will authorize Updraft Plus to use your Dropbox account;

Step 4 – You will see the final setup screen with the 「Complete Setup」 button. Click it to finish the setup process and return to your website.

Below is a quick video walkthrough that explains how to backup & restore your WordPress website with UpdraftPlus.

Backup Your Website

Now that your Updraft Plus plugin is set, you can make your first backup. Follow these simple steps:

Step 1 – Navigate to Dashboard > Settings > UpdraftPlus Backups and click on the 「Backup/Restore」 tab;

Step 2 – Click on the 「Backup Now」 button to start the backup process. This will open a backup settings popup.

Step 3 – With the free version, you have the option to decide which files you wish to include in your backup (you can find these options when you click on the 3-dots menu) and whether you want your database to be included too. Also, you can send the backup file to the remote storage or save it locally on your server. We recommend that you keep all options checked:

Step 4 – Click on the 「Back Up Now」 button to create your backup.

Restore Your Website

If it happens that you need to restore your website from a backup (e.g. there were some issues with your website after updates), please follow the steps:

Step 1 – Navigate to Dashboard > Settings > UpdraftPlus Backups and click on the 「Backup/Restore」 tab;

Step 2 – Scroll down to the 「Existing Backups」 section. Here, you will see all backups you previously made.

Step 3 – To restore your website just click on the 「Restore」 button on the backup you wish to restore from.

Step 4 – On the next screen, select if you wish to restore just some of the files (e.g. Plugins, Database, etc.) or your whole website. Click 「Next」 on the following screens to finish the restore process.

Step 5 – When you initiate the restore process on your website, the Updraft will save a copy of your existing files and folders before restoring the website from a backup. You can review these files, and if you are satisfied with the restore, remove these by clicking on the 「Delete Old Directories」 button at the UpdarftPlus Backups:

How to Disable Comments on WordPress website?

Comments are a great feature for websites that can benefit from user discussions. Otherwise, you can disable comments to avoid spam or additional workload. This document will show you how to disable comments on your whole website and only on specific posts or pages.

Here is a quick video that explains how comments on any WordPress website can be disabled:

Disable Comments on Your Website.

You can disable comments on your website in a few simple steps:

Step 1 – Navigate to Dashboard > Settings > Discussion;

Step 2 – Uncheck the 「Allow people to submit comments on new posts」 option;

Step 3 – Scroll down to the bottom of the page and click on the 「Save Changes」 button:

Before you disable all comments on your website, keep in mind that several other options might suit your needs better:

Limit commenting only to registered and logged in users: activate the 「Users must be registered and logged in to comment」 option; Control which posts will be published by yourself: activate the 「Comment must be manually approved」 option;

If you unchecked the 「Allow people to submit comments on new posts」 option (comments disabled), the two options mentioned above won』t work.

Disable Comments on Individual Pages & Posts

You might need comments, for example, on your WooCommerce products, but not on your whole website. If you would like to disable comments on some or all pages or posts, you can set this individually. Please follow these steps:

Step 1 – Navigate to your Pages or Posts list from your Dashboard;

Step 2 – Click on 「Edit」 under the page or post name to open editor;

Step 3 – On the right side, in the document settings, scroll down to the 「Discussion」 section;

Step 4 – Uncheck the 「Allow Comments」 option, and Update the page or post.

Getting Started with Growth Bundle

This bundle is a great combination of plugins that help your business getting bigger. It offers more options to cover all of your clients』 requests.

Here is a quick introduction to all plugins that are available with Growth Bundle –

Astra Pro Features

Naturally, we start with the Astra Pro addon, which comes included in this bundle so you can use the full capabilities of the Astra Theme straight away. Combine Astra theme and Astra Pro with an extensive selection of ready-made Starter Templates and our Premium support, and you』re ready to amaze clients. Here is a getting starter article.

Premium Starter Templates

There are more than 100 free Starter Templates that you can use for almost any type of website, but from time to time, you just need that something extra to make it the perfect fit. For this reason, we included additional Premium templates that are available only with our Essential Bundle or Growth Bundles. Here is a setting starter article.

Ultimate Addons for Elementor or Ultimate Addons for Beaver Builder – Don』t Choose, Have Them Both!

With Growth Bundle, you have to choose Ultimate Addons based on your primary builder choice. The Growth Bundle comes with both, Ultimate Addons for Elementor and Ultimate Addons for Beaver Builder. Having both Ultimate Addons allows you to satisfy your various clients』 desires, builder knowledge, and specific requests that suit one builder more than another. Here are articles to get started with Ultimate Addons for Beaver Builder and Ultimate Addons for Elementor.

WP Portfolio

Show your work to attract clients or develop portfolios for them. Whether you want to show-case websites, images, videos, or maybe WooCommerce products, you can easily do this using the WP Portfolio plugin. 

WP Portfolio is compatible with major page builders like Elementor, Visual Composer, and Beaver Builder. Use customizable shortcodes to add a portfolio where you want it and just the way you want it. Here is a getting started article.

Convert Pro

Who doesn』t want more conversions on their website, right? Convert Pro is the plugin included in the Growth Bundle and gives your business a giant leap forward. Being that it』s one of the easiest and most effective WordPress popup plugins, it will help you build email lists, drive traffic, promote videos & offers and make the most of your marketing spend. 

You』ll love our drag 『n』 drop editor, giving you total freedom when designing your popups – just drag any element where you want it to show. Next to being fully responsive, popups can be separately designed to look just perfect for mobile devices.

Translate your popups using WPML, test different designs/forms with the A/B testing feature, and use our advanced targeting with triggers based on the user behavior to get the best results.

And if you provide these services for your clients, it』s good to know that you can use the plugin on an unlimited number of websites.  Here is the getting started article.

Schema Pro

Naturally, getting your website more visible and well ranked in the search engine result pages (SERPs) is a high-priority goal for almost any business. On the other side, you want to be visible for just the right users. 

Schema markup is a specific vocabulary for structured data that all the major search engines have agreed to follow. Structured data help search engines better understand what your website content is really about, instead of just indexing text without actual context. Also, this provides additional information like reviews, ratings, time, etc., and will make your snippet stand out from the rest.

Schema Pro makes it easy for you to add structured data without the complexity of manually adding code to each page. Here is a getting starter article.

Unlimited Website Usage

Whether you』ve chosen an annual or lifetime license, there is no limit to the number of websites you can create using all products included in your Bundle.

White-Labeling

Do you want to set up an additional income stream by offering administration and support services to your clients? White-Label and rebrand Astra theme and all of the plugins and addons in your Bundle in just a few clicks.

White-Labeling will allow you to add your company』s brand on Astra Theme and plugins, and replace support contact details with yours. This way, you can offer our products as an integral part of your services and be sure that your clients refer to you with all potential needs. At the same time, you will still have the full support of the Astra Team behind you.

SkillJet Academy

Meet our online learning platform! If you』re looking for new skills to learn, improve your skills, or provide training for your employees, check out SkillJet Academy online courses. We have vetted and selected only industry veterans to create our courses, covering everything from the basics of building a website to marketing, client relationships, and much more. 

Our Future Plugins

Brainstorm Force started its journey more than twelve years ago. In this time, we brought the Astra Theme to the world of WordPress and more than 50 free and premium plugins. As our Astra Growth Bundle customer, you will get access to most of our plugins we will build in the future at no extra cost.

Premium Support

Our Support Team is always there for our users, as we strive to provide excellent service continuously. As our Growth Bundle user, the support tickets you open will always be the highest priority, giving you security and the fastest support when using our products. 

We try to provide support to all of our users as much as we can. However, our complimentary support can only cover questions related to our products』 existing features and fixing bugs that our users might encounter. 

As our Growth Bundle user, you are entitled to the full scope of our premium support. Though we do not offer help related to customizations or providing custom code specific to your needs, you can always rely on our support to give their best to meet your needs and help with any issues in the quickest way possible. Premium support equally covers issues like the basics of using our products and building websites and helping you solve more demanding issues. Premium support can be related even to Astra theme integrations with 3rd-party plugins (like WooCommerce, LearnDash, etc.) or extending some capabilities of Astra theme and integrated plugins using our existing custom CSS and filters base. 

With our Premium Support, we ensure that our team members stay with you until your issue is resolved. Even if solving the issue takes some time or help from our developers, your dedicated support team member will be monitoring the whole progress, follow up, provide temporary workarounds (if possible) and keep you updated until the solution is provided. 

You can drop your queries at support portal.

Extensive Training

Our products are simple to use and developed with user-friendliness on our minds. But as they are continually evolving, we want to make sure that both you and your colleagues have all the information at hand at any time. We regularly update and expand our Knowledge base and create detailed guides, walkthroughs, and blog articles.

Our YouTube channel will be your treasure chest; videos cover many topics, from WordPress basics and using Astra products to advanced features and products. Subscribe to our Brainstorm Force channel.

Besides, as mentioned, our SkillJet holds high-quality courses that will help you push your knowledge and business forward. 

Finally, our products are supported by a substantial online community ready to help and share knowledge at all times. Join some of our Facebook groups to become a part of Astra Comunity:

Astra WordPress Theme CommunityAstra and Elementor UsersUltimate Addons for ElementorUltimate Addons for Beaver BuilderUltimate Addons for Beaver Builder Users

Frequently Asked Questions

1. Should I download all of these plugins?

You do not need to download and use all plugins at a time. Based on your website』s requirement, you can plugins from the list. With Astra theme you can start using Astra Pro addon. Then download and use others plugin as required.

2. Is there one download for Growth Bundle?

No. Growth Bundle is a collection of different plugins. You would need to download each plugin separately and upload it to your website.

3. What to do with the downloaded files?

You can upload them to your website just like any other WordPress plugin.

What is a Favicon or Site Icon?

A favicon; also known as Site Icon is what represents your website in the browser tabs, bookmarks and many other important places. Below are some examples:

To add a favicon for your website:

Prepare image file. It must be square, and at least 512 pixels wide and tall.Go to Administration Screen – Appearance > CustomizeClick Header > Site IdentifyClick Select Image at Site Icon section, upload the image file you prepared in the above step from Upload Files tab screen, and click Select.

If you wish to find out more about editing your Site Identity please visit the following document: 

Heder Footer Builder

Since version 3.0.0. Astra theme comes with the Header Footer Builder already included. If you decided to switch from the legacy (old) header to the Header Builder, the location of your Site Icon settings is slightly different. To locate the Site Icon settings when using Header Builder navigate to Appearance > Customize > Header Builder and add the 「Site Identity & Logo」 element to your header. Click on the element to open the settings. Within these settings, you will also be able to set your Site Icon. Check more details in the related article.

How to Add Logo, Favicon and Site Title with Astra?

To learn more, visit WordPress Codex.

Responsive Editing With the Astra Theme

The importance of mobile devices, though already enormous it』s getting higher still. Thus, when designing your website, it』s essential that your design is responsive and stays consistent on all screen sizes. This document will help you use the Astra Theme built-in responsive editing options.

With these options, you can adjust settings throughout your website so it looks perfect on Desktop, Tablet, and Mobile.

Responsive Editing

Having that the difference between desktop and mobile phone screens is quite big, it is very hard (almost impossible) to create a single website design that will look perfect on both and all screen sizes in between. This is why you must design your websites to be responsive.

Responsive editing means that you need to modify your website design separately for desktop, tablet, and mobile to make it look equally good on all of these screens. Mostly, your website content is added using Page Builders, and all of them are equipped with responsive editing options.

You will be able to do the same for the most of the theme-related settings as Astra comes with these options built-in. Ina ddition, It』s easy to know which options can have responsive editing enabled as you will see a responsive editing icon next to them.

Previews

When your website is responsive, the browser will display different designs following the breakpoints. The breakpoint is the specific screen width, set to serve as a point which the browser uses to distinguish desktop, tablet, and mobile screens.

You can switch between Desktop, Tablet, and Mobile preview to edit and preview your website design on different devices. To do this, you can use the responsive editing icon:

Step 1 – Navigate to the setting that you want to edit. Look for the responsive editing icon next to it;

Step 2 – Click on the icon to circle between desktop, tablet, and mobile device settings – choose the preview you need to edit.

Alternatively, you can change the preview by using the default buttons at the bottom of the Customizer.

Size Units

The important factor in responsive design is the size unit being used, as each unit reacts differently to changing the screen size.

There are three available units: PX, EM, and %. So what is the difference between these three?

The pixels (PX) are often used for their precision. Having that 1px is a relatively small unit, you can easily adjust the size just as you imagined. Also, it』s an absolute unit, meaning that it always appears precisely the same and is not influenced by other website elements. For example, a margin set to 20px will always take this same space on any element.

On the contrary, both EM and percentage (%) are relative units. This means that they change depending on their parent elements (like body, header, footer, sections, rows, columns, widgets/blocks, etc.):

EM is a unit relative to the parent element font size. For example, if you set your heading (parent element) font size to 20 px, setting spacing of 1 em for that heading will be equal to 20 pixels. Changing the font size will change the spacing automatically.A percentage (%) is a unit relative to the parent. This means if you set your logo (parent element) width to 150 px, setting the 20% margin will add spacing of 30px. Thus, If you change the width of your logo, the spacing will adjust proportionally.

It』s important to mention that some Customizer options are using only a specific size unit. Accordingly, these options don』t have the possibility of choosing the size unit.

Responsive Settings With Astra Customizer

Responsive settings are available in almost all Customizer options (only Sidebar and Performance options have no responsive settings). These are the types of settings that you could use with the responsive editing capability:

Font Size & ColorsBorder ColorIcon Size, Color, and SpacingBackground Colors, Overlays, and ImagesPaddingsMarginsAlignments

How To Do This?

You can add responsive edits to the Astra Customizer options, by following these general steps:

Step 1 – Access the Customizer. When accessing the Customizer, it will be by default set to the desktop preview;

Step 2 – Navigate to the location of the option you wish to edit;

Step 3 – Using the responsive editing icon next to the settings, circle between the desktop, tablet, and mobile preview to select the one you wish to edit. We would suggest starting from the desktop as some settings could be automatically inherited by smaller viewport sizes (for example, font or background colors);

Step 4 – Edit your settings separately for desktop, tablet, and mobile. Click 「Publish」 to apply changes.

As an example, we will show you how to make your Breadcrumbs look different for each viewport size:

Step 1 – Navigate to Appearance > Customizer > Breadcrumbs and activate your Breadcrumbs in the General tab;

Step 2 – Click on the Design tab and do your settings as needed. For this example, we decided to have the Breadcrumbs background color set to black and font color to white for the desktop preview:

Step 3 – Switch to Tablet preview either by clicking on any responsive icons on available options or the Table Icon at the bottom of the Customizer;

Step 4 – Add settings for the tablet. In the screenshot below, you can see that in our example, we decided to have a white background with Breadcrumbs font set to black for tablet:

Step 5 – Switch to mobile preview, and apply changes for your mobile settings. In the example, we decided to change only the color of the last item in the breadcrumbs path (the current page; 「Text Color」 setting) to make it stand out on mobile. We also added top and bottom spacing for mobile.

Responsive Header and Footer

With Astras』 Header Footer Builder, you can also make your header and footer responsive and have them look differently for desktop and mobile devices:

Set different Logo WidthSite Title & Tagline Font and ColorSet different Header and Footer HeightsAdd different widgets to your header or footer for each viewport size.Reorganize and position the elements differently

Hiding Elements

The 「Hide on」 option is available for all header and footer elements. It』s also available for each header and footer section (Primary, Above, and Below). You can hide the element or header/footer section on any of the previews using this option.

One of the examples where this option could be helpful would be showing different active elements for tablet and mobile preview in your header or footer: Step 1 – Navigate to the header or footer builder (Customize > Header Builder or Customize > Footer Builder). Since your header and footer are linked for tablet and mobile viewports, these viewports will have the same elements active;

Step 2 – Switch to the viewport where you need to hide an active element;

Step 3 – Click on the element, end enable the 「Hide on」 option to hide it.

Font Selection

Typography is probably the most important aspect of a well designed, UX focused website. So Astra offers various typography controls and options for fonts. In this article, let』s see what are the options for fonts in Astra.

System Fonts

Typography options in the customizer.

Astra, out of the box uses System Fonts. As System fonts are installed and available on user』s computers, they don』t rely on third-party services and load fast.

Depending on the user』s device and operating system, the theme loads one of the fonts from the list below. For this, in cutsomizer 「Inherit」 option should be selected.

Apple System, Blink Mac SystemFont, Segoe UI, Roboto, Oxygen Sans, Ubuntu, Cantarell, Helvetica Neue, Sans Serif

Whereas it also offers the option of the System fonts below:

Halvetica, Verdana, Arial, Times, Gorgia, Courier

Google Fonts

Google Fonts is the largest directory of free and open source web fonts. At the time of writing this article, it offers 848 font families; and Astra has all of them built-in.

Before releasing each update of Astra, our build process automatically checks all Google Fonts and lists them in Customizer options. If there is a Google Font that you can』t find in the options, probably the font is very new and it will be included with the next update of the Astra theme.

Typekit Fonts

Typekit is another directory that offers free as well as premium fonts. To use a font from Typekit with Astra theme, we have built a free plugin called 「Custom Typekit Fonts「. Once installed, just enter your unique Kit ID; and it will automatically list all the fonts from your Typekit account to theme customizer options for you to select. No code required!

Custom Font Files

If you have a custom font file that you would like to use for your website, you can use our free 「Custom Fonts」 plugin. After installing it, you can upload your font file from the WordPress backend and see it available in the Customizer options. Again, no code required! You can check our article on how to use the Custom Fonts plugin and follow simple step-by-step instructions.

After all, fonts do matter, right?

Premium Starter Templates – Install and Activate License

In the Starter Templates library, templates with PREMIUM tags are accessible only to those who own the Essential Bundle or Growth Bundle.

Once you purchase Essential Bundle or Growth Bundle, follow the steps below to install the plugin and activate its license. Activating the license will allow you to import starter templates with the 『Premium』 tag.

Step 1 – Login to your store account.Step 2 – Visit Account > Downloads. Step 3 – Choose to download Premium Starter Templates plugin.

Step 4 – From your WordPress dashboard, navigate to Plugins > Add New > Upload Plugin and upload zip from the above step.

Once you activate the plugin you will have to activate the license key.

Step 1 – Visit store account and go to Account > Licenses and copy the license key.

Step 2- Navigate to WordPress dashboard > Plugins > Installed Plugins > Premium Starter Templates and click on Activate License. A popup window will appear where you need to enter the license key.

Note: The Premium Starter Templates is a different plugin than the Starter Templates plugin that is available for free on WordPress.org.

Once you are set with the plugin start importing your favorite template.

Related Docs –

How to Import Complete Site with Starter Templates?How to Import Single Page Starter Templates?