Umbraco Grid to make responsive emails for use in pardot

So, our company has about 5 brands and we send out email via Pardot A LOT! In the olden days, one of our web team members would modify static html tables -- you know... how email goes... that was a terrible way to manage our email creation. We had been using umbraco for YEARS at this point.. the grid was out, it was mature and I figured why the heck not... make it simple for anyone to actually build an email and let the web team just view source, copy and paste into Pardot and BAM!

Here are the items I kept in mind:

  1. start from a working template - I picked salted
  2. Row types for the grid (full row, 50/50, 33/66, and 66/33)
  3. features for each row/cell
  4. custom grid render using salted as a guide.

So, I will spare you the boring step by step on the row/cell building there are plenty of references for that. I did create custom grid editors with LeBlender - because it makes things like this easy :)

gridEditors.PNG

I had to then write grid editor partial views - here is a link to the call to action button example. NOTE: I am a complete hack when it comes to code, so I am sure you can take this example and make it cleaner... just wait until you see the master grid renderer... YIKES!

Speaking of the custom grid renderer - take a look

I used the "Names" of the rows to basically set the code for how each row would be wrapped, based on the template markup. I also used viewbag to set some variables that could be used in the child render views - see more here. I am sure there are other ways... but this worked for me ;)

So, I know this is really brief, but I hope it gives you an idea of what is possible with this amazing CMS - Umbraco!

To Wrap It Up - things I recommend

  1. LeBlender to build your custom editors
  2. a good template as a starting point - I went with Salted
  3. an imagination, I guess :)


Thanks,

Bob

Author

bob baty-barr

comments powered by Disqus