入门归档 - 第 19 页共 38 页

How to Install Astra Pro Plugin?

A Pre-requisite –

Please make sure you have the Astra theme installed on your website.

In order to install the Astra Pro (Addon) Plugin on your WordPress Website, you will have to follow the steps mentioned below.

Step 1: Log in to our store.

Step 2: Go to Accounts -> Downloads

Step 3: Download the Astra Pro plugin. You』ll get an installable zip file on your computer.

Step 4: On your WordPress website, install the zip file like you install any other plugin.

Step 5: Activate the plugin.

Step 6: Activate the Astra Pro Addon license.

You are all set to create wonders with the Astra Pro Addon!

How To Create Mobile Header With Astra Header Builder?

Astra Header Builder provides a dedicated option to design a mobile header. These options are available with the Astra theme out of the box, while advanced configuration options are available with Astra Pro.

Refer article here to know how to get started with Astra Header Builder.

Editing Mobile Header

Once you switch to the Header Builder, visit the Customizer.

Step 1 – Click on the Header Builder to start editing.

Step 2 – Switch to Tablet or Mobile View in the Customizer.

Step 3 – You will observe a separate dedicated box for a mobile header in the visual header builder. Off Canvas section allows you to configure header items inside the toggle button. While visual builder on the right side lets you configure all parts of the mobile header – you set separately your Primary header (middle), as well as Above, and Below headers. Usually, you would have your logo and toggle button in your Primary header here, but there are actually no limits to where you can place elements in your mobile header.

Step 4 – In the Off Canvas section, click on the plus sign to add header elements like the primary menu, button, widgets, HTML, and so on. The Off Canvas section is the one that is shown when the user clicks on the toggle button.

Step 5 – Click on the gear icon to set mobile header type, color, and other options.

You can choose the following options for header type –

Flyout Full-Screen Dropdown

Under the Design tab, you will find color options.

Step 6 – If you need to edit the Toggle button, click it and start configuring.

Step 7 – You can enable Transparent Header for mobile from customizer under Header Builder > Header Types. Choose to display it on mobile and configure it.

Similarly, With Astra Pro, you get an option for Sticky Header.

Primary Header

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.Now you will be able to virtually create the Primary Header by adding Logo, Menu, other Elements to the middle row of the Header builder. Do check the below video for in-depth details.

Below are the settings which are applicable if you are below Astra 3.0.0 —

Primary Header is a default Astra header. It will display a logo and a primary navigation menu. This header can be customized with the following options available in customizer under Header > Primary Header.

Layout

This setting will give three different positions for the logo in the header.

Logo Left – Logo will display left to the menu. This is a widely used header style. Logo Center – Logo will be placed above the menu in the center. If you have long menu you can opt for this layout. Logo Right – Logo will be placed at the right of the menu.

Width

This allows you to set header width either to – full width or to the content width.

Full Width – This will stretch the header content to both ends according to your browser size.Content Width – It will set the content of the header to container width set under Global > Container > Width.

Border

It will add a nice border at the bottom of the header. You can choose a width and color for this border.

Mobile Header – Layout

On responsive devices, the menu converts into a hamburger. In the primary header, on responsive devices, only the logo and hamburger menu will display. You can manage the position of the logo with respect to the hamburger menu.

In case you have a big logo you can opt for Stack where hamburger will display below the logo. Else Inline menu and logo will look fine with a small logo.

Colors & Background Module

Design and Aesthetics are essential parts of any website. With that, the Astra theme already comes with modern and various color options. If you want to expand your options, however, the Colors & Background addon with the Astra Pro plugin can give you more control and options to your theme.

This premium feature is available with the Astra Pro plugin. So in order to use this addon, you need to have the Astra theme installed along with the actual Astra Pro plugin.

Astra theme (free) gives some basic color options. While Colors & Background Module with Astra Pro plugin adds more options in the customizer.

Here are steps to activate the add on and explore the premium settings –

Step 1 – Make sure you have the Astra Pro and WooCommerce plugin installed and activated.

Step 2 – Activate the addon from Appearance > Astra Options > Colors & Background.

Step 3 – After activating, the module will add additional color options for various sections in the customizer ( Appearance > Customize ).

Below is the detailed list where you can see newly added color options in the Customizer:

Global > Colors > Content Header > Site Identity Header > Primary HeaderHeader > Primary MenuBlog > Blog / ArchiveBlog > Single PostSidebar

1. Global Colors

The Astra theme itself provides basic global color options as mentioned here. In addition to this, the addon will also enable the following options –

Content Background – With this, you can add a background image and color to the container, i.e., any area where you add text.Headings – You can set colors for each heading, H1 to H6, from one place.You will also find the responsive option enabled for the Content Background.

Note: Content Background will be visible only with Boxed and Content Boxed container layout.

2. Header

Separate color options will be available under the Header tab for –

Site Identity- Enable displaying site title/tagline and you will observe color options.Primary Header- Set background and color for your header.Primary Menu- Set colors to the menu and submenus on normal, hover (color of the menu item when pointer moves over it), and active mode (color of the menu item that is currently active – the page you』re currently viewing).

3. Blog

Blog / Archive – Along with the post title and meta, this will add color options for the Archive Summary Box. This box will appear on an archive page like categories, where the title and the description of the archive page will appear.

4. Sidebar

You』ll get color options for your sidebar.

You can even manage the Sidebar』s Title Color, Text Color, Link Color along with the Background options.

How to Add Button as Last Item in Menu?

With Astra theme Version 1.6.0, a new option for the Last Item in Menu is introduced – Button. With this, you can easily put Button as the last menu item for the navigation menu in the header.

Note:

We have recently released the Header Footer builder in Astra version 3.0.0, due to which you will find some new changes. Please refer to the following article for the same.Now, you will be able to add the Button element visually using the Header builder as the Last Element and makes further changes as previously.

Following are the settings for Astra theme below version 3.0.0.

From WordPress Dashboard a setting can be found under Appearance > Customize > Header > Primary Menu > Last Item in Menu.

Choosing Button from Last Item in Menu dropdown will offer the following options –

1. Button Text – Add a text2. Button Link – Give a link for the button3. Button Style – With this option button can be displayed differently for different headers like primary header, transparent header, sticky header (option with Astra Pro). Below is the detailed description –

Button Style

1. Theme Button: Set a button style same as a theme button style. Choose a Theme Button option and click on the Customize Button Style link. The link will take you to the default button style options.

If you wish to set a similar style for all button on the site and different style just for the header button choose Theme Button option and click on the Customize Button Style link.

The Customize Button Style will redirect you here –

2. Header Button: This allows you to style the header button differently than a theme default button. It will offer the following options under the Header Button section –

Colors – Set the Text Color, Background Color and also on Hover.Border – Set the Border width, Color, Hover Color, and Border Radius.Padding – Set the overall Padding for the Header Button.

Note: Header button styles cannot be set unless the option Header Button is chosen for the Button Style.

Unable to find 「No Toggle」 Menu Style?

From the update of Astra Addon 2.6.0, we』re deprecating the No Toggle menu style.

For existing users –

Those who have already set No Toggle menu style –

The style will be active, and won』t have any effect.But as soon as, user change menu style to anything else ( Fullscreen / Flyout / Dropdown ) the No Toggle menu style will be removed from their end.

For new users –

By default this style won』t be visible for selection.

And if in case, you want to get back the No toggle menu style, here is a filter for this –

add_filter( 'astra_no_toggle_menu_style_deprecate', '__return_true' );

How to Add Background Images?

Astra version 1.3.0 and above provides a feature to add background images to various sections of the site.

You can enhance the design of the Body, Header, Content, Sidebar, and Footer of your website with this option. In addition to the previous background color option now you can see the background image option as well.

Where can I find the option?

From your WordPress dashboard navigate to Appearance > Customize and under various areas, you will find settings to upload background images

Where can I add a background image to Astra theme?

With Astra theme, you get an option to add a background image to following areas-

Body (?)Footer Widgets (?)Footer Bar (?)

Background image for Astra Pro Modules

In addition to Body, Footer Widgets, Footer Bar section, you get an option for following modules of Astra Pro –

Primary Header (?)Above Header (?)Below Header (?)Content (?)Sidebar (?)Note: Background option might be visible only if you have Colors & Background module enabled from Astra Pro.

Options for Background Image

Background image option allows you to choose an image from media library or you can upload a new file. After uploading the image, click on More Settings option. Now you can set following CSS properties for the image –

RepeatBackground Image PositionBackground SizeBackground Attachment

You can adjust the background color overlay with color picker. A nice transparent layer of color above image will enhance the background image design.

Important Notes:

After adding a background image, make sure to adjust the opacity of background color with color picker.Background applied to the body will not be visible for Full Width/ Stretched – Container Layout as in this layout width of the container is stretched to the fullest.

Header Improvements in Astra!

Note:

Below are the classes that would not work over Astra』s 3.0 release. We are updating the classes shortly.

In this update of Astra theme v2.5.0 and Astra Pro Addon v2.6.0, we bring the following changes –

[ Deprecated ] – We are pulling the plug on the No Toggle Menu Style

[ NEW ] Adding a new Mega Menu Width option – Full Width Stretched

[ UPDATE ] :- Following are the selectors which are updated in this release –

Header selectors in Addon

Header selectors in Addon -

Normal Header -

Primary Header -
- CSS Prefix = .main-header-menu
- For menu li = .main-header-menu .menu-item
- For menu li -> current menu item = .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .main-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-above-header-menu
- For menu li = .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-above-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-below-header-menu
- For menu li = .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-below-header-menu .menu-item .menu-link
- For menu li inside sub-menu = .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-below-header-menu .sub-menu .menu-link

Transparent Header -

Primary Header -
- CSS Prefix = .ast-transparent-header .main-header-menu
- For menu li = .ast-transparent-header .main-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-transparent-header .ast-above-header-menu
- For menu li = .ast-transparent-header .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-transparent-header .ast-below-header-menu
- For menu li = .ast-transparent-header .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-transparent-header .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-transparent-header .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-transparent-header .ast-below-header-menu .sub-menu .menu-link

Page Header -

Primary Header -
- CSS Prefix = .ast-advanced-headers .main-header-menu
- For menu li = .ast-advanced-headers .main-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = .ast-advanced-headers .ast-above-header-menu
- For menu li = .ast-advanced-headers .ast-above-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = .ast-advanced-headers .ast-below-header-menu
- For menu li = .ast-advanced-headers .ast-below-header-menu .menu-item
- For menu li -> current menu item = .ast-advanced-headers .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = .ast-advanced-headers .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = .ast-advanced-headers .ast-below-header-menu .sub-menu .menu-link

Sticky Header -

Primary Header -
- CSS Prefix = #ast-fixed-header .main-header-menu
- For menu li = #ast-fixed-header .main-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .main-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .main-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .main-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .main-header-menu .sub-menu .menu-link

Above Header -
- CSS Prefix = #ast-fixed-header .ast-above-header-menu
- For menu li = #ast-fixed-header .ast-above-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .ast-above-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .ast-above-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .ast-above-header-menu .sub-menu .menu-link

Below Header -
- CSS Prefix = #ast-fixed-header .ast-below-header-menu
- For menu li = #ast-fixed-header .ast-below-header-menu .menu-item
- For menu li -> current menu item = #ast-fixed-header .ast-below-header-menu .menu-item.current-menu-item
- For menu li -> anchors = #ast-fixed-header .ast-below-header-menu .menu-item > .menu-link
- For menu li inside sub-menu = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-item
- For menu anchors inside sub-menu = #ast-fixed-header .ast-below-header-menu .sub-menu .menu-link

PS: For specifically desktop view and for higher weightage of CSS you can use .ast-desktop selector as prefix and similarly for responsive view you can add selector .ast-header-break-point.
Eg- The above CSS will work as follows - .ast-transparent-header .ast-below-header-menu
For Desktop - .ast-desktop .ast-transparent-header .ast-below-header-menu
For Mobile - .ast-header-break-point .ast-transparent-header .ast-below-header-menu

Note

If in any case the above selector or CSS not working for you, try by higher specificity for that CSS selector.

Following are the Improvement and Fixes we have introduced from this update –

Improvement:

Gutenberg + UAG support in Mega Menu templatesReusable Blocks support in Mega Menu TemplatesLowered weightage, and Optimized CSS now loading for all headerRemoved extra CSS from headers

Fixes:

Menu template』s CTA buttons getting full widths.Mega Menu colors not applying properly when any Template is used inside Mega Menu.Mega Menu not working on Above and Below Headers in some cases.Merge menu case not working with Primary hiding last menu item.Menu container width mega menu not working when the primary menu is disabled.Mega Menu Column heading color not working for Above Header & Below Header.Related products CSS not working properly when using Elementor pro related products for WooCommerce.Elementor popups are not working in the mega menu.Elementor template』s anchor links inside mega menu not working.Background image from Primary Header not inheriting in Sticky Header.Sticky header color not reflecting when we select animation style as 『none』.Left padding missing for submenu in mobile devices.Every mega menu template』s link showing submenu arrow on responsive devices.Font-size of Above Header submenus works alternately for tablet & mobile.

Footer Widgets

Astra offers 4 widget layout for the footer.Settings are available under Appearance > Customize > Footer > Footer Widgets

Once you select the 4 widget layout for the footer, you can set the widgets for each area under Appearance > Customize > Widgets > Footer Widget Area 1/2/3/4.You can choose WordPress default widgets or can add a third-party plugin to add widgets in the list.

Colors & Background for Footer Widget Area

You can set colors for Widget Title, Text, Border and Links in the footer under Appearance > Customize > Footer > Footer Widgets

Note: The above colors will be applied to default WordPress widgets only. If you are using a third-party plugin to add widgets, you would need to manage colors from the plugin itself.

Typography for Footer Widget Area

Typography options set under Appearance > Customize > Global > Typography > Base Typography will be applied to the footer widget area by default.

We provide more styling options in dedicated modules of the Astra Pro Addon plugin. Learn more about the Footer Widgets module of Astra Pro Addon.

Above Header Section

This is a premium feature available with Astra Pro Addon plugin. To use these Pro features, you need to have the Astra theme along with the Astra Pro Addon installed on your website.

Note:

You would not find the Above Header Section separately if you are above the Astra version 3.0.0. You will need to visit the Header Builder section and edit the insert elements to the first row virtually. Learn more here.

It appears above the primary header. It helps to show a call to action button, contact details, social media icons, menu, etc. Make sure you have activated Header Sections module from Astra Pro.

Above Header LayoutAstra provides two layouts for Above Header.

Above Header Layout 1It will display section 1 to the left side and section 2 to the right side.

Above Header Layout 2It will allow you to display only one section at the center of the above header.

Section 1 and Section 2You can put content into two different sections in above header. You can choose options for each section from drop down.

MenuYou can display menu in the above header with this option.

You would need to create a menu under Appearance > Customize > Menus > Create a new menu and assign it to above header menu.

SearchIt will add a search icon for a search box. When you click on the icon, the search box will appear.

Text / HTMLIt will allow you to insert text and HTML code. You can insert a call to action button, contact number, email address etc.

WidgetYou can add a widget to the above header with this option.

After selecting the widget option, you will able to set a widget from:Appearance > Customize > Widgets

Choose any WordPress default widget or you can use any third party plugin to add a widget to the list.

Above Header Bottom Border Width and ColorYou can set a bottom border for an above header with this option. Set a border width and then set a color for it.

Above Header HeightYou can easily set height for the above header with a slider.

Mobile Header AlignmentIt allows you to set the alignment of section 1 and section 2 on mobile devices. You can choose it to be Inline or Stack.

Menu Label on Small DevicesIf you have selected a menu to be displayed in section 1/ section 2, it will appear as a hamburger menu on mobile devices. You can set a label for this menu.

Merge menu with primary menu in responsiveThis allows you to merge your above header menu (set with section 1/ section 2) into a primary header on the mobile device.

Colors & Background options for Above Header

You can set background and content color for Above Header from Appearance > Customize >Header > Above Header

You can set the following colors from available settings

Background ColorContent Section

Text Color
Link Color
Link Hover Color