The Slice Template

For the past two to three years, we’ve been evolving a flexible design solution for marketing pages. We call it the Slice Template.

What is the Slice Template?

The Slice Template is kind of like a layer cake. It’s  a design structure that enables site authors  to create web pages out of modular, horizontal components that span the width of the browser. Popularized by responsive design, this pattern has become a web standard. That’s because it can support a myriad of content.

Our team started calling these components slices early on. You could call them that too. We can make it our little thing :)

What is it for? 

The Slice Template empowers marketers to create pages that look elegant and sophisticated without the assistance of a designer or developer. Specifically, marketers can easily build pages from slices that have two, three or four columns, and varying background colors and image placement options. They can add other slices to support a specific strategy, such as quote carousels, product highlights or calls to action. 

Improvements with Drupal 8

Early versions of this solution worked on the front end, but were hard to administer on the back end. With Drupal 8, I’m thrilled to announce that the authoring experience (AX) has improved dramatically. I literally shrieked with delight the first time I used it. This is largely due to two things:

1. The AX is faster and snappier in Drupal 8 (a lot faster)
2. Uploading images is quicker and easier because there is only one method. A user uploads from his or her computer. There is no need to connect to the server. (Note: You should monitor the size and number of uploaded images to prevent performance issues.)

How it works on the back end

Naming the slices something obvious helps authors know what to expect. Slices can be used once or be reused on multiple pages.

Slices are edited from a single interface. Selecting "edit" expands the slice. From there, the author can save changes and collapse it again. The collapsable feature keeps the interface clean and user friendly.

What do the Slices look like?

The slices can look however you like, however we've identified a baseline set that are useful for most sites. These are shown below.

One Column

Image Left Text Right

Image Right Text Left

Three Column

Four Column

Additional Custom Slices

Featured Content

Accordions

CTA (Call to Action)

Customer Testimonial

The takeaway

Drupal 8 has made our popular, time-tested Slice Template much easier to administer. We can now provide flexible, elegant design options without sacraficing the back end experience. 

Examples of pages built with the Slice Template: