Implementacion de divs en mi sitio
- Sebastian Perez (Unlicensed)
La implementación de espacios laterales, permitirá utilizar en el sitio todos aquellos formatos que involucren este tipo de creatividades.
Adaptación del sitio para la utilización de estos formatos:
El sitio debe ser adaptado sólo una vez para correr este tipo de creatividades y funcionen correctamente.
| Importante: PARA REALIZAR ESTOS CAMBIOS DEBE PONERSE EN CONTACTO CON EL WEBMASTER DE SU SITIO |
El div contenedor del sitio debe tener un estilo position relative para que cualquier elemento dependiente creado con position absolute tome sus coordenadas en función de la posición de este div.
PASO 1: Div del Sitio
Revisar los estilos del div contenedor del sitio para que incluya el estilo indicado
| <div id=”contenedorSitio” style='position:relative”> … </div> |
PASO 2: Div Laterales y Layer
Dentro del div contenedor debe haber 1 div para uno de los banners laterales, que será el que posicionará a los costados del sitio (div contenedor).
Los divs contenedores laterales de los banner deben tener position absolute.
| <div id='XXX' style='position:absolute> </div> |
Para que los laterales se posicionen a la altura del comienzo del sitio, se deben posicionar en el punto 0 del contenedor; pero de esta forma quedaría sobre el contenido del sitio y no en su costado.
Por eso, los laterales deben tener un margen negativo, por ejemplo: si el lateral izquierdo mide 120 pixeles de ancho debe tener left: -120px y el derecho right: -120px.
Esta configuración sirve para que las creatividades se visualicen correctamente en todas las resoluciones de pantalla. La creatividad se va a ir “recortando” y no se va a ver sobre el sitio en resoluciones de pantallas menores a 1024.
Estos divs (contenedores de los laterales y layer) deben tener como ids nombres claros que luego se identificarán al momento de crear la campaña. El sistema identificará estos div por medio de su ID y servirá los anuncios correctamente.
| <div id=' epl_impact_div' style='position:absolute></div> |
En el caso en que se desee que los banners laterales queden fijos cuando se hace scroll, dentro de cada uno de los divs es necesario colocar otro div con position:fixed. En éste caso, estos divs internos son los que tienen que tener los ids de epl.
Esto quedaría estructurado de la siguiente manera:
Lateral Izquierdo
| <div style='position:absolute;left:-140px;> <div style='position:fixed;' > </div> </div> |
Lateral Derecho
| <div style='position:absolute;right:-140px;> |
Para los formatos múltiple impact y laterales a layer, se sugiere incluir un div adicional para posicionar el layer.
Por ejemplo: una de las implementaciones más utilizadas es posicionar el layer para que quede a la misma altura de los laterales y su posición es absoluta al igual que los laterales.
El layer tiene su propio contenedor, es un div independiente a los laterales.
Layer
| <div id='epl_impact_layer' style='position:absolute> </div> |
Hay que tener en cuenta que los anuncios deben ser asociados a una posición (espacio en e-planning) por lo tanto, esa posición debe tener el llamado Javascript para mostrar correctamente el tag Rich Media de e-planning.
Si está utilizando códigos Ajax V4, la llamada javascript es del tipo
| <script type='text/javascript'>eplAD4M('lateral');</script> |
El código final para el Lateral Izquierdo será del tipo
| <div style='position:absolute;left:-140px;> <div style='position:fixed;'> <script type='text/javascript'>eplAD4M('lateral');</script> </div> </div> |
Implementación de los anuncios dentro de la interfaz
1. Múltiple Impact
Al momento de agregar el anuncio, seleccionar:
Formato: Múltiple Impacto
Completar los campos solicitados.
| NOTA: El anuncio que se muestre a la izquierda hará el llamado al script del espacio para que sea mostrado en dicha posición. |
Luego ingresar a “Editar atributos del Anuncio” e indicar los ids de los divs utilizados.
Aquí se deben agregar los 3 divs para ser colocados en el sitio: banner top, banner lateral derecho y layer.
2. Triple Impact
| NOTA: El anuncio que se muestre a la izquierda hará el llamado al script del espacio para que sea mostrado en dicha posición. |
Al momento de agregar el anuncio, seleccionar:
Formato: Triple Impacto
Completar los campos solicitados.
Luego ingresar a “Editar atributos del Anuncio” e indicar los ids de los div utilizados.
Aquí se deben agregar los 2 divs para ser colocados en el sitio: Banner lateral derecho y layer.
El posicionamiento del layer también se puede hacer desde la plataforma sin necesidad de aplicar el contenedor DIV, aunque es lo más recomendable.
Al momento de subir cualquiera de los 2 formatos, encontraremos la opción del posicionamiento que deseamos darle.
