If you really want to make your website special and awesome to increase the number of page visitors, you need to follow the steps mentioned below.
There are three main steps to increase the quality of your site and its homepage.
- Ensure that the homepage colors are unique, making your brand standout
- Keep in mind to make some changes in the sidebar and content box using Plugins, border, border-image and background image.
- Alignment is the last one. Make sure you know how to place the container and sidebar that include Tumblr, Blogger and Weebly sites.
Here are some tips and tricks to make your website unique and different. It will help you make the best of your WordPress site.
Also Read: How Social Media Can Make or Break a Business
Step 1
You should choose the perfect and apt color combination for the WordPress site. There is a website for color combination, and it is www.colorcombos.com.
Background color combinations
If you choose bright or dark colors for your site, you have to pick the content images and sidebar images or advertising images also similar to that color. It gives a rich look to your site. Here are some CSS/HTML codes for changing the color of the default theme background of the site.
Theme background
For gradient
background:linear-gradient(to right, rgba(221, 75, 56, 0.2) 0%,rgba(221, 75, 56, 0.84) 100%) – normal gradient
background: linear-gradient(-45deg, #E8D0A9 50%, #C1DAD6 50%) – mixed colors with degrees
For Image upload
background-image: url(‘http:’)
+
background-image:url(‘’’);
background-repeat: repeat|repeat-x|repeat-y|no-repeat|initial|inherit;
background-position: Top center; background-attachment: fixed;
Also, you can use double background for a single page or site. If you are wondering how it is possible, here is an example for the same. You must give this code in the body of HTML/CSS
#body
{
background:url(image1 url)no-repeat,url(image 2 url)repeat center center fixed;
}
Here, you must give ‘no-repeat’ for one of the images that is mostly in the format of PNG or transparent image. One of the images must be in the PNG format or it should be smaller than the other one. Then only, it is applicable for a double background image.
Step 2
There are many plugins in WordPress, which are required for your blog types like General, Health, Business, and so on. The border, border image for content box, sidebar, and the CSS code for those designs are given below.
For Border Design
You can place this code on the required location of the site.
border-color: #color;
**If you need Multicolor border put border-color: #DD5555 #E8C2C1 #DA070C #000;
border-style: double/inset/outset/solid/ridge/groove/dotted/dashed;
**If you no need style put none/hidden.initial/inherit;
border-width: 2px;(your required value)
If you want the blunted border, you can add the below code,
border-radius: 45px;(your required value)
For Border-Image
border: 10px(your required value) solid transparent;
padding: 15px;(your required value)
border-image: url(border image url) 30 round;
For border image, ensure that you give the values for the border size. This will allot the place for the border image. Above, it is mentioned ‘30 round’. It depends on your border design. You can increase or reduce it as per your border design.
Sidebar Left/Right Top Hang Design
background: url(“image url”) no-repeat scroll left top transparent;
padding-top: 30px;
Here, do not forget to add ‘scroll’ and ‘transparent’. Only when you add these, the hang design will be visible clearly. Remember that you should choose the PNG image for this hang design for the result to be good.
Grey Widget
You have the option for gray color sidebar without changing the attribute color. If you have a multicolor widget but the images and sidebar have to be gray, use the below codes in the required places. It automatically changes all the images and widgets to gray.
-webkit-filter: grayscale(1);
opacity: 0.5;
background: -webkit-linear-gradient(#fafafa, #ffffff);
Sidebar Advertisement
In WordPress, you can use the embed code for displaying the advertisement, which is in the following format.
<a rel=”nofollow” href=”/site url”><img src=”/image url”></a>
We can use some HTML code to change the size and design of the advertisement. The secret of that change is it is like border design and border radius.
border: 2px solid #000; (border size, border style and border color in single line called simplification format)
border-radius: 45px 0px 45px;
<a rel=”nofollow” href=”/site url”><img style=”border:Xpx border style #Color;border-radius:Xpx Ypx Zpx Apx” src=”/image url”></a>
For Full BG without plugin
You can use this code in the body of the site i.e. body { custom coding; }
background: url(images/bg.jpg) no-repeat center center fixed;
background-size: cover;
WordPress Plugin Lists
If you do not have the editor or do not know the place to paste the CSS codes, use the “Simple custom Css” plugin, which is very helpful for your site modification.
- “Reaction Buttons” is a plugin used for feedback of your posts/pages. It’s very useful for Story blogs.
- You can add external tags for your site using “Widget Category Cloud” plugin.
- “Effect Maker” is useful for slideshow, Gallery images, Text Scrollers and Messenger.
- “Flash Clock Widget” multiple type of clocks widget is available in this plugin.
- “Super Slider Menu” is an external widget menu box with animation/scrolls.
Step 3
The alignment of the site is a vital role for site creation, and it makes your site the best one for your visitors. Make sure you do some changes to the alignment of the site using the below CSS coding.
For Text alignment
Use this code for every paragraph starts <p style=”text-align: justify;”> and end with </p>.
For text Design
Use this code for required place
text-transform: uppercase/lowercase/capitalize(1st Letter of the word will be Capital)/inherit/initial;
For Cursor Design
It is used for your site’s cursor point, which makes the magic, and differentiates your site from others. Ensure that you use this code in the body of your CSS code. You can take the PNG and tiny images for cursor and this will suit your site well.
body {cursor:url(“image url”), default; }
Improving General Topics
You can use the normal category “Blog” and replace it with new set of sentences such as Random, General, and My Own Topics (only for personal sites).
Post By
Jothi@Jorba
SMO Analyst @ Digital SEO
HI, Right now I harvest Likes and chase Twitter Birds, but my career started as a Web developer with Digital SEO & the above are a few of the tips that I still recollect.


Latest posts by Digital SEO Blog (see all)
- How to Create a Social Media Strategy for Brand Awareness and ROI - January 15, 2025
- Smart Retargeting Strategies to Convert Lost Leads - December 16, 2024
- The Ultimate Guide to Writing Authoritative SEO Content - November 15, 2024