Brett Snyder

Master Blocks Template

Thursday afternoon, Marketing conveyed a dire need for landing pages - fast. Their busy season has started without them. The team requires the ability to edit site content, and even play with the layout blocks - the cms approach. Their platforms are WordPress and custom DotNet cms hosting up to 6 different product brands. Some brands will have more than one campaign. They gave me a wireframe to start building the first of many upcoming landing pages.

Master Blocks

What would be the fastest most efficient path to churn these out? A template of course! The fact Marketing needs direct code access, and soon, removes any option of introducing new frameworks like Tailwind or a static site generator. The pages have to be in HTML/CSS so the team can edit and repurpose them in the future. The marketing team had been working with basic HTML in cms buckets and widgets for a while already.

Fast Pitch

By late afternoon, I threw together a quick wireframe showing what a master template might look like - reflecting their provided wireframe elements - and then some. The concept was to create a flex template of modular content blocks that are portable. Meaning each block and child element can be moved or deleted without breaking the layout on any cms, or even standalone. The template would include almost all elements they would ever need, then refactor the page from there. The pitch was approved and I was off to the races.

Default Block Sequence

All blocks can be moved, but what is the best default sequence? Having done some UI a/b testing before, my heatmaps revealed most all conversions take place above the fold. A long page funnel does not work at least for this demographic. The Blocks template needs to be able to work with or without a cms header and footer - a CSS override section is needed to reset entrenched cms styles. It also needs to have modular branding, so use CSS variables. If I want to keep the content blocks portable, I would need global and individual CSS block separation. Lastly, a "user" style override section at the bottom so the core styles above are not erased and break the template upgrade path. Default block sequence:

  1. Hero block maxed out might have a simple lead-gen form, phone, logo, title, subtext, and 2 buttons. The hero background should contain a video background and modal. I prefer no nav links that send people off the page; kiss most of them goodbye. These landing pages are not microsites...but will include one nav link just in case.

  2. Centered Text block is to welcome and reinforce what the hero did not say clearly. It could include jump links or buttons to bring them down the page.

  3. Benefits and features, each with buttons and download links. Include a floating call now button that launches if the user clicks on a benefit icon...they always do. Show this floating call button below the fold.

  4. Tabs to easily inform and encourage a conversion - images, content, and a button.

  5. Split L/R content blocks for pacing. Establish value with a deeper expert explanation or pricing options. Mix in user testimonials and a call now button.

  6. CTA shows a no-brainer offer. Of course, I will click this! I would be crazy not to. Freebies are always good. Forms do not pull at the bottom.

  7. Infobar is not a large CTA block but a good content divider or small footer that shows a small button, text, etc.

  8. Chat Widget integration - only used if no existing cms header is in play.

The Build

On Friday I started round 1, knocking out the blocks Marketing initially needed. Hero, Ceneter Text, Benefits, Split L/R, CTA, and Infobar. For round 2 I would hit - tabs, videos, modal, floating button, and standalone chat. By Monday Round 1 was ready to test. To demo the template, I inspected elements in Chrome dev tools, moved and deleted blocks in-browser to create the initial wireframe they initially gave me - in just minutes. The beauty of using flex is how forgiving removing or duplicating elements is. I did not use grid as that may not cause too many issues. Kept it simple. Here is the page structure I used to get started. Brand styles and Core styles should be external CSS files. The rest of the styles are in-page overrides.

<style>

  @import url("../aop-brand.css");
  /* ----------------------------------------------- */
  /* ---------------- AOP BRAND START -------------- */
  /* ----------------------------------------------- */

  /* ------- IMPORT GOOGLE FONTS ------- */
  /* ------- AOP CSS VARIABLES ------- */
  /* ------- AOP HEADER/FOOTER - CMS PAGE OVERRIDES  */

  @import url("../core-styles.css");
  /* ----------------------------------------------- */
  /* --------------- CORE CSS STYLES --------------- */
  /* ----------------------------------------------- */

  /* ------- RESET ------- */
  /* ------- TESTING ------- */
  /* ------- GLOBAL PAGE ------- */
  /* ------- HERO BLOCK ------- */
  /* ------- CENTERED BLOCK ------- */
  /* ------- BENEFITS BLOCK ------- */
  /* ------- INFOLEFT BLOCK ------- */
  /* ------- INFORIGHT BLOCK ------- */
  /* ------- CTA BLOCK ------- */
  /* ------- INFOBAR BLOCK ------- */

  /* ------- RESPONSIVE ------- */

  In-page Overrides
  /* ---------------------------------------------- */
  /* ------------ YOUR OVERRIDE STYLES ------------ */
  /* -------------Just Changed Styles!------------- */
  /* ---------------------------------------------- */
  ...

</style>


<!-- IMPORT FONTAWESOME (https://fontawesome.com/search) -->

<!-- HERO BLOCK START -->
<!-- HERO BLOCK END -->

<!-- ETC START -->
<!-- ETC END -->
...

<script src = "../index.js"></script>

The goal was for either myself or the marketing team can cut and paste code blocks in-browser first to try out different layouts. Then to screen capture that inbrowser comp for approval. Then hand it off for asset creation or development using the master blocks template. Paste in the corresponding brand styles that include color variables and cms style overrides. To customize further, use in-browser style edits to try things out. Cut and paste from the browser into the "Your Override Styles" section. Below is the recommended approach:

  1. Open template with VSCode > Live Server Extension in Chrome.
  2. Inspect (F12) elements using Dev Tools > Elements - delete/edit/move elements to test custom layouts.
  3. In VSCode, comment out (Ctrl /), move or delete collapsed elements. Review start/end tags.
  4. Add new or copy existing "CORE CSS STYLES" to "YOUR OVERRIDE STYLES" at bottom of the CSS.

After the first round of landing pages were quickly churned out, I added round 2 features to the template. I also created an example to illustrate use for the designers. Here is a page that was wrapped in the cms header and footer.

Now custom cms landing pages are created in a fraction of the time. They can also work as standalone pages, just have to add in the missing HTML head code.