Blog Mailify: Mailing a tu medida

Consejos para el envío de tu newsletter, actualidades de nuestro producto y todo sobre email marketing.

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

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

Únete a centenares de expertos del email marketing. Apúntate a la newsletter de Mailify:

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>

 

 

4 comentarios

mil

about 3 años ago

no me funciona en gmail.

Responder

Cindy Andrea Chávez Z.

about 3 años ago

Hola Mil :) El código se hizo hace 4 años, por lo que pudieron haber cambios en Google que lo invalide. Además, depende también de la cuenta de correo usada ya que una cuenta de empresa en Gmail (Con Exchange) invalida el responsive también. Si quieres conocer un poco más sobre este tema, te recomendamos visitar la website de litmus.com ¡Saludos!

Responder

Benjamin

about 4 años ago

Hola Angel, El código que aparece en este artículo es un ejemplo funcional de cómo funciona. Copia el código y pégalo en un bloc de notas o programa similar guárdalo en HTML. Luego, abre el archivo en tu navegador. Cuando aumentes o reduzcas la ventana de ancho, se mostrará o no el contenido para móvil.

Responder

Angel

about 4 años ago

Muy buen post, tiene algun ejemplo completo para ver como funciona. Una demostracion.

Responder

Deja un comentario