Getting Started

Block-Shops

/

Building Audio Blocks

/

Getting Started

01

building Audio blocks

Getting Started

Audio Blocks can be used to add Spotify and SoundCloud tracks to any event page. This guide covers best practices, how to get started, and the building process from start to finish.

Quick Overview

You can use Audio Blocks to embed audio tracks, playlists, hashtags, RSVP buttons, links, and more. The following pages in this guide explain building an Audio Block from scratch.

Before you begin:

Create a new Splash page.

Select the Fluid Reset Template.

Sections

Starting out, we recommend designing your Block layout before jumping straight into building. You can download a Zip File here that includes a Photoshop file with all 5 Reset Templates and a few block layouts. Once you get the hang of using Splash, the building process will become second nature allowing you to design as you build directly in Splash.

Step 1

understanding page structure

First, let's go over the structural elements that make up every Splash page. In the example below, we're using the Fluid Reset Template.

The Layout Tree

The Layout Tree is a control element that allows you to navigate through your page layout. It presents a hierarchical view of your page stucture. The tree items are often called "nodes" and together form a "family." Each family can have a number of sub-items called "children."

The example below demonstrates exploring the tree structure of a Cover Block. A Tree item can be expanded and collapsed to reveal and hide its sub-items.

Body

The Body is the apex element in our layout hierarchy. It has no superior member and is called the "root" in the Layout Tree. The Body is the "parent" item of Page Blocks.

Page Blocks or the "Big Container"

A Page Block is a structural element used to divide your page into specific content areas. It is often refered to as the "parent" element of Content Blocks. We recommend that you only have one Page Block on your page at one time.

Content Blocks

A Content Block (or Block for short) is a collection of basic elements arranged to create custom layouts. Blocks are the foundation of any event page. They are the children items of Page Blocks.

In the example below, the Fluid Reset Template comes with three Blocks:

Cover Block
Details Block
Map Block

Step 2

Add an empty block

Now that you have a basic understanding of the page layout structure, let's add an Empty Block element to our page to begin building the Audio Block.

If you haven't already open up the Layout Panel. In the Right Tool Bar, click Layout.

Click the blue [+] Add a Block button.

Click Building Blocks.

Click Empty Block.

Success! The Empty Block has now been added to the bottom of the Layout Tree.

Make sure to click Save!

Step 3

understanding Block structure

Now that we've added an Empty Block to our page, let's dive into the structural elements that make up each Content Block. Make sure to click into the Block to view its Layout Tree.

Block or "Content Wrapper"

The Block or "Content Wrapper" is a structural element used to neatly package together all the content in a Block. The "Content Wrapper" is what allows you easily move, add, and re-arrage the layout of your page. It is often refered to as the "parent" element of the Block Content.

Block Content or "Content Container"

The Block Content or "Content Container" is a structural element that can be used to organize and group specific elements with a Block. It's easy to think of them as folders or groups of elements. Every Content Block must have at least one Block Content or "Content Container" element.

Once we start adding content elements to our Block they will go directly into the "Content Container." The amount of "Content Container" in your Block is up to you. Here are some examples:

Header Content Container
Countdown Content Container
Iframe Content Container

Next step

Engineer Styles

All Guides in

Building Audio Blocks

View More Topics in

Block-Shops