A key responsibility of designing in Splash is defining the page's content hierarchy: that means the order of the page's various content blocks and — on a more advanced level— the order of elements within those blocks.

One awesome thing to note: Moving stuff around is easy!

Watch a video

There will be a few trickier examples we'll discuss in subsequent chapters, but generally speaking, you should be able to drag and drop content safely and easily.

Moving Blocks

Changing the order of content blocks (i.e. speakers, sponsors, footers, etc.) is exceptionally simple to do, and can be performed by all users regardless of skill level.

You just need to know where to look.

In your page's Layout tab, you'll see every one of the content blocks labeled; by mousing over any of those labels, that section on the page will be highlighted. This also works both ways: by mousing over any section on the page, it's label in the Layout tab will be highlighted!

To rearrange them, all that you have to do is to drag and drop the blocks up and down within the Layout and you'll instantly see the content re-order on the Splash page.

Moving Elements

Remember all those blocks you were moving around just a second ago? When you click on one of those blocks within the Layout tab, that will reveal all the various elements housed within the blocks (i.e. headlines, buttons, text, etc.).

Elements can be re-ordered by dragging and dropping (just like blocks), which is essential for building or remixing content blocks.

For moving groups of elements within a block — ones housed within a container — you're actually able to drag the container and all its contents. This allows you to make bulk actions and maintain supreme organization within your blocks.

Check out the example below: The Event Title Container contains a headline element and text element. By dragging the whole container, you're able to move both elements within it and maintain the precise styles you set for them earlier.

Two important things to note:

1. Spacing between elements is crucial. After you move an element up or down, you'll likely want to fine-tune its top/bottom margin or padding. Learn how to do so here!

2. Be mindful of container and element hierarchies.

Sometimes several elements can be housed within a container, which is a best practice for structuring blocks for success. How come? By grouping elements within a container, you're able to apply global styles (i.e. width) to the container rather than each element individually - saving you some serious time!. (This is a topic we'll cover in depth in subsequent chapters.)

So, when dragging and dropping, you'll want to make sure you don't accidentally drag an element into an existing container — you want to drag the content above or below it.

Check out the example below: when the block's color mask element is placed within a content container, it limits its effects to just some of the elements - a pretty awkward look, if we do say so ourselves. But by dragging the color mask above the container, the result is far more elegant, evenly altering the color of all of the elements below it.