All Splash pages are comprised of blocks, containers, and elements. Understanding the basic construction of these and how they relate is the first step to constructing your Splash page.

The concept is simple: blocks hold containers and containers hold elements.

Every Splash page, no matter how fancy, is built in this way. Let’s break down each of these three items and get you on your way to Designer Pro fluency!

Blocks

Think of blocks as sections. The theme below includes three blocks: A cover block, an about block, and a host block.

Blocks organize your content into a logical sequence, empowering you to build your event website efficiently through saving, sharing, and recycling.

Blocks can be edited by clicking them to reveal accordion tools. You can also reorder blocks by clicking and dragging them within your layout tree.

Containers

Containers live within blocks and do exactly what their name implies: contain. Think of containers as the glue that holds each element within the block in its proper place. The visual below shows the containers within the cover block of our theme.

• The block content is the container that holds all content within the block.
• The logo container holds the logo.
• The details container holds the sub headline, the event title, and the date.
• The button container holds the button.

Pretty simple structure! When we click into the accordion tools for each container, we can see that each is set to 100% width ensuring that each element within appears on its own line. This is a simple example of setting up containers strategically to ensure that your design intent does not break. 

Elements

Elements live within containers within blocks. If blocks are the bones and containers are ligaments, elements are the muscle. The visual below shows all elements within our cover block based on where they appear in the layout tree.

Splash offers a total of 26 elements to choose from. Among the most frequently used are our dynamic elements, which auto populate based on the information you submit just before choosing your theme. They include:

• Event title
• Event date and time
• Venue
• Event hashtag

Margin and Padding

We take a more comprehensive look at block design an construction in our introduction to accordion tools. To get started, it’s important to understand the basics of margin and padding. Though they sometimes provide a similar visual result, these two concepts are quite different.

Simply put, padding adds space to the inside of a block, element, or container, and margin adds space to the outside. Overall, margin and padding provide the breathing room it takes to achieve a buttoned up layout. 

The visuals below show where the margin and padding have been applied to the block, containers, and elements. Padding is represented in green, and margin is represented in yellow.

That wraps up the basics of blocks, containers, and elements. Splash pages can get pretty intricate but remember, the principles above are the corner stone of every Splash page, no matter how fancy. Good luck!