How to add banners and ads?

There are mul­ti­ple areas where you could add your ban­ners, images or source code. What we rec­om­mend is that they are placed in wid­get areas. Avoid plac­ing ads and ban­ners inside your arti­cles so that they don’t dis­rupt the reader’s atten­tion.

Google AdSense

Google AdSense is a pow­er­ful tool that allows you to earn mon­ey by show­ing text, image, video and oth­er inter­ac­tive adver­tise­ments on your web­site. Here are the steps you need to go through to dis­play an ad:
  1. If you don’t have a Google AdSense account, you can eas­i­ly cre­ate one or log in with your Gmail account.
  2. When you’re all set up, cre­ate a new ad unit on your Google AdSense account in My ads → New ad unit
  3. Now all you have to do is select the size of your ad and cus­tomize it as you wish.
  4. When you’re done, hit Save and get the code. Google AdSense will gen­er­ate a code, the Ad code.
  5. Now go to Appear­ance→ Cus­tomize→ Wid­gets and select any wid­get area you want. Click on Add Wid­get and add a new Text wid­get.
  6. Insert the Ad code into the Text wid­get. Now your ad should show up on your web­site 😃
If you want to learn more about Google AdSense and how to add it on your Word­Press web­site, here’s a tuto­r­i­al we rec­om­mend.

Custom Banners

If you don’t feel like the ads that are gen­er­at­ed by Google or any oth­er ser­vice don’t fit the design of your web­site, you can always cre­ate your own ads that pro­mote your prod­ucts or ser­vices.
While cre­at­ing your own ban­ners, keep in mind the sizes we have pre­sent­ed ear­li­er in the arti­cle. You can use what­ev­er edit­ing tool you feel com­fort­able with like Pho­to­shop, Illus­tra­tor or online ones like Can­va.
Here’s how to add your ban­ner to your web­site:
  1. Load your ban­ner in the Media Library  (Dash­board→ Media→ Add new).
  2. Click on your ban­ner in the Media Library. On the right of your image, copy the link from the URL box.
  3. Go to Appear­ance -> Cus­tomize→ Wid­gets and select a wid­get area you would like and add a new Text wid­get.
  4. In the Text wid­get add the fol­low­ing code: <a href=“[INSERT PRODUCT LINK HERE]”><img src=“[INSERT IMAGE URL]”></a>
  5. Replace [INSERT IMAGE URL] with the image URL you got from your ban­ner in the Media Library.
  6. Replace [INSERT PRODUCT LINK HERE] with the link to the page/website you would want your ban­ner to redi­rect.

This article applies to Felt, Julia, and Vasco as they share the same underlying structure.

Updated on March 20, 2018

Was this article helpful?