Accordion tools

We use the term "accordion" to describe our design tools because as you click on on any one of them, you'll expand its related toolset.

Every page element can be fine-tuned by using 9 different accordion tools but, for this post, we'll just be covering the five most basic and frequently used ones: Background, Font, Width/Height, Margin/Padding, and Border.

The animation below demonstrates how to access your accordion tools from the Layout tab.

Basic Splash Page Construction

Before we manipulate our page, it's essential that we understand the basics of page construction: All Splash pages are comprised of blocks, containers, and elements. Blocks hold containers and containers hold elements - kind of like Russian dolls!

Every Splash page, no matter how fancy, is built in this way.

Let’s examine each of these three items.

Blocks

Think of blocks as sections. The Splash theme below includes seven blocks: a cover block, an about block, a speaker block, a venue block, a schedule block, a quote block, and an RSVP block.

In the visual below, you'll see each block numbered according to it's position in the layout tree on the right. 

As full content sections, blocks streamline your workflow. In addition to dragging and re-ordering, blocks can be saved to your custom library and used again and again in as many themes as you like.

Containers

Containers live within blocks and do exactly what their name implies: contain or hold content.

Properly built themes set up containers strategically to allow for easy manipulation of properties such as width, margin, and padding (more on those in a bit). The visual below shows an examples of how containers hole elements within a block. You'll notice that the content wrapper holds a title container and detail container. The title container hold the title and venue. The detail container holds the description, date, time, and CTA. 

The next visual shows an example and how containers can control the appearance of multiple elements. The Text container holds a headline and a block of text. Rather than setting the width to 50% on each, the designer has set the width of the container to 50% which affects all elements within that container. Using containers in this way produces a clean intuitive build. If ever you want to change the width of these elements, you'd only have one place to make the edit. 

Elements

Elements are pieces of content that live in containers within your content blocks. These are things like buttons, titles, dates, maps, and social icons. Adding an element is simple and Splash gives you a bank of ~25 options to choose from.

Much like blocks, elements can be saved, duplicated and dragged/re-ordered within your layout tree. For example, a user has no need to style out each button on a Splash page individually. Simply, style your button, save it to your library, and insert it anywhere else you'd like it to appear on the page. 

Splash offers a set of dynamic elements as well. These are linked to the information submitted to the create flow (the form you fill out just before choosing your theme). They include dates, maps, countdowns, and venues. Each time one is added, it appears with your event info intact. 

Now that we understand the basic construction of a Splash page and where to find our accordion tools, let’s dive into design using one our simpler themes. Generally speaking, you’ll click on the block, container or element you’d like to manipulate and select the proper accordion tool.

1. Background

The background tools gives you the ability to set a color or photo as the background of any block, container or element. As mentioned above, just click on what you'd like to customize, click Background, and then upload your photo or choose your color.

The background tool is used for everything from changing cover images to the application of hover-states on call to action buttons.

Keep in mind, when editing blocks with accordion tools, it’s best to select them through the Layout tree.

2. Font

The Font tool gives you the ability to change the font, color, alignment, and line-height of any text element. This also works for date and venue elements.

Simply select the text you’d like to edit and go to Font within the accordion.

3. Width, Height

The Width/Height tool makes it easy to change the width or height of any block, container, or element. Choose based on proportion or set you own custom width. You can also set max widths and heights within this tool.

4. Margin, Padding

Margin and padding will sometimes cause the same visual affect but are actually quite different. Simply put, margin adds space outside of your block, container or element and padding ads space within it. In the animation below, notice that regardless of where margin or padding is added to the bottom of my date container, the same visual result occurs.

However when you replace the padding with margin on the details container, a noticeable change occurs. This is because the details container has a border. Adding space within the container produces breathing room between the border and old background.

Check it out: Splash represents margin with the color yellow and padding with the color green.

5. Border

This tool empowers you to add a border to any block, container to element. You can also apply any color in your color set to a border.

On elements, notice the relationship between borders and margin/padding. Adjusting padding (not margin) controls the amount of space between your border and your element. You can apply borders to certain sides of your elements, containers and blocks by adjusting the values on some fields while leaving others at 0.

While simple to use, these four tools give Splash users the creative freedom to produce stunning event websites. You’ll be blown away by the power that these four little features provide to you as a Splash user. Good luck!