No-code website building is not a dream anymore. You will doubt using a website builder that does not allow for making money on traffic, won’t you? If so, welcome aboard! Today we are telling the nuts and bolts of earning with Elementor for WordPress. Millions of websites use this universal drag-and-drop website builder, and many of them are earning from placing ads. You can make money with Elementor pages if you put Adsterra ad codes that will return you payouts for views and clicks.
Previously, we shared a complete guide to making a profit with WordPress. Now let’s narrow our search to the most popular WP visual editor, Elementor.
Is Elementor the only editor you can place ads with?
When it comes to turning profits from a WordPress website or blog, it makes no difference which editor you are using. Adsterra provides you with flexible ad codes that you can put with a classic Gutenberg editor, as well.
If you’re used to building web pages with Elementor, you’re also in a strong position. Adding Adsterra codes(scripts) will take a couple of minutes. How exactly? Let’s find out!
What do you need to make money with Elementor and Adsterra ads?
To begin with, you will need to get one of the Adsterra advertising codes that can look like banners, push notifications, or even not appear on your web page but pop up in the new browser tab. These codes or scripts contain thousands of offers that you are going to show your website visitors.
After generating an ad code, you copy it to your website page using the WordPress Elementor visual editor.
Now let’s look at these stages under a microscope.
STAGE 1. Register on Adsterra
Each Adsterra publisher has a personal monetization account where they manage all websites, ads, and payouts. You will need to register to enter your account. Here is your helpful step-by-step intro guide.
STAGE 2. Apply for the Adsterra ad code
With Adsterra, you make money with several high-paying ad formats, and each of them is placed on your website with a unique code.
- Social Bar or In-Page-Push ads,
- Native Banners,
- Display Banners,
- Popunders,
- VAST video ads*
*To profit from VAST ads, you will need to add a video player first and then insert the ad code into the player according to this Adsterra guide to video ads. Thus, we won’t go through this topic today.
To make money with Elementor and Adsterra, you now need to get an ad code (script) of any of the formats from above that you will paste on your website later.
1. From the main vertical menu, find the Websites tab and hit ADD WEBSITE.
2. You now have to pick one of the ad formats offered. Let’s pick Native Banner as an example.
3. Fill out the rest fields, especially your website category, and click ADD.
4. Your newly added website and ad code are on approval now. Usually, it takes a couple of minutes to get your ads ready for monetization, and when ready, the status changes from Pending to Approved.
5. Copy your ad code as soon as the status changes to Approved: click All codes → Get code and copy the ad script as it is without any modifications. Or, you can check your email as we send the approved codes there, too.
* To get Adsterra ad code to the already added website, simply find it on the Websites page and click Add code. Then comes the very same set of actions: you wait for the code Approval and click All codes → Get code from the Websites page.
Let’s assume you now have your new ad script in front of you. So how do you make money with Elementor and Adsterra, then? Pretty elementary 🙂 Check the tutorials below.
To Contents ↑How to place Adsterra Banners and Native Banners with Elementor
As we said, you need your ad code generated on the Adsterra account. You might have copied it on the previous step. If not, please read the text above once again 🙂
1. Navigate to your WordPress admin panel and:
– create a new page (post) with Elementor;
– or open an existing page (post) with Elementor.
As we’re now just exploring the topic, we recommend you create a new test page. From your admin panel, choose Pages → Add new. If you’re also using a classic WP editor, you will need to click on the Edit with Elementor button.
2. From the left dashboard, scroll down until you see the HTML widget element.
3. Drag and drop the HTML widget element exactly where you want the ad to appear. Read this boiled-down guide to ad placement mistakes to do it all right.
4. On the dashboard on the left, you will need to paste the Adsterra code as is.
5. Click Save Draft if you are going to edit some other parts of the page or click or Update the page.
How to place Adsterra Popunder ads with Elementor and without it
Is it possible to put Adsterra Popunder with Elementor?
As you may get from the Adsterra instructions, Popunders are to be placed before the “</HEAD>” tag. Therefore, it will be more advantageous to use your WordPress Header & Footer section instead of Elementor. This way, you will add a Popunder code to all your pages. That’s how it works:
Editing Header part (without Elementor)
- From your admin panel, find the Appearance section and click on it. Choose Editor or Theme Editor.
- Find the Theme’s header.php file and copy your Adsterra Popunder code.
- Paste the code before the closing “</HEAD>” tag. Click on the Update file or Save button.
Editing WP Theme Header (without Elementor)
Another way to add a Popunder code to the Header part is to use your WP Theme Customization section.
- From your admin panel, navigate to Appearance → Customize.
- Find and open the Logo and Header section.
- Paste the code inside the Add Custom Code box. Make sure that this box is related to the “<HEAD>” tag.
Editing a website Header (with Elementor PRO)
You indeed can use the Elementor PRO version to place Adsterra Popunder on your website. In this case, please use the Theme Builder.
Three ways are possible here:
Way 1. Choose Elementor → Theme Builder from the WordPress admin panel.
Way 2. From any page or post, select Theme Builder in the Settings tab. You will need to open the Hamburger menu first.
How to place Adsterra In-Page Push ads with Elementor and without it
Adsterra publishers can make money with Elementor and the most beneficial advertising format on the market, In-Page Push or Social Bar. You can discover its advantages in our previous guide.
So how do you place Social Bar ads?
The most effective way is to put them on all your website’s pages. So if you don’t have a PRO Elementor version, navigate to your WordPress admin panel. You will need to edit the Theme. Go to the Appearance section and choose Theme Editor. You will see the list of theme files (Theme Footer, Theme Header, Main Index template, etc). You need to find the file with the “</BODY>” tag (in our case below, it was Theme Footer.)
Paste the Social Bar code before the “</BODY>” tag and click Update file.
But if you’re sure you want to paste the Social Bar code on a specific page, you need to walk the same path you did when adding Native Banners (read again). You will need to drag an HTML element to any of your pages while editing it with Elementor.
Now you have learned all tricks of placing Adsterra ad codes. Please use our Help Center where our managers have answered 98% of frequent questions.
Just to recap: what to remember when you earn on ads with Elementor
With or without Elementor, you will still save all your opportunities to make money on WordPress. Before placing ad codes, please spare some minutes to decide on your tactics:
Visual editors like Elementor allow for rich web page design, but you will need to have ads noticeable. Tend to keep your layout design neat and airy. Users will consume both content and advertising more willingly 🙂
- It’s worth exposing a Popunder code on all website pages. Use your theme Customization section and place the code to the header part.
- You don’t have to learn Elementor if you’re used to the classic WP editor. You can put any Adsterra ads with Gutenberg in a couple of minutes.
- Always preview changes after you put ads with Elementor: you might need to add spaces between content and advertising. Use two preview modes, desktop and mobile.
- When placing Native Banners, try experimenting with styles and composition (you can tune Native Banners to fit your website.) Turn on the preview mode to choose the most usable and matching option.
- Visual editors like Elementor allow for rich web page design, but you will need to have ads noticeable. Tend to keep your layout design neat and airy. Users will consume both content and advertising more willingly 🙂
And now it’s right about time to earn with Elementor by adding some high-paying ads.
