This post summarizes is a technical walkthrough about how to build a web site. It is considering a general-purpose web rather than, for example, a traditional blog.
There are many sources about how to make a WordPress webpage, but I made this post just to summarize the key steps, as a checklist to see if we forgot anything.
There are many ways to build a web in WordPress and here I am suggesting just one that uses Astra theme in combination with page builder Elementor. Nevertheless, take into account that there are many methods; this suited me in my circumstances, but you may have a look at alternatives.
As mentioned, I focus on the technical aspects to build the site, talking just briefly about the goal, content and design. They are very important points to consider, but they are just not covered here.
This post was written while using WordPress version 6.0.2. Instructions may differ in other versions.
Steps to build a WordPress Web using Astra and Elementor
The main steps to build a WordPress web is:
- Consider non-technical aspects of site creation
- Find a domain and a host
- Install WordPress
- Setup WordPress
- Format the WordPress page
Consider non-technical aspects of site creation
You may perform some analysis and ask yourself some questions about what you really want to do before starting the technical part. You may think about the goal, design, content, target, etc.
These aspects is not covered on this post. I recommend this external post about the non-technical aspects of the web creation.
Find a domain and a host
You need a domain and a host before installing WordPress.
Instructions depend on vendor, so I will not enter into details.
I am not proposing any domain nor host vendors to be neutral. But if you just look for these keywords in your favorite search engine, you will find them the most popular ones among the first results.
Install WordPress
The first step is to install WordPress in your web.
I recommend to use the application Softaculous, that automatizes the installation.
I am not detailing the steps because it depends on your vendor, but I am sure it will provide some nice tutorials about how to install WordPress.
Manual installations of WordPress is recommended only to advanced users that want to get very specific customization. If that is your case, you can find instructions on this link. But still it is lots of works for something that is already automatized with Softaculous.
Setup WordPress
Set the time zone
From WordPress dashboard, go to General > Settings and set the correct time zone.
Remove unnecessary WordPress plugins
There are some plugins installed as default on WordPress. Some can be considered bloatware, so it is advisable to get rid of all of them that we consider unnecessary.
Update WordPress version
From WordPress dashboard, click on Update.
It updates both WordPress itself and its plugins.
WordPress is auto-updated by default, so we do not need to worry about this. In any case, it is not a bad practice to have a look from time to time to the Update section.
Create WordPress users
You must review the users that are created from WordPress dashboard > Users.
There are different roles available for a user, and their meaning may not be evident to you (Editor, Author, Contributor, etc.). To understand the difference between them, you can have a look at this link:
https://wordpress.org/support/article/roles-and-capabilities/
The latest versions of WordPress use Gravatar to set the user avatars. Gravatar allows you to link a photo to an e-mail. The photo linked to the user’s email will be displayed in WordPress.
You can visit Gravatar and link your e-mail to a profile photo on this link.
Change permalinks format
Permalinks are the permanent URLs that point to your posts.
There are different possibilities for permalinks format, you can check them from WordPress dashboard > Permalinks.
Configure comments
You may want to have a blog free of comments. If so, go to WordPress > Settings > Discussion > “Default post settings” group, and then uncheck “Allow people to submit comments on new posts”.
If you decide to accept comments, you may read the following pieces of advice.
You can add a manual step so comments need to be approved before they are displayed in your blog. There are two options: all comments must be approved, and all new comment authors must be approved. To set them, go to WordPress > Settings > Discussion > “Before a comment appears” group.
Spammers may flood your blog. It will be very convenient to add an anti spam filter or captcha. A recommended plugin is Akismet, that is free as long as you do not have ads, sell products or services or promote a business. Another popular plugin, only free for the first year, is Spam protection, AntiSpam, FireWall by CleanTalk.
Configure pingbacks
Pingbacks are comments that are automatically added whenever another WordPress blog or your own blog link a URL to your site.
They are displayed differently on WordPress depending on the layout we are using.
Pingbacks are enabled by default on WordPress. They can be annoying, as we receive a comment notification any time you link one of your posts.
They can be configured, so only auto-pingbacks or all pingbacks can be disabled.
You can find more information about pingbacks and how to configure them on this external link.
Format the WordPress page
Install a page builder plugin
We can edit pages in WordPress using different types of tools, that have some differences:
- Block editor
- Page builder
Block editors allows to add and edit objects from a blank or existing WordPress page. However, it does propose templates to create new pages.
The default page builder for WordPress in called Block Editor (formerly know as Gutenberg). It is not a plugin, as it comes with WordPress, so it does not need installation.
On the other hand, page builders that allows to create entire pages from scratch and apply a set of templates. It also allows to modify the content like block editors.
Examples of page builders are:
- Elementor
- Beaver Builder
- WPBakery Page Builder
In this post we are proposing to use Elementor. So please install plugin Elementor before continuing to the next step.
Set a theme
From WordPress dashboard, go to Appearance > Themes.
Despite the evident, selecting a theme does not only means to choose a color palette. It also implies to choose a set of possible layouts and additional functionalities. Some themes offer more customization than others.
The actual layout, color palette, etc. are chosen in a further step.
If you are looking to create a web site, as the title of this post implies, I recommend to use Astra.
Astra Starter Templates make use of either Block Editor, Elementor or Beaver Builder (it allows us to choose) to set our page.
Apply a site template
Install plugin Starter Templates (former Astra Starter Templates).
You can access Starter Templates in either of these ways:
- Go to Appearance > Starter Templates
- or
- In the plugin list, click on “See library” link below Astra Starter. You will taken out from WordPress and redirected to a Starter Template page that is still hosted in your site.
Choose a template among those offered. You can choose filters and categories to narrow your search. The color palette, fonts and images can be modified later, so pay more attention to the page purpose (personal website, eCommerce store, artist portfolio, etc.).
Follow the wizard steps until the template is applied.
You may have to wait a little until the template is applied.
When it is finished, you will see that your website looks completely different.
Customize color palette and fonts
To set the color palette, from the WordPress menu go to Appearance > Astra options > Set colors.
Go back, and click on “Typography” to set the fonts.
You can set the logo in two places:
- Under Astra > “Site identity”.
- Under Astra > “Header”
You may customize the header on each page.
Customize site header and footer
To customize the site header and footer, from the WordPress menu go to Appearance > Astra options > Header Builder and Footer Builder.
Take note that from this view you cannot edit the page body, only the header and footer.
Customize the header and footer at will. For example, the footer may include social networks that you may want to edit. You can add or remove social network icons, and add a link to them.
Astra is a freemium tool. Header and footer tools are included in the free pack, but I am afraid that there are functionalities that fall into the paid part. We will try to stick to the free functionalities on this tutorial.
Customize the pages featured in your site
From the WordPress menu go to Pages. You can delete the pages you think that are not applicable to you.
You can back to Starter Templates and add single pages to your site, instead of the whole site template.
Customize menu
Go to Appearances > Menu and edit the page order that appear in your web site menu.
You can indent menus, so there is a first level menu that is visible from the beginning, and then a second level menu that is displayed only when you expand any of the first level menu.
Edit page content
As far as I found, it is more difficult to edit the Astra body elements than as it was header and footer (at least on free version).
For example, I could use Astra to add social networks dynamically to the footer, having a setlist of common icons (for Facebook, Twitter, etc.). However, I could not find this option for the body. If you know how to do it, I would appreciate if you could leave a comment.
We can say that a WordPress web site can be organized in items on different hierarchy levels. These items would be, in a top-bottom approach:
- Pages
- Section
- Elements
A page is a single screen that contains information; we may need to scroll down to see all info within a page. If we want to move from one page to another, we need to load the next page and we will stop seeing the previous one. We move from one page to another by using the menu.
Examples of pages within a personal web site would be “Home”, “About”, “Portfolio” and “Contact”.
A page is divided in sections that compose the page. Sometimes these sections are “linear” because one section is usually placed after the other in a vertical way; however, there are more complex layouts where there are different sections in the same line.
Blocks are predefined sections that are offered by plugins and can be used as templates for recurrent sections.
Examples of blocks in the body of the “Home” page of a personal web site may contain different sections like “About me”, “Services” and “Experience”, one after the other.
Blocks contains elements. These elements are each single item that makes the page, for example a button, textbox, etc.
You may want to make a backup of the existing page before edit it. You can do it by cloning it and not adding the new one to the menu. You can use “Duplicate post” plugin to do so, as explained on this external post.
To edit a page, go to the WordPress page section, find the page and click on “Edit”. Then, click on “Edit with Elementor”.
You may review each page generated by to adjust it to your preferences, remove sections and update blocks your content.
To add blocks to the page, scroll down to the end of the page where you you will find a dotted box with the text “Drag widget here”. As we are using Elementor and Starter Templates, you will find at least three icons to add a block:
- Plus icon (from Elementor): add an empty section.
- Folder icon (from Elementor): add a block from Elementor templates
- Starter Template (from Starter Template): add a block from Starter Templates
Create new pages
Create a new page from WordPress > Pages > Add new.
In this tutorial we recommend to use Elementor instead of Block Editor/Gutenberg.
Remember to update the menu.
Get Help
You can get help about WordPress.org, Astra or Elementor on the internet, for example from the official communities.
Official Astra Users Community Group
External references
- Tyler Moore; “How To Make a WordPress Website – For Beginners“; YouTube
- Jackie Dana; “Learn WordPress Dashboard“; Namecheap
- Astra editor team; “Gutenberg vs Elementor“; Astra
[…] How to build a WordPress Web using Astra and Elementor […]
[…] How to build a WordPress Web using Astra and Elementor […]