Code Preview

Ad Inserter has a very useful code preview function that can help you to check if the ad code is working and to see how it will look like when it will be inserted. Click on the Preview button below the code editor to open block preview window.

Adblockers may block code on the Ad Inserter preview window. If you see warning PAGE BLOCKED or you don’t see your code or the widow elements are distorted, make sure you have disabled ad blockers. Check also Troubleshooting section for PAGE BLOCKED warnings.

Google serves AdSense ads also based on page content. Since preview page has no content and is not accessible to Google in some cases you may get blank ad block.

On the top of the preview window there is a visual CSS editor, four buttons, CSS code of the wrapping div (which can be edited manually) and Block Alignment and Style selection. You can hover the cursor over margin and padding values and change the value with mouse wheel or click on the button near value. The code block (or ad) will resize to show current values.

Below the settings there is a preview of the 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.

The code, block name, alignment and style are taken from the current block settings (may not be saved). No Wrapping style inserts the code as it is, so margin and padding can’t be set. However, you can use own HTML code for the block.

Preview window uses also Header and Footer code.

When the code contains shortcode separators (CHECK, COUNT or ROTATE) you’ll see additional selections before Alignment selection to select the code for preview.