Divs implementation in my site
- Sebastian Perez (Unlicensed)
The implementation of side spaces will enable the use of all formats in the site involving this type of creatives.
Site adjustments for the use of these formats:
Multiple Impact
Triple Impact
The site should be adapted only once to run this type of creatives so that th work correctly.
| Important: |
The site’s containing div should be of relative position style for any absolute position dependent element may take their coordinates regarding this div position.
STEP 1: Site Div
Check the site’s containing div styles to include the indicated style
| <div id=”Sitecontainer” style='position:relative”> … </div> |
STEP 2: Side divs and Layer
Within the containing div, 1 div should be present for one of the side banners, the one to be positioned by the site’s sides (containing div).
The banners side containing divs should be of absolute position type.
| <div id='XXX' style='position:absolute> </div> |
For sides to be positioned at the height of the site’s starting point, they should be positioned at the container’s 0 point; however, this way, it might remain on the site’s contents and not on its side.
That’s the reason why sides should have a negative margin. For example: if the left side exceeds a width of 120 pixels, it should be as follows: left: -120px and right: -120px.
This configuration is useful for creatives to be correctly visualized in all screen resolutions. The creative will be “outlined” and will not be seen on the site in screen resolutions lower than 1024.
These divs (side containers and layer) should have clear names as ids, to be then identified at the time of the campaign creation.
The system will identify these divs through their ID and ads will be displayed correctly.
| <div id=' epl_impact_div' style='position:absolute></div> |
If you wish side banners to remain in a fixed position when scrolling, it is necessary to place another fixed position div within each div. In this case, these internal divs are the ones to show the epl’s ids.
This would be structured as follows:
Left Side
| <div style='position:absolute;left:-140px;> |
Right Side
| <div style='position:absolute;right:-140px;> |
For multiple impact formats and sides to layer, an additional div is suggested to be included to position the layer.
For example: one of the most used implementations is to place the layer to be at the same height of sides and its position is absolute as well as sides.
The layer has its own container; this is an independent div from sides.
Layer
| <div id='epl_impact_layer' style='position:absolute> </div> |
Take into account that the ads should be associated to a position (space in e-planning); therefore, such position should bear the Javascript call to show the e-planning Rich Media tag correctly.
If using Ajax V4 code, the Javascript call is of the following type
| <script type='text/javascript'>eplAD4M('lateral');</script> |
The final code for the left side will be of the following type:
| <div style='position:absolute;left:-140px;> |
Ads implementation within the interface
1. Multiple Impact
When adding the ad, select:
Format: Multiple Impact
Complete the requested fields.
| NOTE: The ad displayed on the left will call the space script to show in such position. |
Then enter “Edit ad attributes” and indicate the used divs’ ids.
3 divs should be added here to be placed in the site: banner top, right side banner and layer.
2. Triple Impact
| NOTE: The ad displayed on the left will call the space script to show in such position. |
When adding the ad, select:
Format: Triple Impact
Complete the requested fields.
Then enter “Edit Ad qualifications” and indicate the used divs’ ids.
2 divs should be added here to be placed in the site: Right side banner and layer.
The layer position may be also arranged from the platform and it will not be necessary to apply the containing DIV, even though this is the most recommendable action.
At the time of uploading any of both formats, we will find the position option we wish to be granted.
