Re-ordering blocks and elements

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!

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 actually be performed by all users regardless of skill level.

You just need to know where to look.

By entering 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.

Simply 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. )We'll cover this topic 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 covers all elements in the block, making its contents opaque. But by dragging the color mask above the container, the result is far more elegant, adding a tinge of color without fully obscuring the image, headline, and button.

 

Moving elements from one block into another block

If you've tried doing this, you likely hit a road block. We make this feature a little tougher to access because accidentally using it would be really frustrating.

If you ever need to move an element from one block into another, simply drag the element as you normally would and hold down the Escape key; you'll be directed back into the Layout tree where you can then drop the element into another block.

 

Was this article helpful?
0 out of 0 found this helpful