Sección Hero

La Sección Hero consiste en el Área fotográfica, sección de Estilo Gráfico 2 y logos.

A diferencia de otras aplicaciones, en los correos electrónicos no se recomienda utilizar el área fotográfica para texto porque al encontrarse por encima del logo puede generar una lectura equivocada del correo.

USO CORRECTO

Contenido debajo de la Estilo Gráfica 2

Este ejemplo muestra claramente que fue enviado por el departamento de Tecnología, y el contenido del correo se encuentra debajo de la sección de la Línea Gráfica 2.

USO NO RECOMENDADO

Contenido encima de la Línea Gráfica 2

En este ejemplo se quiere comunicar que el nuevo SaludsaHelp es Fácil, rápido, sencillo y amigable. Sin embargo al encontrarse el título por encima del logo, la lectura sugiere que estas son características del departamento de Tecnología y no de SaludsaHelp.

Cómo usar la Estilo Gráfico Dos en MJML

Consta de tres elementos: Imagen, logo de Saludsa (color o blanco) y la parte del estilo gráfico dos donde se especifica a que categoria de servicio corresponde el mail.

   
     <mj-section css-class="hero" padding="0px" background-url="http://www.redsaludsa.com/webservices/MarketingImagenes/empresarial/smartplan/hero-3-4-beneficios-servicios-smartplan.jpg" background-size="600px" background-repeat="no-repeat">
      <mj-column >
         <mj-image css-class="logoSaludsa" src="http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/logos/saludsa-blanco.png" alt="Saludsa" width="200px" align="left"  padding="30px 30px"/>
        <mj-spacer css-class="espacioBajoLogo" height="84px"/>  
        <mj-image padding="0px" src="http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/empresarial/smartplan.png" width="600px" alt="SmartPlan Empresas">
        </mj-image>
      </mj-column>
    </mj-section>

Imagen: Se la ubica como fondo (background) de la primera sección de todo el mail. Esta imagen no tiene ni columna <mj-column> ni el tag de imagen <mj-image> debido que es background, y se lo ubica por medio de url="xxxx".Por ejemplo:

  <mj-section css-class="hero" padding="0px" background-url="http://www.redsaludsa.com/webservices/MarketingImagenes/empresarial/smartplan/hero-3-4-cerotramites.jpg" background-size="600px" background-repeat="no-repeat">

Las imágenes se encuentran distribuidas en distintas carpetas en la parte de Marketing Imágenes, dependiendo al servicio y tipo de mail que se está codificando.

Logo: Se recomienda usar el logo a color en todos los correos. Sin embargo se puede utilizar el logo de color blanco en casos especiales. Para cambiar el logo se debe modificar el valor del segundo src de la primera columna de la primera sección.

• Color: http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/logos/saludsa.png

• Blanco: http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/logos/saludsa-blanco.png

El código que se deberá usar independientemente del color del logo es:

 <mj-image css-class="logoSaludsa" src="http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/logos/saludsa.png" alt="Saludsa" width="200px" align="left"  padding="30px 30px"/>

Spacer: Es un elemento muy útil en mjml, permite dar espacio entre elementos, sin que este sea visible. Lo que se usa en esta parte del código es:

<mj-spacer css-class="espacioBajoLogo" height="84px"/> 

Estilo Gráfico dos:

El estilo gráfico dos está clasificado por cada servicio que Saludsa ofrece. Se los debe agregar debajo del spacer, en la primera columna y sección.

A continuación se va a presentar la ubicación de cada estilo para cada servicio:

• Saludsa:

Coorporativo:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/saludsa/saludsa-coorporativo.png

• Individuales:

Práctico:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/individuales/practico.png

Privilegio:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/individuales/privilegio.png

Ideal:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/individuales/ideal.png

Privilegio Plus:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/individuales/privilegio-plus.png

Jobs:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/individuales/jobs.png

Esencial:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/individuales/esencial.png

App:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/individuales/app.png

Elite:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/individuales/elite.png

• Empresarial:

DrSaludsa :

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/empresarial/drsaludsa.png

Grupal:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/empresarial/grupal.png

Reembolso:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/empresarial/reembolso.png

SmartPlan:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/empresarial/smartplan.png

Video:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/empresarial/video.png

Pool Voluntario:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/empresarial/pool-voluntario.png

Pool Empresarial:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/empresarial/pool-empresarial.png

• Servicios:

Servicio al Cliente:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/servicios/servicio-cliente.png

Saludsa Play:

Médico:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/servicios/medico.png

Cero Trámites:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/servicios/cero-tramites.png

Fitness:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/servicios/fitness.png

Video:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/servicios/video.png

Red:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/servicios/red.png

Reembolso:http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/servicios/reembolso.png

• Planes Adicionales:

Salud Dental

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/salud-dental.png

Oncocare:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/oncocare.png

Respaldo Total:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/respaldo-total.png

Saludsa Care:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/saludsa-care.png

Privilegio:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/privilegio.png

• Servicios Adicionales:

Saludsa Travel:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/saludsa-travel.png

Paquetes:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/paquetes.png

Desempleo:

http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/desempleo.png

Exequial:http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/exequial.png

Segunda Opinión:http://www.redsaludsa.com/webservices/MarketingImagenes/recursos-marca/estilo-grafico-2-correos/planes-adicionales/segunda-opinion.png

Colores

Estilo Gráfico Dos utiliza los colores de la marca.

Para cambiar los colores correspondientes de los distintos servicios que brinda Saludsa se debe modificar el valor del atributo de botones <mj-button background-color="#000000"> o para color de texto se lo puede modificar a través de <mj-text="color:#000000;" >