Welcome to another post in my Website Building series!
It’s time to explore another important step in creating a stunning website that functions as it should and looks amazing.
Making sure your website is designed the right way is important to its success. Whether you have an online store, company website or a blog, the way how you structure your content determines how people interact with your website.
Have you ever visited websites that looked disorganized?
Was it so hard to find what you’re looking for?
I’ve seen these websites and I hate them. I made sure when I started my website I did it the right way.
This is why I want to show you how to customize your website, assuming you made the right choice and created a self-hosted website.
Want to save this on Pinterest for later? Pin it here now!
If you want to create a website that could eventually turn into a money making online business you can read this post. You’ll learn how to start a WordPress website on Siteground in a few easy steps. I use Siteground to host my website and they’re simply one of the best! You can save 60% by signing up using this link for only $3.95/month with their start-up plan! Don’t miss this deal since the regular price is $9.95/month.
How To Customize A WordPress Website
Step 1: Decide between a Premium or Free theme
Of course, you can get free themes for a WordPress website and what’s the not to love about that? After all, you don’t have to pay for them. However, if you are serious about making money on your website you should look to get a premium theme.
The theme I use here on growing dollars from cents is the Beautiful Pro theme from Studiopress. It runs on the Genesis framework like most of their themes. I love their themes. I actually had a hard time deciding which one to choose for my blog.
Why choose a premium theme from StudioPress
These types of themes are specially designed with features that some free themes don’t have such as:
Search Engine Optimization
Themes created by StudioPress run on the Genesis Framework which handles the basics of good SEO for you, using lightweight code for fast performance. Coupled with automatic updates you’ll have a better chance of ranking higher in search engines.
When you purchase a theme from StudioPress, you’re welcomed with unlimited support. Since customizing a website can be frustrating and difficult for some, the staff at StudioPress is there to help. Simply contact customer support and tell them your problems.
Better security features
You don’t want to get a theme that isn’t updated often or at all. This could lead to security issues, resulting in crashes which are a nightmare for website owners. With StudioPress’ themes, that’s one less problem. Their themes are constantly being updated with the latest software to protect you from viruses and hackers.
Faster loading times
Themes from StudioPress are optimized to work with WordPress and works with any browser to display your content using HTML 5 which is the new code standard. But what does this mean? Basically, your website will be compatible with future changes to the web.
Better responsiveness on mobile devices
Ever found yourself browsing the web on your phone and clicked a website only to be greeted by an unpleasant design? Content may be hidden and buttons may not work. Those are just a few of the problems that could be caused by a poorly made theme. Get a theme that is optimized for all devices.
Discounts for members
After you make your first purchase on StudioPress, you are offered nice discounts on other themes from their store. The company is always looking to please their customers.
Step 2: Choose an awesome theme
Here are some themes I recommend depending on the type of website you want:
To create an online store on your website you’ll need the WooCommerce plugin. Some StudioPress themes like the ones above are e-commerce styled themes.
There are soooooo many more themes available from Studiopress to choose from that it could take you hours to decide on one. You know why? Because they’re all awesome!
If you’re a website developer you might want to consider the Genesis framework by itself as a base to build your clients’ websites. Just like that, you have your own website design business! You’re welcome.
For you female bloggers and entrepreneurs, I have a few places you to get your gorgeous WordPress themes. Choose elegant themes from:
Step 3: Download and upload your theme to WordPress
After you purchase your theme go to your account dashboard and click the download icon next to your purchased theme and the Genesis Framework.
Locate the downloaded files which should be in the folder where you normally download your files. Then go to your WordPress page and select “Appearance” then “Themes”.
Choose “Add New Theme”.
After, click “Upload Theme” then “Choose file” and install the two files you downloaded earlier. When you’re done this step, only activate the Genesis Child theme which is the theme that sits on top of the Genesis Framework like my Beautiful Pro theme.
Step 4: Customize your theme and make it yours
I’ll now show you how I added all of the elements you see here on my blog. It wasn’t easy but once I was done I couldn’t have been happier with my work.
These tips are based on the Genesis framework and the Beautiful Pro theme from Studiopress so this may not apply to other themes. If you choose another theme, don’t worry because this post should give you enough information in general about customizing any WordPress theme. Just like the pros…hahaha.
Adding a website logo
This is the small icon in your browser tab which represents your website’s identity. You can see it below.
To change this go to “Appearance” then “Customize” then “Site Identity”.
You can fill in the Site Title, Tagline and change your icon here.
Adding your brand image
Your brand logo is the image at the top of your website like this one here:
To change it, go to “Header Image” then select “Add new image”.
Click “Save” when you’re done.
Adding a menu
A menu is a bar that is just below or next to the header image. It allows users to navigate to specific areas of your website. Take a look at my menu below.
To customize your menu go to “Menu” then “Primary Navigation”. If you want to create an additional menu under your main menu click “Secondary Navigation”.
Click “Add items” then create the items you want in your menu. After, click an item to add it to the menu.
If you want to add subtabs under an item in the menu like in the image below,
align items to the right as I did.
For example, in my primary navigation menu, I dragged “Disclaimer” to the right, under “About”.
This took a little while for me to understand at first but it’s actually simpler than you think. Want to know how I designed my sidebar like:
and customized my footer like:
I used Widgets!
To add a widget, go to “Appearance” then click “Widgets”.
If you want to see the changes to your website as they are made click “Manage with Live Preview”. The icon should be next to the title “Widgets”.
To add content to your sidebar expand the “Primary Sidebar” tab. Select a widget and drag it to the “Primary Sidebar” tab and drop it. For me, I’ll use the text widget which can be used for almost anything.
To get this image in my sidebar I created it using Canva and uploaded it to my media library. Copy the image and place it into the “Visual” tab space. That’s it!
You can link it to a website or web page by clicking this icon:
When you click the image it would take you straight to URL pasted into the field.
Editing post info
The post info comes at the start of the post,
and at the bottom of the post.
To edit post info at the top or bottom of your blog posts you should get the Genesis Simple Edits plugin. After you downloaded it, go to the “Genesis tab” then “Simple Edits”.
Select “Show available entry meta shortcodes” and enter the desired codes into the “Entry Meta (above content)” or the “Entry Meta (below content)” boxes.
Changing the ending line of your website (footer credits text)
Need to change the footer of your website? You can do it using the Genesis Simple Edits plugin as well. Take a look at mine.
To change your footer select “Show available footer shortcodes” and enter the desired codes into the “Footer Credits Text” box. You can even use HTML code to create your footer using the box at the bottom.
All you have to do is create a “test page (post)” that you wouldn’t publish. Write the content you need in the “Visual” tab like how you would do if you were writing a normal post then switch over to the “Text” tab and copy the code. That’s it!
The best part about it all is you don’t need to know how to code to edit your website!
Thanks for reading!
If you liked this post please:
- Share on social media
- Leave a comment below
Did you use a free or paid theme to customize your website?
What are your favorite themes to use?