Intro to Designer Pro Concepts

All Splash page elements are dynamic. This means their positioning will adjust as you change your browser size or the device you’re viewing on.

This concept is what makes your event page mobile responsive.

When designing, try not think about where the element is on the screen but, rather, the spacing around the element and within its content block.

A block is a container that houses page elements. For example, a Cover Block would usually contain an image, headline, RSVP button, color mask, additional containers, and more. 

Blocks feature multiple containers of varying width, grouping different elements together and thus taking up different sizes.

You can see how much space an element uses by hovering on top of it.

Two quick notes:

1. Designer Pro users are able to see all containers and elements.
2. Elements within a container take on the design settings applied to that container.

Important concept: Blocks and containers are only as tall as the height of the elements within them, plus any additional margin and padding added to them.

For experienced web designers, keep in mind that every styling option in Splash is based on CSS web design properties.

Best practices for getting started with Designer Pro:

Font sizes and spacing - We recommend using REM or EM as your unit of size instead of pixels. REM and EM are actually ratios of pixels and thus more mobile responsive.

This is a great first step to ensuring a responsive page. Check out our FAQ:  Why rems are recommend for sizing text elements to learn more!

“Moving” elements  - Increasing and decreasing padding is the safest way to push an element closer or farther away from the edge of a block, container, or another element.

For those looking to reduce scrolling, for example, killing excess margin and padding is the way to do it.

See how: How do I add or reduce spacing between blocks and elements?

Positioning 101 - The Positioning dropdown menu will allow you to float elements left and right. Think of floating as you would text alignment; selecting Float "none" will usually center an image in its container. When positioning containers, choose float "left" to help align containers and elements in a row.

If the positioning still isn’t behaving as you’d like it to, just shoot us a note, as this does constitute a more advanced editing move.

Designer Pro Stay-Aways

• Unless you’re a legit design ninja, we highly recommend that you avoid Absolute positioning and the Translate X & Y boxes. The misuse of these functions are among the most common reasons for content getting cut off on mobile.
  
  
• Never set both minimum and maximum widths or heights together, and, as a general rule of thumb, we strongly suggest not setting a max height unless you really know what you’re doing.
  
  Minimum or maximum widths are generally pretty safe — especially max widths on image elements (such as logos) —  but make sure you check Phone and Tablet views if you use them.
  
• We also recommend using the Width dropdown to select a percentage width for an element or container.

• Try not to add images via the text toolbar. This is in place just for less-skilled users to have some image-adding access. Since you have Designer Pro, you can add image elements — much more stable and responsive.
• Try not to set a specific height (a "max height") on an element because it will usually won’t translate well to a mobile device.
  
  For example: If you set an element to be 1000px tall on a desktop screen, that element will likely appear to be cut off on a mobile phone, which has a viewing size of ~500-600px.
  
  
  
• Avoid negative margin. Negative margin can be used in a pinch, but can sometimes cause containers to overlap and make the page look funky.
  
  Our blocks are designed with padding and margin so if you feel the block is too large for your taste, you can always decrease it. It's safer to float elements in the Positioning menu instead of using margin.