Press enter to see results or esc to cancel.

Alignments and Styles

Each code block or ad can be aligned according to your needs. Ad alignment is necessary in order to properly position ads so that they complement the content and adapt to the theme layout..

Normally, the code block is wrapped with a div with appropriate CSS style. Of course, you can customize or define your own CSS code for the wrapping div. The following alignments are available:

  • Default (simple div with thin margin around the block)
  • Align Left
  • Align Right
  • Center
  • Float Left (ad on left with wrapped text on the right)
  • Float Right (ad on right with wrapped text on the left)
  • No Wrapping (inserts the code as it is, otherwise it is wrapped by a div)
  • Custom CSS (You can define custom CSS code for the wrapping div)
  • PRO Sticky ads (ad doesn’t move when the page is scrolled)
  • PRO Sticky animations (slide, fade, flip, turn, zoom)
  • PRO Animation triggers (page scrolled in % or px, HTML element becomes visible)
  • PRO Close button

Click on the Show button to see the graphical representation of the automatic insertion options and alignment styles. 

ad inserter automatic insertion

Below the icons you can see the CSS code for the block alignment. Click on the code or on Edit button to edit the code. When you edit the CSS code the style automatically changes to Custom CSS.

ad inserter css

You can also test different alignments and styles – click Preview button below the code editor to open preview window where you can check different alignments and CSS styles.

ad inserter buttons

Wrapping code

Each code (ad) block is normally wrapped by a div element. This wrapping div is present unless you select No wrapping style. For example, the default wrapping code for block 1 looks like this:

<div class="code-block code-block-1" style="margin: 8px 0; clear: both;">
  AD_CODE
</div>

The wrapping code contains the CSS style for thin margin around the code block (and optionally alignment) and Ad Inserter code block classes. You can change or add your own CSS code using Custom CSS style (to edit the CSS code simply click Show button to reveal the code and then click on the CSS code).

You can also apply the same style to all the code blocks using Ad Inserter CSS class (default class name is code-block) and CSS code in the CSS file of your theme (for example style.css). Default class name, classes and inline style options can be changed in Ad Inserter plugin settings (Tab / tab General). You can also leave empty Block class name and no classes will be added the the wrapping div.

ad inserter wrapping settings

Default, Left, Center and Right alignment styles contain also CSS code clear: both; which clears any floating elements above.

Default Alignment

Default alignment simply wraps the code with a div with thin margin around the block. The block will be aligned according to the settings of the page. You should use default alignment unless you need to force specific alignment or wrap the ad with page text.

media.net

Left Alignment

Left alignment wraps the code with a div with thin margin around the ad block and forces the ad to align left. This means that it aligns the ad along the left side of the page or containing element. You can also test and modify the code in the Preview window.

In the preview window you can also use alternative CSS code for left alignment. Double-click on the icon for left alignment and the code will toggle. The current code version is displayed next to Alignment and Style selection.

Infolinks

Right Alignment

Right alignment wraps the code with a div with thin margin around the ad block and forces the ad to align right. This means that it aligns the ad along the right side of the page or containing element. You can also test and modify the code in Preview window.

In the preview window you can also use alternative CSS code for right alignment. Double-click on the icon for right alignment and the code will toggle. The current code version is displayed next to Alignment and Style selection.

Video Ads

Center Alignment

Center alignment wraps the code with a div with thin margin around the ad block and centers the ad between left and right page margins. This means that it aligns the ad to be equally spaced from the left and the right side of the page or containing element. You can also test and modify the code in Preview window.

In the preview window you can also use alternative CSS code for centering the ad. Double-click on the icon for center alignment and the code will toggle. The current code version is displayed next to Alignment and Style selection.

Media.net

Float Left

Alignment Float Left wraps the code with a div with thin margin around the ad block and allows the text to continue right of the ad. This means that it wraps the ad on the right side with text. You can also test and modify the code in Preview window. Example with a banner set to Float Left:

Infolinks

Ad Inserter is a simple yet powerful WordPress ad management plugin with many advanced advertising features to insert ads at optimal positions. It supports all kinds of ads including Google AdSense ads, contextual Amazon Native Shopping Ads, Media.net ads and banners. 

Ad Inserter is more than just an advanced ad manager or plugin for ads. It provides many flexible options to insert opt-in forms, header scripts, AMP ads, Javascript, CSS, HTML, PHP, analytics or tracking code anywhere on the page.

Float Right

Alignment Float Right wraps the code with a div with thin margin around the ad block and allows the text to continue left of the ad. This means that it wraps the ad on the left side with text. You can also test and modify the code in Preview window. Example with a banner set to Float Right:

Media.net

Ad Inserter is a simple yet powerful WordPress ad management plugin with many advanced advertising features to insert ads at optimal positions. It supports all kinds of ads including Google AdSense ads, contextual Amazon Native Shopping Ads, Media.net ads and banners. 

Ad Inserter is more than just an advanced ad manager or plugin for ads. It provides many flexible options to insert opt-in forms, header scripts, AMP ads, Javascript, CSS, HTML, PHP, analytics or tracking code anywhere on the page.

No Wrapping

No Wrapping style does not wrap the code with a div – it inserts the code as it is. The alignment will depend on the page settings. Use No Wrapping style when you don’t want to add the wrapping div (for example on AMP pages or in the <head> section).

Please note that ad tracking, client-side device detection and client-side GEO targeting can’t work without a wrapping div.

Custom CSS

Sometimes the predefined CSS styles need to be modified in order to match ad styles with the theme. You can start with any predefined style and modify it or add any CSS code. To edit CSS code click on the Show button to reveal the CSS code.

ad inserter automatic insertion

Click on the code for editing.

ad inserter css

You can also visually edit CSS code and watch it real-time how the ad will look like. Save the settings and click on the Preview button below code editor to open the preview window.

ad inserter buttons

Example of a banner with custom CSS (red border):

margin: 8px 0; clear: both; border: 2px solid red; border-radius: 5px; padding: 5px;

Video ads

Below the settings on the preview window there is a preview of the block code displayed between two dummy paragraphs. Here you can test various block alignments, visually edit margin and padding values of the wrapping div or write CSS code directly and watch live preview. Highlight button highlights background, wrapping div margin and code area, while Reset button restores all the values to those of the current block. You can resize the window (and refresh the page to reload ads) to check display with different screen widths. Once you are satisfied with the alignment and style click on the Use button and the settings will be copied to the active block where you can save them.

ad inserter code preview highlighted

PRO Sticky Ads

Ad Inserter Pro supports also various types of sticky ads – ads that stick to the screen or content and stay fixed when the page is scrolled. It is also possible to configure sidebar ads that scroll with the content. There are also additional options like close button, delayed display and animations.

To configure sticky ad select Sticky as Alignment and Style. This will open settings for sticky ads:

ad inserter sticky settings

All sticky ads will be displayed according to the settings, however, the ad code should normally be inserted in the page footer. Therefore, you should select Footer Automatic Insertion unless instructed otherwise. If your theme doesn’t have Footer insertion position (and the sticky ads are not displayed) you can try to use any other suitable position (Before post or After post).

Sticky settings are divided into three sections:

  • Horizontal position
  • Vertical position
  • Animation

While you can configure all the settings for sticky ads here, it is much easier to configure and test settings in the Preview window where you can also test all the alignments and animations. Click on the Preview button below the code editor to open preview window.

ad inserter buttons

Horizontal position

Horizontal position defines how sticky ad is positioned horizontally. Available options are:

  • Stick to the left
  • Stick to the content left
  • Center
  • Stick to the content right
  • Stick to the right

ad inserter sticky horizontal position

Stick to the left

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

ad inserter sticky left

Stick to the content left

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 main content element with CSS selector or width in pixels (tab / tab General).

ad inserter sticky content left

Center

This alignment displays ad centered horizontally – it overlaps any content there.

ad inserter sticky center top

Stick to the content right

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 main content element with CSS selector or width in pixels (tab / tab General).

ad inserter sticky content right

Stick to the right

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.

ad inserter sticky right

Vertical position

Vertical position defines how sticky ad is positioned vertically. Available options are:

  • Stick to the top
  • Center
  • Scroll with the content
  • Stick to the bottom

ad inserter sticky vertical position

Stick to the top

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.

ad inserter sticky center top

Center

This alignment displays ad centered vertically – it overlaps any content there.

ad inserter sticky center center

Scroll with the content

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.

Please note that this vertical position requires code insertion above any other content just below the <body> tag – automatic insertion Above header. This position for automatic insertion is available when you enable Output buffering (tab / tab General). Check Automatic Insertion for details.

ad inserter sticky content scroll

Stick to the bottom

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.

ad inserter sticky center bottom

Stick to the content 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 / tab General and define Main content element. You can enter either CSS selector (#id or .class) of the main (outermost) page element or content width in pixels (numerical value only).

The easiest way to configure and test alignment settings is in the preview window where you can test all the alignments and animations. Click on the Preview button below the code editor to open preview window.

ad inserter buttons

Animation

ad inserter sticky animation settings

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 effect to show or hide the ad.

The following animations (effects) are available:

  • Fade
  • Slide
  • Slide and Fade
  • Turn
  • Flip
  • Zoom In
  • Zoom out

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.

The easiest way to configure and test alignment settings is in the preview window where you can test all the alignments and animations. Click on the Preview button below the code editor to open preview window.

Each animation has the following additional parameters:

  • Animation trigger
  • Trigger offset
  • Trigger delay
  • Trigger only once
Animation trigger

The following triggers are available:

  • Page loaded – The animation starts when the page is loaded.
  • Page scrolled (%) – The animation starts when the page is scrolled for the defined percentage (specify only numerical value from 1 to 100).
  • Page scrolled (px) – The animation starts when the page is scrolled for the defined number of pixels (specify only numerical value).
  • Element visible – The animation starts when specific HTML element becomes visible. Specify CSS selector for the element (#id or .class).
Trigger offset

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

Trigger delay

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

Trigger only once

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.

Close button

ad inserter sticky close button

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 Close button setting on the Misc / Display tab. It is available also here for convenience.

ad inserter misc display

The easiest way to test animations is in the preview window where you can also test alignments. Click on the Preview button below the code editor to open preview window.

ad inserter sticky preview