Shortcuts

Output

Shortcuts

Output

Pro Training Guide

Request Pro Access
Text goes here
X

Getting Started

Overview
How to Implement a Page

Getting Started

Hello
The Tools
The Work
The Samples
Theme Checklist

Design Tab

Themes
Colors
Fonts

Layout Tab

Main Overview

Page Layout
Blocks
Elements
Mobile Tools

Accordion Tools

Container Options
Drilldown
Background
Font
Width
Height
Margin
Padding
Display
Positioning
Border
Properties

Actions

Custom CSS
Shortcut Keys

Definitions

Containers
Units
Repeatables
Event Card
Event Hub
Event Page
Forms

Welcome to Splash School

Your guide for designing and developing amazing event pages and themes using Splash's powerful Pro tools. If you're new here, have a look through some of the topics on the left.

What You'll Find in This Guide

Not sure how to upload a custom font? Wondering how to add a new Block or Element to your event page? How about the difference between margin and padding? We'll answer all of these questions here. 


Topics on the left cover – more or less in order – all the functionality available to you within the two main page-building tabs: Design, and Layout.

Who Is This Guide For?

Designers. Developers. Anyone who wants to build a beautiful custom page using Splash's powerful Designer Pro tools!

Let's Dive Into Designer Pro Mode!

Click your avatar at the bottom right of your toolbar to access your account modal:

How to Implement a Page

Here is a step by step guide to creating a custom Splash page. Following these steps ensures that you'll end up with something crazy awesome!

1. Set up your event

Once you've created an account with Splash and are logged in, you can create a new event page from your Event Dashboard. Simply click the 'Create Event' button.


Your page will either serve as an 'RSVP' or 'Ticketed' event type – whichever suits your needs. Once you've selected which type, you now need to fill out your event details. Don't worry – you can always edit this dynamic information on page if it needs to be adjusted.


When your event details have been filled out, let's choose our theme! In this step, you'll see multiple tabs at the top: Yours, Recommended, Starter, and Foundation.


The 'Yours' tab will show only when you've successfully starter saving themes for you to use for multiple events with a similar layout or design.


The 'Recommended' tab shows themes that are designed specifically to a particular event type.


The 'Starter' tab shows themes that are more evergreen, meaning, they all have the same color and font sets. The only drastic difference between them are their layouts.


The 'Foundation' tab are themes for you to use if you want to start from scratch. Think of these as blank canvases.

2. Build your page

2a. Build your color and font 'Sets'

Set yourself up for success by building your first color and font set, i.e. setting up the look and feel of your page with color and font styles.

 

To add new colors, you can simply choose from our color picker via the slider or you can manually enter a RGB or HEX value. You also have the ability to add and manage multiple sets in one event page.


To add new fonts, you can choose from our library of fonts, or you can upload your own custom fonts based on your design.

2b. Create The Basic Structure of Your Page (Based on PSD or Sketch file)

At this point, you can begin to hide or delete Elements from the page that you don't need, and add all necessary Elements (such as additional Text, Image, Date, Venue, etc). 

 

Another helpful tip is to wrap groups of Elements in Containers, which will come in handy when building out sections or the appearance of separate sections, distinguished by background colors, etc. 

 

One more way to make life easier for yourself? Rename Containers or Elements so that their names are semantically meaningful and helpful to you when scanning the Layout tab (for example, "container" is not a good name for a Section; "Speaker Container" is better).

2c. Add Assets, Perfect Layout, Styles and Placement (Based on PSD or Sketch file)

Here's a basic checklist of things you can do to perfect the spacing and layout of your page, once the broad strokes have been filled in:

 

- Drop in background / header / any image assets

- Adjust the Widths of Elements and/or Containers

- Adjust Margin and Padding around Elements and/or Containers

- Adjust Font Sizes and Line Heights

3. Responsive Flow Testing

Once you've built and optimized your page for the web, test your page for mobile responsiveness!

 

Check for any z-indexing issues, look for breaking points, make sure Column Containers have match-height disabled when necessary, etc.

4. Device & Cross Browser Compatibility Q/A & Validation

Additionally, test your page to make sure it looks great on a variety of major browsers including IE, Mozilla, Safari, and Chrome, as well as major devices such as the iPhone 4/4S, 5/5S, and 6/6+, Samsung Galaxy S4 and S5, Android devices and the iPad.


Along with that, make sure to properly Validate your theme to make sure it passes all of our backend rules. (Only applies if you're submitting a theme to be public in our library.

5. Double Check Event Settings

Before sharing your page with everyone, make sure all of your Event Settings are in order. A basic checklist includes but is not limited to:

 

- Event Card has been styled out consistent to your page design

- Public / Private Setting

- White Labeling

- Vanity URL 

- Adding Collaborators

- Additional Meta Data

- Social Sharing Information

Themes

This is where you can save your page as a custom theme, create stages to manage your event's life cycle, create backups to ensure you can revert to an older version if anything breaks during the implementation process, share your theme with others whether that be a designer or an entire organization, and theme validation to make sure your theme is bullet proof for other users to use.

How to activate your Theme Settings modal

In your design tab, your Theme area is the top modal. Click the 'Settings Cog Icon' on the top left corner.

Details Tab

This is where you can input all the necessary information to save out your theme. You want to make sure to upload a full resolution screenshot of the entire design (this is what will show in your create flow upon selecting that theme). From there give it a name along with a description of why you or others should use this particular theme. If there's a specific event type this covers, assign it to a category in the dropdown.


Your account information should dynamically pull through, but in any case you can manually update your Name, Title, and Avatar which will also pull through in the Create flow process.

Theme Stages

Stages help you manage your event's life cycle where you can create your Save the Date, Invitation, and Post Event pages. 


Adding a stage 'duplicates' your current design, so it won't override anything on the other stages. Once you add a new stage, you can hide blocks and elements or add new blocks to create a purpose-driven experience before, during and after your event.

Backups

Backups allow you to design without fear. They are triggered automatically while working, so you'll always be sure to have a backup just incase – but you can also manually create your own backups if you particular liked one version but wanted to test another direction. This is very valuable if you want to show clients multiple iterations of a page without losing any of the work.


If doing so, we recommend you giving them proper naming conventions to ensure organization so there's no confusion at a later date.

Sharing Your Theme

Granting sharing access will allow users to create new event pages using the theme. Simply input a valid email (they must have a Splash account). Once shared, that user or users will now see that theme in the 'Yours' tab of their Create Flow.

Colors

Color is a great way to add personality and spark to your Splash page, and we've made it easy to apply colors to your event page on a global scale. Each block and element on your page is linked to one of the colors within your set.

How to activate your Color Settings

Click the 'Settings Cog Icon' on the top left corner of your Color modul. When entering this is where you can edit your 'Color Set'.

How to edit and add more colors within your set

To edit your colors, click on one of the colored squares, this will dropdown our color picker. You can either manually select a color utilizing our slider or drag your mouse in the color area. If you have specific colors you're working with, you can input either a RGB or HEX value as well. If you need to remove that color, simply click the 'Remove' button on the top right of the dropdown.


Once you've completed one colored square, you can move on to the others. If you need to add more colors within your set, simply click the '+' button. We do not limit the amount of colors you can add.

How to add and manage your Color Sets

Along with editing one color set, you can add multiple so if a user flips through each set, they'll have more options to choose from. This also makes your event page or Theme much more powerful to the eye.


To add a new Color Set, simply click the 'Add Set' button on the top left corner. This will duplicate the last set so it keeps the Elements and Blocks linked correctly. From there, it's just a matter of updating to the new colors you have in your design.


You can also manage your color sets by clicking the 'cog icon' next to the 'Add Set' button – in this panel, you can remove sets if needed, or drag/reorder them if you have a particular order you need them to go in.

Fonts

All Splash themes come with an awesome selection of Google fonts. Even more awesome? You can easily upload your own fonts, too!

How to activate your Font Settings

Click the 'Settings Cog Icon' on the top left corner of your Font modal. When entering this is where you can edit your 'Font Set'.

How to edit, add and delete fonts within your set

To edit your fonts, click on one of the font dropdowns, this will dropdown our font selector. We have an array of options for you to choose from.

 

Once you've changed one font, you can move on to the others. If you need to add more fonts within your set, simply click the '+ Add Fonts' button on the bottom left of your Font Set. You are currently limited to 5 fonts per set. If you need to remove a font from your set, just click the 'x' button next to the font tile.

How to upload your own fonts

If our font options are too limited, or you have specific fonts in your design that we don't have available, that's ok! You can upload your own webfonts. Simply click the 'Upload Fonts' button on the bottom right of your font set, this will activate our upload modal.


Before uploading, you need to make sure you have all the correct file types (.ttf, .woff, .eot and .svg) – this will make it be cross browser safe (i.e. If you just upload the .ttf file, it will look great on your computer, because you have that font file in your system. Say you sent that invitation out to someone who may not have that font, it will default to a system font on their machine.)


Once you have all the proper file types, click the 'Choose Files' button – you can bulk select your files and hit ok. Once it's in our backend, simply rename your Font to it's proper name and hit upload.


Note: You can't add entire font families, you currently have to upload them one by one (i.e. Gotham Book, Gotham Medium, etc).

How to add and manage your Font Sets

 

Along with editing one font set, you can add multiple so if a user flips through each set, they'll have more options to choose from. This also makes your event page or Theme much more powerful to the eye.

 

To add a new Font Set, simply click the 'Add Set' button on the top left corner. This will duplicate the last set so it keeps the Elements and Blocks linked correctly. From there, it's just a matter of updating to the new fonts you have in your design.

 

You can also manage your font sets by clicking the 'cog icon' next to the 'Add Set' button – in this panel, you can remove sets if needed, or drag/reorder them if you have a particular order you need them to go in.

Page Layout

The heart of your page as some would say.

 

This is where all of your pages content and structure lives. You can manage and edit your blocks and elements along with our editing through our mobile tools.


The structure of your page starts from the top, which is the Body of your page, we also provide a 'Page Container', this is the parent of each block in your layout.

Activating your Layout Tab

Click the 'Layout Icon' below the 'Design Icon' in the right toolbar.

Blocks

Blocks are what holds a group of element(s). At Splash, we believe this is the most efficient way to properly build an event page.


We've made blocks extremely scalable by coming in linked to your Font, and Color Set. It's also extremely easy to not only add, but to remix these blocks and to truly make them your own.

Reordering Blocks

Simply click and hold on a block that you want to reorder. You'll see the block lift in the layout tab – once help, just drag where you want to go in your page's heirarchy. You'll see a line which indicates where it will be placed.


Note: You can't move a block into another block.

Adding Blocks

At the end of your Block Layout, you'll see a blue '+' button – if you click that, it will prompt our Block Adder. We have an array of options to choose from, think of these as a starting point to get you started. Again, these blocks will come in linked to your Font and Color Set that you have on your event page.

Building Your Own Blocks

We also give you the ability to build your own blocks, as we of course know some of you love a clean slate to start from. Same process as above, if you click the blue '+' button that will prompt our Block Adder, find the category called 'Building Blocks'.


Once you're in the category you can choose from our 'Empty Block', or if you want to add a new 'Page Container' Block that will essentially give you another entity on your page (this is primarly used for things like Modals, or Form elements).


Note: When adding an 'Empty Block' we give it a hard height that's set to 100px so you have the ability to add Elements within the Block. Once elements are added, you'll want to remove that hard height so you don't deal with spacing issues.

Saving Blocks

We're really creating a sharing network of design through this feature. Having the ability to save out your Blocks allows you to reuse those layouts on other pages that you create, but also gives you the ability to share that block with other designers.


To save a Block, you'll want to click into the Block that you want to save, and click the green 'Save Icon' at the bottom left of your action set. This will prompt your saving modal where you can upload an image for visual reference, give it a proper name and tags, and even assign it to a particular Category. From there, you can share that Block with yourself or other users that may need it in the future.


When you've successfully saved out a Block. In your Block Adder, you'll now have a 'Yours' category which will show every block that you've saved out.

How to Clone, Hide or Delete Blocks

We also have other action items you can do within a Block, such as cloning, hiding, or deleting them from your layout.


Cloning a Block will just duplicating within your main Layout Tab, from there you can reorder it within the hierarchy of your page if you wanted a replicated Block with slightly different information.


Hiding a Block will simply hide it from your Layout Tab, you can always unhide when needed.


And Deleting a Block will remove it entirely from your Layout Tab. If you do want to delete a Block, but may want to add it back – make sure to save it out before deleting.


You can achieve these actions utilizing the action bar below your accordion tools.

Elements

Elements are what make Blocks possible. To properly build Blocks, you need to have elements bring it to life. We offer an array of options for you to choose from. Below, we'll show you how to add, reorder, and organize your elements within a block.

How to Access Your Elements

In your main Layout Tab, find the Block you want to dive into – simply click the Block and it will take you into that Blocks 'Layout Tree'.


The 'Layout Tree' is a combination of Inspect Element, and the organization of your Elements within a Block. You'll notice a folder structure which in this case are 'Containers' (If you click Containers on the left hand navigation of this page, we talk about what those mean). But in short, a Block contains one 'Parent' container that either holds the Elements themselves or other containers holding more than one Element.

Adding Elements

Once you've clicked into a Block, you'll see your Layout Tree with all of your elements. On the bottom left hand side you'll want to click the blue circle '+' button. This will now prompt our 'Element Adder' – we have an array of options and categories to choose from such as Headline, Text, Image, Countdown, Column Containers, etc. You'll now have the ability to add more content within a Block, and remix the design to make it your own.

Reordering Elements

Simply click and hold on an Element that you want to reorder. You'll see the Element lift in the layout tree – once held, just drag where you want to go in your Block's heirarchy. You'll see a line which indicates where it will be placed.

 

Note: Don't drag an Element, or a container holding Element's outside of it's Parent Container.

Saving Elements

We're really creating a sharing network of design through this feature. Having the ability to save out your Element(s) allows you to reuse those layouts on other pages that you create, it also gives you the ability to share that Element with other designers.

 

To save an Element(s), you'll want to click into the Block, find the Element or a Container holding a group of Elements, and click the green 'Save Icon' at the bottom left of your action set. This will prompt your saving modal where you can upload an image for visual reference, give it a proper name and tags. From there, you can share that Element with yourself or other users that may need it in the future.

 

When you've successfully saved out an Element. When you're in a Block and you click the circle '+' button, you'll now have a 'Custom' category which will show every Element that you've saved out.

How to Clone, Hide or Delete Elements

We also have other action items you can do with Elements, such as cloning, hiding, or deleting them from your layout.

 

Cloning an Element will just duplicate it within your main Layout Tab, from there you can reorder it within the hierarchy of your Layout Tree.

 

Hiding an Element will simply hide it from your Layout Tree, you can always unhide when needed.

 

And Deleting an Element will remove it entirely from your Layout Tree.

 

You can achieve these actions utilizing the action bar below your accordion tools.

Mobile Tools

Our Mobile Tools gives you the ability to make your event page or theme look perfect across all devices.

Editing Mobile and Tablet Views

To access the Mobile editing tools, simply select the dropdown at the top right of your Layout Tab, this will display Desktop, Phone and Tablet. Select the option you want to edit, and it will activate to that specific viewport. This feature is amazing because once you start editing, it won't override any of the other views.

Here's a video showing you the process of editing Mobile and Tablet Views.

Container Options

This is such a powerful feature we have in our accordion set. This feature allows you to match height on containers that have columns within them.


Typically the negative impact here, is when you style out mobile and tablet there's usually no way to disable the match height unless you use custom CSS. Now, we have the ability to 'Enable', and 'Disable' when needed throughout your layout.

How to Disable Match Height on Mobile

Again, you'll really only need to use this feature when dealing with a container that has multiple columns. In the example below you'll see us disabling match-height to show you the impact.


You definitely want match-height on desktop, so the content center's itself to the 'Video' Element, but on mobile, we may deal with awkward spacing issues, so in this case we'll disable match-height on mobile.

Drilldown

Our drilldown feature could be a bit intimidating at first, but once you understand the concept and it's ability – you'll definitely want to use it for certain elements on your page.

Drilldown Overview

There's only a few elements in our library that the drilldown could be used for from a DIY standpoint (Date, Venue, Countdown). These elements are what we call 'Dynamic', they are pulling information from the initial create flow such as the users Location, and Date & Time.


So when utilizing the drilldown, it's essentially "diving" in deeper into that specific element so you can edit certain aspects of it.


If you're more code savvy, you could expand upon this concept and create custom classes in our CSS editor, and then create a 'Custom Selector' in our drilldown.

How to use the Drilldown Feature

In this example, we'll show you how to utilize the drilldown feature editing the 'Venue' Element. Once you select that element on page, it will drive you into that element's accordion editing tools. From there, you'll see a dropdown that says 'Whole Element' – drop that down to see all of the options you're allowed to edit. 


In this case, I want the Venue name to be on one line with the rest of the information snapping to the second line.

Background

The Background accordion gives you the ability to give a particular Element, Container, or Block a background color from your Color Set or a background image.

Changing Background Color

This option is best for Blocks, or Colum(s) Containers that are holding Elements. However, you can always have fun by adding background color to specific Elements like Headlines or Text Elements.


When dropping down the Color option, it will display the specific Color Set you're on. This allows the page to be consistent across the board as well as keeping specific Elements, Blocks or Containers with this property to stay linked if an end user flips through your multiple Color Sets. You can always edit this Color Set by clicking the 'Edit Color Set' button at the bottom which will take you into the Design Tab of that specific Color Set.

Changing Background Image

This option is best for Blocks, or Colum(s) Containers that are holding Elements. However, you can always have fun by adding a background image or GIF to specific Elements like Headlines or Text Elements.

 

When selecting the area to change your Background Image, it will prompt our 'Image Upload' modal – you also have the ability to access our Image Library, along with our Integration with GIPHY to really spruce up your page.

Font

The Font accordion gives you the ability to adjust your styles according to your page's design guidelines.

Font Family

When you're acessing a text or headline element, and dropdown the Font accordion, you'll notice it doesn't give you access to our entire font library. This is because you're on a particular Font Set. We do this because specific elements are linked according to that specific font set. This allows the page to be extremely consistent, along with changing those fonts when a user switches to a different set within the Theme so elements stay linked correctly.


You can also click the 'Edit Font Set' button at the bottom of your Set to access our Design Tab, which will take you directly into editing your current Font set.

Font Size

You can always adjust your Font size according to your design. We also give you the ability to adjust the unit type.

 

We recommend you use REM or EM as the unit type as it scales better for Mobile and Tablet views. If you happen to use PX's you must adjust Mobile and Tablet views with our Mobile editing tools feature.

Font Color

Similar to changing your Font in your Family Set, we approach changing Font Color the same. When changing your Font Color, it will dropdown to the current Color Set you're on.

 

Again, this gives a true consistent experience, as well as keeping all elements linked correctly.


You can always access that Color Set by clicking the 'Edit Color Set' button at the bottom of the dropdown. This will take you into the Design Tab of that specific Color Set to edit accordingly.

Text Align, Text Transform, Line Height and Letter Spacing

For further control of your design, we allow you to edit the 'Text Align' format, Text Transform, Line Height and Letter Spacing.

 

Text Align gives you the ability to Left, Center or Right justify your Headline or Text Elements.

 

Text Transform allows you to make your Headline or Text Elements to be all Uppercase, Lowercase and even Capitalize.


Line Height defines the amount of space above and below inline elements. That is, elements that are set to display: inline or display: inline-block. This property is most often used to set the leading for lines of text.


Letter Spacing is usually called tracking by typographers, refers to a consistent degree of increase (or sometimes decrease) of space between letters to affect density in a line or block of text.

Width

When it comes to setting up page layout, width is arguably the most powerful CSS property available. Here we will cover the basics of setting width on elements or containers as well as some quick tips for maintaining total control over your content.

The Basics

Any element's or container's width can be set via it's accordion pane. Opening the width accordion will reveal three properties: width, min-width and max-width.

Main Width Dropdown

In the Width dropdown, you have the option of setting the element's width to auto, a grid-percentage-base or custom. This could be a container or an element like Image.

 

Setting the width to auto will size the element by the natural width of your content – starting at 0 and ending at 100% of it's container.

 

Let's imagine we've set width auto on an image element. The image will not stretch beyond it's own width but will scale down to fit inside it's container. So: if your image is 800px wide, and it's contaner is 100px wide, it remains 800px wide. If it's container shrinks to 600px wide, your image will also scale to 600px wide.

The width settings are used most often when building pages with grid-based options. That is, this set of black and white rectangular shapes that represent column-based widths. Look at them as a fraction of [black]/[total] where "total" is the total number of shapes.  So, starting from the first row, the options shown here are 1/4, 1/3, 2/4 (or 1/2), 2/3 etc.

 

The custom option, made especially for developers, allows you to write any type of valid CSS width property – including things like calc(100% - 20px).

Height

The height property is set to "auto" by default -- most often, that's the way it stays. Use this property to set fixed and fluid heights for your layouts.

How to properly use Height

Setting the height of an element to anything other than auto will overrides it's natural height. Height will not work when an element is set to display: inline; (see flow). Also, a  height set with a percentage value will only work when the element is set to position: absolute; or position: fixed; (see flow). Height can only be a positve value. 

 

Height is often used together with overflow properties to make elements crop or scroll.

 

Min-height sets the smallest height an element can scale down to and max-height sets the biggest height an element can scale up to. 

Margin

You can think of Margin as the space outside and around an Element or Container. You can add Margin above, below, to the left, and to the right of an Element or Container hold a group of Elements to manipulate its positioning on the page.


In it's simplest terms: Margin pushes things around, but it's not a bully when used correctly!

Adding Margin to an Element or a Container

Hover over the desired Element or Container either on page, or in the Layout Tree; this should take you directly into its accordion styling options. 

 

Dropdown 'Margin, Padding' and begin adding the desired amount of Margin.

 

This can be done either by clicking on the number values and typing directly into the input fields (where you can control each side individually), or clicking the '-' and '+' buttons (this will add equal amounts of Margin to all four sides at the same time).

 

Note: You can also change the desired unit (REM, PX, EM, %, VW, VH, and auto). We recommend using %'s as it scales better for mobile and tablet views.

Can You Use Negative Margin Values?

Yes. Negative margin values might be used, for example, to move an Element or Container upwards on the page. 

 

Click on a number and press the 'down' key in the input field until the number is past zero to trigger the negative values. You can also enter these manually as well.

Padding

Padding is the space inside an Element – or more specifically – the space around an Element within its defined container or border. 


In it's simplest terms: Padding gives meat to the bones!

 

Splash tip: All Elements or Containers added to a page come with a default 1em of padding, so keep that in mind when you are styling your page and trying to space or position Elements relative to each other! 

Adding Padding to an Element or a Container

Hover over the desired Element or Container either on page, or in the Layout Tree; this should take you directly into its accordion styling options. 

 

Dropdown 'Margin, Padding' and begin adding the desired amount of Padding.

 

Similarly to Margin, this can be done either by clicking on the number values and typing directly into the input fields (where you can control each side individually), or clicking the '-' and '+' buttons (this will add equal amounts of Padding to all four sides at the same time).

 

Note: You can also change the desired unit (REM, PX, EM, %, VW, VH, and auto). We recommend using %'s as it scales better for mobile and tablet views.


Splash Tip: We also require to use Padding to decrease or increase the height of a Block, Element, or Container holding Elements. If you use 'Height' it won't care about the Elements inside a Block or Container.

Can You Use Negative Padding Values?

No. Padding values cannot be negative, because an Element cannot conceptually have negative amounts of padding (or it would expand out of its container!).

Display

The Display accordion carries a core foundation of layout properties that are essential for getting layouts just right.

Display Mode, and Overflow

Your new best friends!


Let's break them down, starting from the top. Float allows to push elements to the left and right sides of their containers. They will float next to their neighboring elements when space allows. When not floated, elements will be centered and on their own row.

 

If this content element you're reading were floated right, it would go to the right side of the image element which has no float.

 

Well, what do you think would happen if both of the elements above (content and image) were floated left? ... It would look the same! But, if what you actually wanted was for the image element to go under the content block, you would use a clear left. The clear property functions true to it's name, forcing elements to clear neighboring elements from the left, right or both sides.

 

In our scenario above, if both elements were floated left, and the image element had a clear right it would not move below the content block, because it is only to clear elements to it's right. Clear is just a helper to the float property.

The display property is pretty straight-forward. Firstly, display none – this will hide your element. Easy! Display inline will show the element literally "inline" on the baseline with other elements when space allows. Display inline can not affect the flow of elements vertically – that is, margin and padding will only work horizontally. It will also not accept width and heigth values.

 

Know that float left and right override display inline, inline-block and block – rendering the element true to size and forcing it to the left or right.

 

Display inline-block is much the same as inline. The biggest difference being that it can accept width and height values as well as top and bottom values for the margin and padding properties.

 

Display block is a combination of inline and inline block. It will force the element to take 100% of the space available to it – essentially clearing its "row."

Now for overflow. Overflow controls what happens when an element's content overflows it's perimeter. Overflow visible is the default, you will always see content, even if it extends beyond the container. Overflow hidden will clip, or mask, any content that extends beyond. How could this be useful? Maybe you've put a border radius on your container, but an inline image is making those corners seem square – overflow hidden will crop out those corners. 

 

Over flow scroll and auto will add a veritcal scrollbar to the content if it extends taller than the container. "Scroll" will always add the scrollbar and "auto" will only add it when needed. The only way this could happen, by the way, is if said container had a fixed or max-height -- limiting how tall the container can grow. 

Positioning

The position property is a powerful piece of the CSS toolkit -- handy for simply nudging the position of elements, positioning an element relative to others, creating overlays and more.

Float, Position, Translate-X, Translate-Y, and Rotate

Upon opening the dropdown of the Positioning options you'll see four values: default, relative, absolute and fixed. Default is every element or container's default, nothing to think about here as there are no options to set. The next three values –relative, absolute and fixed – all share the same layout options, what's different is the way they relate to their neighboring elements or containers. Let's talk about the similarities first: 

 

First, the input values, starting from the top and going clockwise: top, right, bottom, left.


Note: Setting values for opposing sides (like, top and bottom) will push from the top and bottom – probably not what you want. If you only want to move from the top, make sure your bottom value is empty or on "auto."

 

The values calculated in the inputs are based on the width of it's parent container. 

Z-index lets you declare in what order elements should be "layered" if they are overlapping one another. The higher the z-index, the higher in order it will be. TranslateX and translateY will move the element relative to it's own width and height – not relative to the parent container as top, right, bottom and left do. TranslateX controls left to right and translate Y controls up and down. 

 

Now that you know what properties can be set, the last thing to cover is the relational difference between relative, absolute and fixed. An element positioned relative will remain "in the flow" of the document – that is, neighboring element will still leave space for it. Using the iron-cross in "relative" positioning will nudge the element relative to it's place in the layout. Helpful for fintuning position when margin or padding won't do. Careful in using this that you don't unintentionally overlap neighboring elements!

 

Setting an element to position: absolute will position it "absolutely" to it's next relatively positioned parent container. That is – if you set position: absolute, top: 0, left: 0, it will go to the top left corner of it's container. Setting position absolute will also remove it from the document flow – as far as other elements are concerned, it's not there and it's space will not be preserved. 

 

So, relative position is relative to itself and position absolute is relative to it's container – what's left? Position fixed! Fixed position will use the viewport as it's relative container. The viewport is the perimeter of your browser window. So, position: fixed, top: 0 will always skip all parent containers and go straight to the top (or bottom) of the viewport. Also, since it is positioned to the viewport, it will not scroll with your content. It will stay "fixed" position – get it yet? 😉

Border

Every Element on your page is either a rectangular Container or sits within a Container, so you can apply borders to them.


Splash tip: use borders on all four sides of a container to outline the whole thing, or apply borders to individual sides to create the illusion of lines. 

Adding Border to an Element

Hover over the desired Element and click on the bolt icon; this should take you directly into its styling options in the Layout tab.

 

Click on the "Border" drop-down and begin styling your Borders.

First, use the iron-cross to define how many pixels thick you'd like your Border to be. You can also pick a color for your Border, using the color picker tool. Applying pixels to all four sides will create a Border around the entire Element:

Applying pixels to just one side will create the illusion of a line above, below, to the left, or to the right of the Element:

You can also apply different stroke styles, like "dotted" or "dashed":

What does the 'Radius' Setting Do?

Border 'Radius' allows you to round out the corners of your containers:

Splash tip: you can draw a circle by applying a border-radius of 100% on an Element that has equal width and height!

Properties

The Properties accordion, available for every element, container, or block, holds tools for adding top-level theme rules and custom CSS classes.


Correctly using these options is essential for creating bulletproof themes that produce consistantly beautiful pages.

Applying Custom CSS Classes

When you're building pages, you should leverage as much of the native tool as possible – using custom styles as a last resort. Using custom styles adds a layer of customization to your theme that could have adverse affects to a users experience if not done with care. That said, if you need to add custom classes – here you go. Use the custom CSS, available via the wrench icon at the bottom of the Design and Layout panes.

 

Once you've written a custom CSS class in the developer tools, you now have the ability to apply that class to any element, container or block that will take those specific rules within the 'Custom Classes' text area.

Locking Elements, Containers, or Blocks

Locking elements gives you total control over the users editing abilities – especially for brand senstive themes where only a limited number of content should be edited. 

 

By default, content are editable to their fullest extent ("None"). A partial lock will only allow users to edit content, but won't allow them to access the accordion tools. A full lock will completely disable hoverstates on the content – rendering it uneditable on page along with its accordion tools.

Drag Rules

 To restrict users even more, you can apply dragging rules to your page's content.

 

In more cases than not, you shouldn't really have a need for this feature, and if needed, this rule should be used for Repeatable Elements.


Fully Draggable allows a user to drag wherever within a repeatable container, and No drag will lock all ability to drag on page.

Additional Property Settings

We also give you the ability to apply additional properties to Elements, Containers, and Blocks.


This will not only give your design more flexibility if needed, but also give your end user a better user experience.


When applying these addition properties, it will add those properties to the toolbar hoverstate on a given Element, Container or Block.


'Has Editable Background' will allow a user to upload a background image on page.


'Lock From Deleting' will remove the delete icon from the toolbar.


'Make Block Linkable' will allow a user to give content an external link if needed.


'Match Children Height' is mainly used for yourself as it will help support matching column heights within containers.


Note: The admin level additional properties are for internal use only.

Theme Level Page Element Properties

When saving our a public theme in our library, you have to think about all of our edge cases. Certain Elements on your page need to have a dynamic content, meaning if a end user selects your theme, when they applying their Event Details within the Create Flow that it will retroactively pull in with their Event information on the fly.

 

The default state to any Element is set to None which won't do anything to your content dynamically.

 

Event Title will dynamically link a 'Headline' Element to the pages Event Title that's being pulled from the Create Flow Event Details area.

Event Description will pull in our generic copy on our backend – you have the ability to edit this content, once edited it will override our backend copy.

 

Note: Only one 'Text' Element can be set as Event Description since that element will become linked if cloned. Meaning, if a user who selects your theme and adjusts the base copy of that element, it will also reflect any other 'Text' Element with that property.

Event Image will apply a dynamic function so if a user changes the base Cover Image, it will carry over to any other part of the user experience such as: Email Sender, and Event Card.

Host Name will apply a dynamic function so if a user changes selects that theme, it will come in with their Account Information name.

Hashtag will apply a dynamic function so when a user adds a custom Hashtag within their Create Flow, it will come in with their personal hashtag on page.

Custom CSS

If you are a developer or have some sort of knowledge in CSS, you can utilize our Developer Tools. This is where you can add custom animations, etc to your event page.

Creating Custom Classes and Applying them to Elements

Just like we discussed in the 'Properties' section of this guide, you have the ability to apply Custom CSS classes to content on your event page. Once applied in our 'Developer Tools' you can utilize the 'Properties' accordion and apply that class in the 'Custom Class' text area.


In the example below, we show you how this functionality works by applying a spin animation to our 'Speakers' Repeatable Image.

Shortcut Keys

We're starting to internally build shortcuts within our tool. Here's a quick guide on some of the ones we have so far.

Keyboard Shortcuts

Output

a

auto

w

vw

h

vh

r

rem

e

em

shift+%

%

Containers

A Container is exactly what it sounds like – conceptually, it is a "holder" of any number of Elements. You can wrap existing Elements in Containers, or you can create empty Containers and drop Elements into them.

 

Containers make it easy to apply edits to groups of Elements; for example, if you wanted to adjust the width(s) of several Elements at once, or if you wanted to be able to move and re-order an entire group of Elements from one part of the page to another.

Wrap a Container Around an Element

We have multiple Container Elements you can add to your page. To access these Elements, simply click the Circle '+' button once you're in a Block, this will activate our Element Library, choose the 'Containers' category.

There's two ways to add Repeatables, through our Block adder which gives you a nice base layout to work from, or if you choose to build your own you can add a Repeatable Element into a new or prexisiting Block.

To wrap a Container around an Element, hover over the desired Element in the Layout Tree and click on the 'Wrap' icon to the right.

Note the "Container" wrapper that has now been added around the Headline Element.

Adding Elements in a Container Element Type

To add or move Elements to an empty or new Container, first add a Container to your Splash page. Then, simply drag and drop the desired Element into the Container or Column Containers. If you add an empty Container or Column(s) Container, on-page you'll see a Green '+' button in the center of those empty Containers, this will prompt our Element Adder where you can add any type of Element inside.


Note: All Containers and Column(s) Containers come with 1em padding top, bottom, left, right. You can remove or keep depending on your design.

Units

Our tool has several different units for expressing a length. Many properties take "length" values, such as width, margin, padding, font-size, border-width, etc.

Relative Lengths

Relative length units specify a length relative to another length property. Relative length units scales better between different rendering mediums.

Unit

Description

rem

Relative to font-size of the root element

vw

Relative to 1% of the width of the viewport*

vh

Relative to 1% of the height of the viewport*

em

Relative to the font-size of the element (2em means 2 times the size of the current font)

Repeatables

Repeatables act as a Master Group – this Element is primarily used for anything that needs to have a multiple (Speakers, Sponsors, Schedule). Because it acts as a Master Group, it gives you the ability to edit and change content as a retroactive fix.

Adding Repeatables

There's two ways to add Repeatables, through our Block adder which gives you a nice base layout to work from, or if you choose to build your own you can add a Repeatable Element into a new or prexisiting Block.

Editing Repeatables

When editing or remixing a Repeatable Element, it will effect all of the Repeatables you have in your layout. A great use case is say you have 100 Speakers speaking at your event, and you have to adjust the Image Element to become a circle, and the first name to be lowercase, along with reordering the Speakers. In most scenarios, you'd have to manually update all 100 Speakers which would be very time consuming, with our Repeatable feature we allow you to adjust retroactively which saves time on the implementation process!

Event Card

Documentation coming soon.

Adding Repeatables

There's two ways to add Repeatables, through our Block adder which gives you a nice base layout to work from, or if you choose to build your own you can add a Repeatable Element into a new or prexisiting Block.

Event Hub

Documentation coming soon.

Adding Repeatables

There's two ways to add Repeatables, through our Block adder which gives you a nice base layout to work from, or if you choose to build your own you can add a Repeatable Element into a new or prexisiting Block.

CONTACT THE ORGANIZER
Google   Outlook   iCal   Yahoo

RSVP

processing image...
Add to my Calendar
  • Google  Outlook  iCal  Yahoo