Hello,
Does anyone have experience in creating slanted modules in emails?
Example: https://i.pinimg.com/originals/b0/c8/a6/b0c8a6f414876ccf790fa28089e9c24f.jpg
I tried using clip-path: polygon in the CSS but that doesn't seem to be supported in most email clients.
Any ideas on how to go about achieving this effect?
Thank you!
Solved! Go to Solution.
Hi there,
So, this Selfridges email is using a common technique that's done in B2C and retail emails, but it may not translate really well into Marketo. If you look at the design itself, you can think about it as table rows and columns rather than the slants you see visually:
1. Full column width for knits to know, then a second full column for the angle
2. Two columns for the footwear and handbags
3. Another two columns for coats and trend
Rather than use image maps, what they're doing in this case is setting the images seamlessly next to each other as big, clickable split-up images. That way, when you click on each individual image, it takes you to the correct corresponding link. This also allows the developers to play with media queries, so they can dynamically show and hide the appropriate images (that will adjust the diagonal designs) based on screen size.
That doesn't always translate well for Marketo, because the modular design doesn't really work in the same way--you can, of course, write a template that does this, but what'd you also need in your back pocket is existing Photoshop templates that would have this angling. This design also has the disadvantage of not having live text on it--all the copy is on the images themselves, so you'd have to update the image and re-upload it if you wanted to change something. This says nothing to the lack of accessibility as well. Again, you could write a template that does allow you to use live text, but this starts to get complex and difficult for anyone but advanced email developers.
If you like the visual style of slants, one way you can work that in is to actually use slants as backgrounds as part of a module. For example, I've done setups in the past where at the end of a module, there's just a diagonal image that acts as a transition into the next module color/style, or used gradient fades to make that same effect happen. This also has the advantage of scaling nicely for mobile and systems that can't support modern HTML development techniques.
Hi there,
So, this Selfridges email is using a common technique that's done in B2C and retail emails, but it may not translate really well into Marketo. If you look at the design itself, you can think about it as table rows and columns rather than the slants you see visually:
1. Full column width for knits to know, then a second full column for the angle
2. Two columns for the footwear and handbags
3. Another two columns for coats and trend
Rather than use image maps, what they're doing in this case is setting the images seamlessly next to each other as big, clickable split-up images. That way, when you click on each individual image, it takes you to the correct corresponding link. This also allows the developers to play with media queries, so they can dynamically show and hide the appropriate images (that will adjust the diagonal designs) based on screen size.
That doesn't always translate well for Marketo, because the modular design doesn't really work in the same way--you can, of course, write a template that does this, but what'd you also need in your back pocket is existing Photoshop templates that would have this angling. This design also has the disadvantage of not having live text on it--all the copy is on the images themselves, so you'd have to update the image and re-upload it if you wanted to change something. This says nothing to the lack of accessibility as well. Again, you could write a template that does allow you to use live text, but this starts to get complex and difficult for anyone but advanced email developers.
If you like the visual style of slants, one way you can work that in is to actually use slants as backgrounds as part of a module. For example, I've done setups in the past where at the end of a module, there's just a diagonal image that acts as a transition into the next module color/style, or used gradient fades to make that same effect happen. This also has the advantage of scaling nicely for mobile and systems that can't support modern HTML development techniques.
Thank you for your thorough explanation! I thought it was probably done with cut up images but couldn't find any tutorials to confirm.
Your suggestion for gradients might just work for what I'm trying to do, which is something simpler with a slanted background color, but with variables for the colors so that they're changeable within the email editor. I'll definitely try it!