Customize Your Ads with Ezoic’s Custom CSS Ad Styling

For some publishers, simply placing ads on your site is satisfactory enough. But for others, you prefer more control of the way your site looks overall, and want your ads a bit more polished and stylized. Now, with Ezoic, you can make your ads framed like you see on big sites like the Washington Post with Ezoic’s Custom CSS Ad Wrapper. You may have seen this introduced during Content Month.

Publishers using Ezoic can begin to design the way their ads look with the Ezoic Chrome Extension or through the Ezoic dashboard. With this tool, you can easily make responsive containers around ad placeholders that coordinate with the aesthetic of your website.

As there are hundreds of thousands of sites in each niche, it is important to think of unique ways that make your site a little bit more appealing. Altering the colors and style of your ad containers can help your site stand out amongst others in your site’s niche.

How to edit your ad placeholder styles

Editing the style of your placeholders is as simple as selecting where they will appear. To do so, open a landing page of your website and click the Ezoic Chrome Extension to activate your placeholders.

Next, choose a placeholder that you would like to stylize. In the dropdown menu, select Edit. Then, click the paintbrush icon.

In this tab, you can decide how you want your placeholder to look. You can set margins around the ad, depending on how much space you want between your content and the ad, and decide what alignment you want for the ad (left, center, or right). You can also choose to display an advertisement disclosure.

The final sectin of customization concerns color and border. You can choose specific hex colors for both the background and border of the ads that appear, including how much background area shows (padding). Just like the margin, padding is determined in pixels for the top, bottom, left, and right side of the ad.

These containers will only load when a user is given an ad from that placeholder location. Additionally, since it is responsive, height and width do not need to be set.

The Ad Template Builder

If you want to make an ad template that can be saved across multiple placeholders, you can use the Ad Template Builder inside of Ad Tester. In this feature, you can decide the position, style, size, and page rules each template follows.

To begin, simply navigate to your Ezoic dashboard, select the Monetization tab, and scroll down to Ad Template Builder. From here, you can make similar decisions as discussed above, but this template can be saved across multiple placeholders or you can set specific page rules for where this template might show.

Stylizing your ads

Ezoic has made it simple to stylize your ads with the Chrome Extension or through your Ezoic dashboard, but if coding is more your thing, we also have the following code you can simply place in your CSS file:

​​​​//Add to site or page css file//

.fancy_ad {

   container-decoration:”shadow”

   line-width: “2px”

   line_color: “black”

   container-size: “response”

}

//add this container with placeholder code to style ads//

<div class=”fancy_ad”>

EZOIC_PLACEHOLDER_CODE_1 

</div>

///end//

Customizing your ads can make your site stand out and mean the difference between someone preferring your site over another in your niche. For those that want a little more control over the look and feel of their website, consider stylizing your ads to better match the site’s aesthetics.