How to add banners and ads?

There are multiple areas where you could add your banners, images or source code. What we recommend is that they are placed in widget areas. Avoid placing ads and banners inside your articles so that they don’t disrupt the reader’s attention.

Google AdSense

Google AdSense is a powerful tool that allows you to earn money by showing text, image, video and other interactive advertisements on your website. Here are the steps you need to go through to display an ad:
  1. If you don’t have a Google AdSense account, you can easily create one or log in with your Gmail account.
  2. When you’re all set up, create 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 customize it as you wish.
  4. When you’re done, hit Save and get the code. Google AdSense will generate a code, the Ad code.
  5. Now go to Appearance→ Customize→ Widgets and select any widget area you want. Click on Add Widget and add a new Text widget.
  6. Insert the Ad code into the Text widget. Now your ad should show up on your website 😃
If you want to learn more about Google AdSense and how to add it on your WordPress website, here’s a tutorial we recommend.

Custom Banners

If you don’t feel like the ads that are generated by Google or any other service don’t fit the design of your website, you can always create your own ads that promote your products or services.
While creating your own banners, keep in mind the sizes we have presented earlier in the article. You can use whatever editing tool you feel comfortable with like Photoshop, Illustrator or online ones like Canva.
Here’s how to add your banner to your website:
  1. Load your banner in the Media Library  (Dashboard→ Media→ Add new).
  2. Click on your banner in the Media Library. On the right of your image, copy the link from the URL box.
  3. Go to Appearance -> Customize→ Widgets and select a widget area you would like and add a new Text widget.
  4. In the Text widget add the following 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 banner in the Media Library.
  6. Replace [INSERT PRODUCT LINK HERE] with the link to the page/website you would want your banner to redirect.

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

Updated on March 20, 2018

Was this article helpful?