- This topic has 7 replies, 3 voices, and was last updated 4 years, 10 months ago by
.
-
Posts
-
Hello Team / @Tom,
Hope you are doing well.
I am looking to add two widgets side by side only for the last widget in my Right Sidebar.
I have a sticky Ad using Ad Inserter Plugin, and I would to like to put 2 next to each other.
Ad Inserter is excluding to show the Ad on the homepage, and it’s set to show it only for blog posts / Searches / Category / Archive pages.
How can this be accomplished please?
Article Reference: https://charbelnemnom.com/passed-az-104-exam-microsoft-certified-azure-administrator-associate/
Thank You!
Customer Support
Hi there,
i can’t see a way to do that as the adverts are dynamically inserted so its not possible to target the ‘last 2 adverts’. Theres also the issue as to how the adverts size is generated, it currently looks like thats based upon the sidebar wrapper it inserts into the sidebar – not the individual widget.
Thank You @David!
Yes, correct the adverts are dynamically inserted in the right sidebar.
However, I have static two widgets they are sticky at the end of the default GenratePress Right Sidebar. I have 13 widgets configured at the moment.
I was thinking if possible to target the last two widgets, so they could work together when the existing widgets show up on the screen.If that is not possible, what is the process to target the ‘last 2 adverts’ if the Ads are not dynamically inserted?
I would like to learn how I can do this? because I might change the Ads in the future.Thank You David!
Customer Support
Hi there,
Yes, correct the adverts are dynamically inserted in the right sidebar.
You may have to insert the 2 ads manually using a Hook element and structure its HTML in a way where it’s conducive to being laid out in a side-by-side manner using CSS.
Ideally, if we can structure it this way:
<div class="side-by-side"> <div> ad #1 goes here</div> <div ad #2 goes here</div> </div>We can style “side-by-side” using flexbox by setting it to
flex-direction: row;so the 2 ads are displayed in a row-like manner, effectively displaying them side by side.But the sizing issue may hamper this because we don’t exactly know what ad size will be generated. Plus, we can’t exactly control how the ads are styled because they’re embedded iframes with its own CSS inside it.
Thank you @Elvin, much appreciated!
The vertical dynamic Ad size will be always one of the following 3 sizes:
120×600 (Skyscraper)
160×600 (Wide Skyscraper)
300X600 (Half-Page)I need to target the Vertical sticky Ad only which is the last widget in my right sidebar, so I can put two of them side by side.
Could you please elaborate in more detail on how to structure it as you described above? Sorry, I am not that technical.
As I understood, first, I need to create a Hook element and then style it using CSS. But in this way, I might lose the Sticky capability of the Ad. My intention is to keep them visible while the user is scrolling.
At the moment, I am using Ad Inserted plugin Sticky Widget mode (JavaScript) since I was not able to stick the Ad using CSS in GeneratePress. I tried the following steps described by Tom and it did not work for me because the Ad is in JavaScript mode. https://generatepress.com/forums/topic/how-to-create-sticky-ad-hook/
Ad Code example for your reference. I don’t think the Hook element you described above will work.
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Responsive Sidebar Ad (Vertical) --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-1111111111546847" data-ad-slot="12345678912" data-ad-format="auto" data-full-width-responsive="true"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script>Your help is highly appreciated.
Thank You Elvin!
-CharbelThe same principle applies.
You can try using the custom HTML widget and code the HTML in this manner.
<div class="side-by-side"> <div class="left-ad"> <script> script for ad #1 here </script> </div> <div class="right-ad"> <script> script for ad #2 here </script> </div> </div>We then lay it out with
.side-by-side{ display: flex; flex-direction: row; }Note: I’m not sure how the Ad inserter plugin works but this one, most likely, has been asked before on their support page. I highly suggest asking them how to do it with their plugin so you don’t have to do the HTML or CSS writeup.
No problem. Let us know how it goes. 😀
- You must be logged in to reply to this topic.
