分类： 入门

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.

Using Language Switcher Element with WPML

Astra Pro 3.1 introduced a new element in the Header Footer Builder – the option to add a Language Switcher.

This feature allows you to add navigation for your multilingual website in the header or footer. This article will help you understand how to use it with WPML and other third-party translation plugins.

Below, you will find the steps to add and configure the Language Switcher element in the header. You can follow similar steps to add it to the footer.

Step 1 – In the customizer, visit Header Builder. Click on the section where you wish to add navigation for different languages. From the element box, click on the Language Switcher element.

Step 2 – When you open the Language Switcher settings you will observe two options:

WPMLCustom

Note:

The name of the header 「Logo」 element was modified and the name you would see in your Header Builder is now 「Site Identity & Logo」

You will only see this option if you have WPML active on your website.

Language Switcher has in-built support for the WPML plugin. It will automatically fetch available languages from WPML and display them as navigation.

If you are using s plugin other than WPML, you can choose the custom option and add a URL for the translated version of the website.

Language Switcher with WPML

Once you add Language Switcher to the header, choose the type – WPML.

This will automatically fetch the languages you added with WPML.

If you wish to add more languages, you can add them with WPML settings. For this, visit Dashboard > WPML > Languages > Site Languages > Add / Remove languages. From the list of languages select the required ones and click on save.

All selected languages from the step above will be available in your Header Builder with the Language Switcher.

You can customize the look of the language navigation with following options:

Layout: You can either display all languages in a horizontal or vertical manner. Horizontal layout mostly applies well to the header while the vertical layout is often better suited for the footer. Show Country Flag: This will display flags for countries associated with the chosen language. It helps users to quickly spot the preferred language they are looking for. Show Name: This will display the full name for the language. Show Translated Name: This will display the translated names for all languages when a specific language is selected. For example – you added 4 languages, let us say English, French, German, and Hindi. When you select the German language, all languages will show their translated names in German. Show Language Code: This will display the language code for each language. For example – English (en), French (fr), German (de), and Hindi (hi).

Under the Design tab, you can manage spacing, typography, and the size of the items.

Language Switcher with Other Translation Plugins

If you are using any plugin other than WPML, please follow the below steps to add language navigation:

Note:

The name of the header 「Logo」 element was modified and the name you would see in your Header Builder is now 「Site Identity & Logo」

Step 1 – Navigate to Customizer > Header Builder > Language Switcher. Here, select the language from the dropdown and click on the 「Add Language」 button. You can repeat this step for all languages you wish to add.

Step 2 – Next, click on the language bar for a specific language. This will expand the language settings, allowing you to change its label (if needed) and set the appropriate URL. This URL is actually a translated version of your website (like https://www.yoursite.com/en/) and you can find it in your translation plugin. Just paste the URL there for the respective language.

Step 3 – You can manage other things from the above settings like the horizontal/vertical layout, show country flag, and display language name.

Step 4 – Under the Design tab, you can manage the spacing, color, and typography for the items.

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.

How To Fix Horizontal Scrollbar on Mobile When Using Elementor?

Did you test your Elementor website on a mobile device and discover that it goes all over the place when you start scrolling down? Is it showing strange gaps on the sides while moving your finger left and right and an unwanted horizontal scrollbar?

If this is the issue you are experiencing, this document will show you how to fix the horizontal scrollbar issue on mobile devices.

Why Is This Happening?

This issue happens when there are one or more elements on the page that create an overflow. 

What』s overflow? With some Elementor custom design settings, you can 「push」 the widget content out of its column area. This part of the content that is found outside of its column area is called overflow. 

When either the widget content is too big or positioned to exceed the screen width on mobile devices, this creates a horizontal scroll issue. To also show this piece of content to website visitors, your browser will need to add a horizontal scrollbar. 

How To Fix This?

The horizontal scrollbar issue on mobile devices can be fixed by setting overflow to hidden. You can do this by using the Elementor Section settings or by adding CSS code.

Method 1: Fix Overflow Issue With Elementor Settings

You can use the Elementor section settings to set the overflow to hidden. If you have more than one section which creates overflow, you』ll have to do this for each of those sections. If this is happening on more than one page, you』ll have to repeat this on other pages.

Let』s show you how to do this:

Step 1 – Navigate to the page that has the overflow issue and click on 「Edit with Elementor」;

Step 2 – Click on the 「Edit Section」 option to start editing the section with the overflow;

Step 3 – Under the 「Layout」 tab, scroll down to the 「Overflow」 dropdown and select the 「Hidden」 option;

Step 4 – Click on 「Update」 to save changes.

That』s it. You solved the issue for this section. 

Keep in mind here that this removes the overflow on all sides of the section. Thus, if you deliberately set some overflow on the top and bottom of the section, these will become hidden too. 

In this screenshot, you can see the overflow areas that got hidden:

Method 2: Fix Overflow Issue By Adding CSS Code

There are two cases in which this method would help you more than using the Elementor options:

You need to keep the overflow on the top and bottom of the section while hiding it on the sides to avoid horizontal scroll;You have too many elements with the overflow issue, and you need a solution that would apply to your whole website.

Please follow these steps to remove overflow using a custom code:

Step 1 – Navigate to Appearance > Customize > Additional CSS;

Step 2 – Add the following CSS code:

html,
body{
width:100%;
overflow-x:hidden;
}

Step 3 – Click 「Publish」 to save changes.

This method will remove all overflow on the left and right sides for all of your sections and pages. Also, it will keep your top and bottom overflow still visible where needed. You can see it in this video:

Revamped Astra』s Customizer

After the release of Astra 3.0.0 having improved the Customizer speed, we have now completely revamped Astra』s Customizer bringing you a whole lot of additional options. We』ll name just a few of the great Astra』s Customizer changes that came with Astra 3.1.0. like refined customizer and sharper fields, color pickers, and redesigned General/Design tabs. Continue reading for a detailed review.

Color Picker UI Updated

You will now find the Color Picker to be right outside having Normal/Hover color fields rather than inside the edit boxes and under the Normal and Hover color sections.

This means that you can modify the color of the respective options much faster with fewer clicks.

Old Color UI Options – Normal and Hover

New Color UI Options – Normal and Hover

Spacing Control Design Updated

The Spacing control options include the Padding and Margin options. We have updated this design to give it better and cleaner look.

Old Spacing Option

New Spacing Option

Cleaner UI with Divider between All Controls

We added spacing and dividers between all controls, dividing them into sections. We did this to make the Customizer more intuitive and to make it easy for users to understand and use the options.

Drag-Drop Meta Structure Updated!

We simplified the way Drag-Drop meta structure so it looks cleaner.

Old Drag-Drop Structure

New Drag-Drop Structure

Other improvements

Apart from the above mentioned changes you will notice some additional major improvements.

Slider Input Control Updated

The slider input control has been updated with the WordPress Range Control option.

Dropdown/Select Groups converted to Multi-button Options

We have reduced the number of clicks need to set any dropdown option. Now you can simply select the options from the Multi-buttons and set up your pages in no time. Also, it gives you an overview of all available choices straight away.

Checkbox converted to WordPress Toggle Control

We moved from the Checkbox options on the left to the default WordPress Toggle Control options for quickly enabling and disabling options.

Old Checkbox Options

New Slider Options

Align Select field converted to Multi-Button control

Just as the above Select options were updated we have converted the Align fields to a Multi-Button control for quicker selection.

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.

How to Install Starter Templates (Free) Plugin?

Starter Templates plugin is available in free as well as premium version. Read the basics of the plugin here.

Let』s see how you can install a free version of this plugin –

Step 1 – From your WordPress dashboard, visit Plugins > Add New and search for a plugin 『Starter Templates』.

Step 2 – Choose to install the plugin and activate it. Step 3 – Find plugin settings under Appearance > Starter Templates.

In case you wish to install the Premium Starter Templates plugin, here are the steps.

Related Articles –

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

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.

System Requirements – Starter Templates

Here are system requirements to run Starter Templates plugin smoothly –

WordPress version 5.0 or above PHP 7 or aboveMySQL 5.6 or above/ MariaDB version 10.0 or aboveWP Memory limit of 128 MB or greater

Note: If you are not sure if above versions are running on your server, we recommend you to contact your hosting provider.

Along with above system requirements here are few more that you would need to work with the plugin –

ServersIf your website is hosted by WP Engine, you might need to add SSL to your website to avoid saving issues.If you use SiteGround or GoDaddy, make sure that they modify the SubstituteMaxLineLength of your server for you.

X-Frame OptionsIt has to be set to 「same origin」 to avoid editing issues. Please ask your host to do this for you.

PHP Z-Lib ExtensionIt is preferable to have PHP Zlib extension enabled on your server. Please ask your host to enable this for you, if it is not.

DeviceYou will need desktop computers or laptops to edit templates. It is not possible to edit them with mobile phones and tablets.

BrowsersUse Chrome, Firefox, Safari, or Microsoft Edge version 79 or greater.

Know Your Website Information with Site Health

WordPress offers Site Health feature that displays technical information about your website. Option can be found under Tools > Site Health. Here is a list of things you can see –

WordPressDirectories and SizesActive ThemeInactive Themes Active Plugins Inactive PluginsMedia HandlingServer DatabaseWordPress ConstantsFilesystem PermissionsAMP

For example – Lets say you wish to know current PHP version of your site. You can see it as highlight in screenshot –

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.