OUTPUT BUFFERING
ABOVE HEADER
[AI] Code for block 23   Sticky Right Content   Desktop  N=1[/AI]

Press enter to see results or esc to cancel.

BEFORE POST

Sticky ads, animations and close button

[HTML TAGS REMOVED]
[(]1183 words BEFORE CONTENT 1183 words[)]
[(]97 words[)]BEFORE PARAGRAPH 1[(]97 words[)]

<p><span>PRO</span> This page demonstrates Ad Inserter Pro sticky ads with placeholders. Displayed are ads that stick to the screen (left and right side), ads that stick to the content (left and right side), sticky ads that scroll with the page, top and bottom sticky ads, centered popup ad and few animation examples that trigger when you scroll down the page – some animations are configured to trigger only once. Make sure you test on desktop browser with display wide enough so all ads will be displayed. Top, bottom and popup ads are displayed also on mobile screens.</p>

AFTER PARAGRAPH 1
[(]73 words[)]BEFORE PARAGRAPH 2[(]73 words[)]

<p><span></span>If you are using responsive ad code (e.g. responsive AdSense code) you need to define ad width (and height) otherwise the code can’t resize as parent container width for sticky ads is not known. You can do this by specifying ad width and height (for AdSense you can use built in code generator) or define ad block width and height using custom CSS (for example, by adding CSS code <code>width: 160px; height: 600px;</code>).</p>

AFTER PARAGRAPH 2
[(]48 words[)]BEFORE PARAGRAPH 3[(]48 words[)]

<p><span></span>Sticky ads as supported by Ad Inserter Pro and described below can’t be used on AMP pages as they use CSS property <code>position: fixed;</code> or Javascript code which is not allowed on AMP pages. Check sticky AMP ads for details on code for sticky ads on AMP pages.</p>

AFTER PARAGRAPH 3

<h4>Settings for sticky ads</h4>

[(]13 words[)]BEFORE PARAGRAPH 4[(]13 words[)]

<p>For each sticky ad there are many settings which are divided into three sections:</p>

AFTER PARAGRAPH 4
    <ul>
  • <li>Horizontal position</li>
  • <li>Vertical position</li>
  • <li>Animation</li>
  • </ul>
[(]0 words[)]BEFORE PARAGRAPH 5[(]0 words[)]

<p>

[(][)]BEFORE IMAGE 1[(][)]
ad inserter sticky settings<img fetchpriority="high" decoding="async" src="https://adinserter.pro/wp/wp-content/uploads/ad-inserter-sticky-settings.png" alt="ad inserter sticky settings" width="744" height="517" class="alignnone size-full wp-image-245" />
AFTER IMAGE 1
</p>

AFTER PARAGRAPH 5

<h4>Horizontal position</h4>

[(]12 words[)]BEFORE PARAGRAPH 6[(]12 words[)]

<p>Horizontal position defines how sticky ad is positioned horizontally. Available options are:</p>

AFTER PARAGRAPH 6
    <ul>
  • <li>Stick to the left</li>
  • <li>Stick to the content left</li>
  • <li>Center</li>
  • <li>Stick to the content right</li>
  • <li>Stick to the right</li>
  • </ul>
[(]0 words[)]BEFORE PARAGRAPH 7[(]0 words[)]

<p>

[(][)]BEFORE IMAGE 2[(][)]
ad inserter sticky horizontal position<img decoding="async" src="https://adinserter.pro/wp/wp-content/uploads/ad-inserter-sticky-horizontal-position.png" alt="ad inserter sticky horizontal position" width="366" height="120" class="alignnone size-full wp-image-246" />
AFTER IMAGE 2
</p>

AFTER PARAGRAPH 7
<h5>Stick to the content left</h5>
[(]77 words[)]BEFORE PARAGRAPH 8[(]77 words[)]

<p>This alignment displays ad next to the left edge of page content (as sidebar) – it also overlaps any content there. Next to the alignment selection you can optionally enter horizontal margin in pixels. Page content width is in most cases automatically calculated and it is assumed that the content is centered horizontally. In the case the page width is not properly calculated you can manually define<span> </span>main content element<span> </span>with CSS selector or width in pixels (tab<span> </span>

[(][)]BEFORE IMAGE 3[(][)]
⚙<img decoding="async" draggable="false" role="img" class="emoji" alt="⚙" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/2699.svg" />
AFTER IMAGE 3
<span> </span>/ tab<span> </span>General).</p>

AFTER PARAGRAPH 8
<h5>Stick to the content right</h5>
[(]73 words[)]BEFORE PARAGRAPH 9[(]73 words[)]

<p>This alignment displays ad next to the right edge of page content (as sidebar) – it also overlaps any content there. Next to the alignment selection you can optionally enter horizontal margin in pixels. Page content width is automatically calculated and it is assumed that the content is centered horizontally. In the case the page width is not properly calculated you can manually define<span> </span>main content element<span> </span>with CSS selector or width in pixels (tab<span> </span>

[(][)]BEFORE IMAGE 4[(][)]
⚙<img decoding="async" draggable="false" role="img" class="emoji" alt="⚙" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/2699.svg" />
AFTER IMAGE 4
<span> </span>/ tab<span> </span>General).</p>

AFTER PARAGRAPH 9
<h5>Stick to the right</h5>
[(]29 words[)]BEFORE PARAGRAPH 10[(]29 words[)]

<p>This alignment displays ad next to the right screen edge – it overlaps any content there. Next to the alignment selection you can optionally enter horizontal margin in pixels.</p>

AFTER PARAGRAPH 10

<h4>Vertical position</h4>

[(]12 words[)]BEFORE PARAGRAPH 11[(]12 words[)]

<p>Vertical position defines how sticky ad is positioned vertically. Available options are:</p>

AFTER PARAGRAPH 11
    <ul>
  • <li>Stick to the top</li>
  • <li>Center</li>
  • <li>Scroll with the content</li>
  • <li>Stick to the bottom</li>
  • </ul>
[(]0 words[)]BEFORE PARAGRAPH 12[(]0 words[)]

<p>

[(][)]BEFORE IMAGE 5[(][)]
ad inserter sticky vertical position<img decoding="async" src="https://adinserter.pro/wp/wp-content/uploads/ad-inserter-sticky-vertical-position.png" alt="ad inserter sticky vertical position" width="329" height="120" class="alignnone size-full wp-image-252" />
AFTER IMAGE 5
</p>

AFTER PARAGRAPH 12
<h5>Stick to the top</h5>
[(]43 words[)]BEFORE PARAGRAPH 13[(]43 words[)]

<p>This alignment displays ad next to the top screen edge – it overlaps any content there. Next to the alignment selection you can optionally enter vertical margin in pixels. The ad stays fixed there – it doesn’t move when the page is scrolled.</p>

AFTER PARAGRAPH 13
<h5>Center</h5>
[(]12 words[)]BEFORE PARAGRAPH 14[(]12 words[)]

<p>This alignment displays ad centered vertically – it overlaps any content there.</p>

AFTER PARAGRAPH 14
<h5>Scroll with the content</h5>
[(]34 words[)]BEFORE PARAGRAPH 15[(]34 words[)]

<p>This alignment scrolls ad with the page. It stays fixed relative to the page (you can optionally define vertical margin in pixels) and when the page is scrolled the ad is scrolled with it.</p>

AFTER PARAGRAPH 15
<h5>Stick to the bottom</h5>
[(]43 words[)]BEFORE PARAGRAPH 16[(]43 words[)]

<p>This alignment displays ad next to the bottom screen edge – it overlaps any content there. Next to the alignment selection you can optionally enter vertical margin in pixels. The ad stays fixed there – it doesn’t move when the page is scrolled.</p>

AFTER PARAGRAPH 16

<h4>Stick to the content</h4>

[(]82 words[)]BEFORE PARAGRAPH 17[(]82 words[)]

<p><span></span>Stick to the content<span> </span>horizontal position displays ads next to the left or right edge of page content (as sidebar). In most cases the plugin will automatically calculate page content width (assuming that the content is centered horizontally) and position ads automatically. However, some themes may require to define main content element manually. For this go to tab<span> </span>

[(][)]BEFORE IMAGE 6[(][)]
⚙<img decoding="async" draggable="false" role="img" class="emoji" alt="⚙" src="https://s.w.org/images/core/emoji/12.0.0-1/svg/2699.svg" />
AFTER IMAGE 6
<span> </span>/ tab<span> </span>General<span> </span>and define<span> </span>Main content element. You can enter either CSS selector (<code>#id</code><span> </span>or<span> </span><code>.class</code>) of the main (outermost) page element or content width in pixels (numerical value only).</p>

AFTER PARAGRAPH 17

<h4>Animation</h4>

[(]0 words[)]BEFORE PARAGRAPH 18[(]0 words[)]

<p>

[(][)]BEFORE IMAGE 7[(][)]
ad inserter sticky animation settings<img loading="lazy" decoding="async" src="https://adinserter.pro/wp/wp-content/uploads/ad-inserter-sticky-animation-settings.png" alt="ad inserter sticky animation settings" width="746" height="83" class="alignnone size-full wp-image-257" />
AFTER IMAGE 7
</p>

AFTER PARAGRAPH 18
[(]35 words[)]BEFORE PARAGRAPH 19[(]35 words[)]

<p>Sticky ads can be displayed when the page is scrolled to some position, after some delay or when the page is loaded. You can also define an effect (animation) to show or hide the ad.</p>

AFTER PARAGRAPH 19
[(]6 words[)]BEFORE PARAGRAPH 20[(]6 words[)]

<p>The following animations (effects) are available:</p>

AFTER PARAGRAPH 20
    <ul>
  • <li>Fade</li>
  • <li>Slide</li>
  • <li>Slide and Fade</li>
  • <li>Turn</li>
  • <li>Flip</li>
  • <li>Zoom In</li>
  • <li>Zoom out</li>
  • </ul>
[(]31 words[)]BEFORE PARAGRAPH 21[(]31 words[)]

<p><span></span>For each horizontal and vertical alignment the plugin will select optimal animation direction. Some animations are not available with all positions. In such cases the plugin will choose the best alternative.</p>

AFTER PARAGRAPH 21
[(]7 words[)]BEFORE PARAGRAPH 22[(]7 words[)]

<p>Each animation has the following additional parameters:</p>

AFTER PARAGRAPH 22
    <ul>
  • <li>Animation trigger</li>
  • <li>Trigger offset</li>
  • <li>Trigger delay</li>
  • <li>Trigger only once</li>
  • </ul>
<h5>Animation trigger</h5>
[(]5 words[)]BEFORE PARAGRAPH 23[(]5 words[)]

<p>The following triggers are available:</p>

AFTER PARAGRAPH 23
    <ul>
  • <li style="text-align: justify;">Page loaded<span> </span>– The animation starts when the page is loaded.</li>
  • <li style="text-align: justify;">Page scrolled (%)<span> </span>– The animation starts when the page is scrolled for the defined percentage (specify only numerical value from 1 to 100).</li>
  • <li style="text-align: justify;">Page scrolled (px)<span> </span>– The animation starts when the page is scrolled for the defined number of pixels (specify only numerical value).</li>
  • <li style="text-align: justify;">Element visible<span> </span>– The animation starts when specific HTML element becomes visible. Specify CSS selector for the element (<code>#id</code><span> </span>or<span> </span><code>.class</code>).</li>
  • </ul>
<h5>Trigger offset</h5>
[(]22 words[)]BEFORE PARAGRAPH 24[(]22 words[)]

<p>This is additional offset in pixels that is taken into account when the animation is triggered (positive and negative values are possible).</p>

AFTER PARAGRAPH 24
<h5>Trigger delay</h5>
[(]25 words[)]BEFORE PARAGRAPH 25[(]25 words[)]

<p>This value defines delay of animation (in milliseconds) after the trigger event. To simply show sticky ad with a delay set animation to<span> </span>Fade<span> </span>and define delay.</p>

AFTER PARAGRAPH 25
<h5>Trigger only once</h5>
[(]44 words[)]BEFORE PARAGRAPH 26[(]44 words[)]

<p>Normally the sticky ad will be displayed after the trigger condition occurs and will hide when the condition is not met. Here you can define to trigger animation only once – show the ad and don’t hide it when the page is scrolled back.</p>

AFTER PARAGRAPH 26
<h5>Close button</h5>
[(]0 words[)]BEFORE PARAGRAPH 27[(]0 words[)]

<p>

[(][)]BEFORE IMAGE 8[(][)]
ad inserter sticky close button<img loading="lazy" decoding="async" src="https://adinserter.pro/wp/wp-content/uploads/ad-inserter-sticky-close-button.png" alt="ad inserter sticky close button" width="746" height="83" class="alignnone size-full wp-image-258" />
AFTER IMAGE 8
</p>

AFTER PARAGRAPH 27
[(]49 words[)]BEFORE PARAGRAPH 28[(]49 words[)]

<p>Each ad can have a close button. You can choose one of the four corners where the button will be displayed. The ad will not be displayed until the page is reloaded. This setting is a mirror of the<span> </span>Close button<span> </span>setting on the<span> </span>Misc<span> </span>/<span> </span>Display<span> </span>tab. It is available also here for convenience.</p>

AFTER PARAGRAPH 28
[(]4 words[)]BEFORE PARAGRAPH 29[(]4 words[)]

<p><span></span>Close button can be<span> </span>customized</p>

AFTER PARAGRAPH 29
[(]77 words[)]BEFORE PARAGRAPH 30[(]77 words[)]

<p><span></span><span>Please note that Ad Inserter supports another type of sticky ad: </span>sticky (fixed) widgets<span></span>Sticky widget<span> is a widget that you place in the sidebar and when the page is scrolled down and sticky widget reaches top of the page, sticky widget and all the widgets below stay fixed – they don’t move when the page is scrolled down. Sticky widgets are available also in the free Ad Inserter and are not considered sticky ads as shown on this page.</span></p>

AFTER PARAGRAPH 30

<h2>Pop-up ads</h2>

[(]24 words[)]BEFORE PARAGRAPH 31[(]24 words[)]

<p>With sticky ads you can also easily create a pop-up ad. Simply center it horizontally and vertically, add a close button and set animation:</p>

AFTER PARAGRAPH 31
[(]0 words[)]BEFORE PARAGRAPH 32[(]0 words[)]

<p>

[(][)]BEFORE IMAGE 9[(][)]
ad inserter pop-up ad settings<img loading="lazy" decoding="async" src="https://adinserter.pro/wp/wp-content/uploads/ad-inserter-pop-up-ad-settings.png" alt="ad inserter pop-up ad settings" width="746" height="610" class="alignnone size-full wp-image-1013" />
AFTER IMAGE 9
</p>

AFTER PARAGRAPH 32
[(]6 words[)]BEFORE PARAGRAPH 33[(]6 words[)]

<p>Test it in the preview window:</p>

AFTER PARAGRAPH 33
[(]0 words[)]BEFORE PARAGRAPH 34[(]0 words[)]

<p>

[(][)]BEFORE IMAGE 10[(][)]
ad inserter pop-up ad preview<img loading="lazy" decoding="async" src="https://adinserter.pro/wp/wp-content/uploads/ad-inserter-pop-up-ad-preview.png" alt="ad inserter pop-up ad preview" width="721" height="960" class="alignnone size-full wp-image-1014" />
AFTER IMAGE 10
</p>

AFTER PARAGRAPH 34
[(]18 words[)]BEFORE PARAGRAPH 35[(]18 words[)]

<p><span></span>When you scroll this page down to the end you should see a pop-up ad with Flip animation.</p>

AFTER PARAGRAPH 35
<div>
<hr />
<div>

<h3>Related Pages</h3>

</div>
</div>
AFTER CONTENT
POST
AFTER POST
FOOTER
[AI] Code for block 17   Sticky Left   Desktop  N=1[/AI]
[AI] Code for block 18   Sticky Left Animation   Desktop  N=1[/AI]
[AI] Code for block 19   Sticky Left Content   Desktop  N=1[/AI]
[AI] Code for block 20   Sticky Left Content Animation   Desktop  N=1[/AI]
[AI] Code for block 21   Sticky Right   Desktop  N=1[/AI]
[AI] Code for block 22   Sticky Right Animation   Desktop  N=1[/AI]
[AI] Code for block 24   Sticky Right Content Animation   Desktop  N=1[/AI]
Skip to toolbar
JAVASCRIPT NOT WORKING
POST