How to Wrap Text Around AdSense with Elegant Themes

How to Wrap Text Around AdSense with Elegant Themes

Perhaps you have heard of the term “banner blindness” with regard to online advertising; people, in general, simply don’t like being advertised to. As a result, they tend to ignore the areas on websites where ads are likely to appear. Often, people do this without even realizing it. Although your WordPress theme has a big, beautiful sidebar that looks like the ideal location for a large AdSense unit, the fact is that some readers equate sidebars with advertisements and never look at them at all. The heat map below shows an example of this — it tracks the eye movements of a typical Web surfer. Notice that they only concentrate on the main content of the post; their eyes barely travel to the sidebar at all.

AdSense Wrap WordPress Elegant Themes Banner Blindness

Readers' eyes seldom venture to a website's sidebar.

For some websites, a solution for this is to put an AdSense block where you know your readers eyes will be — right in line with the content. If your website uses Elegant Themes for its WordPress theme, this is particularly easy to do. Most Elegant Themes templates place an image thumbnail in the upper-left corner of each post; simply remove the thumbnail and put the AdSense block in its place. Getting the text to wrap around the AdSense block is a simple matter of adding an extra couple of lines to the AdSense code.

Note: You can adapt these steps to wrap the text around an AdSense unit with virtually any WordPress theme.

  1. Open the “Appearance” section of the WordPress dashboard, and then click the “Theme Options” menu item for your Elegant Themes template to open the ePanel.
  2. Click “Layout Settings” on the left side of the ePanel window.
  3. Click “Single Post Layout” at the top.
  4. Click the button under “Display Thumb on Post Pages” to change it to “This is Disabled.”
  5. Click the “Save” button at the bottom.
  6. Click “Editor” under the “Appearance” section on the left side of the WordPress dashboard.
  7. Make sure that the drop-down menu next to “Select theme to edit” displays your current WordPress theme.
  8. Click “Single Post” on the right side of the page.
  9. Paste your AdSense code in the first blank line above “<?php the_content(); ?>.” If there is no blank line, create one.
  10. Add the code “<div style=’float:left; margin-right:10px;’>” to the line immediately above the AdSense code.
  11. Add the code “</div>” to the line immediately below the AdSense code.
  12. Click the “Update File” button to save the change.

This puts the AdSense unit in the upper-left corner of your WordPress posts, while the text wraps around the right. To reverse this, use the code “<div style=’float:right; margin-left:10px;’>” instead. You can also modify the number of pixels between the AdSense unit and the content, but don’t make the number too small or you’ll compromise the appearance of the content. If this code does not give you the results that you are looking for, use the code “<div style=”margin: 10px; float: left;”>” or “<div style=”margin: 10px; float: right;”>” instead.



Comments are closed.