Place ad zones next to each other

By default, ad zones will be placed under each other. The following example shows how to add them next to each other horizontally.

Contents

  1. Add custom class
  2. Add custom CSS
  3. Result

1. Add a custom class to the ad zone

Update the shortcode by adding class=”your_custom_class_name”. You can add this manually to the shortcode or use the shortcode editor -> Default Options -> CSS Class.

[pro_ad_display_adzone id="123" class="float_adzone_left"]

2. Create your custom CSS code

Now that we added da class to the ad zone we still need to create the code for our class. We can create custom CSS under AD Dashboard -> General Settings -> Style

Add the following CSS code:

/* Float adzones left */
.float_adzone_left { float:left; padding: 0 0 0 10px; }
  • .float_adzone_left: this is the “custom class name” we added to the ad zone in step 1.
  • float:left; This is the CSS that puts the ad zones next to each other horizontally.
  • padding:0 0 0 10px; this adds left padding to the ad zones. (top right bottom left)

Now we can add multiple ad zones into our post/pages and give them the class .float_adzone_left add the end you should add the shortcode “wpproads_clearfix” (@since v4.7.3) this will make sure the rest of your content gets placed under the ad zones.

schermafbeelding-2016-10-30-om-09-50-40

Result

Instead of this:

schermafbeelding-2016-10-30-om-09-56-07

You now get this:

schermafbeelding-2016-10-30-om-09-56-20