[Pro] Getting started with the Customizr Pro WordPress theme

Now that you have chosen Customizr Pro for your online presence, what next? Here we are, to help you customize the theme and build your site to universal appeal.

Designed with visitor engagement in mind, the Customizr Pro theme allows anyone to create a beautiful, fast and mobile friendly WordPress website compatible with all browsers and devices. With a set of live preview options, Customizr Pro does not require advanced technical skills to design and add content to your website.

All options are set in the WordPress customizer where you can preview your changes live before publishing. No more blind changes and complicated options panel : create an awesome design, and once you’re happy with it, just save and publish.

The Customizr Pro theme is very versatile and you can easily create any type of website: business sites, blogs, portfolios, landing pages, forums, shops, etc. This theme is responsive: it adapts nicely on any type of device (desktop, tablets, smartphones) and is compatible with all modern browsers.

Having explained the features, let us get into the designing.

Pre-requisite : Install Customizr Pro

I assume that you have installed the theme and you are raring to go.

Changing the skin

One of the first things that your site requires to create an identity of its own is a colour and colour scheme. This can be changed by changing the primary color (colour). Access this feature from the customizer, by clicking on Global Settings > Primary color of the theme. There are unlimited colors to choose from. You may also add the color code in the color picker field. This choice reflects in small and big ways in all elements of your site - the header, the borders, the link colours, the widgets and so on.

Uploading a logo and a favicon

A site's identity is not complete without a logo and a favicon. So, design a logo or get one designed. From the customizer, go to Global Settings > Site Identity : Logo, Title, Tagline and Site Icon, upload the logo and favicon (or Site Icon).

Setting up the Site Layout

Setting the site layout was never that easy before. You can choose any wide or boxed layouts for your whole site, header topbar, main header and footer layouts.

Choosing a font

“The world is full of beautiful fonts—choosing the right one for your next project can be a daunting task.”

Customizr Pro offers you a wide range of fonts and font combinations. From the customizer, access them through Font Customizer.

You can customize the fonts for the individual elements of your site -- the header, the body, the footer, the posts, the pages, the slider, the featured pages, the comments, the sidebars and even the custom controls that you add to your site. Isn't that awesome?

For each of these, you can choose the font family, the font style, font size, font colour, font weight, line height, letter spacing and more. Read this complete tutorial on Using the Font Customizer in the Customizr Pro WordPress theme for a thorough understanding of how to use the Font Customizer.

Now you are done with the very basic design of your site. Let us move on to adding some content in the header.

Setting your social networks

How about displaying your social networks on your site? It is indeed important to provide links to your presence on various social networks.

From the customizer click on Global Settings > Social links, set up your RSS feed link, email address, facebook url, twitter handle and several other social network links. Fill in these details, save and publish. Watch your site's header fill with the social network icons.

Setting a header menu

Would you go on a hike without a compass or a map? A menu fills in the same role for a website. Ease your user's navigation through your site with a menu in the header.

Keep it simple.
Have the least complex structure.
Be consistent in navigation patterns. For instance, let the user find his way back to where he started from, if he wants to.
Let the menu items be simple words than long phrases.
A standard pattern is to start your menu with "Home","About", then fill with other items specific to your site and lastly end with a "Contact" item. Would this suit you?

Follow the instructions here to set up a header menu.

The header menu can be vertical menu or a horizontal menu. If you choose a vertical menu, then it is displayed as a three-line navicon. On clicking this, the menu is revealed on the side. There are several reveal effects (Reveal, Slide on Top, Push, Fall Down, Slide Along, Reverse Slide Out, Rotate In, Rotate Out, Scale Up, Delayed Rotate) included for this menu in the Customizer Pro. You can try the various effects in the live demo of Customizr Pro.

Designing your front page

Almost always, a good front page design can capture a casual visitor and engage him/her through a few more pages of your site.

Customizr Pro allows you to highlight certain pages of your site on the front page using various features like the featured pages and the slider.

Customizer Pro comes packed with the Featured Pages Unlimited plugin for WordPress. It is a simple and powerful solution to engage your visitors on your most visited page: home. The plugin allows you to select the most important content of your website, and display it on home beautifully, with a cool hover effect and call to action buttons.

All options are set in real-time preview with the WordPress customizer, in Main Content > Featured Pages. The location, the number and the layout can be customized to suit your needs. You can also choose the colours and thumbnail shapes for them. Follow this documentation on Featured Pages Unlimited plugin to set up this user-engagement feature for your site.

Featured Pages Unlimited for WordPress

Follow this tutorial to create a slider with your images or this one to create a slider with your blog posts.

Use the featured pages or the slider or both to create an appealing and attractive front page.

Blog home

Okay, the posts that you are most proud of have been well displayed. How about the other ones? How are you going to present them to your readers? Your posts can be listed in various layouts. Check this tutorial on how to list your posts on your home page.

You may also use the Grid Customizer to list your posts in a grid format. How efficient is that?

Global layout settings

From the customizer, you can access this by clicking on Content >Pages & Posts Layout.

Customizr Pro offers you a few different options in terms of the overall layout. You can go for a full-width layout, single sidebar layout with the sidebar either on the left or the right and the 2 sidebar layout. Which one should you choose?

If you are building a landing page, go for a full-width layout. Whoever has heard of a sidebar in a landing page?
For Portfolios and business sites too, a full-width layout is ideal.
For blogs, single or 2 sidebar layout can be chosen based on the number of items you want to fill the sidebars with. Ideally, if you have some call-to-action widgets used for conversion, to be placed in your sidebar, put it in a left sidebar. Ever heard of the F-Pattern and its importance to a blog? As the human eye scans a screen in an F-shaped pattern, place your important messages in this pattern.
If it is a forum or a shop, you may need a 2 sidebar layout.

Footer and sidebar widgets

Choose the widgets that you want on the sidebars and on the footer. Does your site have lot of content? In this case, a search widget will be useful. You can also display a tag cloud if you have content on a variety of topics.

Is it a blog? Then recent posts and recent comments can show your latest thoughts.

Keep these widgets minimal and useful. Lesser the clutter in these areas, the more there is focus on the important ones.

Footer Credits

The footer might be the least noticeable component of any site, but its importance cannot be undermined. It is the footer where the credits for the site are attributed. Every visitor to your site who visits any page gets to see it. For this reason, it is significant for any site.

Customizer Pro allows you to customize the footer credits as well. Check this documentation on custom footer credits to understand how to change the footer credits.

Speed Optimization

You can improve the performance of your site by

Assessing its current performance
Knowing the performance blockers
Finding solutions for these, if any

One minor improvement that you can straightaway bring to your site is to load images only as the user scrolls down the page. Why load an image that a reader is not yet ready to see? From the customizer, go to Advanced Options > Website Performances, check against Load images on scroll.

Recommended plugins

All the functionality that you need for your site may not be available in the core. You will need to install a few plugins depending on your site's needs. Here are some plugins that we recommend for use on your site.

Page Builder

Nimble Builder is a page builder developed by our team. It's the perfect companion of the Customizr Pro theme.

Akismet

Every WordPress installation comes with two plugins pre-installed. One of them is Akismet, and we recommend it first and foremost as a must-have WordPress plugin. Even though Akismet comes pre-installed, it is not activated by default.

Akismet is a comment spam filtering service. Akismet catches blog comment and pingback spam using algorithms that learn from their mistakes and from the actions taken by participating websites. Comment moderation is a time consuming task, and Akismet can save you hours. Akismet will catch spam comments before it lands in your moderation queue as pending. This allows you to focus your energy on moderating comments by real users.

So, if you have enabled comments on your site, it might be worthwhile to activate Akismet.

Contact form : Formidable Forms

Usually a website needs a contact form for readers to communicate with the site owner. One of our favorites is Contact Form 7.

Formidable Forms is a free, simple and flexible contact form plugin. It can handle multiple contact forms as well and supports AJAX submitting, CAPTCHA, Akismet spam filtering and file uploading.

Search Engine Optimization : The SEO framework

The SEO Framework is a most complete SEO solution for your WordPress blog. With tons of features and options this SEO plugin is free and really complete. It is feature-rich and will definitely contribute in optimizing your site for getting indexed by the search engines

Site Performances : W3 Total Cache/ WP Super Cache

Search engines consider site speed to be an important factor search rankings. This is why it is important to improve site load speed to an optimal level. Caching your website will help you improve site speed as well as balancing huge spikes in traffic.

W3 Total Cache is the fastest and most complete WordPress performance optimization plugin. Trusted by many popular sites, W3 Total Cache improves the user experience of your site by improving your server performance, caching every aspect of your site, reducing the download times and providing transparent content delivery network (CDN) integration.

An alternative and equally popular plugin among our users is the WP Super Cache. Use one or the other and improve your site speed.

Newsletter subscription : MailChimp for WordPress

MailChimp is used by more than 7 million people to design, send, and track email marketing campaigns. Manage your subscribers, newsletters and campaigns with MailChimp.

Website statistics : Google analytics for WordPress

Google analytics by Yoast makes it easy and convenient to track your site using the latest Google Analytics tracking code and allows you to view key Google Analytics reports in your WordPress install.

In addition to a set of general Google Analytics reports, in-depth Page reports and in-depth Post reports allow further segmentation of your analytics data, providing performance details for each post or page from your website.

E-commerce : Woocommerce

WooCommerce is a free eCommerce plugin that allows you to sell anything. It integrates seamlessly with WordPress. WooCommerce is the world’s favorite eCommerce solution that gives both store owners and developers complete control.

Picture Galleries : NextGEN Gallery

At over 10 million downloads NextGEN Gallery is by far the most popular gallery plugin for WordPress. It comes in both free and premium versions with tons of features. Use this for your photo gallery.

Image tool : Regenerate Thumbnails

By default when you upload an image to WordPress, it creates different sizes and saves them in the uploads folder. Many WordPress themes define new image sizes, but the problem is that these new image sizes are only applied on the images you upload after activating the theme. To solve this problem you need to generate new sizes for all previously uploaded images using Regenerate Thumbnails.

Forum : bbpress

Several plugins provide the forums feature for WordPress. But the special one is bbpress which is a light-weight stand-alone alternative for other forum plugins.

Going further

With that, I hope you have your site set up and functional. There are many many more things that you can do to tweak your site's appearance and functionality. But, if you already like what you have, you can also leave it as you have configured it now with the steps outlined above. After all, beauty lies in the beholder's eyes.

If you want to get daring and try further things, check out our other tutorials. Enjoy your journey of setting up your site!