de:branding — how to surendranath your WordPress site with advertising pictures or template

Probably, you have not once got to the sites, which instead of the white background there is a large promo image on the entire width of the screen. This ad unit, as it frames the main area of the page is a large letter P, when the top left and on the right is a promotional picture, and in the center — the content of the site. This page is called surrendermonkey in the context of advertising and marketing, and this approach has its advantages.

Good news for WordPress users — you can do with your site the same, and very easy and quick using free plugins de:branding.

In this post we will show you how to surendranath your website on WordPress ad template using free plugins de:branding.


Download and install free plugin de:branding from the WordPress plugins directory.

Immediately after plugin activation you will be prompted to navigate to the settings page, but you can do it later by going to menu appearance → de:branding.

Configure the plugin

The settings page looks like this:

All settings are divided into 2 groups: Basic Settings (General settings) and Background Settings (background Settings).

So for example let’s try to surendranath our test blog which initially looks like this:

As you can see, the main area of the site is concentrated in the center of the page, and there are a lot of grey empty background. In our example, we will use this blank background and replace it with the ad template. For obvious reasons, we will use real ads and just fill the background of the test image.

General settings

Tick the Enable site skin advertising. You include this plugin in working, without this option, all other settings are meaningless.

Below set the width of your main area of the website and its color. That is, if the width of your site by default 1200 px, this setting you can narrow it down to 1000 pixels to fit your template.

You can also set additional indentation (Add padding) and use your class styles (Use wrapper class).

Background settings

  • Background position — select whether to scroll to the your ad along with the site itself, or be still.
  • Background align is the location of the background, the default selection in the center.
  • Background size — the size of the background image, the default selection is Auto.
  • Site skin advertising type — here you can specify additional indent for the caps on advertising background or off the cap.

Now let’s load our picture for advertising background. Click Upload image and upload any image through the usual boot files WordPress. We chose a picture with a mosaic width of 1920 px. You can also choose the color of the background fill and tick Repeatthat the picture was repeated.

At the bottom of the settings you can set a link to your ad background and height of the clickable area, in pixels.

Save your settings and click Save changes.

Now our test blog will look like this:

As you can see, an empty gray background replaced image, which you pointed out. And as soon as the mouse hits the area of this background, you can go to the link in the settings.

The results

As you can see, using the free plugin de:branding can be very quickly and easily surendranath your page ad background image. It does not need to deal with code and to specify additional styles in the CSS. Everything is done just with a few clicks in the plugin settings.

Leave a Comment

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