Place ad zones next to each other
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.
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_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.
Instead of this:
You now get this: