How To Create Custom Banner Ads For Your Blog
Creating your first banner Ad
Creating a banner Ad is quick and simple when you know how.
For beginners such as you and I, it is best to use the tools available to us.
Bannersnack.com is a web-based platform which allows us to generate custom banners at various styles and sizes.
The built-in drag and drop builder make it easier to insert images, headings, text and call to action buttons.
To start using Bannersnack, first create your free account and login to the dashboard.
You will be taken to the editor, this where all your created banner Ads are stored, the page should be blank where there is nothing to display.
Click the ‘’create new’’ button and select make banner,
for the purpose of this post we will be using the single banner option, feel free to use the second option if you’re looking to make a full banner set,
bare in mind that you will need to upgrade your account for this. choose custom size and proceed to the editor.
The editor is divided into three sections, elements, work space and layers, drag and drop the elements into the work space to start composing the banner,
the layers will give you control over the background, foreground and opacity.
Once complete ensure to save the banner ( top right corner of work space), give it a name and insert the link that you wish the banner to re-direct to, the pre-set ‘’_blank’’ option will open a new window, when someone clicks on the banner Ad.
Select save and proceed to the next step, the editor will open again displaying all the created banner Ads, hover over the banner you want and click ‘’view’’.
In the new window, click on ”embed” and copy the code for the banner and paste in the custom widget area for your website.
the ”responsive scale” option will allow the banner to adjust to the layout of your websites theme.
Pasting the code in WordPress
Login to the WordPress dashboard, click on appearance and select widgets. Paste the code in the custom HTLM widget box in the primary side bar.
The banner Ad will now display according to the theme in the primary side bar of your website’s layout.
Trouble shooting Tips:
- If the banner displays incorrectly? go back to banner snack and make sure to enable the ‘‘responsive scale’’ option – copy the embed code and paste on your website.
- If there is a grey border around the border? in the custom HLTM box for the code in WordPress adjust the width and height until you reduce the border gap.
- Follow this detailed guide on how to to use bannersnack