web design

unique wp

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

gradient

background:linear-gradient(to right, rgba(221, 75, 56, 0.2) 0%,rgba(221, 75, 56, 0.84) 100%) – normal gradient

gradient1

background: linear-gradient(-45deg, #E8D0A9 50%, #C1DAD6 50%) – mixed colors with degrees

For Image upload

mage

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

bgs2

#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;

border1

**If you need Multicolor border put border-color: #DD5555 #E8C2C1 #DA070C #000;

border-style: double/inset/outset/solid/ridge/groove/dotted/dashed;

border2

**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,

border3

border-radius: 45px;(your required value)

For Border-Image

borderimage

border: 10px(your required value) solid transparent;
padding: 15px;(your required value)
border-image: url(border image url) 30 round;

border image

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

hangdesign

background: url(“image url”) no-repeat scroll left top transparent;
padding-top: 30px;

hang

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.

grey

-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>

blunted

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.

ad

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>.

justify

For text Design

Use this code for required place

text-transform: uppercase/lowercase/capitalize(1st Letter of the word will be Capital)/inherit/initial;

uppercase
capitalize
lowercase

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

joeJothi@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.

The following two tabs change content below.
I’m Eivine Renny, a content marketer who believes that words spell magic and trusts in the power of words above all! As a content marketer in the endless galaxy of contents, i can lend a helping hand in making your contents shine with a sparkle that captures attention!

Leave a Reply

Your email address will not be published. Required fields are marked *