In this comprehensive guide, we will walk you through the process of disabling the featured image entirely or modifying its position on your website’s pages.

Disabling the Featured Image on the Pages

To disable the featured image on the pages, please follow the steps below:

Step 1: Navigate to Appearance>Customizer from your WordPress Dashboard

Step 2: Click on Pages

Step 3: Click on the Page Title option

Step 4: Scroll down to the Post Structure feature and click on the Eye icon next to the Featured Image option. This will disable the featured image from all your pages on your website.

Changing the Position of the Featured Image on the Pages

To change the position of the featured image on the pages of your website, you can simply drag and drop the featured image option. This will change the position of the featured image before or after the Title option and so on. Please click on the image below to play.

It allows you to easily add images to your menu items and customize their appearance. In this article, we will show you how to use the Menu Image plugin to add images to your WordPress menu items using the Astra theme. By following these step-by-step instructions, you’ll be able to create a more engaging and attractive website for your visitors. Let’s get started!

Step 1: Download the Menu Image plugin and Install it on your Website

You can easily download the Menu Image plugin from here. Once you have downloaded the plugin, navigate to your WordPress dashboard, click on the Plugins, and Add New. Click on Upload New Plugin and upload the ZIP file and click on Install. Once the plugin is installed, click on Activate to activate the plugin.

Step 2: Settings

Navigate to the plugin settings by clicking the Menu Image option.

Image Sizes

Upon accessing the plugin’s settings, you will be presented with a range of sizing options for the image icons. In case you opt for icons from Font Awesome or Dashicons, Menu Image will take care of resizing them automatically.

However, if you choose to utilize images from your media library, you will need to manually select the desired size. The plugin caters to the standard image sizes provided by WordPress, including thumbnail, image, and large. Additionally, it includes three distinctive sizes set by default to 24×24, 36×36, and 48×48 pixels.

Menu Image Hover

It’s important to note that this particular setting is solely applicable when using custom images. In case you intend to utilize dash icons or Font Awesome icons, there is no need to concern yourself with the ‘image on hover’ functionality.

Incorporating a distinct icon can assist users in identifying their current position in the navigation menu. This is especially beneficial when the menu comprises a multitude of items. To illustrate, you can employ diverse colors or icon sizes to emphasize the presently-selected menu item.

If you wish to experiment with various hover effects, don’t forget to enable the ‘Enable the image on hover field’ option.

Save Changes

Once you are done choosing the size and menu image hover option, please don’t forget to save the changes at the bottom of the page.

Step 3: Adding the images to the Navigation Menu

• Navigate to Appearance > Menus from the WordPress dashboard.
• Create a new menu or select an existing one.

• Select the menu from the drop-down that you would like to add images to
• Click on Select to select the menu
• Click on the Menu Image button to choose the image

• Choose the position of the image
• Choose whether you would like to add an image or an icon

• Click on the set image button to choose the image from your media file
• You can also choose an image for the menu when it is being hovered over
• If you would like to just show the images instead of the Title, choose Hide in the Title Position

In the next step choose the image size and click on Save Changes to make this permanent.

Here is how it is going to look at the front end of your website:

Tips and Tricks

Here are some additional tips to keep in mind when using the Menu Image plugin:

• Make sure the images you use are of the appropriate size and aspect ratio for your menu. Images that are too large or too small can look distorted or pixelated.
• Consider using images that are relevant to the menu item they represent. This can help users quickly identify the content they’re looking for.
• If you’re using the Astra theme, you can further customize the appearance of your menu items using the theme’s built-in options or with custom CSS.

Summing It Up

In conclusion, adding images to your WordPress menu items using the Menu Image plugin can significantly enhance the user experience and make your website more visually engaging. By following the steps outlined in this article, you can easily add custom images to your menu items and adjust their appearance using the Astra theme’s built-in options or with custom CSS.

Remember to choose images that are appropriate in size and aspect ratio for your menu, and consider using relevant images that can help users quickly identify the content they’re looking for. With these tips and tricks in mind, you can create an impressive and user-friendly menu that will keep your visitors coming back for more.

Why this is happening?

Basically, we have added theme support for Rank math breadcrumb in Astra which is why the plugin makes the breadcrumb setting disable in the latest version of the Astra theme.

How to fix this?

To fix this issue, you will need to add the following filter to the functions.php of your website. If you are not sure how to add custom PHP codes to your website, here is an article that will guide you.

add_filter( 'astra_rank_math_theme_support', '__return_false' );

Please note that we highly recommend you take a backup of your site before making any changes to your functions.php. Here is an article that will help you take a quick backup of your website.

Step 1: Enable Debugging in WordPress

Enabling debugging is the first stage in debugging WordPress. WordPress does not show errors on the front end by default, making it difficult to diagnose problems. Enabling debugging, on the other hand, will display errors and alerts in real time. To activate debugging, open the wp-config.php file in your WordPress installation’s root directory and add the following code:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );
@ini_set( 'display_errors', 0 );

The first line enables debugging, the second logs errors and warnings to a file, and the third line stops errors from being displayed on the front end. The final line prevents PHP errors from being visible on the front end.

Step 2: Check for Plugin Conflicts

Plugins are a great way to extend the functionality of WordPress. However, sometimes plugins can conflict with each other or the WordPress core. If you encounter an error, try disabling all of your plugins and re-enabling them one by one until you find the culprit.

To disable your plugins, connect to your WordPress site via FTP or the file manager in your hosting control panel. Navigate to the wp-content/plugins directory and rename the plugins folder to something like “plugins_backup”. This will disable all of your plugins. Then, log in to your WordPress site and see if the error persists. If the error goes away, re-enable your plugins one by one until you find the one causing the issue.

Step 3: Check for Theme Conflicts

Similar to plugins, themes can also cause conflicts and errors. If you’ve ruled out plugins as the cause of the issue, try switching to a default WordPress theme, such as Twenty Twenty-One. To switch themes, go to Appearance > Themes in your WordPress dashboard and activate the default theme. Then, see if the error still exists. If the error goes away, the issue is likely with your theme.

Step 4: Check for PHP errors

PHP errors can create problems in WordPress, so it’s critical to look for them. Examine the debug.log file in the wp-content area to do so. Any PHP errors that arise will be recorded in this file. You can also look for PHP errors in your hosting management panel’s error_log file.

Step 5: Check for Pending Updates

It is always a good idea to keep your software up to date. Please navigate to Updates from your WordPress dashboard and ensure that there is nothing pending over there.

Step 6: Check Server Errors on the Console

Simply open the browser console to rapidly find any error messages on your web page. This is accomplished by hitting Ctrl+Shift+J on a Windows/Linux computer or Cmd+Opt+J on a Mac. The console errors provide useful information about the source of the errors, which can be shared with the appropriate author to obtain a better understanding of the problem. Consider taking a screenshot of the console error message and sharing it with the appropriate person to help with issue resolution.

Step 7: Reinstall WordPress Core Files

If none of the options above have resolved the problem, it may be necessary to reinstall the WordPress core files. To do this, go to WordPress.org and obtain the latest version of WordPress, then extract the files to your computer. Then, browse to the root directory of your WordPress site using FTP or the file manager in your hosting control panel. Except for the wp-content folder and the wp-config.php file, remove all WordPress files and directories. Finally, update your WordPress files and send them to your server.

Conclusion

To conclude, WordPress debugging may appear to be a daunting job, but it does not have to be. Most problems can be diagnosed and fixed by using these fundamental techniques. Always make a backup of your files and database before making any adjustments. Best wishes!

This option can be particularly useful for websites that do not require a large banner area or for those that prefer to display their content in a more compact format. Disabling the banner area can also provide more space for the main content of your website, which can improve the user experience and help highlight the most important information on your site. In this document, we will explain how to turn the banner off from your single post pages using the meta settings of the Astra theme. If you would like to know more about the Banner Area in Astra theme, here is an article that will guide you through.

Let’s get started.

What is the banner area?

The banner area typically appears at the top of the posts and can include elements such as the Post Title, Post Meta, etc. 

How to disable the banner area for a single post?

You can easily disable the banner area for a single post using the meta settings of the Astra theme.

Step 1: Click on the Astra settings on the Post page where you would like to disable the banner.

Step 2: Navigate to Disable Elements option.

Step 3: Turn on the radio button next to the Disable Banner Area.

Please note that enabling or disabling the banner area won’t show the changes at the backend. You will need to open the post on the front end of your website to find the changes.

Before disabling the banner area:

After disabling the banner area:

In conclusion, the introduction of the Disable Banner Area Meta-Based Option in the Astra theme’s meta settings provides a useful feature for website owners to customize the appearance of their site.

In this document, we will explore these new features in detail, highlighting how they can help improve your online store’s functionality and enhance the user experience for your customers. Let’s get started.

Shop page:

To add this functionality to the shop page, please navigate to Appearance > Customizer > WooCommerce > Product Catalog > Shop Product Structure.

Under Shop Product Structure, you will see the option Add To Cart. Once you enable this feature by clicking on the eye button, you will be able to select the action triggers from the drop-down.

Default: Selecting this option will add the default feature of WordPress and WooCommerce when a user adds a product to the cart.

Slide in Cart: Once the Add to Cart button is clicked the slide in the cart will open where users can see the added products in the flyout panel.

Redirect to Cart page: With this trigger option, as the name suggests, it will redirect users to the Cart page once the add to cart button is clicked.

Redirect to checkout page: With this trigger option, the user will be redirected to the Checkout page once the add to cart button is clicked. By customizing the WooCommerce checkout page you can create a frictionless experience.

Single Product page:

To add this functionality to the single product page, please navigate to Appearance > Customizer > WooCommerce > Single Product > Single Product Structure.

Under the Single Product Structure, you can find the “Add To Cart” option. By clicking on the eye button, you can activate this feature and choose the action triggers from the drop-down menu.

Default: When you choose this option, WordPress and WooCommerce’s default features will be added to the cart as soon as a user adds a product.

Real-Time Add to Cart: This option lets you update the quantity of the products directly from within the cart. Here is how it works on the front end. For more information on this feature, please click here.

Slide in Cart: After clicking the Add to Cart button, the Slide in Cart will open, allowing users to view the added products in the flyout panel.

Redirect to Cart page: As the name suggests, selecting this trigger option will redirect users to the Cart page when they click the add to cart button.

Redirect to Checkout page: With this trigger option, the users will be redirected to the Checkout page once the add to cart button is clicked.

Conclusion

The Add to Cart Trigger Actions for Shop and Single Product Pages provide users with the flexibility to determine the next action for their customers after they click the Add to Cart button. This user-friendly behavior not only enhances the overall shopping experience but also helps in boosting site sales by reducing users’ back-and-forth time. With these new trigger actions, online store owners can optimize their checkout process and ensure that customers are seamlessly guided through the buying journey, leading to higher customer satisfaction and increased sales.

Primary Menu

The primary menu is the navigation bar located at the top of your website, which typically includes links to your main pages or categories.

To get started, please navigate to the WordPress Dashboard and click on Appearance>Customize>Header Builder> Primary Menu and head over to the design tab.

Scroll down to the Font Section and click on the pencil icon next to the Menu Font option.

This will open the options to change the appearance of the primary menu such as Font-Family, Font-Weight, Font-Size, and Font-Decoration.

Secondary Menu

If your website is using a secondary menu to display a second set of menu items, you can simply navigate to Appearance>Customize>Header Builder>Secondary Menu and head over to the design tab.

Similar to the primary menu, you will also have to scroll down to the Fonts Sections and edit the typography of the secondary menu by clicking on the pencil icon next to the Menu Fonts.

Sub-Menu (Pro-Feature)

A submenu is a secondary menu that is accessed through a main menu item. It typically appears when you hover over or click on a main menu item and contains a list of additional options that are related to the main menu item.

This is a premium feature available with the 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. Check out our pricing page to know more about the Astra Pro Addon.

Once you have purchased and activated the Astra Pro addon plugin, you will need to activate the Typography Module by clicking on the Astra option on your WordPress dashboard.

To edit the sub-menu typography, please navigate to Appearance>Customize>Header Builder>Primary Menu.

Scroll down to the Fonts section and you will see the option named “SubMenu Font”. To edit the typography, simply click on the pencil icon next to it.

Similar to the primary and secondary menu options, this will open the options to change the appearance of the submenu such as Font-Family, Font-Weight, Font-Size, and Font-Decoration.

Mega-Menu Heading (Pro-Feature)

Typically, a mega menu is a dropdown menu or expandable navigation area that usually contains more than just text links. If you are not sure how to create a mega menu on your website, here is an article that will guide you through the process. This is also a premium feature of the Astra theme and you will need to install and activate the Astra Pro Addon plugin and also activate the Nav Menu module.

To modify the typography of the Mega Menu Heading, you will need to navigate to Appearance>Customize>Header Builder>Primary Menu.

Scroll down to the Fonts section and you will see the option named “MegaMenu Heading”. To edit the typography, simply click on the pencil icon next to it.

This issue was immediately resolved in a hotfix released in version 3.1.26 of the Starter Templates/Premium Starter Templates plugin.

You can simply follow these steps to resolve the issue if you are below version 3.1.26:

Step 1: Please deactivate our Starter Templates plugin and update it to the latest version.

Step 2: In the meantime, Update other plugins that have pending updates and there shouldn’t be an issue with updates

Step 3: Reactivate the Starter Templates plugin as all the plugins are resolved and with Starter Templates updated to the latest version.

Note: In rare cases, if the above steps do not help. You can deactivate and delete the plugin temporarily and install the latest version from the Starter Templates plugins page or My Downloads page for the Premium Starter Templates plugin.

With the Latest Astra Version 4.0.0, we have revamped the entire Nav /Mega Menu. The whole thing has changed now. Instead of a pop-up, we brought a right-side flyout design.

The Nav Menu Addon in Astra Pro enables you to add and create Mega Menus. Mega Menus are a type of expandable menu where different choices are displayed.

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 add-ons, 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 Nav Menu Module

Please follow the below-attached steps to activate the Nav Menu module.

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

Step 2 – Activate the add-on from the WordPress Dashboard → Astra → Dashboard → 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

Prior to Astra Version 4.0.0., you had seen the pop-up window. But, this time we brought a right-side flyout design with ‘General’ and ‘Design’ Options.

General Settings:

Mega Menu:

Enable the Mega Menu toggle. This will enable the mega menu options for all submenus of the parent menu. It provides options for the top-level/parent menu.

Mega Menu width – Set the width of your mega menu here. These are the available options:

• Content – set the menu width to your content width
• Menu 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

Icon:

From the list of available icons, you can choose the icon of your choice to be displayed Before or After the Menu Label. Also, you can set the icon size and spacing here.

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.

Design Options

Background Type

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.

Spacing

You can set Margin and Padding for the menu items.

Why this error occurs?

This error mostly occurs when your website fails to meet the minimum system requirements to import the starter templates. This can also be the case if your hosting provider has a firewall installed on your account which is blocking the starter template website which is https://websitedemos.net/. 

How to fix it?

Follow these steps to fix this issue while importing starter templates:

1. Check the server information

Ensure that your website is meeting the minimum system requirements as mentioned in this document. Please navigate to Tools>Site Health>Info>Server to check the system requirements. If they are below the requirement mentioned in the document, please reach out to your hosting provider and request them to upgrade your account. Please follow the steps below to check the server details of your website.

Step 1: Click on Tools and select Site Health

Step 2: Click on the Info tab and select the Server option

Step 3: Check the server settings and compare them with the system requirements of the starter templates. If you need to upgrade the settings, please contact your web hosting provider and upgrade your account.

2. Check for Firewall

Ensure there is no firewall installed on your account by your hosting provider. You can reach out to them and request them to whitelist https://websitedemos.net. This will ensure that the starter templates are getting imported without any interruptions.

3. Manual Installation

If everything is fine and you are still facing this issue, please deactivate all the plugins on your website and delete them. Remove them permanently from the trash and try to re-install the template.

4. Refreshing the PHP memory

Save the permalink settings. Navigate to Settings>Permalinks and save changes. This will refresh the PHP memory of your website. Try importing the templates again.

This should resolve the issue. Check out our other articles about starter template import errors here. If you are still facing the issue, please contact us by raising a ticket from here and we will be happy to help.