There is a huge selection of web designs for WordPress. Accordingly, there is hardly any reason to invest unnecessary time and money in the development of your own layout. Instead, you choose one of the many design templates and adapt them according to your wishes. You can read how to do this in this post.
WordPress and web design
In WordPress, web design is separate from the content and features of the website. Like a suit, you can easily swap out the theme by installing a new theme. There are thousands of design templates called Themes and the number is growing every day.
So instead of having a new design drawn up, which then has to be laboriously programmed for different screen sizes, it is much more time- and cost-saving to choose a ready-made theme and adapt it to your needs. All options are open to you. From simply adjusting the colors and replacing the logo and images to completely changing a design template to match your own corporate identity (CI).
The customization options of the themes
WordPress themes offer more or less pronounced customization options that you can make without any programming knowledge. In principle, there are two types of theme types:
- Themes with many customization options. Advantage: Depending on the characteristics, you can customize almost every element of the website in terms of colour, size and appearance. Disadvantage: The variety of options often overwhelms inexperienced website operators. The result: half-finished websites that either look unprofessional or never see the light of day.
- Themes that hardly offer any customization options. Advantage: Due to the few options, the theme settings remain clear. Even inexperienced users quickly achieve a professional result. Disadvantage: The theme itself has to be very close to the desired result. Adjustments are only possible with special knowledge, which we will come to in a moment :-).
For several versions, WordPress has offered a uniform way to configure the web design. You can find them in the dashboard menu or toolbar under ADJUSTMENTS. Unfortunately, this method has not yet become widespread. In reality, the web designers develop their own configurations for their themes, which are more or less understandable and clear and which you first have to familiarize yourself with.
Customize WordPress themes using CSS
In modern web design, the information responsible for the layout of a website is separated from the content and collected in so-called Cascading Style Sheet files (CSS).
Accordingly, the themes in WordPress have a file called style.css, which contains information about, for example, what type of font the headings are made of, how big they are and what color they are. Thanks to this method, adjustments automatically affect the entire website, for example changing the font size of the headings.
The quick CSS customization
The direct way to make adjustments to the CSS file is via the dashboard menu DESIGN > EDIT. Here you can select the style.css and make the desired changes directly.
The disadvantage of this method is that the customization is done directly in the theme. As a result, they will also be lost again when the template is updated if you are not careful and save the changes beforehand and reinsert them after the update. With a few modifications, the effort is still manageable, with complex changes it gets annoying. In addition, you quickly lose track of which changes you have made at all. This method is not recommended.
Adjustments in the child theme
If you plan to change the web design in many areas, it is advisable to outsource all adjustments to a so-called “child theme”. The low additional effort makes the adjustments independent of the theme and saves all modifications even with an update. In another post we described how to create a child theme.
The plugin recommendation
Of course there is also a solution to make changes directly in the dashboard, which also survive a theme update. After installation, the Simple Custom CSS plug-in offers the possibility to carry out the desired modifications in the dashboard menu DESIGN > CUSTUM CSS. The instructions usually directly overwrite the defaults that come from the style.css file. If that’s not the case, one is enough !important, instruction, to override the original design defaults.
How does CSS work?
OK, answering this question is beyond the scope of this article. But we have found a few articles for you that can help you if you are not yet familiar with the possibilities of CSS:
So now you know how to customize the design of your website. You might find it fun to adapt your website to your wishes yourself. You wouldn’t be the first. However, you may have noticed while reading this article that you do not want to make the adjustments yourself. Then we are happy to help you.
Source images: Own screenshots
Note: Some of the links in this post are “affiliate links”. If you click on the link and buy an item, we will receive a commission. It has no effect on your purchase price. Thanks for your support!