Try our conversational search powered by Generative AI!

Jeff Wallace
Mar 18, 2013
  6075
(1 votes)

Divider “Layout” Block

Based on EPiServer 7 and the Alloy Templates

The new Alloy templates released with EPiServer 7 are based on a grid layout. The grid contains a number of rows in which content  blocks will automatically resize and fit on the same row or flow to different rows based on the space available. Ted Nyberg explains this concept well in  his article on the template package. This is fantastic stuff, especially in the mobile world.

 

In some cases editors or marketers may want to create a page and have a little more control over this automatic flow. For example, if they were using the Alloy templates “Landing Page”. I’ve created a “Divider Block” for this exact case. It doesn’t really do anything other than what the title says, adds a divider.

image

Let’s say, for example, you have three items in a row:

Third block

But you really wanted two items in the top row and the third block to push to the next row row similar to what’s pictured below:

Second block

image

No problem! Just add the divider block after the second block and that’s exactly what will happen!

Second block

image

image

If you’re wondering about mobile, well, everything will continue to flow as expected for mobile devices. Simple, yet effective in enabling an additional level of control for the layout. Smile

 

Get the code here…

Enjoy!


  1. This is intended as a starting point for you to customize for your project needs. The code is provided “as is” without warranty or guarantee of operation. Use at your own risk.
  2. If you install on a site that does not include the Alloy Templates you should expect that you will need to make a few minor updates to get it working as desired.
  3. Block photos above (First block, Second block, Third block, etc) were taken from Ted Nyberg’s article on the Alloy Templates.
Mar 18, 2013

Comments

Mar 18, 2013 08:39 AM

Cool. Just what the doctor ordered!

Mar 18, 2013 12:43 PM

Does this give any padding in the final rendering?

Mar 18, 2013 01:12 PM

The output HTML is:



The idea here was basic. You could customize it to add a height property and add any padding you want, change the color, add a horizontal rule, etc. I thought about adding some configurations and realized I better focus on some other things first. :)

Please login to comment.
Latest blogs
Optimizely Opal... what it does actually do?

At Opticon 2023, Optimizely announced its first AI product Opal. AI is definitely the new tech buzzword in 2024 and with promises that AI will be...

Jon Jones | Feb 25, 2024 | Syndicated blog

How to add more Content Area Context Menu Item in Optimizely CMS 12

Hey folks, today I will share something related to Context Menu customization in the Content Area of Optimizely CMS. As you know, the content area ...

Binh Nguyen | Feb 25, 2024

Developer meetups in Stockholm & Helsinki

It's time for developer meetups! Next month we will be in Stockholm and Helsinki. Join us for getting the latest updates from Optimizely, be inspir...

Magnus Kjellander | Feb 23, 2024

Roll Your Own Security Headers

Proper security headers are a must for your Optimizely driven website. There are a variety of tools out there that will help with this, but when...

Ethan Schofer | Feb 21, 2024