Alignments and Styles

Each code block or ad can be aligned according to your needs. 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 right)
  • Float Right (ad on right with wrapped text on left)
  • Sticky Left (ad on the left, doesn't move when the page is scrolled, Pro only)
  • Sticky Right (ad on the right, doesn't move when the page is scrolled, Pro only)
  • Sticky Top (ad on the top, doesn't move when the page is scrolled, Pro only)
  • Sticky Bottom (ad on the bottom, doesn't move when the page is scrolled, Pro only)
  • No Wrapping (leaves the code as it is, otherwise it is wrapped by a div)
  • Custom CSS (You can define custom CSS code for wrapping div)

Click on the Show button to see the graphical representation of the automatic insertion options and alignment styles. You can also test different alignments and styles - click Preview button to open the preview window. For details check below.

ad inserter css

Wrapping code

Each code (ad) block is normally wrapped by a div element. 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 it). But you can also apply the same style to all the code blocks using Ad Inserter CSS class (default ad-inserter) and CSS code in the CSS file of your theme. Default class name can be changed in Ad Inserter plugin settings (Tab * / tab General). You can also have empty Block Class Name and no classes will be added the the wrapping div. 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 300x250 1
 
 

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 Preview window. In 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.

 

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 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.

how to monetize a small blog

 

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. 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 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 468x60

 

Float Left

Float Left alignment 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Float Right

Float Right alignment 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.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

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). 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 simply click Show button to reveal the code and then click on it for editing. You can also visually edit CSS code and watch it real-time how the ad will look like. Save the settings and click Preview button to open the preview window.

Below the settings there is a preview of the saved code 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 alignment click on the Use button and the settings will be copied to the active block where you can save them.

ad inserter code preview highlighteed

Sticky Left (Pro only)

This alignment displays ad on the top left position (relative to the screen) and it stays fixed there - it doesn't move when the page is scrolled (it also overlaps any content there). You can change default position (margins from the screen) by modifying CSS code (click Show button to reveal the code and then click on it for editing). You can also test and modify the code in Preview window.

Sticky Right (Pro only)

This alignment displays ad on the top right position (relative to the screen) and it stays fixed there - it doesn't move when the page is scrolled (it also overlaps any content there). You can change default position (margins from the screen) by modifying CSS code (click Show button to reveal the code and then click on it for editing). You can also test and modify the code in Preview window.

Sticky Top (Pro only)

This alignment displays ad centered on the top position of the screen and it stays fixed there - it doesn't move when the page is scrolled (it also overlaps any content there). You can change default position (margin from the top) by modifying CSS code (click Show button to reveal the code and then click on it for editing). You can also test and modify the code in Preview window. In Preview window you can also use alternative CSS code for centering the ad. Double-click on the icon for Sticky Top alignment and the code will toggle. The current code version is displayed next to Alignment and Style selection.

Sticky Bottom (Pro only)

This alignment displays ad centered at the bottom position of the screen and it stays fixed there - it doesn't move when the page is scrolled (it also overlaps any content there). You can change default position (margin from the bottom) by modifying CSS code (click Show button to reveal the code and then click on it for editing). You can also test and modify the code in Preview window. In Preview window you can also use alternative CSS code for centering the ad. Double-click on the icon for Sticky Bottom alignment and the code will toggle. The current code version is displayed next to Alignment and Style selection.

Sticky Insertion

All sticky positions set After post automatic insertion by default. This only means where there code will be inserted – it will be displayed sticky after the page is loaded. If your theme doesn't have After post insertion position (and the sticky ads are not displayed) you can use any other suitable position (Before post or even Footer code – you can place shortcode for sticky ad there).