Advertisement
The Core framework contains an advertisement solution that will work with responsive and centered page layouts.
Use the buttons to toggle the demo ad placements on this page to see how they affect the page layout. Zoom or resize your browser window to see how the ads will look on different display sizes.
Implementation
Ads are placed at the bottom of the page wrapper. The page wrapper, in turn, gets the additional
page-wrapper--with-ads
class, which will reserve the necessary space to the top and right.
<body> <div class="page-wrapper page-wrapper--with-ads"> <!-- Lots and lots of other interesting content here --> <div class="ad-superbanner"></div> <div class="ad-skyscraper--right"></div> <div class="ad-skyscraper--left"></div> </div> </body>
Toggling Ads
All ad containers are by default hidden. They are shown only if the <body>
element has the respective activation
class.
- Super Banner
-
has-ad-superbanner
- Skyscraper (Right)
-
has-ad-skyscraper--right
- Skyscraper (Left)
-
has-ad-skyscraper--left
The Hockey Stick advertisement requires both the super banner and the right skyscraper to be visible.
<body class="has-ad-superbanner"> <div class="page-wrapper page-wrapper--with-ads"> <div class="ad-superbanner"> <!-- This placement was loaded and is being shown because of the .has-ad-superbanner class on the body. --> <span class="some-ad">This product is so great, we won't even try to keep you from giving us money for it!</span> </div> <div class="ad-skyscraper--right"> <!-- This one's empty, but that's okay because nobody can see it, and no space is being reserved for it. --> </div> <div class="ad-skyscraper--left"> <!-- Same here. --> </div> </div> </body>
Generally, if you are unsure whether an advertisement is actually booked, you should always apply the appropriate classes for all potential advertisements regardless.
Reserving unused space when no ad is booked is generally preferable to having the page jump vertically and horizontally after the initial rendering has finished.
Loading Ads
For the time being, assembling and executing the actual ad server requests stays up to each application. If you show the advertisement containers by default, you can continue to use your regular ad script without any further changes.
If you want to show the ad containers based on whether a banner was actually loaded, you will need to apply the respective activation class to the body element on successful retrieval of a banner.
A Note on Full-width Pages
Note that these advertisement layouts work only with the default – that is, the centered – page layout. It is not supported in pages using the full-width layout.