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:
- The AX is faster and snappier in Drupal 8 (a lot faster)
- 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:
