How to Create a Website Using Bluehost, WordPress, and Elementor
Many websites were easily built in a matter of hours using Bluehost, WordPress, and Elementor. If you don’t know what either of these are, don’t worry, you will find out by the end of this. We created this easy guide to get you started in three parts. Here’s the quick version
- Purchase domain and pay for hosting with Bluehost
- Install WordPress
- Add a theme
- Use Elementor
Part I: Bluehost
What is Bluehost?
Bluehost is one of the largest web hosting companies in the world. It is where you can go to find a domain and host your website at, which is what we are going to cover in this tutorial. Let’s get started!
Step 1: Visit Bluehost
Visit Bluehost.com (Yes, that link gives you a discount) and click on the green Get Started button. This will take you to a list of plans.
Step 2: Select a Plan
Make sure that you choose a plan that fits your needs and your budget. I recommend going with the Choice plan to get the domain privacy and protection.
Step 3: Get Your Domain
Now, it’s time to choose your domain (your website address). Enter your desired url in the box to the right. Let’s say you want logos.com, type in logos and click next. You will soon find out that it is taken, but Bluehost will give you suggestions, or you can try another search on your own. For this example, we will use AwesomeLogos.net (it’s available)! If you already have a domain, and just want to use Bluehost for hosting, enter your url in the box to the right and continue onto the next step. Note: For the remainder of this tutorial, you can replace Awesome Logos and awesomelogos.net with the name that you chose in this step.
Step 4: Pay For Everything
Part II: WordPress
What is WordPress?
WordPress is a content management system (CMS) based on the PHP programming language. Over 30% of websites online are powered by WordPress. It is free to use and has thousands of plugins to get your site set up perfectly. Let’s get started!
Step 1: Log in to Bluehost
If you aren’t already logged into your Bluehost account, visit my.Bluehost.com and log in now. Once in, click on My Sites in the sidebar to the right. Then on the right side, click Create Site.
Step 2: Create a New WordPress Site
Just need to add your site name and your site tagline. If you’re stuck you can enter anything because you will have a chance to change it later.
Step 3: Choose a Domain
Remember the domain we made in Part I, Step 3? From the domain drop-down select awesomelogos.net. Then select which, if any, plugins you want to install. Click next!
Step 4: Log in to WordPress
WordPress should have been installed successfully, and your installation details should be displayed on screen. Take note of your username and password, When you’re ready click the Login to WordPress link. Once in, you can go to settings in the sidebar on the left side of the screen. Here you can change your website title, tagline, URLs, and more. Going forward, to log into your account you can enter AwesomeLogos.net/wp-admin.
Part III: Themes
What is a theme?
Now that we have WordPress installed, we need to add a theme that is compatible with Elementor. We recommend Astra themes, but there are other great options like Neve, Divi, and ONE MOTE. Astra Theme is a free, easy to use theme that has been ranked as the best Elementor theme on several websites. Astra has dozens of starter sites, and has a tone of add-ons, to get you started. The best part is that it is all free. Astra also has a premium version with features that can’t be found in the free version. Let’s get started
Step 1: Install Astra
In the WordPress sidebar, find and click Appearance, then select Add New Theme. Search for Astra, click install, then click activate after it is installed.
Step 2: Get Started
After activating Astra, you new message will appear on your dashboard with a Get Started button. Click the button to have the Astra Starter Sites plugin installed. This is give you the starter sites that were mention earlier in this section. Astra Starter Sites will now be found under Appearance in the WordPress sidebar menu. You will be asked about your preferred page builder. This tutorial is all about Elementor, so we will obviously select Elementor.
Step 3: Selecting a Theme
You will be presented with a library of templates to choose an Astra theme from. This step can be fun and overwhelming at first. There are so many to choose from, and you know that you will only get one. You can filter between the free ones and other categories to help you narrow down your search. Even though we can change practically anything on the template we choose, you still want to select the one that resembles the look you’re going for to make editing easy. Simply click on the template that you want to view a preview of it. Once you’ve decided that you want it, check the boxes to make sure that the necessary widgets, tools, and plugins are imported, then click Import Site. Depending on the chosen template, the installation can take some time. Be patient, your new website is being built. Once it’s finished you can click on the blue View Site button to see your site.
Step 4: Customizing Your Theme
Now that you see your awesome website, you will want to make it your own. The menu on the left will give you all of the available options to customize it your way. You can always get to this screen from WordPress by clicking on Appearance>Customize from your dashboard. This is where you would want to set up your logo, colors, and fonts. Keep in mind that this menu varies based on the them that you choose. LogoEveryone knows, or should know, how important a logo is to a brand. If you have your logo already, then click on Layout in the sidebar. Then find Site Identity under the Header option. This is where you can change/remove your logo as well as modify other options for your website. After you’re done, you can click the back button on the top of the sidebar menu to go back. ColorsTo change the default colors for your website, you want to visit the Colors & Background option from the sidebar menu on the customize screen. Once there, select Base Color to change your site’s default colors. If you need help choosing the right colors for your website you can read everything we have to say about color. FontsAnother important option to change from the customize screen is your typography. In the sidebar menu you will see Typography right below Colors & Background. Visit Fontpair.co for help with finding the perfect Google font for your brand. There are other options that you change here to make your website feel more like yours and not like a template that you threw on there. Once you’re finished with editing click on Publish at the top of the screen to have your changes go live for the world to see. Most of the magic will be done in Elementor.
Part IV: Elementor
When you imported the necessary plugins with your Astra Starter Site, Elementor may have been included and already installed and activated.
What is Elementor?
Elementor is a free drag and drop page builder for WordPress. With Elementor you can design every part of your website with typing one line of code. It works with nearly any theme that you put on your site, and currently has over 3 million downloads. When creating a template, or building a page, you can drag widgets onto the design area and customize them to your liking. Elementor comes with its own set of widgets, and you can find countless other plugins to help you design your site. Let’s get started!
Step 1: Install and Activate Elementor (skip this if it was completed for you in Part III)
From WordPress, you will find plugins in the sidebar on the left side of the screen. Hover your mouse over it and select Add New. Search for the keyword, “Elementor,” and it will be the first result, “Elementor Page Builder.” Next to the title, you can click Install Now, then click Activate once it’s installed. Your wordpress sidebar will now have a new entry, “Elementor,” above appearance.
Step 2: Edit a Page with Elementor
Getting to the Page BuilderFind Pages in the WordPress sidebar. Here you’ll find a list of all of the web pages created for your site. The ones that say Elementor next to them can be edited in Elementor by hovering over the page title and clicking Edit with Elementor. If you do not see Elementor next to the page title, simply click the title and you will see a button on the top of the page that says Edit with Elementor. After editing the page with Elementor you will see it next to the page name going forward.
Editing a Page
Elementor has a free version, and a paid version for as low as $49 per year. Depending on which version you own will determine what features are available to you. Don’t worry though, you can make a beautiful page using just the free version if you don’t want to pay anything. On the left side of the page will be a sidebar with widgets and options just like most customizers. This is also where you will find elements that were added with any plugins that you may have downloaded. We suggest Unlimited Elements. Just about anything you can see on the screen can be changed. This is where you will spend a ton of time creating your brand’s look for its online presence, so I suggest familiarizing yourself with everything Elementor has to offer. Any changes you make while editing can be seen while you’re doing it. To learn how to use Elementor, they have a plethora of tutorials on their official website. Another great option to learn Elementor will be Elementor Resources. They have tutorials for the free and pro versions, and for beginners and experts!
Part V: Backup
We can’t stress enough how important it is to backup your website data. Currently, TheBlareGroup.com is backed up weekly onto Amazon S3 using UpdraftPlus. Let’s get started.
Step 1: Get the Plugin
From WordPress, go to Plugins>Add New and search fir UpdraftPlus. Install it and activate like any other plugin. You will be able to find it under settings in the WordPress sidebar. Go to Updraft Plus and find settings on the top of the page.
Step 2: Settings
You do not have to follow our settings. This depends on what makes you comfortable, so please don’t blame use if anything goes wrong. So, this is what we did: Files backup schedule.We selected weekly and chose to retain 2 backups. Database backup schedule. We selected weekly and chose to retain 2 backups. Remote Storage.Amazon S3 We include our theme, plugins, and uploads in our backups. We also have a basic report emailed to use every week. Don’t forget to save your changes and make sure you have an account set up wherever you decide to store your data at. There you have it! If you made it this far you should have your website up and running. Leave your site below so we can check it out!