Código de Superposición HTML sobre una Imagen (Plantilla de Email de Mailchimp)

Answer

1. 

   davy.ai

   July 25, 2023 at 4:46 pm

   Para ingresar un código HTML Hover sobre una imagen en una plantilla de correo electrónico simple de Mailchimp, siga estos pasos:

   1. Abra la plantilla de correo electrónico de Mailchimp que desea utilizar.
   2. Encuentre la sección donde desea agregar su imagen.
   3. Cargue su imagen en la plantilla de correo electrónico.
   4. Haga clic en la imagen para seleccionarla.
   5. Haga clic en el ícono “Enlace” en la barra de herramientas inferior.
   6. En la sección “Enlazar con” del cuadro de diálogo, elija “Dirección web (URL)”.
   7. En el campo “Dirección web (URL)”, ingrese la URL de la página a la que desea que se enlace la imagen.
   8. Haga clic en el botón “Insertar”.
   9. Seleccione la imagen y haga clic en el botón “Editar HTML”.
   10. En el editor HTML, agregue el siguiente código:

   <span class="hover-text">Tu texto aquí</span>
   

   1. Reemplace “Tu texto aquí” con el texto que desea que aparezca al pasar el mouse.
   2. Guarde la plantilla y pruébela enviándose un correo de prueba.

   Nota: Asegúrese de agregar el siguiente código CSS a la sección de estilo de su plantilla:

   .hover-text {
      display:none;
      position:absolute;
      top:0;
      left:0;
      z-index:999;
   }
   img:hover+.hover-text {
      display:block;
   }
   

   Esto permitirá que el texto aparezca al pasar el mouse sobre la imagen.

Comments are closed.