Setting up Ads with Ad Tags + Custom HTML Elements

Setting up Ads with the Ad Tag

If you want to implement ads on a page, you can do so by clicking on the + ADD ELEMENT button in the Layout & Design tool:

This will open up a list of all of the elements you can use. This is where you can find Ad Tag:

Once placed in your layout, it will let you paste in the ad tags and separate them into code blocks for Mobile, Tablet, and Desktop:

Setting up Ads with the Custom HTML Element

If you need a custom implementation that includes styling of ads or specific <div> elements, then choose Custom HTML instead of Ad Tag in the + ADD ELEMENT menu:

You can use custom HTML for many purposes, and the use case we'd like to cover in this article is inserting custom ads to increase your site's revenue.

You can add a Custom HTML element inside any column you have in your layout. Here's an example of a sticky ad module inserted in the Post Page:

You can also name your Custom HTML elements to easily identify them. In the example above, we named our example "left rail sticky assign."

Per Device: Using the "Conditional Content" Element

You can create different ad placements with custom HTML for mobile, tablet, or desktop by using the Conditional Content element:

Once the Conditional Content element is placed, you can place new elements inside of it, such as custom HTML or header code.

In the drop-down menu, you'll be able to choose if you want the conditional content to be placed for mobile, tablet, or desktop:

If you choose "Tablet" and you're in desktop view, or "Mobile" and you're in tablet view, and so on, don't worry — the element hasn't disappeared. It's only visible in the viewport when it's called to be displayed.