This post may contain affiliate links, which means I may earn some commission: More details.
A website is necessary for every business, especially in this Age of Technology and Pandemic, as most companies have turned to the online space to grow their businesses. A website is your business’s first impression. If it doesn’t stand out, the user will be hesitant to do business with you – that’s a fact.
Since the start of the Internet, websites have been trendy. However, making a website was very complicated, and you couldn’t do it if you didn’t have the technical knowledge.
Fast forward a few decades and boom – WordPress. WordPress is a content management software that allows you to make a website and manage it without needing to possess technical knowledge with the help of themes or templates. How? Continue reading this article to learn and set up your own website in less than an hour!
For the demonstration, I’ve selected my all-time favorite theme – Astra.
Astra is a very user-friendly theme that can be used to make professional websites for a business, a wholesome website for your personal blog, an eye-catching website for your online store. This is, as some say (me), one theme to rule them all. Astra was designed for beginner like you and me, that means that we won’t have to lose ourselves in the endless code.
Of course, the developers didn’t forget their fellow developers, and the theme allows customizations in the code when needed. Astra also supports Right Text Line support, which means that you can have a bilingual website simultaneously! How cool is that?
Although Astra is amongst the most downloaded themes, the developers still have a free version for the theme to be used and maybe upgrade to later if you’d like to add some featured features. Astra has more than 1,000,000 downloads.
Moreover, this theme is, I believe, the most compatible with the Page Builders, including WPBakery, Elementor, Divi Builder, etc., and WordPress Plugins. Downloading and installing Astra will allow you to import countless high-quality website templates with just a click of a button. How cool is that?
Astra is super light which means that your website will load quicker than The Flash can go out and bring back a bagel. Still, I personally believe the compatibility with major page builders is the theme’s unique selling point and success.
Astra Pro Pricing
Astra Pro plans start at $59 per year or $249 if you choose a lifetime package. One of the amazing things about Astra is that they offer white-label on all the pro plans; which means you can use the Astra theme on your client’s sites under your own brand.
Whereas, the Growth bundle also offers additional products like Convert Pro Plugin, Schema Pro Plugin, Ultimate Addons for Beaver Builder and Elementor, SkillJet Academy Membership, etc.
If you’re thinking to start a simple blog or a digital agency, Astra Pro bundles are more than enough to fulfill your needs.
Astra Starter Templates
Astra offers hundreds of free and premium starter templates that you can use to import any type of website with one click.
These starter Templates are made with Astra using page builders like Gutenberg, Elementor, Beaver Builder, and Brizy.
How to install the Astra theme?
Free Astra theme can be downloaded from WordPress.org or from within the Admin Panel of the website.
Step 1: Log into your admin panel using /wp-admin after your URL:
www.yoursite.com/wp-admin
Step 2: In the menu, you’ll see “Appearance.” Upon clicking on it, you will see “Themes” as in the image below. Click on it.
Step 3:
In the search bar, search “Astra” and install it. In a few minutes, you should see it on your screen and activate it.
Step 4:
Select “Starter Templates” from the menu, and you should see the same as the image below.
Click on a template that suits your needs and click on it. Press on “Import Complete site.”
You’ll ask your level of expertise and who you’re designing the website for, for yourself/company or for a client. This doesn’t affect your experience. You will also be asked your name and your email. Astra sends you a welcome message along with a surprise in your email.
Once the import is complete, you’ll be asked to click on a button that will redirect you to the main page of your website.
Voila! You just installed the best theme in less than five simple steps!
Installing a Page Builder
Now that we’ve imported the theme and demo content let’s install a page builder to customize the layout and change text and images easily.
In the menu, you’ll see “Plugins.” Upon clicking on it, you will see “Add New” Click on it and search “Elementor.” Install and activate it.
Let the customizations begin!
Click on “Appearance” and click on Customize. You’ll be taken to a screen where you can make the general changes, including typography, logo, colors, customize the buttons, and much more.
How to add the logo:
Click on “Header Builder” and then “Site Identity & Logo.” You can add your logo, adjust the width of the logo. You can even choose to display a tagline under your logo.
Lastly, the best part. You can easily adjust the formation of the logo and the menu. The logo can be in three places in the header; left, middle or right. Same for the menu. Experiment with this and choose the layout you like.
Typography & Colors
Don’t you like the fonts used in the theme imported? No worries. Astra allows you to easily change fonts throughout the website.
Click on “Global” under “Customize,” and you’ll see an option to change the typography, colors, and buttons.
Let’s look at typography first:
When you click on typography, you’ll see two further options; Base typography and headings.
“Base Typography” allows you to change the body text’s font family size and adjust the paragraph margins.
“Headings” allows you to set the font family for the headings. An additional feature offered is to set a different font for every heading. You can have Calibri for Heading 1 and Arial for Heading 2. You can also define the sizes you want. If you’re going to keep one font for all, you can set it to “inherit,” and all headings will be the same as the one you set at the top of the page.
Now, let’s see how we can change the colors of the website:
Click on “Colors.” Here you can select the color of the body text. You can also change the color of the theme. You can also change the link’s colors and their color when you hover your mouse over them. Not everyone is a fan of white backgrounds. You can select the color of the backgrounds from here as well. Lastly, everyone want’s their headings to stand out. You can change the color of the titles too!
Click Click – Buttons
This dedicated menu item allows you to customize the buttons. You can select the background color and the text color in the button. You can also set the border-radius and the border color if you want an outline. You can also select the button font in this section.
After making these changes, make sure to press “Publish” at the top to save the changes and back to the dashboard.
How to edit the menu items?
Navigate back to the Admin Panel. Under Appearance, you’ll see “Menus.” Click on it.
This is where you can manage the structure of your menu. You can add and remove new menu items. You can also use pre-made pages and add them to the menu. You can also have dedicated pages for categories. This is very useful when running an eCommerce store or a blog and wanting just a specific category on a page. You can also change the order of items on the menu. Let’s say you want the “Services” tab to be after “Products.” This is where you can make it happen.
How to edit the content pages with Elementor
When you’re on the page you want to edit, you can see an option at the top bar that reads “Edit Page.” Click on it.
When you click on “Edit Page,” you should see your page along with these options. Because we installed a Page Builder, let’s click on “Edit with Elementor.”
Once the page is opened in Elementor, you should see a similar screen.
Now, click on a section, and on the left side, you will see everything that can be edited. For text, you can also click on it and change it on the right side.
Once you’ve made your desired changes, make sure to update the page.
Tip: Open your website in an incognito tab so you can see the changes quickly. Closing and opening Elementor, again and again, can be counterproductive, or you can click on the “eye” icon at the end of the page to view it.
How to add new sections with Elementor
Scroll down to the end of the page; just above the footer, you’ll see these options (in the image below):
The “plus (+) icon” allows you to add a new section to the page. You can choose the layout from a range of choices available.
After you’ve added the section, you should see different elements that you can use to fill the section. Start with a heading, maybe add a small paragraph, a few photos.
Footer – The Credits
To edit the footer, you need to head back to “Customize.” Press on “Footer Builder.”
You can add, remove widgets, add shortcuts, and edit the copyright section. You can also arrange the widgets to your liking.
Conclusion
So, if you follow this article, you should have a decent website ready. Web development has been made more accessible because of page builders like Elementor. A shoutout to the team behind them, which lets people like us launch a website quickly. There’s still a lot of things you can play around with within Astra. Don’t hesitate to. Try different layouts, try different colors before finalizing. The best trick is to find something relevant to your business and customize it. This way, you won’t have to make too many changes.
We hope this article helped, and maybe someday we’ll see a website made by one of the readers; nothing will make us happier. You will need a lot of patience to develop a website; it might take longer than expected, but don’t give up. Astra and Elementor are the best combinations, and together, they’ll help you go live!
