How Do I Build a Website with WordPress?
WordPress is our preferred tool for building dynamic websites. We find the power and simplicity to be unmatched. We are often asked how to make a website with WordPress and decided to use a recent project of ours as a case study and demonstration. The project was a simple one-page website called Cheaper Domains that we could use as a landing page for targeted traffic. What follows is the step by step process we went through to complete it.
The Two Essential Parts of a Website
To build a website, you need two things, a Domain Name and a Hosting Plan.
For this project, we wanted to build a very focused website with a name that was descriptive, easy to remember, and easy to type. As you know, it is getting harder and harder to find the right .COM name that meets that criteria. Fortunately over the last year, hundreds of new industry specific domain extensions have become available. Now you’re not limited to the familiar .COM, .ORG, or .NET that have been around forever. Today, you can get extensions like .PLUMBER, .CAMERA, or .MEDIA.
We chose the new top level domain extension .DOMAINS because it matched the keyword we wanted to target. After doing some research and considering our unique selling proposition, we registered Cheaper.Domains, which is extremely accurate and easy to remember.
There are hundreds of new keyword-rich domain extensions to choose from and many more on their way. If you are just getting started or haven’t thought about your domain name options in a while, this is a great time to look for one that is unique, fits your business, and makes it easy for your customers to find you.
Once the domain name was selected, we chose to create the website with WordPress and needed hosting to support our self-hosted WordPress site. Managed WordPress hosting is a great choice for this because it makes setup, security, and maintenance of your WordPress site easy so you can focus on your content.
How Do You Make Your WordPress Site Look Just Right?
We wanted a modern style for our WordPress site so we chose Divi 2.0 from Elegant Themes to create the look of http://cheaper.domains. This wasn’t a hard decision on our part because we already own the theme, have used it successfully on other projects, and have an affiliate relationship with them. Even if that were not the case, we would like Divi because it is mobile responsive, and comes with a huge assortment of visual effects that can be added and arranged with a unique drag and drop page builder.
Divi Theme Options
To achieve the look we wanted, we uploaded and activated the Divi Theme on our WordPress site (This is a premium theme, if you want to use it for your site you will need to purchase it from Elegant Themes.) After it is activated, setup is required in the Divi ePanel. You can get here by clicking Appearance > Divi Theme Options. Here’s what we did:
- Divi requires a graphic logo to be uploaded or else it will display the default theme logo. (We think this is one of the few weaknesses of the Divi theme and would prefer to have the ability to show the website name in text if a logo is not uploaded. We’ve requested this feature in their forum and hope they consider it.) We uploaded our NetFlint logo.
- Upload a favicon if you have one. This isn’t essential, but its fun and can help with branding so we did.
- Configure your social media profiles. These will appear in the footer.
- Now click the Navigation tab. Divi tries to build the header menu automatically by adding pages and categories as menu items. If you like this, leave it. We wanted to create our own menu so we disabled this.
- Click the SEO tab. Divi has some basic SEO settings on this page. We added a homepage title and homepage meta keywords here.
- Click Save. (You may need to scroll down to see this button.)
Divi Page Builder
One of the highlights of Divi is the Page Builder feature and the many unique functional and graphic modules it includes. There are very detailed and helpful videos on the Elegant Themes website that explain each and every module, so we won’t go into that level of detail. We will just talk about the modules we used.
- We started with a new page.
- Add a full-width section and add a full-width slider module. We created one slide for our slider with the “Cheaper Domain Names” header, some text, and our domain search form. We added a photo with geometric shapes as the background and selected “Enable Parallax Effect” to anchor the image in place as you scroll.
- Add a new section and add a 4 column arrangement to the row. In each column, add a Blurb module. Configure each Blurb by selecting one of the included icons, adding a heading and some text. We chose to position the icons on top and selected animation that faded the icons into view.
- Add a new full-width section and add a full-width header. We uploaded an image of money and enabled the parallax effect for the background. We then added the title, “Why Pay More?” to the module. We thought this was a nice effect and broke up the page nicely.
- Add a new section and add a 1 column arrangement to the row.
- Add a text module and the text and headline “We Can Handle All Your Website Needs”
- Add a Pricing Table Module, then add three products, their cost, term, and features. Be sure to select the product that should be highlighted.
- Add a new section and add a background photo with parallax enabled. Add a one-column arrangement to the row and add a Call To Action module. Configure the Call to Action module with the headline and text. In our case we added our domain search form.
- Publish the page
Make It Your Homepage
After you’ve published your page, go to Settings > Reading in the left sidebar of the WordPress dashboard. Configure “Front Page Displays” to show “A static page” and select your new page from the drop down list next to “Front page”. Save your changes, then go to your web page to view your handiwork.
What Do You Think?
Do you have any questions or comments about this case study? Was it the right level of detail? Do you want to see more of them? Let us know in the comments below.
