Today I’m going to share a bit unusual ideas with you, so just keep reading to learn what they are like…
Every time I browse the Web in search for a certain product or service, I visit some web-pages and always pay attention at how they are designed. It really matters for me when I’m about to resolve whether to order pizza, buy a new mascara or just read an appealing post of a devoted blogger.
If the design is original, interactive and eye-catching, I’d even share the link to that website with friends and I would recommend them browse the products or services of that certain brand just to make sure “the stuffing is as quality as wrapping”. Yeah, I like beautiful and uncommon designs, so as you, I hope.
But, let’s see, what do all of those designs start from? I guess they appear as follows:
So all that we see when visiting any websites is the design which has been preliminary crafted in Photoshop, and then transformed into the “language spoken only by servers and web-browsers”.
Let’s hold forth, if a regular website owner wants to change something really essential in their website’s appearance, they have to take the source (PSD) file, make any changes in the graphic editor, write a new code and then upload the updated design to their website.
For instance, I own a website and want to change its look. I’m not skilled in design and I’m not about to hire an expert for this. Will it be possible to create what I want just based on the standard theme I’ve got? Will it be possible to essentially change the web-page and make it look like it is completely redesigned without editing the source file?
The resolution is the proper customization, so today I’m going to try customizing a few absolutely free WP themes to find out what possibilities they bring and what I can get as a result. I’m not going to take premium themes because it is obvious they’ve got much more customization possibilities than free ones. My task is to check if it is possible to get the most out of the free themes, and then share the results of this research with you.
1. I’m going to take three design styles:
2. I will select a few live websites to show you an example of each style.
3. I’m going to customize the following elements of a free WP theme:
As you’ve probably understood, I will test my own customization from the point of view of a regular user without any specific design or coding skills. So let’s start!
I’d love to feel like I am a designer and got the task to transform a simple minimal theme into a bright cartoonish online store specialized in selling dairy products. I’ve created a random brand name, let it be “Happy Cow” and now I’m going to customize my new milk store.
To get an inspiration I browse a few similar sites like these:
These guys make games and their cartoon-style web-page looks interesting.
This is a portfolio website with horizontal scroll – a very creative design idea.
And these guys create websites and brand identity as well as offer marketing services, their website is really bright.
So, let’s create a homepage of my “Happy Cow” store.
For my cartoonish customization I’m going to choose Storefront free WordPress theme recommended by WooCommerce. After the theme is installed and activated, I go to Appearance -> Customize and start changing the look of my store.
Let’s start from Site Identity. Here I can add my site title and tagline as well as upload a logo. So I’ve chosen a colorful logo depicting a smiling cow, guess it would be great.
The next step here is changing the header. I’ve chosen the one with cartoonish clouds to make it match the uploaded logo.
After that I’ve resolved to manage menus, so I’ve selected menu items, and now I can drag-and-drop them to reorder.
Note: Be sure to create the necessary pages in Pages -> Add New menu of your admin dashboard before creating and arranging the menu items.
The next step here is selecting the content to be displayed on the homepage. I’ve selected the Products page. So I go to Pages -> All Pages -> Products in my dashboard to add several products to the page. Here I will use a Products block in Gutenberg editor. I can either display products filtered by category
or select Individual Products and display them on a page.
After the page with content is updated I can observe products on a homepage.
As you see I’ve changed the page background. I’ve uploaded a custom illustration and selected a full screen display type.
I was trying to choose both header image and background image with the clouds to match each other while scrolling, this was made to create an illusion of a consistent design, although both header and background images were absolutely different illustrations from different sources.
If you wish you can change the color of buttons and some other colors of your theme.
In my case I was trying to make buttons look brighter (as a variant).
When managing widgets I resolved to add product categories to the sidebar.
So I found the required widget, made some changes, and now my product categories are displayed in the right sidebar.
This free WP theme allows to choose another layout if you want your sidebar to be located on the left.
If you’d wish to change the homepage content and would like to display your latest posts instead of a static page, you can differently customize every post to make them look more attractive.
For instance, I’ve resolved to add some CSS to style a post and change its background color.
(Find CSS color codes here.) So I’ve inserted the CSS with the definite post id and the chosen color.
You can find the post id in the URL bar when editing your post.
Here’s how my cartoon-styled web-page looks like.
Conclusions on this style:
I’ve realized it’s not possible to get the most out of the website’s appearance when you use a standard free WordPress theme. I’d love to change the style of menu text, its color and size; I’d like to change the look of the cart and make much more amendments which aren’t possible to make using just the Live Customizer.
However, if you want to create a personal website or a small shop for a certain target audience, you can start from using a free theme and customize it for your needs with the help of custom illustrations, CSS, your own logo, header images, etc.
The next styles I’d like to apply will be just a trial. We already know it’s not possible to completely alter a web-page but it’s quite possible to beautifully customize it up to your taste.
I’ve assembled a bunch of examples that present the two-tone color style the best:
An originally looking website of a music band from Finland.
A website of design and programming team from Switzerland.
A minimal online-store selling bags and accessories.
So for my next customization experiment I will take Twenty Seventeen default WordPress theme – a simple standard solution for beginners. I’d love to create a portfolio website for illustrator and stencil maker.
Here I’ve invented a website title and created a logo myself using a free logo generating service. I can’t edit the logo height here, so I upload it in its original size 200×200 px.
The theme allows to select either light, dark or custom color scheme for my website.
After that I try different header media and finally choose the most suitable one.
It’s important to select a header which will make my logo clearly visible.
I manage the menus as well as I did with the first theme.
And now I choose the homepage content – I prefer the Portfolio static page.
I’ve uploaded a few photos into the gallery to be displayed on portfolio page, so now I go to the Theme options in the Customizer and select a One Column page layout to make my portfolio look better.
When it comes to changing the background I just go to the Colors section of the Customizer and choose the dark color scheme. This is all I am allowed to do here.
And now I’d like to add a homepage slider to be located above my portfolio. You can read a detailed guide on how to add a slider with Revolution Slider plugin here.
I just click New Slider
and insert its title and alias to go further.
After selecting a bunch of photos from the media library my slides are finally inserted and ready to be saved.
Here’s my slider.
Two-tone color style is considered to be a minimal one, so you don’t have to “invent the wheel” and create something extraordinary. I guess styling the website, in this case, will be an easy task.
When I activated the third theme for my next customization experiment, of course, I’ve got the settings from the previous theme saved here, so I found that my slider created for the previous design, looks really amazing in the current theme too.
Before we go further, please see some of the most appealing photo realistic websites:
A company specialized in selling cup cuffs that don’t harm the environment.
A website of a Brazilian restaurant.
A portfolio of digital designer and art director.
Now I’m happy to introduce the WP Daddy’s baby – Free Oswald One-Page Creative WordPress Theme. If you’ve already downloaded it from the official WordPress directory, you’ve probably already tried to customize it depending either on your personal or business needs.
You can download and learn the Documentation of the theme to find out what customization possibilities it has. You can either try to customize your website in Photo Realism style or in any other style you prefer. I will just show a few possibilities of customization I’ve used for my “BaseBall Addict” website.
Before you start to customize your Oswald theme, install and activate the Oswald Lite extension to use it for importing the demo content. Go to Plugins -> Add New -> Upload Plugin and upload the zip file to install the extension.
After the installation, activate the plugin.
Now you can go to Appearance -> Customize -> Homepage Settings and select the Custom from Customizer option. After that, you can start editing your website with ease.
I start from Site Identity and I upload a logo for my site. The theme allows to set the logo height, so if a recommended logo size is 265×90, you can easily set the 90 px height for your logo.
If you go to Custom Homepage Content section in Customizer you will find a Homepage Header section, and here it’s possible to easily upload a header image, change the title, change the main text and its color, select the color and text of buttons, etc.
By the way, the Header section in the Customizer allows to select a header layout which defines the position of logo and menu.
By clicking the editing pencil near every section you can edit either About Us, Services, Team, or any other sections of the website with simplicity.
You can also easily edit menus as well as you do it with any other free theme.
The Styling Options of the Customizer allow to upload the background image, select its preset and position.
Conclusion: So, as you see, I was trying to use Oswald for creating a baseball-oriented website, and I guess I’ve made it pretty successfully. Among all free WordPress themes I’ve ever used, Oswald is the one which gives the biggest amount of customization possibilities. However, it can’t conquer with its premium alternative which has even more features and editing options.
If you need to create an extensive corporate website or a trustworthy business card, then it’s better to have a serious approach to your website creation and choose an impeccable premium design with multiple features and customization opportunities. But if you just want to create a personal blog, a small online store for a limited target audience or a one-page promotional website, then choosing and customizing any free WordPress theme is quite a good idea.
My experiment has shown that essential alteration is impossible without professional redesign, and customization can only help style my website in different ways without changing the essence of the initial template. The more customization possibilities are provided by the theme, the more authentic your custom website can look. That was the experience for me as a regular user without any coding skills. I hope this review was interesting for you as well. See you!