How To Build a Professional Website Using Astra Pro WordPress Theme

How To Build a Professional Website Using Astra Pro – hello guys in this tutorial I am going to show you How To Build a Professional Website Using Astra Pro.

Building a professional website can be a daunting task, especially for those who are new to website design and development.

However, with the right tools and resources, anyone can create a sleek and professional website that looks great and functions well.

One such tool is the Astra Pro WordPress theme, a powerful and versatile theme that offers a wide range of customization options and features.

In this article, we will be discussing how to build a professional website using the Astra Pro WordPress theme. We will cover everything from choosing the right layout and design elements to customizing your site’s functionality and optimizing your content for search engines.

Whether you’re a small business owner, a blogger, or just looking to create a personal website, this guide will provide you with the knowledge and resources you need to build a website that looks and performs its best.

So if you want to learn How To Build a Professional Website Using Astra Pro WordPress Theme, then let’s follow my guide.

Table of Contents

What Is Astra Pro :

Astra Pro is a popular WordPress theme that is designed to be lightweight and fast. It is a versatile theme that can be used for a wide range of websites, including blogs, portfolios, and online stores.

Requirements To Build a Professional Website Using Astra :

To use Astra Pro, there are a few requirements that must be met.

WordPress Installation:

Astra Pro is a WordPress theme, so you must have a WordPress installation on your website.

This can be done by downloading WordPress from the official website and installing it on your server.

How To Host WordPress Website On Digitalocean.

Theme Compatibility:

Astra Pro is compatible with the latest version of WordPress, so you should make sure that your website is running the latest version of WordPress.

Server Requirements:

Astra Pro requires a PHP version of 7.0 or higher and a memory limit of 128MB or higher.

You should check with your hosting provider to ensure that your server meets these requirements.

Plugins Compatibility:

Astra Pro works well with popular WordPress plugins like Yoast SEO, Gravity Forms, and WooCommerce.

It is important to check the compatibility of any additional plugins you plan to use with Astra Pro.

Astra Pro License:

Astra Pro is a premium theme and requires a valid license to use. A license can be purchased from the Astra website and is required for access to updates, support, and additional features.

But you can still use Astra Pro For free as per GPL License. You can use Astra Pro For free without any License key. So follow this guide & you will able to use Astra Pro For FREE.

By meeting these requirements, you can ensure that Astra Pro will work smoothly on your website and provide a great user experience for your visitors.

With Astra Pro, you can create a professional and beautiful website that is tailored to your specific needs.

How To Install Astra Pro WordPress Theme :

Here is a step-by-step guide on how to install the Astra Pro WordPress theme:

1. Go to Appearance > Themes in your WordPress dashboard.

2. Click on the “Add New” button at the top of the page.

3. Search for “Astra” in the search bar.

4. Once you find the theme, click on the “Install” button.

5. After the theme is installed, click on the “Activate” button to make it the active theme on your website.

6. Now the Astra Free version WordPress theme is activated. So let’s Make it pro.

7. Download Astra Pro WordPress Theme from the download section below.

8. Go to Plugins >Add New > click on Upload Plugin Button. Then upload your Astra Pro Add-on Plugin here.

9. After uploading successfully. Now click on the “Activate” button to activate your Astra Pro plugin.

10. Now you will see an option on the left sidebar called Astra. So Go to “Astra > Astra Pro Modules. Then click on Activate All Button it will activate all Astra Pro Modules.

11. Boom now you have Astra successfully installed on your Website.

12. Once the theme is activated, you can go to Appearance > Customize to start customizing the theme.

How To Build a Professional Website Using Astra Pro WordPress Theme

OK so finally we installed Astra Pro WordPress Theme on our website. So now can able to see How To Build a Professional Website Using Astra Pro WordPress Theme Step-by-step.

My Custom Layout :

I created my custom layout style using Astra Pro WordPress Theme Only. You don’t need any third-party Site builders like Elementor.

You can create this type of layout very easily with some code. If you don’t have any coding knowledge, no problem just follow my guide & you are good to go.

Import Astra Pro customizer settings :

For this guide, I am going to provide my custom layout for free for you. So you need to import my customizer settings into your Astra. You can also design by yourself.

1. Go to plugins > Add New > Search for a plugin called “Import / Export Customizer Settings“.

2. Install & Activate the Import / Export Customizer Settings Plugin. It will allow you to Import / Export Customizer Settings from your Astra customizer.

3. Now Go To Astra > Dashboard > Settings > here you will see Import Settings.

4. Just download my Astra Custom Layout Customizer Settings file from the download section below.

5. Upload That customizer file here and click on the import button.

6. It will automatically import all my custom layout settings to your Astra Pro WordPress Theme.

That’s it for customizer settings. You can change anything if you want from Appearance > Customize Option.

Read More :

Import Custom Style In Astra Pro :

OK, now we did the customizer settings perfectly. But still, you will not get my whole custom layout style. So to do that you need to put some style. So let’s do it.

1. Here we are going to add custom CSS code to our site. So we need one more plugin. Go to plugins > Add New Plugin. Search for WP Code.

WP Code Plugin - ow To Build a Professional Website Using Astra Pro

2. Here you will get WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager plugin. So install & Activate that plugin.

3. Now after activating, you will see an option on the left side of the WordPress sidebar, called “Code Snippets”.

4. Go to Code Snippets > + Add Snippet > Add Your Custom Code and click on Use snippet.

5. Now give any title in the “Add a title for snippet” Section.

6. In the code type. Select “CSS Snippet“.

7. Now in the “Code Preview” box enter all code which is given below. Make sure to copy the code currently otherwise you will not able to see the proper design.

/* Code created by Mahesh Technicals*/

a.ast-button {
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}


.site-below-footer-wrap.ast-builder-grid-row-container.site-footer-focus-item.ast-builder-grid-row-full.ast-builder-grid-row-tablet-full.ast-builder-grid-row-mobile-full.ast-footer-row-stack.ast-footer-row-tablet-stack.ast-footer-row-mobile-stack {
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);

}

.entry-content h2,
h3,
h4,
h5,
h6 {
  color: white !important;
  text-align: center;
  padding: 10px;
  margin: 10px 0px;
  border-radius: 10px;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);

}

.ast-footer-copyright {
  color: white !important;
}

#secondary .wp-block-search__button,
#submit {
  color: white !important;
  border-radius: 10px;
  border: none;
  padding: 10px 20px !important;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}


.widget_block h2 {
  color: white !important;
  text-align: center;
  border-radius: 10px;
  padding: 10px;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}

.post-thumb-img-content img {
  border-radius: 10px;
  box-shadow: rgba(23, 43, 99, 0.2) 0 7px 28px !important;
}


#secondary .wp-block-search__input {
  outline: none;
  border: none;
  border-radius: 10px;
  padding: 5px 20px !important;
  color: white !important;
  background: black !important;
}

.blog .entry-title,
.blog .entry-title a,
.archive .entry-title,
.archive .entry-title a,
.search .entry-title,
.search .entry-title a {
  font-family: 'Poppins', sans-serif;
  font-size: 26px;
  font-weight: bold;
}



.entry-title {
  margin-top: 30px;
  color: #7c53f7 !important;
  font-weight: bold;
}




.ast-search-icon .ast-icon {
  z-index: 4;
  padding: 5px 10px;
  color: white !important;
}


.site-title,
.site-title a {
  font-size: 25px;
  color: white !important;
}


.ast-primary-header-bar.ast-primary-header.main-header-bar.site-primary-header-wrap.site-header-focus-item.ast-builder-grid-row-layout-default.ast-builder-grid-row-tablet-layout-default.ast-builder-grid-row-mobile-layout-default {
  color: white !important;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}

.ast-mobile-header-wrap .ast-primary-header-bar,
.ast-primary-header-bar .site-primary-header-wrap {
  min-height: auto;
  padding: 10px;
  color: white;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}



[data-section="section-header-mobile-trigger"] .ast-button-wrap .mobile-menu-toggle-icon .ast-mobile-svg {
  width: 20px;
  height: 20px;
  fill: #fafafa !important;
}


.ast-header-break-point .main-navigation .stack-on-mobile li {
  color: white !important;
  color: white !important;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}


.site-header .menu-text {
  color: white;
}


#rpwwt-recent-posts-widget-with-thumbnails-4 img {
  border-radius: 10px;
}


#comments .submit,
.search .search-submit {
  border-radius: 10px;
}


.ast-pagination .page-numbers.current,
.ast-pagination .page-numbers:focus,
.ast-pagination .page-numbers:hover {
  color: #ffffff;
  border-radius: 50%;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%) !important;
}


.ast-pagination-circle .ast-pagination .next.page-numbers,
.ast-pagination-circle .ast-pagination .prev.page-numbers {
  border-radius: 30px;
  color: white;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}


.ast-desktop .ast-mega-menu-enabled .ast-builder-menu-1 div:not(.astra-full-megamenu-wrapper) .sub-menu,
.ast-builder-menu-1 .inline-on-mobile .sub-menu,
.ast-desktop .ast-builder-menu-1 .astra-full-megamenu-wrapper,
.ast-desktop .ast-builder-menu-1 .menu-item .sub-menu {
  color: white;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}


.ast-related-posts-title {
  color: white !important;
  padding: 10px;
  border-radius: 10px;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);

}


.ast-related-post-content .entry-header .ast-related-post-title,
.ast-related-post-content .entry-header .ast-related-post-title a {
  color: white !important;
}


input.wpcf7-form-control.has-spinner.wpcf7-submit {
  padding: 10px 20px;
  border-radius: 10px;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}

#url {
  display: none !important;
}


section.ast-comment-content.comment {
  padding: 10px;
  color: white;
  border-radius: 10px;
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}

span.ast-reply-link {
  padding: 5px;
  border-radius: 5px;
  background-image: linear-gradient(225deg, #f69940 0, #fb8e42 8.33%, #ff8144 16.67%, #ff7348 25%, #ff634d 33.33%, #ff5052 41.67%, #ff3858 50%, #fb145f 58.33%, #f50069 66.67%, #ee0073 75%, #e6007f 83.33%, #db008d 91.67%, #ce009b 100%);
}

span.ast-reply-link a {
  color: white !important;
}


.ast-comment-info {
  padding: 10px;
  color: white;
  border-radius: 10px;
  margin-bottom: 5px;
  background-image: linear-gradient(225deg, #f69940 0, #fb8e42 8.33%, #ff8144 16.67%, #ff7348 25%, #ff634d 33.33%, #ff5052 41.67%, #ff3858 50%, #fb145f 58.33%, #f50069 66.67%, #ee0073 75%, #e6007f 83.33%, #db008d 91.67%, #ce009b 100%);
}


.ast-comment-info a {
  color: white !important;
}


b.fn {
  color: white;
  padding: 5px;
  border-radius: 5px;
  background-image: radial-gradient(circle at 50% -3.03%, #918ff2 0, #727eec 25%, #486ee5 50%, #005fde 75%, #0052d8 100%);

}

.ast-comment-time {
  margin-top: 10px;
}


span.ast-icon.icon-arrow {
  color: white !important;
}


.entry-content ul li:before {
  font-family: FontAwesome;
  content: "\f140";
  margin-left: -1.5em;
  padding-right: 1em;
  color: #4E42D4;
}


.widget_categories ul li::before {
  font-family: FontAwesome;
  content: "\f039";
  padding-right: 1em;
  color: #4E42D4;
  font-size: 18px;
}


#ast-scroll-top {
  background-image: radial-gradient(circle at 100% 0%, #a863ff 0, #7c53f7 25%, #4d42d4 50%, #0931b1 75%, #002291 100%);
}


.ast-header-search .ast-search-menu-icon.ast-dropdown-active .search-field {
  color: white;
  border-radius: 10px;
  background-image: radial-gradient(circle at 87.5% 12.5%, #f2a140 0, #f89740 7.14%, #fc8b42 14.29%, #ff7f45 21.43%, #ff7149 28.57%, #ff614d 35.71%, #ff4f52 42.86%, #ff3858 50%, #fb165f 57.14%, #f60068 64.29%, #ef0072 71.43%, #e7007d 78.57%, #dd008a 85.71%, #d10097 92.86%, #c300a5 100%);
}


.entry-content p {
  font-size: 18px;
}

.entry-content img {
  margin: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}


th {
  background: black !important;
  color: white !important;

}

.entry-meta,
.entry-meta * {
  font-weight: bold;
  color: #990073 !important;
}

@media (max-width: 544px) {

  .ast-single-post .entry-title,
  .page-title {
    font-size: 30px;
    text-align: center;
    margin-top: 20px;
  }

  .site-title,
  .site-title a {
    font-size: 20px;
  }

}

/* Credits : https://maheshtechnicals.com */

8. After all code pasting. Now you need to Enable the code from the top right corner. If you do not enable this switch. The code will not work.

9. Now click on “Save Snippet“. So it will refresh the page & properly work on your site.

10. Boom Now my custom layout is successfully imported into your site. Visit your site & see the changes.

Add Stylish Recent Posts Widget On Sidebar

Now all custom layout styles are imported on your site but we need to add widgets manually. So add the Stylish Recent Posts Widget On Sidebar. Let’s follow me.

1. Log in to your WordPress admin dashboard.

2. Go to the “Plugins” menu and click on “Add New.”

3. Search for “Recent Posts Widget With Thumbnails” in the search bar.

Recent Posts Widget With Thumbnails Plugin

4. Locate the plugin in the search results and click on the “Install Now” button.

5. Once the installation is complete, click on the “Activate” button.

6. The plugin is now installed and activated on your website.

7. Now go to Appearance > Customize> Widgets > Main Sidebar.

8. Click on the plus icon. Then search for “Group“. Write a title like Recent Posts.

9. Now again click on plus ➕ icon. Then search for Recent Posts With Thumbnails. Just add this widget.

10. Done then save the changes from the top bar. Now you have a Beautiful & stylish recent posts section on your sidebar.

Add Social Media Icons On Sidebar :

OK, so we successfully added the Recent Posts section. Now we are going to add Stylish Social Media Icons To our site like the below design. It will increase the look of your site.

1. So to add Social Media Icon section you will need custom HTML / CSS code.

2. Go to Appearance > Customize> Widgets > Main Sidebar.

3. Click on the plus icon. Then search for “Group“. Write a title like Follow Us.

4. Now again click on plus ➕ icon. Then search for “Custom HTML“. Select the custom HTML block here.

5. Now copy & paste below HTML & CSS code in that box.

NOTE: Replace # With your Social media links in the code.

<style>
  #social-logo {
    width: 100px;
    border-radius: 50%;
    border: 2px solid red;
    padding: 10px;
  }


  #social-links-mt {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  #social-links-mt a {
    text-decoration: none;
    padding: 10px 20px;
    text-align: left;
    color: white;
    width: 90%;
    margin: 5px 5px;
    border-radius: 10px;



  }

  .fbicon {
    background-image: linear-gradient(135deg, #7d8cfd 0, #486ee5 50%, #0052cd 100%);
  }

  .yticon {
    background-image: radial-gradient(circle at 100% 0%, #ffa40a 0, #ff9423 10%, #ff8231 20%, #ff6f3b 30%, #ff5b42 40%, #f94646 50%, #e53248 60%, #d11e4b 70%, #c0074d 80%, #b00050 90%, #a20053 100%);
  }

  .tgicon {
    background-image: radial-gradient(circle at 87.5% 12.5%, #9ca8ff 0, #486ee5 50%, #003787 100%);
  }

  .instaicon {
    background: #f09433;
    background: -moz-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: -webkit-linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f09433', endColorstr='#bc1888', GradientType=1);

  }
</style>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">


<div id="social-by-mt">

  <div id="social-links-mt">
    <a href="#" class="yticon" target="_blank"><i class="fa-brands fa-youtube"></i> Youtube</a>
    <a href="#" class="tgicon" target="_blank"><i class="fa-brands fa-telegram"></i> Telegram</a>
    <a href="#" class="fbicon" target="_blank"><i class="fa-brands fa-square-facebook"></i> Facebook</a>
    <a href="#" class="instaicon" target="_blank"><i class="fa-brands fa-instagram"></i> Instagram</a>

  </div>

</div>

6. That’s it. Just click on the save changes button. Now visit your site & check what your social media icons look like.

7. Boom this way you can easily add a social media icon section to your site.

Youtube Tutorial :

FAQs – Frequently Android Questions :

1. How To Change Website Logo In Astra WordPress Theme?

Answer: it is a very simple price to change the default logo on your site.

Go to Appearance > Header Builder > Site Title & Logo. Upload your logo here.

Also, you can change the favicon from Appearance > Site Identity.

2. Can we use Astra Pro Without a license key?

Answer: Yes you can use Astra Pro WordPress Theme without a Licence key as per GPL Licence.

But you will not receive any future updates & support.

Download Section :

File Name	Download Links
Astra Customizer Settings	Download
Astra Pro Ads-on Plugin	Download

Conclusion :

Thank you so much for reading How To Build a Professional Website Using Astra Pro WordPress Theme. If you have any questions then you can feel free to ask me in the comment section.

With this method, we covered lots of topics like installation of Astra Pro WordPress Theme, Import custom Layout settings with CSS code, Recent posts widget, downloading Astra Pro WordPress Theme for free and social media icons, etc…

If you think this article is helpful for you, so just share this article with your friends and family. So in this way, you can easily create a professional blog website using Astra Pro WordPress Theme.

Thank you.

munaim

May 9, 2023 at 12:31 pm

I cant get the Astra Pro theme from your telegram group

Muzaffar shaikh

July 8, 2023 at 5:35 pm

Mujhe wordpress ka free form plugin chahie jo form data ko other page par redirect kare or form data ko us page par redirect kare
Aisa kuch ho sakta kya sir plz told me