How To Make Your Google Adsense Responsive In WordPress

Recently, I had an issue with google Adsense on how to make it responsive in all devices. Since I am starting to earn money on Adsense, I don’t want to remove it so dig in and luckily found the documentation from Google Adsense resource.

This tutorial basically cover how I interprent the tutorial provided by Google Adsense. I believed it will work on all ad units including display ads, in feed ads, in-article ads and even in link ads. 

Step 1: Insert a Custom class on your adsense script

Insert a custom class after the adsbygoogle class so we can overwrite the style of our ads. Kindly check the before and after below to see the difference.

BEFORE:


< ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-ad-slot="6478502035">

AFTER:

< script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
< ins class="adsbygoogle responsive-adbanner" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-4299086769596754" data-full-width-responsive="true" data-ad-slot="6478502035">

< script>
(adsbygoogle = window.adsbygoogle || []).push({});

Now, copy/paste the code on theme options or style.css. Basically, this code will tell the browser to adjust the width of the adsense once it reach the declared viewport. The other css code generally normalize the styling and removing any scrolling styles on your adsense.

@media(max-width:23.436em){
.adsbygoogle.responsive-adbanner {
width:22em;
}}
@media(max-width:64.436em){
.adsbygoogle.responsive-adbanner {
width:63em;
}}
.adsbygoogle.responsive-adbanner {
width:95%;
overflow: hidden;
padding:0;
margin: 2rem 0;
}

If you don’t want to use custom css, adding a inline-style on the script will work but for best practices, it’s highly recommended to keep your code DRY (Don’t Repeat Yourself).

How To Animate Your Menu Button on Divi or Extra – Bouncing Menu Tutorial

Normally, The animation feature from Elegant Themes only works for individual pages and posts when a visual or Divi builder is enabled and dynamic elements like footer, menu don’t have this feature.  On my v-tutorial, I am going to add a bouncing animation on our custom button located on menu (by the way, I’m using Extra theme).

Why You Should Consider Adding Animation On your Divi Menu?

Adding an animation on your CTA like button is a very interesting strategy to improve your user experience (UX).

Back to the scenario, make sure you define a custom css where you want to hook the animation. On my example, my class name for this is .acuity-embed-button.

Copy/Paste the code below on Extra or Divi > Theme Options > Custom CSS. You can use an animation generator like Animista.io but make to keep it dry as possible, remove those redundant codes that can hurt your CPU.

.acuity-embed-button { // Kindly rename the class accordingly. 
animation: bouncing 0.5s both;
}@keyframes bouncing {
0% {
transform: translatey(-45px);
-webkit-transform: translatey(-45px);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in;
opacity:1;
}82%{
-webkit-transform: translatey(-6px);
transform: translatey(-6px);
}90%{
-webkit-transform: translatey(-4px);
transform: translatey(-4px);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out;
}25%, 75%, 88%, 100%{
-webkit-transform: translatey(-0px);
transform: translatey(0px);}}

Why -moz, -ms, -o and -webkit are important?

Prefixes are significance for compatibility purposes. Some search engines like IE, Opera, and Firefox cannot run your CSS if their perspective prefixes are not declared on your code.

 

How To Download Divi And Other Themes On Elegant Themes Member Area

In this blog, I will walk you through how you can download any elegant themes products including themes, plugins and templates.

 

 

Downloading Elegant Themes & Plugins

Before, we get started. Below are the list of WordPress themes and plugins you can use.

WordPress Plugins

  • Divi Builder – can be used if you don’t want to use Extra or Divi. This plugin is no longer needed if you’re already using Divi/Extra themes as they have built-in Divi builder.
  • Bloom – Perfect for email opt-in pop-up, exit pops and such.
  • Monarch – Integrate a social sharing to your WordPress website
    See more >

WordPress Themes

To see the other themes, kindly go here. Just click the preview to see the demo.

 

WordPress Plugins

Now, let’s proceed! To download ET themes, kindly go sign in to  the member’s area. If you’re not sure what’s your username, you can find it here

elegant themes member area

2. Go to downloads tab > scroll down the page > click the view all downloads pink button

how to download divi themes

3. Press ctrl + f for Windows or cmd+f for Mac > find the theme e.g Nexus and click the Download icon

list of elegant themes

 

To load premade template from Divi, create or open an existing post/page > enable the Divi Builder > click the + icon

premade layout

Click the Premade Layouts tab > Choose any of your layout. You can also use the “Search” box. 

how to load premade layout

How To Receive Submissing From Divi Form Using Message Pattern

1. Go to your page editor or enable the Divi Builder > contact form module by clicking the grey gear icon. 

 

 

 2.Open the individual fields and check your field ID.  Basically, you will need to define those IDs on message pattern

field ID in Divi

 

3. Let say, you have 3 fields called Name, Email and Message.

4. You will need to set that on Message Pattern fields, simply click the Content tab > Email Toggle > Message Pattern 

 

5. Add a %% before and after the field ID.

 

Lastly, don’t forget to put your email address

 

See the screenshot below for reference

message pattern

How To Create Onclick Popup Modal In Divi Without Using A Plugin

Choosing a modal way of creating a popup on your Divi might be the perfect fit if you don’t want to get in trouble with plugin compatibility. In this Divi 01 tutorial, I’m going to walk you through how to create a perfect modal for your Extra and Divi website.

Modal Popup Demo:

 

Things We Need in Creating A Modal

 

Code Module:

Simply add a classed for your row and section to serve as your popup container and popup box.

In my case, I added a class name pricing_table on my code module and pricing_background for section module.

Don’t forget to add a class name on your button to trigger the modal when click.

button module

Let’s get our hands dirty!

Copy the code below and paste it to the respective section. 

  • Click the CSS tab and paste it to Divi > Theme Customizer > Custom CSS
  • Select the JS tab > copy & paste > go to Divi > Theme Options > Integration > Add it either in <head> or <body> section.

PS: Don’t forget to add the opening and closing script. The reason why I commented it down because Codepen doesn’t allow you to add <script> since we’re already using JS file.

See the Pen
Pop-UP
by Angelic Sanoy (@angelicsanoy)
on CodePen.

 

Still confused? Let me know your thoughts.