WordPress themes come in different forms and sizes, but the theme customization techniques remain similar. If you know how to customize one theme, it would be much easier for your to deal with another one.
In this article we’d like to cover the Cloe Brooks and show you how you can customize its design, layout and basically make it your own.
Empty Theme vs Demo Content
Once you install a theme, you’ve got two options, either building your pages and layouts from scratch, or install a pre-built dummy data that would fill up the pages for you and would make your site beautiful from the get go.
Each way has its pros and cons, for example if you choose to import the demo data you may need to clear up your site afterwards, and remove unnecessary pages, posts, categories, etc. With the clean installation however, it may be too time consuming to recreate the original page layouts and settings.
We advise you to go with the demo content option, and install the full site’s demo data. It would be a lot easier to replace text and images with your own and delete the rest of the data, rather than building everything from scratch. After all, deleting content is easier than creating.
Site Logo and Favicon
After the demo content installation we can start personalizing our site. The most straightforward way to do that is to upload your logo and favicon.
Those two components separate your site from others and make it distinctive.
If you don’t have a logo yet, don’t worry. You can use a site title instead. A site title along with a tagline can still produce a professional look to your site, and would be more preferable than a poorly made image logo.
A favicon is yet another brand identity element you can set up here. It is displayed at the beginning of a tab in your browser. In order to upload a favicon, use a 512 pixels wide .png image.
In order to upload a logo, go to Appearance > Theme Options > Customization and in the ‘Main Logo’ section select your logo image. If your logo looks too big or too small, you can change this by adjusting the ‘Logo height’ value.
Color Scheme
Color scheme is an integral part of any design, and the capability to change it gives you the freedom of personalizing your site to a great extent.
By default the Cloe Brooks theme features a combination of warm and blue pastel colors. These color hues fit well for a medical website. However if they don’t match the colors of your brand, or you simply want the color scheme to be slightly different, you can adjust them in the theme options panel.
Go to Appearance > Fonts & Colors and select Color Schemes. You can see that Cloe Brooks comes with two default color schemes, light and dark. They are useful if you want to change the look of your site quickly, and want it to preserve the designer’s original color choices.
However you can also change the original colors, and redesign a color scheme completely. Probably the least time-consuming solution would be to change the accent colors of the theme. In this way, you can see considerable changes to the site’s color palette instantly. For a more radical change you can also adjust the colors of other site elements, such as input fields, main and alternate background colors, border accent colors, etc. Those are subtle changes, but necessary if you’re planning to change the design completely.
Another great thing is that you can preview your color changes and see them in combination with other website elements in the color settings panel.
In some cases you might see that some of the elements in the theme demo don’t seem to have your newly assigned colors. This means that the colors of those elements are assigned via the Visual Composer. You can either open the corresponding pages with those elements and correct them, or ignore them until you start uploading your content.
A handy option is that you can save your current color scheme settings as a new color scheme, or duplicate existing one to save it in case you want to switch to the theme’s original colors.
Once you’ve done customizing your color scheme, assign it in the Body Style tab in Appearance > Theme Options > Customization.
Typography
Although typography may seem not as important as color scheme or images for your site, in reality fonts play even a greater impact on your viewers. If your content isn’t improperly styled, your readers would have a difficult time understanding your message.
Cloe Brooks features an elegant custom sans-serif typeface, but if needed you can change it for any other font you prefer. You can either select an available font from the Google Fonts collection, or upload your own.
You can find the theme font settings in Appearance > Fonts & Colors > Fonts. The settings are versatile and give you a great control over the text styling of your site. Adjust fonts for such elements as headings, body text, links, input fields, buttons, menu items, and more. You are able to select the font style, weight, line height, decoration, and even specify top and bottom margins of an element.
Typography is a subtle field, and if you’re a beginner, it can be easy to mess things up. If you’ve never dealt with typography before, but still would like to give your theme a different look, we recommend paying attention to the original theme font choices, and replace them with fonts of the same style. For example, if the original theme uses a sans-serif font, it’s better to replace it with another sans-serif font.
Another tip is to maintain contrast between different font groups, e.g. the headings and the body font. The contrast can be achieved with the help of size, color, font weight, and font style.
Social Accounts and Contact Info
The next step would be to fill out your contact information and add social media accounts to your website.
You can find the social media settings by going to Appearance > Theme Options > Socials.
You are free to add as many accounts as you need by specifying the address link and an icon of your social network.
In order to integrate your Twitter feed into your site, here you would need to fill out the Twitter API details, such as consumer key, consumer secret, etc.
Your contact information can be entered in Appearance > Theme Options > Contact Info. There you can specify your email address, company address, open hours, phone number, and more. This information will be used in the header and footer sections of your website.
Wrapping Up
Although there are many more things you can customize in the Cloe Brooks theme, here we’ve covered the most important ones.
We’ve covered such steps such as whether or not we need to install the demo data, and how to upload a logo and favicon. We also learned how to tweak the color scheme and typography of our site. Lastly, we learned where exactly in our theme we can specify our contact information and links to the social media accounts.
As you can see, the theme customization is not as daunting as it may seem at first glance. It requires a bit of time and patience, but if your theme is built properly, the process becomes easy and intuitive. What are you experience with customizing WordPress themes? Share with us your thoughts in the comments.
No comments:
Post a Comment