[av_section min_height=” min_height_px=’500px’ padding=’default’ shadow=’no-shadow’ bottom_border=’no-border-styling’ scroll_down=” id=” color=’main_color’ custom_bg=” src=” attach=’scroll’ position=’top left’ repeat=’no-repeat’ video=” video_ratio=’16:9′ video_mobile_disabled=” overlay_enable=” overlay_opacity=’0.5′ overlay_color=” overlay_pattern=” overlay_custom_pattern=”]
[av_image src=’http://www.webfour.net/wp-content/uploads/2016/08/theme-design.jpg’ attachment=’110163′ attachment_size=’full’ align=’center’ styling=” hover=” link=” target=” caption=” font_size=” appearance=” overlay_opacity=’0.4′ overlay_color=’#000000′ overlay_text_color=’#ffffff’ animation=’no-animation’][/av_image]
[av_one_half first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=”]
[av_textblock size=” font_color=” color=”]
You’ve just bought an amazing WordPress theme, and now it’s time to customize it. As you examine the theme documentation and files, the realization begins to settle in that this may be more difficult than you thought.
Let’s face it, with no experience, web design can be daunting
While it may be true that coding is not required to customize premium WordPress themes, you still must understand what the terminology associated with web design means to be successful.
When you begin customizing your theme you may become discouraged when your version lacks the elegant style of the demo.
The reason for that is really quite simple. The demo is made up of elements were chosen strictly on the basis of appearance and harmony.
There are no ill fitting logos or images. Every page element matches, and so on. In other words – from a web design standpoint – a completely unrealistic situation.
Unfortunately, in the real world web designers have to make do with the elements they are given – and that takes experience and skill.
So, if you are feeling frustrated and a bit overwhelmed, take a deep breath and read on. With time, and patience, you will be able to successfully customize your theme.
The installation and setup
Of course a website must be hosted, just as a TV show must be broadcast. It’s the first decision to make, and an important one. If you do not yet have a host, take the time to research the many possibilities and chose one that most closely fits your objectives.
Once you have a host, there are basically two tasks required. The first is to install WordPress on your domain. With most hosts, this is usually as easy as pressing a few buttons. Simply go to your dashboard or c-panel and find the application called ‘WordPress’, and follow the installation instructions.
The second task is to upload the actual theme. Normally it’s as easy as selecting the compressed theme file from your desktop and uploading it. If that doesn’t work, you may have to remove the theme folder from the compressed file, and then simply re-compress it and upload.
If that does not work, the theme may have to be uploaded via FTP. It’s more complicated than the simple upload described above, but there is a lot of easy to follow documentation readily available.
Virtually every premium WordPress theme includes documentation discussing installation and typical (if any) problems.
Uploading theme demo content
Demo content is the text, images, videos and graphic elements the developer used to populate the theme. In most cases, it’s a good idea to upload the demo content provided by the theme developer. Even if you plan to stray far from the provided designs, it’s helpful to see how the developer structures the pages.
Installing the plugins
Plugins are pieces of software that add functionality to a website. They make life easier for web designers and developers, and no doubt your theme includes a few. Plugins are easy to install and require no special instructions other than to install only the ones you need.
Plugins take band width and reduce available resources – so use as few as possible.
For example, your theme may include an e-Commerce or forum plugin. If you are not using either of these functions, do not install the plugins.
Deciding to use a child theme – is it necessary?
A child theme is an individualized version of the parent website containing CSS style edits and modifications. The child theme inherits its core functions from the parent theme.
The advantages to a child theme are faster development, and that it will maintain the style changes when the theme upgrades.
Most current themes offer similar capability with a custom CSS section that enables users to simply add their changes to a convenient section within the WP admin area.
Which should you choose? If your edits are substantial, then a child theme is the way to go. If your edits are tweeks and minor customization, then working within the custom CSS section is fine.
Learn the theme’s core building tools
Whether you plan major or minor customization, learning the web design tools provide by the theme is required. The most important of these are page builders.
Current premium WordPress themes all contain a page builder to assist with page design and development. Many bundle a generic builder called Visual Builder, while others have designed their own.
The builders have multiple levels of functionality. They are used for the most basic design processes like defining a row and column on a page, or to designate font and color selection.
They are used to add the various page components like maps, image sliders, icons, boxes, videos, to name a few.
But the builders can do much more. They can add backgrounds and blog posts. They can redefine and override core theme parameters and help designers create truly unique pages.
How far to go and learn is an individual choice, but mastering the basics is essential for any degree of theme customization and web design.
Spending time learning how the builder works will also help you become familiar with the web design vocabulary.
A good way to begin the learning process is to examine the demo pages. This will show where and how the theme developer used the builder to create the page.
To create pleasing and functional pages with the theme builder, there are certain web design terms that require understanding. Here are a few of the most important:
- Padding in web design means increasing the interior space between elements like text, videos and images.
- Margin is also used to space elements, but it refers to external space.
Here’s an illustration of the difference from OSTraining.com
Padding and margin decisions will reoccur throughout the customization process.
The media library
WordPress provides users with a way to store uploaded images that is extremely easy to use. It works just like any ‘browse and select’ mechanism.
Images can be uploaded individually or in bunches. Once they reside in your system, they can be cropped and resized as needed.
You can view images or videos as a list or as a grid, and you can see the upload space you have consumed, and how much remains.
[/av_one_half][av_one_half min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=”]
[av_textblock size=” font_color=” color=”]
Here is a image of the grid view from WordPress.org:
One important point to consider when uploading your images: they take band width, and the larger they are, the more they require. Use of available band width can slow down your website, so be sure to upload images in as small a size as you can to meet your requirements.
You can also use compression to reduce size. Good plugins for this process include Smush and ShortPixel Image Optimizer. Here is a good blog post that provides an in depth comparison of the various options.
Develop a game plan
Professional web designers look at the big picture before they begin a project – and so should you.
It begins by understanding that a website is the sum of its parts. The parts are the graphic elements and images used to populate the pages and tell the story.
If the parts are poor quality, or just don’t fit together, the website will have an amateurish look. Even if the content is strong, visitors will come away with a negative feeling.
A great place to begin the organization process is with the menus. Create a flow chart that plots out the levels of navigation you will be using, beginning of course with the top level.
This process will help you decide if there is a logical, and intuitive flow to the services and information you will be providing.
View the design of your website as a process that begins by putting the basic elements in place. It’s similar to writing an article or report. The first draft gets the major ideas in place, followed by fine tuning and ampflication.
Don’t get hung up over design or development details, and if you get stuck, leave it where it is, and move onto another section. Create a complete website that makes sense and is easy to follow – then go back and work on the details.
Keeping it simple
Modern WordPress premium themes offer many, many design and development options. Some can improve the look and readership of your site, and others are simply bells and whistles that add no real value.
It’s really important to remember that great web design is about creating a platform that delivers information in a pleasing, effortless way. Unless you are marketing a creative service, stylish design is a secondary consideration.
Deciding on the colors
Premium WordPress themes provide designers with several color options. Deciding which palette is right for your site is a key design decision.
The use of color in web design is a big topic. It may influence buying patterns, or play a role in the amount of time visitors spend on a website. For more information, here is a good resource article.
If you are not happy with the core color options, it’s easy enough to choose new ones. There are lots of free tools to assist with this process, including Adobe color wheel. You can create your own, or choose from hundreds of existing palettes.
If you are new to web design and the use of color, keeping it simple is a great rule of thumb. Many of the best websites use just a couple of colors.
Choosing the images
It’s tempting to forge ahead without first selecting the images, but that’s a risky approach. Web design is focused on images. Page layout depends upon those selected.
If an image does not fit the topic of the page, or is the wrong aspect ratio, you may find yourself starting from scratch.
Third party integration
Third party integrations can be an important component in your theme. If you have an e-Commerce theme, it is most likely to have a plugin called Woo Commerce. Woo is an extremely popular way to easily add a store to your site.
Another integration you probably have is MailChimp, which enables to effortlessly capture email addresses. The integration requires that you create a Mailchimp account and secure an API. It’s very simple and just takes a moment.
Begin with a demo when possible
The easiest way to get started is by attempting to mirror one of the demos provided by the developer. Beginning with the home page, plugin as much as you can that fits with your design.
Tools to help
First and foremost, a tool that allows you to work with images in essential. The best of these is Photoshop, but its an expensive option, particularly for a one time project.
However, there are some excellent free image working programs that will do the trick quite nicely. Here are our favorites:
Canva is a dynamic tool that makes image manipulation and page layout amazingly easy. The software allows you to upload images and apply various affects, and to add text.
Unlike the other free options we will be discussing, Canva allows for precise manipulation of the text. Designers can kern type, change line height, add opacity, and more.
Another unique feature of Canva is the ability to automatically resize composed images for different dpi levels. In other words, you can see what you are doing with much more precision than the typical zoom out an it.
Canva offers a limited font library, but what they have is excellent.
PIXLREDITOR is also a great option, and in many ways, similar to Photoshop.
Roadblocks and unexpected problems are par for the course. Even experienced web designers can run into an issue they need help with.
The first approach to getting an answer is to look at the theme documentation and the theme developers support forum. Most problems have been addressed already by the larger themes.
At times in can be hard to express exactly what the difficulty is. Web design has its own vocabulary, and it can be difficult to follow for new comers.
If you can’t describe the problem or find the answers in the forum, contact the developer directly. Generally they are helpful, but don’t expect too much.
Another option of course is to get professional help. Companies like Webfour offer full customization, but also partial customization for individual pages or sections. It is generally quite cost effective and quick.
[av_one_full first min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=”]
[av_textblock size=” font_color=” color=”]
Glossary of terms to become familiar with:
- Breadcrumbs: additional navigation that appear at the top of pages. Helpful for visitors and SEO.
- Cascading Style Sheets (CSS) is a language that is used to describe the way website pages are formatted. CSS defines aspects of web pages that were once part of a page’s HTML CSS allows web designers to establish the same design for multiple pages in the website rather than doing so on a pages by page basis with HTML
- Letter spacing: this is the same as kerning, and refers to the space between characters.
- Line-height: this is space between lines of text or headlines, and is a key to increasing readability.
- Responsive design: this refers to a websites capacity for providing easy viewing across mobile devices.
- Short codes: small pieces of code that embed page elements.
- Widgets: these are used to add content to side bars. Builders enable their use on pages as well.
- Slider: a device that adds rotating images or videos to a page.
- CSS animation; a way to give motion to an element by slowly changing styles.
- Back end: this is where the dashboard resides along with the customization and design tools you will be using.