done Votre adresse a bien été enregistrée
close
error_outline Email invalide
close

Prendre rendez-vous avec un consultant

Discutons :

- de vos enjeux marketing

- de vos besoins fonctionnels

- d'un niveau d'accompagnement adapté

Essayer gratuitement

Cómo ocultar elementos en la versión de escritorio o móvil de nuestro emailing

Pleased to meet you! Let’s stay in touch.
Subscribe to our newsletter.

Hacer emailing responsive en CSS

Qué elementos ocultar y cómo hacerlo para tu campaña de emailing responsive

 

Cuando estés creando tu campaña de emailing, tienes que diseñarla para que todos los destinatarios de la newsletter la vean perfecta, o al menos intentar que cada uno la visualice lo mejor posible. Hoy día es impensable mandar un emailing responsive, es decir, pensado única y exclusivamente para pc: con la cantidad de dispositivos que permiten leer un email, no nos podemos olvidar de las pequeñas pantallas. Más de la mitad de los emails se leen desde móviles o tablets.
emailing responsive
Al contrario, se puede añadir un contenido específico en la versión responsive que no aparezca en la desktop como un enlace a Google play.

 

¿Cómo ocultar un elemento del contenido?

En un primer momento, tendrás que introducir la clase CSS en su código HTML:

CUIDADO: ¡un contenido de tipo texto debe colocarse en una tabla!
Los estilos CSS a colocar:

La clase CSS «ocultar-en-escritorio», sintáxis 1, debe estar colocada en los estilos generales

 

.ocultar-en-escritorio {
  max-height: 0px;
  font-size: 0;
  display: none !important;
}

 

La clase CSS «ocultar-en-escritorio», sintáxis 2, debe estar colocada en los estilos generales

 

 .ocultar-en-escritorio {
   display: inline !important;
   width : auto !important;
   max-height: inherit !important;
   overflow : visible !important;
   float : none !important;
}

 

 

Elementos a añadir en las etiquetas <TD> de la tabla contenedora :

 

«if !mso» para ocultar el contenido en Outlook

 

<!--[if !mso]><!-->
<!--<![endif]-->

 

Llamada de la clase «ocultar-en-escritorio» + estilos a especificar online para ocultar el contenido en Gmail

 

<td class="ocultar-en-escritorio" style="max-height: 0; width: 0; max-height: 0; overflow: hidden; float: left;">Contenido visible únicamente en móvil</td>

 

– « Ocultar-en-movil » para ocultar un elemento de la versión desktop en la visualización móvil.

Ocultar contenido en versión móvil

 

Los estilos CSS a colocar :
 

La clase CSS «ocultar-en-movil» debe colocarse en los Media Queries

 

 body .ocultar-en-movil {
            display:none!important;
}

 

 

Elementos a añadir en la etiqueta <TD> de la tabla contenedora :

 

Llamada de la clase «ocultar-en-movil» para ocultar el contenido

 

<td align="center" class="ocultar-en-movil">Contenido visible únicamente en escritorio
</td>

 

Código final :

<style type="text/css">
.ocultar-en-escritorio {
            max-height: 0px;
            font-size: 0;
            display: none !important;
}
@media only screen and (max-width: 640px) {
.ocultar-en-escritorio {
            display: inline !important;
            width : auto !important;
            max-height: inherit !important;
            overflow : visible !important;
            float : none !important;
}
body .ocultar-en-movil {
            display:none!important;
}
@media only screen and (max-width: 479px) {
.ocultar-en-escritorio {
            display: inline !important;
            width : auto !important;
            max-height: inherit !important;
            overflow : visible !important;
            float : none !important;
}
body .ocultar-en-movil {
            display:none!important;
}
}
</style>
<table border="0" cellpadding="0" cellspacing="0" width="285">
  <tr>
    <td>

            <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr> 
          <!--[if !mso]><!-->
          <td class="ocultar-en-escritorio" style="max-height: 0; width: 0; max-height: 0; overflow: hidden; float: left;">

            <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td align="center" bgcolor="#999900">Contenido visible únicamente en móvil</td>
              </tr>
            </table>

          </td>
          <!--<![endif]--> 
        </tr>
      </table>

      <table width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td align="center" bgcolor="#FFCC66" class="cacher-sur-mobile">Contenido visible únicamente en escritorio</td>
        </tr>
      </table>

    </td>
  </tr>
</table>

 

 

No Comments

Leave a Comment

So what do you think ? Start the conversation or join the discussion.
We’d love to hear from you!
Your email address will not be published.


Prendre rendez-vous avec un consultant

Discutons :

- de vos enjeux marketing

- de vos besoins fonctionnels

- d'un niveau d'accompagnement adapté

Essayer gratuitement