Quick Start To install Ad Inserter plugin log in to your WordPress dashboard, click on Plugins in the WordPress menu, click on Add New on top of the plugin page, search for Ad Inserter, select Ad Inserter from the results, click Install and then Activate the plugin. Some typical settings are described in the section Common Settings. Please make sure you have also read Troubleshooting section. Few very important things you need to know in order to insert code and display some ad: • Code block (there are 16 of them, 64 in Pro) is ad code with settings which define where the ad will be inserted (displayed). • Each code block can be renamed. Click on the name to edit it. • Enter or paste the code into the code window or use code tools to generate or edit banner code. You can also use visual HTML editor to create or edit HTML code for your ad. WARNING: If you are using ad blocker make sure it is disabled when using Ad Inserter. If ad blocker is active you may experience issues and some functions may not work as described here. AdInserter.Pro Page 10 • Enable and use at least one insertion option (Automatic Insertion or manual insertion Widget, Shortcode or PHP function call) • Enable insertion on at least one Wordpress page type (Posts, Static Pages, Blog pages: Homepage, Category pages, Search Pages, Archive pages) • For Posts and Static Pages leave default Blank selection value after the checkbox unless you really know what are you doing (using individual exceptions) • If you don't see inserted code block turn on debugging functions: Label blocks, Show positions for automatic insertion (Ad Inserter menu item in the WordPress toolbar on the top of every post/page), Check Debugging and Ads not displayed sections for more. • If you are using AdSense you may get blank (empty) ad blocks. This might be because there is some error in the code (wrong IDs), your AdSense account is not fully approved yet, your website was not accepted or your AdSense account is banned. Try Media net ads – they seem to be a good alternative for contextual ads. AdInserter.Pro Page 11 Endorsed by Google Google lists Ad Inserter plugin as possible solution to place AdSense ad code into your WordPress site. If you’re new to AdSense Ads, one of your first tasks is to connect your site to AdSense. This requires you to copy the code on your AdSense homepage and paste it into the HTML of your page, between the and tags. Advanced users can enable AdSense Integration: get AdSense ad codes from the plugin settings page. Endorsed by Amazon Amazon suggests to use Ad Inserter to add Native Shopping Ads to Wordpress posts. Native Shopping Ads provide highly relevant and dynamic product recommendations in a stylishly designed and responsive ad unit that can be placed at the end of your content or within your content to create a more compelling visitor experience and shopping opportunity. Check Wordpress Integration Guide for Native Shopping Ads. In the section Common Settings you can also find an example of contextual Amazon ads that show items related to the post content (using post tags). AdInserter.Pro Page 12 Settings Ad Inserter can be configured to insert any code anywhere on the page. Each ad code with it's settings is called a code block. Free Ad Inserter supports 16 code blocks, Ad Inserter Pro supports up to 96 code blocks (depending on the license type). The settings page is divided into tabs – 16 code blocks and general plugin settings. Black number means inactive code block (code is not inserted anywhere), red number means block is using automatic insertion, blue number means block is using manual insertion while violet number means block is using automatic and manual insertion. Each code block has a name, code and settings which are divided into sections. Some settings depend also on automatic insertion used. When you are finished with settings you need to save them by clicking on the button Save Settings. AdInserter.Pro Page 13 To show a list of all blocks click on the Blocks button in the header row. This list shows all active code blocks. To show all blocks click on the top right button. To filter blocks enter keywords in the search field. You can also use php, shortcode and widget keywords to filter blocks that have enabled respective functions. Here you can also easily rearrange block order. Click on the Rearrange block order button to enable moving blocks. Now you can drag and move blocks to create new block order. The position where the block would be moved is highlighted. When you are happy with the order click on the Save Changes button. Click on the Rearrange block order button to cancel changes. When you save new block order this changes also Ad Inserter widget blocks in widget positions and statistics data accordingly. Block name To rename code block click on the name for editing. AdInserter.Pro Page 14 Block code Ad Inserter provides many simple functions to generate, edit or copy codes for ads. You can simply paste the code you have generated elsewhere, create code for banners or text ads or copy and edit code form other code blocks. Quickly disable insertion To insert code block you need to use automatic or manual insertion. Once you configure settings including insertion the code will be inserted. If for some reason you need to temporarily disable (pause) insertion you can disable automatic insertion or uncheck manual insertion. To achieve the same effect without changing the settings you can simply disable (pause) insertion of each code block. To disable insertion of code block click on the pause button (it will be red when paused) and save settings. Simple editor for mobile devices On mobile devices some functions like text selection, copy and paste may not work with default syntax highlighting editor. In such case enable simple editor to switch to plain text editor. PHP code processing If you have PHP code (surrounded with PHP tags <?php … ?>) in code block, you need to enable PHP code processing. AdInserter.Pro Page 15 Code editing You can simply edit the code in the code window but there are also additional tools to help you creating, editing and copying the code. To show the toolbar click on the Code tools button. Code generator Code generator currently supports code for banners and AdSense. To open code generator click on the code generator button. Banners Ad Inserter has a simple code generator for banners and placeholders. You can select banner image (or placeholder), optionally define link (web page address that will open when the banner will be clicked) and select whether to open link in a new tab. WARNING: If you are using ad blocker make sure it is disabled when using Ad Inserter. If ad blocker is active you may experience issues and some functions may not work as described here. AdInserter.Pro Page 16 If you already have a banner HTML code in the code window you can import it by clicking on the import button. A thumbnail will be displayed next to the banner fields. Once you are happy with the banner you can generate the code for it by clicking on the generate button. The plugin will generate HTML code for the banner in the code window of the current block. Please note: if you have active rotation editor the code window shows only the code for the currently selected option. Therefore, code generator will in such case import or generate code for the currently selected option. Code generator for banners and AdSense generates the code only when you click on the button Generate code. It is a tool that can help you to create code for AdSense or banners with links. So if you are using rotation editor and switch between options you need to (optionally) import and generate code for each rotation option. WARNING: If you are using ad blocker make sure it is disabled when using Ad Inserter. If ad blocker is active you may experience issues and some functions may not work as described here. AdInserter.Pro Page 17 Placeholders If you don't have banner image ready yet you can use placeholder images to create ad positions. Ad Inserter has built-in placeholder generator/editor to easily select dummy image of any size or color. Click on the Select Placeholder button to open placeholder editor. Choose between predefined ad sizes or define custom size. Default placeholders are gray with size as placeholder text but you can use any color or text you want. Click on Edit button to edit placeholder size, color or text. You can also create blank solid color rectangles by clearing placeholder text. Once you are happy with the placeholder click on the Use button to generate placeholder image url. AdInserter.Pro Page 18 AdSense Ad Inserter has a simple code generator for AdSense ads. Here you can define data needed for the AdSense code. In most cases it will be much easier to simply paste AdSense code into the code window and then import the data from it. You can also get AdSense ad codes directly from the ad Inserter settings page. Check AdSense Ads section for details. This tool is mainly intended to change the type of AdSense ads. But please note: not all conversions are possible: you can convert standard ads to link ads or vice versa, fixed width ads to responsive ads and vice versa and you can enable or disable ads on AMP pages. Once you have the Publisher ID and Ad Slot ID entered (or imported) you can change ad type, responsiveness and ad type for AMP pages. Once you are happy with the settings click on the generate button and the the plugin will generate Javascript code for the AdSense ad in the code window of the current block. AdInserter.Pro Page 19 Rotation Editor To rotate different ad versions separate them with [ADINSERTER ROTATE] - Ad Inserter will randomly select one of the ad versions. For example, to rotate 3 different images you can use the following code: <img style='height: 400px;' src="http://malsup.github.io/images/p1.jpg"> [ADINSERTER ROTATE] <img style='height: 400px;' src="http://malsup.github.io/images/p2.jpg"> [ADINSERTER ROTATE] <img style='height: 400px;' src="http://malsup.github.io/images/p3.jpg"> However, there is an easier way to create code for rotation. Use rotation editor available on the code tools toolbar. Rotation editor will AUTOMATICALLY import rotation code from the code window (if present). In our case it would generate three options: A, B and C. You can use + and - buttons to add or remove options. You can also specify rotation share (percentage) for each option. If you omit one share value it will be automatically calculated. Leave Share field empty for all options to have equal shares of all rotation options. Ad Inserter supports also timed rotation – for each option you can define rotation time. When at least one option has defined time, the plugin will generate client-side code (using CSS / javascript code) that will show one option for the time specified. If an option has no time defined the rotation will stop there. If you set time to 0 then this option will be skipped. When you define also share values for timed rotation, share values will be used only for the initial display of the first chosen option. When rotation editor is active the code window shows ONLY code for the selected option. For each option AdInserter.Pro Page 20 you can copy/paste code, use code generator or visual HTML editor. Each option can also be named. This name is then used in statistics reports (Pro only) and is displayed when debugging function Label blocks is used. After importing the code for the first option you can name each option. Please note that when switching rotation options and using code generator you need to import (and generate) code manually for each option. Once you are happy with the rotation settings click on the rotation editor button and the the plugin will generate rotation code in the code window of the current block. Now you can save settings. WARNING: Do not save settings when the rotation editor is active – after you are finished with rotation settings click on the rotation button to generate rotation code with [ADINSERTER ROTATE] separator. WARNING: If you are using caching ad rotation by default may not work as expected. It works only when the page is generated and Ad Inserter is called. In such cases please make sure you have disabled caching or use client-side Dynamic blocks - but you need to be aware of how it works. Please check section Caching - Ad rotation for details. Timed rotation always generates client-side code – rotation code runs in the browser. Ad Inserter is perfect for displaying any kind of ads. It can also be used to display various versions of ads, for example AdSense ads using channels to test which format or color combination performs best – but please, in such case use Dynamic blocks set to Server-side or Client-side insert to prevent generating hidden ads. You can also rotate ads configured in other blocks. In such case enable shortcuts for those blocks and use shortcodes for rotation. For example, this code will rotate blocks 10, 11 and 12. [ADINSERTER code="10"] [ADINSERTER ROTATE] [ADINSERTER code="11"] [ADINSERTER ROTATE] [ADINSERTER code="12"] In this case we have used shortcode [ADINSERTER code="10"] that will return only pure block code (without wrapping div with alignment CSS code). You can also use shortcode [ADINSERTER block="10"] that will return code with wrapping div and alignment CSS code. In such case you can rotate between different alignments – just make sure to set alignment of the rotation block to No wrapping. AdInserter.Pro Page 21 Visual HTML editor Ad Inserter has also standard WordPress visual HTML editor to create or edit image or text ads. The button for it is located on the code tools toolbar. The editor opens in a new window where you can edit the code the same way as you edit WordPress posts and pages. You can insert images and switch between visual editor and source code. There are also three additional buttons: • Use Copies current code to the code window and closes visual code editor • Reset Resets the code in the editor to the code from the code window in current block settings • Cancel Cancels editing and closes visual code editor Clipboard Ad Inserter has internal clipboard which can be used to copy and paste block name, code and settings. The buttons are located on the code tools toolbar. Copy button copies current block to the internal clipboard. Once the block is copied the button copy is highlighted. AdInserter.Pro Page 22 You can then switch to any of the remaining blocks and paste either block name, code, insertion settings or everything: name, code and settings. To clear block settings click on the Clear block button. With buttons in the code tools toolbar you can copy settings from any of 16 displayed code blocks. But you can also copy settings from any other code block. Click on the List button in the header to show the list of all (or only active) blocks. Click small button left of block number to copy block settings to the internal clipboard. Then you can use paste functions to paste name, code, settings or complete block. AdInserter.Pro Page 23 Import/Export (Pro only) Ad Inserter Pro supports exporting and importing code block settings. This can be used to transfer settings from one website to another. To copy block settings to another block on the same website use Ad Inserter clipboard described above. Click on the code tools button and then on the export/import button with up/down arrow on the left to open window with saved settings for this block including code – the settings are exported as text - a long string of characters. To copy settings from one block to another copy this text on the source code block, paste it to destination code block import/export window, check Import settings for block and click on the Save settings button. If you leave Import block name checked the import will copy also name from the source block. Similarly you can copy all Ad Inserter Pro settings for all blocks – the import/export button is located on the Settings (tab ⚙). AdInserter.Pro Page 24 Insertion Options Each code block has 4 independent insertion options – automatic and three manual: • Automatic Insertion • Widget • Shortcode • PHP function call Normally, for each code block you use only one insertion option. Of course, you can use all 4 options simultaneously taking into account that all insertion options use the same block settings (with some exceptions mentioned below). To insert code block (and display ad) at some position you need to enable and use at least one insertion option and enable at least one page type. Automatic Insertion Automatic insertion means that the code block will be automatically inserted on all posts or pages according to the block settings. For each code block you can also define exceptions to prevent insertions on some posts or pages. There are at least two different ways to exclude posts or pages - check Post/Page Exceptions for more. Automatic insertion uses WordPress hooks – triggers that are called when WordPress (with theme and other plugins) creates pages. Some themes do not use standard Wordpress excerpts, posts or other page elements. In such cases some insertion positions will not be available. But you can still insert ads there with Ad Inserter by modifying theme files and adding calls to adinserter PHP function. In such case do not modify theme files directly but create a child theme instead. The following positions are available for automatic insertion: • Insert Above header (on all pages, after <body> tag, available only when Output buffering is enabled) • Insert Before Post (before post or posts on blog pages) • Insert Before Content (before post or page text) • Insert Before Paragraph (on posts, pages and blog pages) • Insert After Paragraph (on posts, pages and blog pages) • Insert After Content (after post or page text) • Insert After Post (after post or posts on blog pages) • Insert Before Excerpt (on blog pages) • Insert After Excerpt (on blog pages) • Insert Between posts (on blog pages) • Insert Before Comments (on posts) • Insert Between Comments (on posts) • Insert After Comments (on posts) • Insert in page Footer (on all pages, before </body> tag) • Insert Before HTML element (server-side insertion available only when Output buffering is enabled) • Insert After HTML element (server-side insertion available only when Output buffering is enabled) PLEASE NOTE: Insertion position Above header inserts code after <body> tag, while Header code in general plugin setting (tab ⚙) inserts the code (scripts) in the <head> section of the HTML page. Insertion position Above header needs special code processing and is available only when you enable Output buffering (tab ⚙ / General), however, this may not work with all installations. AdInserter.Pro Page 25 For single posts or pages insertion position Before Post usually means position above the post/page title, for blog pages Before Post position means position above all the posts on the blog page. For single posts or pages insertion position After Post means position below the post/page after all the content, for blog pages After Post position means position below all the posts on the blog page. Before and after Excerpt positions are available on blog pages only if your theme uses standard Wordpress excerpts. Otherwise you'll have to modify theme files and use PHP function adinserter or custom hook in order to insert ads between excerpts. Between posts work with most themes that use standard WP blog pages. However, some themes call the_post hook before the content is actually written. In such case this position would not work as expected. Order of insertion positions in a typical post is the following: • [Above Header] • Theme header • [Before Post] • Post Title • [Before Content] • Paragraph 1 • Paragraph ... • Paragraph n - 1 • Paragraph n • [After Content] • Output of some other plugins • [Before Comments] • Comments • [After Comments] • Output of some other plugins • [After Post] • Theme footer • [Footer] AdInserter.Pro Page 26 Of course, the final order of items depends also on other plugins. Ad Inserter is by default called as one of the last plugins. You can change Plugin priority on the settings page (tab ⚙). Use Show positions function to see available positions for automatic insertion (Ad Inserter menu item in the WordPress toolbar on the top of every post/page) check Debugging section for details. Disable insertion To insert code block you need to use automatic or manual insertion. Once you configure settings including insertion, the code will be inserted. If for some reason you need to temporarily disable (pause) insertion you can disable automatic insertion or uncheck manual insertion. To achieve the same effect without changing the settings you can simply disable (pause) insertion of each code block. To disable insertion of code block click on the pause button (it will be red when paused) and save settings. Custom Hooks Ad Inserter supports also automatic insertion at custom positions where hooks are used using the do_action () WordPress function. The number of custom hooks depends on the license type (free Ad Inserter supports 2 custom hooks). To define hooks go to tab ⚙ / tab Hooks. Example of hooks settings: Hook name is a name that is used in the Automatic insertion selection, action is the name that is used in the do_action () WordPress function in the theme and priority is the hook priority (lower number means earlier processing). You can use ANY hook that is implemented by your theme or added by plugins. After you save settings you get new positions for automatic insertion. AdInserter.Pro Page 27 Hook is a standard WordPress PHP function call to allow themes and other plugins to insert custom code. Instead of inserting adinserter PHP function call you can install custom hook at any theme position: <?php do_action ('custom_action_name'); ?> The difference between adinserter PHP function call and custom hook is that adinserter PHP function will insert only the defined code block, while custom hook position is available as position for automatic insertion and can be used for any code block. Insertion Before or After HTML element Insertion positions Before and After HTML element can be used to insert any code anywhere on the page. Ad Inserter supports client-side and server-side insertion. Client-side insertion uses Javascript code to insert code block during or after the page is loaded in the browser while server-side insertion means insertion when the plugin is called and the page is created. However, server-side insertion requires enabled output buffering (tab ⚙ / tab General). HTML element(s): here you list CSS selector(s) of the HTML element(s) where you want to insert the code block (#id, .class). Insertion: Client-side insertion inserts the code immediately when the code at Javascript code positions runs. Wanted HTML element must be already available (above) on the page. Client-side when DOM ready (default) inserts the code after the page is loaded and all elements are ready. Server-side insertion is the best approach, however, it requires output buffering which is by default disabled as it may not work with all themes. To enable it go to general plugin settings (tab ⚙ / tab General) and set Output buffering to enabled. After you save settings you will be able to select server-side for insertion before/after HTML element. AdInserter.Pro Page 28 Javascript code position: Page position where the Javascript code for client-side insertion will be inserted. Should be after the HTML element if not waiting for DOM ready. Output buffering means buffering the page while it is created by WordPress using your theme and plugins. After the buffering ends the buffered page content is processed and code blocks before/after HTML elements inserted. To check if your theme supports output buffering, go to general plugin settings and enable it, then go to homepage and enable Show positions debugging function (Ad Inserter menu in top admin bar). If you see OUTPUT BUFFERING (and ABOVE HEADER) bar then output buffering works as expected. AdInserter.Pro Page 29 Alignment and Style 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 • Center • Align Right • 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) • Custom CSS (You can define custom CSS code for wrapping div) • No Wrapping (leaves ad code as it is, otherwise it is wrapped by a div) Click on the Show button next to Alignment and Style selection 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 Code Preview section and description below. Wrapping code Each code (ad) block is normally wrapped by a div element. Classes and inline style can be configured on the General tab of plugin settings. 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 code-block) 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 AdInserter.Pro Page 30 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. 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. AdInserter.Pro Page 31 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. 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. 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 AdInserter.Pro Page 32 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. 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 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. AdInserter.Pro Page 33 AdInserter.Pro Page 34 Sticky Ads (Pro only) 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: 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 to open Preview window. AdInserter.Pro Page 35 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 Stick to the left This alignment displays ad next to the left screen edge - it overlaps any content there. Next to the selection you can optionally enter horizontal margin in pixels. AdInserter.Pro Page 36 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 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. Center This alignment displays ad centered horizontally - it overlaps any content there. AdInserter.Pro Page 37 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 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. Stick to the right This alignment displays ad next to the right screen edge - it overlaps any content there. Next to the selection you can optionally enter horizontal margin in pixels. AdInserter.Pro Page 38 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 Stick to the top This alignment displays ad next to the top screen edge - it overlaps any content there. Next to the selection you can optionally enter vertical margin in pixels. The ad stays fixed there - it doesn't move when the page is scrolled. AdInserter.Pro Page 39 Center This alignment displays ad centered vertically - it overlaps any content there. 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. AdInserter.Pro Page 40
Enter the password to open this PDF file:
-
-
-
-
-
-
-
-
-
-
-
-