Astra 文档

Clone and Delete Elements in Header Footer Builder

With the Astra Header Footer builder, you can easily add various elements such as logo, menu, button, widget, etc., and create unique navigation for your website. With Astra version 3.1 and above, you will observe a set of new controls to duplicate and delete both header and footer elements.

Let us understand a bit more about these options.

If you wish to know how to design either a header or footer with the visual builder, please refer to the following articles:

How To Create a Header With Astra Header Builder?How To Create a Footer With Astra Footer Builder?

Note

1. The Clone and Delete options are available only with Astra Pro. To use these options make sure you have the Astra Pro plugin installed, updated, and activated.2. The Clone and Delete options are only available for elements that can be used in multiple numbers. Example: buttons, menus, widgets, etc. These will not be available for single elements such as logo, search, etc.

Clone Header Footer Elements

As the name suggests, this option allows you to clone/duplicate elements of the Header and Footer Builder.

Cloning will create an exact copy of elements with text and style. This will save you time to design similar elements again from scratch. You can clone and easily place elements at a required position just with a single drag-n-drop movement.

In the Header and Footer builder, when you hover over the elements you can see little icons to clone the elements. Click on this to clone the element you wish to duplicate.

Delete Header Footer Elements

The Delete option lets you remove unwanted elements permanently from the customizer. Once deleted these elements can not be retrieved.

Just hover over the element and click on the bin icon to delete the element.

Delete and Remove: The Difference

You will observe the close(x) icon beside every element. This option will just remove the element from the visual builder temporarily. You can insert the element again by clicking on the plus (+) icon in the visual builder.

Delete Option

Remove Option

Note:

Delete: Permanently removes the element from the customizer, the element cannot be retrieved.Remove: Only removes the element from the visual builder and can be added back by using the plus icon.

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.

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.

Toggle Button for Desktop – Header Builder Element

The toggle button is an attractive way to display content like menu, button, search, etc. in the header on the desktop view. It is specially designed for desktop screens and it works similar to the mobile hamburger button.

When a user clicks on the toggle button, it brings an off-canvas window on the screen with all content you added inside.

As it needs a small space in the header, this is a great way to display content in the header.

This beneficial Header Builder element is a premium Astra feature and available since Astra Pro version 3.3. Before this version, you were required to use custom code to bring a toggle button on the desktop. But not anymore!

Now you can easily display off-canvas content on desktop and customize it completely with the new Toggle Button element.

Here is a video that explains how to use this element:

If you prefer a written version, let us dive in!

How To Add Toggle Button for Desktop

As this is a premium feature, make sure to have the Astra Pro plugin updated and activated. Follow the below steps:

Step 1: Open Header Builder and click on a section where you wish to add a toggle button. From the element list, choose Toggle Button.

Step 2: Now you can choose content i.e. elements to display inside a window that appears when users click on the toggle button.

You will observe the off-canvas section in the header builder as soon as you add the toggle button.

Click on the off-canvas section and a list of elements will open up.

Choose the required elements from this list and they will be automatically added to the off-canvas section. You can add various elements such as buttons, search, widgets, HTML, social icons, the off-canvas menu, and so on.

To customize these elements simply click on them and all customization options will open up in the customizer.

Note:

To add a menu inside the off-canvas section, use the Off-Canvas Menu element from the list. The primary and Secondary Menu will not work inside the off-canvas section.

By default, the off-canvas menu will display all pages on your website just like the default WordPress menu. You would need to create a dedicated off-canvas menu or assign any existing menu as an off-canvas menu.

If you are not sure how to create and assign off-canvas menu, here are the steps –

Click on the Off-Canvas Menu In the customizer, click on 『Configure Menu from Here』From the 『Off-Canvas Menu』 dropdown, select the required menu. If the required menu is not in the list you can even 『Create New Menu』 and assign it as off-canvas.

Step 3: Once you add all required content inside the off-canvas section, you can design the toggle button as per your choice.

To customize the toggle button, click on the button in the header builder and all design options will promptly open in the customizer.

Once there, you can set the following:

Icons – Choose from three different designsToggle Button Style – Choose from three pre-built styles for button Menu Label – You can add a label for the menu button here.

Click on the Design tab to set the size, color, margin for the toggle button.

Step 4: You can customize the off-canvas window and set the layout and colors for it. To do so, click on the gear icon for Off-Canvas, and the options will open up in the customizer.

Under the General tab you can set the type, and position alignment, while under Design tab you can set the colors and spacing.

Note:

If you switch to tablet or mobile devices in the customizer, you will observe an off-canvas section. Note that the off-canvas section with the toggle button on a desktop, on a tablet device, or on mobile devices works separately. This allows you to design different toggle menus on different devices. Off-canvas from desktop will not be automatically inherited on a tablet or mobile devices and vice-versa.

Manage Your Site Identity With Astra』s Header Builder

Your Logo and other Site Identity options are directly related to the presentation of your brand. As they are part of your header, these are visible on all pages and posts thus they help users always be aware of the website and brand they are interacting with.

The Astra Theme comes with a drag & drop Header Footer Builder. With Header Builder, you can manage your site identity using the Site Identity & Logo element. This document will show you how to easily set your Logo and other Site Identity elements. These include:

Logo

Retina Logo

Logo for mobile devices

Site Title

Site Tagline

Site Icon (Favicon)

You can find the Header Builder by navigating to Appearance > Customize > Header Builder. To access the element settings just click on the element in the elements list on the left, or in the visual header builder under the preview.

Logo

You can add your Logo under the General tab. To add or change your logo, you can follow these steps:

Step 1 – Click on the Logo area and upload a file or select a logo from your Media Library. You can add logos as JPG, PNG, and SVG.

Step 2 – Though this step is optional, enabling a Different Logo For Retina Devices will ensure your logos look great on devices with retina screens. It』s advisable to upload at least two times larger so your logos won』t be blurred on high-definition screens. You can find out more about the retina logo in this article. If you decide not to use this option, your website will show your primary logo (from Step 1) on retina screens too.

Step 3 – Once your logo is added, you can choose the Logo Width. This will set the size of your logo, as the height will be automatically calculated based on the width. You can also set different logo widths for desktop, tablet, and mobile by clicking the responsive editing icon to switch between these screens.

Step 4 – If your design requires a different logo on mobile devices, you can switch to mobile editing and enable Different Logo For Mobile Devices to add a different logo only for mobile devices. Keep in mind that the mobile logo you set will be used for both tablets and mobile phones. You can find more about creating a mobile header in this article.

Step 5 – You can switch to the Design tab of the element and set Logo margins.

Note:If you enable the Transparent header, you will have a Different Logo for Transparent Logo option, enabling setting a different Logo, Retina Logo, and Logo Width applied only to the Transparent header. This option is available at Appearance > Customize > Header Builder > Transparent Header > General tab.

Site Title and Tagline

Site Title is a name you set for the website, while the Tagline is the short one-line description.

Step 1 – You can make these visible beneath your logo by enabling their respective options within the General tab of the Site Identity & Logo element. You can enable these separately for desktop, tablet, and mobile.

Step 2 – Usually, site title and tagline are added when creating a new website at Dashboard > Settings > General. If you want to modify these, you can do it directly in the element settings without leaving your Customizer.

Step 3 – Also, if you would like to position your site title and tagline on the right side of your Logo, you just need to enable the Inline Logo & Site Title option.

Step 4 – If you switch to the Design tab of the element, you will find the options for changing the Color and Font Size of the Site Title and Tagline.

Note:If you enable the Transparent header, you will have separate options for setting different Title Color used only for the Transparent header. This option is available at Appearance > Customize > Header Builder > Transparent Header > Design tab.

Site Icon (Favicon)

This is a small image icon that can be seen in the tab of a web browser, bookmark bars, and WordPress mobile apps. You can set it with the site icon option. The recommended size for a favicon is 512 pixels. Learn more about Site Icon here.

How To Create a Header With a Centrally Positioned Logo With Astra?

The Astra Theme comes with the visual drag-n-drop Header Footer Builder. The Header Footer Builder brings a lot of freedom when designing your headers and footers. One of the interesting designs that can be achieved with Header Builder is creating a header with a centrally positioned logo. And you only need a couple of minutes to do this.

Following the easy steps in this article, you can expect the end result like the one in the screenshot below – a header that displays your logo in the middle with your menu items distributed on the left and the right side.

How To Do This?

To achieve this header design with the Astra theme, you will need to use Header Builder and three elements:

Site Identity & Logo

Primary Menu

Secondary Menu

No matter if you started building your website from scratch or imported one of our Starter Templates, the default header setup you will most likely see in the Header Builder consists of the 「Site Identity & Logo」 element on one side, coupled with the 「Primary Menu」 element on another:

To start building your header with a centralized logo, let』s first create your menus.

Creating Primary and Secondary Menu

Navigate to Appearance > Customize > Menus (you can also access menu setup via Dashboard). Follow these steps to start building your menus (you will need to build two):

Step 1 – Click on the 「Create New Menu」 button to create a menu:

Step 2 – Name your menu. You can name the menu as you wish. In order to track things easier, we named this first menu 「Left Menu」 as we will add this one on the left side of the Logo in the header

Step 3 – Select menu items you wish to add to the menu. If you need to create any new items, you can simply click on the 「Add Items」 button.

Step 4 – Scroll down to the 「Menu Locations」 section and mark this menu as 「Primary Menu」:

Step 5 – Return to the Appearance > Customize > Menus and repeat steps 1 to 3 to create your second menu. We named this menu 「Right Menu」 but you can name it as it suits you:

Step 6 – Scroll down to the 「Menu Locations」 section and mark this menu as 「Secondary Menu」:

Build Your Header

Now that you』ve created your menus, navigate to Appearance > Customize > Header Builder and follow these steps to create your header:

Step 1 – Add your 「Site Identity & Logo」 element to the middle section of the Primary Header, and add your Logo. The primary header is the middle header in your visual header builder:

Step 2 – Finally, to create your header with a centrally positioned logo as previously shown, add your Primary and Secondary Menu elements. Click to the left section of the Primary Header and add the Primary Menu element. Click on the right and add the Secondary Menu too. Click 「Publish」 to save your header.

Note:There is no difference if you add a Primary or Secondary Menu element to the left or right side. This will just reflect on the position of your menu items in the header.

Alternatively, you can position menus closer to the sides of your website by moving (drag-n-drop) Primary and Secondary Menu elements:

Step 3 – This step is optional and it will depend on your Logo design and other Site Identity options (if you activated Site Title or Tagline). You can add margins to your Site Identity & Logo element to make your logo equally distanced from both menus. Using percentage (%) as a size unit will make sure this distance looks good on all screens.

Nav Menu Module [Create a Mega Menu]

The Nav Menu Addon enables you to add and create Mega Menus. Mega Menus are a type of expandable menus where different choices are displayed.If you own a website with a lot of options and lower-level subpages, then this is the perfect option to display these at a glance.

Astra provides stunning features to design Mega Menu functionality with Nav Menu addon.

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

If you want to learn more about how that』s done here』s a walk-through video made by WPBuilders.

Activate the Module

Please follow these steps to activate the Nav Menu module and explore its options – 

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

Step 2 – Activate the add on from the WordPress Dashboard > Appearance > Astra Options > Nav Menu

Create the Mega Menu

If you want to create a Mega Menu, you need to enable the Mega Menu functionalities for the top-level menu item whose child menu items you』d like to turn into a Mega Menu. 

Follow these steps to do just that:

Step 1 – From the WordPress dashboard navigate to Appearance > Menus.

Step 2 – Select the menu item under which you want to add a mega menu.

Step 3 – Expand this menu item and click on the 「Astra Menu Settings」 button

Mega Menu Tick the checkbox for the Enable mega menu option. This will enable the mega menu options for all submenus of the parent menu. It provides options for the top-level/parent menu. You can set a Mega Menu width to content, menu container or full.

Mega Menu width – Set the width of your mega menu here. These are available options:Content – set the menu width to your content widthMenu Container Width – limit the width of your Primary menu Full Width – set the width of your mega menu to the width of your screen but limit your menu content to the content width.Full Width Stretched – set the width of your mega menu to the full width, edge-to-edge.Custom Width – set the custom width value in pixels

Background Color / Image Background Color/ Image will be set to the mega menu box for the parent menu. You can adjust the background image with settings like Background Repeat, Background Size, and Background Position.Override Colors for this mega menu? You can set colors for the menu items present in the mega menu box for the parent menu. Available options are Text/Link Color, Text/Link Hover Color, Column Divider Color.Highlight LabelsThis is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured, etc. You can set label text and color.AdvancedYou can set Margin and Padding for the menu items.

Step 4 – Clicking on the child menu you will show you the following options –

Mega Menu Make column heading?: Choose this if you want to make the menu item navigation label as a title for the column. So that this will appear as a title and all child menu items will appear below this heading. Note: Make sure you have enabled the Mega Menu for the Parent Menu item to see this option.Menu Label Hide Menu Label/Description?: If you want to hide the label or description for the submenu, select this option.Disable Link: This option will remove the link for a respective menu item. It will display only the title of the menu.Content Source You can select Content Source for the submenu. It has the option to select from Custom Text, Template or Widget. You can display custom text/HTML with the editor, or can select any custom template/widget. If you select the Custom Template option, a list of all available posts, pages, custom templates will appear. If you select the widget option, a list of all available widgets will appear.Highlight Labels This is the text that appears beside the menu item. It highlights the menu. Labels can be Free, Sale, New, Featured, etc. You can set label text and color.

Similarly, you will find options for all submenu and their submenu.

How to Create Columns for the Mega Menu?

Astra will automatically create a separate column for each submenu. When you tick the option to Enable Mega Menu within the Parent menu item, it will create columns depending on the number of submenu items present under it.

For Example – If you have the following menu structure:

Background Image

BUSINESS PAGES

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

AGENCY PAGES

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

UTILITY PAGES

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

SPECIAL PAGES

Menu Item 1
Menu Item 2
Menu Item 3
Menu Item 4

It will display on the front end as –

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 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?

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: