One Cool Trick To Make Your WordPress Website Beautiful

One Cool 🧊 Trick To Make Your WordPress Website Beautiful Featured Image 768x768 1

Why having a singular website color looks better?

It took me quite some time to realize the beauty of implementing a uniform color code for my websites.

Beauty is in the eye of the beholder. But we do tend to appreciate a clean and spotless outlook, much like the snow-covered landscape.

Let us compare these 2 screenshots for example:

Uneven colors for a website
Site with uniform color code (except for the Twitter block and some featured images)

For an even better website experience, use PNG or images with the same background color. An example would be the fire warning image above.

One cool trick to make your WordPress website look beautiful

Apply one uniform color code to your site.

How do we apply a uniform color to a WordPress website?

An easy way may be to customize our WordPress Theme.

First, decide on a color. One may choose a preferred color from below for instance. Just click a color and its color code will be copied to the clipboard, ready to be pasted with CMD+v.

Next, navigate to your WordPress Theme. Your theme settings may be different, but explore around and set any background-related colors to the same color.

For example in this Blocksy theme, go to the ‘main row’ at the header top-left corner. Or from the left sidebar, navigate to General Options→Colors→Site Background and Borders for the same color.

‘main row’ at the header top-left corner
General Options→Colors→Site Background and Borders

More Information

How to create or use a PNG file?

For simple text, an easy way to start using a PNG file is to download a transparent PNG file from here (800x400px), open with the default Mac Preview program, insert text and quit (saved automatically). The size of an image file can be easily adjusted from the Preview menu with Tools→Adjust Size.

An example of text creation of a transparent PNG file with the default Mac Preview.

A graphics software e.g. Affinity Designer may be used to create a custom-sized transparent PNG file or graphics manipulation. Various transparent PNG background sizes may also be downloaded here.

An example of a transparent PNG with an image.
An example of a transparent PNG with an image.
close
Good Passive Logo

Sign up to receive Good Passive content in your inbox.

We don’t spam! Read our privacy policy for more info.

Leave a Reply