In this tutorial, you can learn how to use Advanced Ads to create and insert ads into websites built with the Elementor page builder. I’ll also demonstrate how you can use the Elementor tools to generate more attention to your banner ads and target them to Elementor layouts.
Table of Contents
Embed ads into your Elementor website
You have several options for displaying ads on your Elementor website.
The Advanced Ads widget of Elementor
Using the Elementor page builder, you build your page with so-called sections that contain columns. Inside of the columns, you can place elements and widgets.
You can move all those elements quickly by dragging & dropping them to other locations on your page.
Elementor supports WordPress widgets; you can add the dedicated Advanced Ads element. To find this widget, you need to scroll down in the Elementors element library to the WordPress section.
Unfortunately, Elementor’s search function does not take WordPress widgets into account. You can minimize the impact of this problem on your workflow by adding the WordPress widgets you use more often to your favorites (Right click -> “Add to Favorites”)
The Advanced Ads widget lets you choose from your ads, groups, or Manual and Sidebar Widget placements directly from a dropdown menu.
This way, you can immediately see how your ad will look on your website.
Using the Advanced Ads widget is comfortable when you want to embed certain ads, groups, or particular placements into specific pages.
Available placements that you can choose from the widget options are the Manual placement and Sidebar Widget placement of Advanced Ads.
Please note that Elementor’s widget search function does not consider widgets from the WordPress section. So you need to navigate to this section manually and add the widget.
You can save yourself this extra effort by adding the Advanced Ads widget to your favorites (Right-click on the widget -> Add to Favorites).
Advanced Ads Placements
But what when you want to deliver your ad units globally onto every post or page?
For this purpose, Advanced Ads offers Placements. They are predefined places in your theme that you can use to deliver ads. In the following, I will show you how they work with Elementor and where the limitations are.
The basic version of Advanced Ads offers seven placements to deliver your ads to specific locations in your layout. They are all compatible with Elementor. You can use them to automatically inject ads, e.g., before the content, in the middle of the content, or after it.
Advanced Ads Pro and add-ons like Sticky Ads or PopUp Ads significantly expand the selection of available placements.
Sidebar Widget Placement
Since your WordPress theme, not Elementor, manages the sidebar area, the Sidebar Widget placement generally works without restrictions.
If you use the Advanced Ads widget on your pages and want to assign a placement to it, this widget let you choose from the existing Sidebar Widget placements and Manual placements.
Manual Placement
The Manual placement is not visible automatically in your content. You must add it using a shortcode or function in your template files. It allows you to change the content of the placement easily later.
To embed Manual placements with Elementor, choose them either from the Advanced Ads element dropdown menu, or copy the shortcode of a Manual placement into a Text Editor or Shortcode element. Then, drag and drop it into your layout.
Integrating ads with the Manual placement allows you to change the ads or the options at any time in the placement settings while you can leave the shortcodes untouched. This integration works well with Elementor.
And by the way: of course, you can add any other shortcode of Advanced Ads due to the Elementor Shortcode widget.
Advanced Ads Pro Placements
Enabling Advanced Ads Pro expands the selection of available placements.
Custom Position Placement
The Custom Position placement usually works well with Elementor. It comes with a frontend picker that allows you to select the ad’s position without any coding. This function is helpful when there isn’t any other placement for the position where you want to inject your ads.
As said, Elementor builds a page with interlaced sections, columns, and elements. Be careful when you pick the custom position in the frontend. If you choose a location in a custom-styled Elementor Text Editor widget, your ad and the ad label might adopt the style settings from it.
If necessary, please try to pick a similar position again and adjust the configuration of the Position settings dropdown menu in the placement settings (above/inside, before other content/inside, after other content/below).
It could also be possible that the ad is injected multiple times if the position picker selects a recurring element from the source code.
Random Paragraph Placement
The Random Paragraph placement injects an ad after a random paragraph in the main content. This injection is an excellent way to spread an ad or multiple ads in long content and make the site appear less strict for recurring users.
This placement type does only work with Elementor if the Cache Busting feature of Advanced Ads is disabled for this placement. Therefore, to ensure its functionality, turn off the Cache Busting for this specific placement or use the Post Content injection instead.
Post Lists Placement
The Posts Lists placement of Advanced Ads Pro allows you to inject an ad between posts on post list pages. Those pages usually list post previews instead of the whole post.
Typical examples are a home page listing recent entries or category and tag pages. Often those post previews are displayed as grids.
The Post Lists placement injects an ad between those posts or post previews. Elementor supports this injection.
But there is another thing to mention. Elementor Pro has a dedicated Posts widget to inject a list of post previews into a post or page.
To make your ad appear in such a Posts widget, create a Post Lists placement in Advanced Ads. Afterward, enable the Secondary Loops option in the placement settings
Create and layout ads in Elementor
Elementor is excellent for building beautiful landing pages, but you can also use this tool kit to design your ads.
Elementor Templates
The Elementor page builder provides the possibility to create and save individual templates.
Navigate to WordPress Dashboard > Templates in your backend to find this toolkit, where you can create new templates or edit existing ones.
You can add these templates as completely predefined blocks when editing a page. This way, you can quickly build and design appealing call-to-action elements, for example.
Extended template options with Elementor Pro
However, the possible uses of the templates are even more diverse if you use Elementor Pro. In this case, it is possible to embed each template via its shortcode and don’t need a manually placed Elementor element.
Since Advanced Ads can execute shortcodes, you can manage and inject your Elementor Ads templates using all features of Advanced Ads and the related add-ons.
You can find these shortcodes on the Templates overview page in WordPress Dashboard > Templates.
If you insert such a shortcode into an Advanced Ads ad, you can assign this ad to a placement and automatically insert it into the posts on your website.
For example, you can build your ads in Elementor with images, text, and everything Elementor offers, save this as a template and call this template with the shortcode [elementor-template id=”ID”] in an Advanced Ads ad unit.
You can then deliver this ad unit onto your site now. The main benefit here is that you can track clicks and impressions on this Elementor ad via Advanced Ads if you enable the Tracking Add-on.
By adding display and visitor conditions, you can fine-tune the ad targeting.
Using Elementor to animate banner ads
Even the basic free version of Elementor offers several options to animate elements and add subtle effects.
You can assign these motion effects also to ads, groups, or placements, that you embed as Elementor elements. You can do that as described above using the Advanced Ads widget.
Please note, the integration with effects works only with ads and placements that you insert directly with an Elementor element. But you cannot assign them to other placements that you don’t embed using Elementor.
Use Elementor Pro to assign motion effects also to Elementor templates and call them with their shortcode. In this scenario, you can inject these templates with Advanced Ads as described above to add those animations to all placements.
Disable the Cache Busting option in the settings of these placements to ensure that the motion effects work without issues.
Available motion effects
You can choose from a wide selection of motion effects under Advanced > Motion Effects and assign them to elements and templates
- Fade in
- Zoom in
- Bounce in
- Slide in
- Pulse
- Rotate in
- Flash
- Shake
- Swing in
- Light Speed in
- Roll in
You can set the animation duration and delay for each motion effect.
You should only use such animations in ads if you are sure that the associated ad network allows it. Google AdSense, for example, prohibits such integration. I would therefore recommend these animations mainly for image ads.
Also, on AMP pages, these animation effects do not work due to the technical restrictions of the AMP format. You could hide such ads using the AMP display condition provided by the AMP Ads add-on on this page type.
Page Template Condition
In Elementor, you can select a layout template for each page. You can find this setting in the Edit view of a single page under Settings > Page Layout.
These templates have nothing to do with the templates described above, which rather form independent blocks within a page that you can also use as an ad unit by embedding their shortcode.
Instead, you can choose from complete layout templates that either come with Elementor by default, such as Elementor Canvas or Elementor Full Width or are provided by your theme. You can also create custom layout templates with Elementor and select them for your pages.
Using the Page Template condition from Advanced Ads Pro, you can target ads based on the selected layout template of the corresponding page.
A use case for this condition could be, for example, not to display Sticky Ads on the sides of pages with a full-width layout.
The condition automatically detects the saved templates, from which you can select in the settings to show or hide targeted ads on such pages.
You can add it to both, a single ad and a placement.
Embedding Google AdSense ads in Elementor
When you embed Google AdSense ads with Advanced Ads, you can display AdSense Auto ads or inject the ad units manually.
The first method lets AdSense choose locations on your website and place the ads automatically on it. Google AdSense Auto Ads work with all layouts, regardless of whether the website is based on a page builder or not. Here, you can find more information about setting up AdSense Auto Ads.
If you want to embed AdSense ads manually, you can deliver them on your site using the placements mentioned above.
Other things to consider
Elementor elements can inherit their settings to ads contained in them
Elementor elements offer many options to style and shape their look and behavior individually. These customizations counteract the idea of centralizing style settings and assigning them with classes or IDs to elements of your website.
Suppose you deliver an ad unit with a placement into a customized Elementor widget or the adjacent section. In that case, the ad unit may adopt settings defined by this Elementor element.
For example, besides a text widget similar to regular WordPress text blocks, Elementor offers a text editor widget. You can style and adjust the typography and layout of this individual block.
Some settings may be inherited when an ad unit is delivered inside this area. For example, the ad label might adopt the text widget’s font. These things have to be considered when you set up your website.
Multi-Column Layout in Elementor
Before WordPress integrated the block editor, a massive stand-alone feature of Elementor and other page builders was the possibility to create responsive layouts with multiple columns.
When you deliver ads via placements into your layout, keep in mind that ads injected into a column will adapt their size to this column. If you have a row with two columns, your ad might show up in half the size.
Try to deliver the ad in the previous or next full-width column nearby when this happens.
Ads with Conditions
You are technically in the website’s frontend view when you edit a post or page with Elementor. This means that ads will be displayed as they are meant to appear on the actual live website.
Of course, this is very practical, but it can also lead to irritations.
Let’s say you have assigned the visitor condition “is not Logged-In Visitor” to your ad. This way, the ad will only show to visitors that are not logged in to your WordPress – which is just everybody who is not working as an admin or editor on your site.
When you select an ad like this in the Advanced Ads widget by Elementor, you will see no ad in the Elementor edit window because you are logged in. You will see a placeholder instead.
This behavior is technically correct but might be a bit confusing.