How do I style my dynamic date and venue elements?

Lucky for you, we've got a full rundown for all things date & venue in our Date & Venue Elements course! Short on time? No worries, read on for the main points below!

Date and Venue Elements Intro

If you've created a Splash page, chances are you've seen our dynamic date and venue elements.

dynamic_date_and_venue.gif

These elements dynamically (key word here!) pull information from the Date, Time, & Venue inputs in your Settings tab. 

syncs_from_event_settings.png

Sometimes the default formatting is not ideal for your specific needs or design vision. You may need to include the time zone if guests are traveling internationally, or show the city but not state.

No sweat! If you have access to Designer Pro editing mode, you can hide, show, reorder, and add static text elements to create the perfect format. 

We'll take you through the step-by-step instructions for styling these elements with ease.

How to access the date and venue editor

There are two ways to open up our date and venue editor — on page or through the layout!

On-page (spoiler alert - it's the quickest way!)

  1. Hover over your date or venue element.
  2. Click the Date or Venue icon that appears in the on-page editing options.

date_and_time_modal.gif

Through the Layout tab

  1. Click into your Date or Venue element.
  2. Select the Format button to open the editor for that element.

using_the_layout_tree_.gif

Styling your date and time format

Your date and time elements are separated into components that can be adjusted:

  • Date: Start Day, Start Day of the Week, Start Month, Start Year, Start Time, End Time, Custom

  • Venue: Venue Name, Address, City, State, Zip Code, Country, Custom

Clicking into each component will display a dropdown of formatting options.

Screen_Recording_2019-12-21_at_12.40_AM.gif

To switch around the order, simply click and drag each component. Feel like your line is getting a bit long? Drag and drop your components to add these to a separate line: 

Screen_Recording_2019-12-21_at_01.02_AM.gif

Click into any pre-existing static text field to change the copy.

Screen_Recording_2019-12-21_at_12.46_AM.gif

To add a new component, simply click the blue "+" sign at the end of a line.

Screen_Recording_2019-12-21_at_01.10_AM.gif

 

 

Looking to ditch a component? Simply drag it to the bottom of the editor window where a nifty trash can will appear. The reset button will revert the element to its original format.

Screen_Recording_2019-12-21_at_01.06_AM.gif

 

 

 

 

Was this article helpful?
0 out of 0 found this helpful

Comments

4 comments
  • It would be ideal if we could drag and drop the order in which the rows appear. For example moving L2 to L1 position.

    0
    Comment actions Permalink
  • Hi Cherie. This is actually possible within the Date and Venue elements! Check out the GIF under Styling your date and time format - https://share.getcloudapp.com/nOumPAPW

    0
    Comment actions Permalink
  • It works for me now. Is this a new feature? The elements did not seem to drag and drop for me before.
    Thank you!

    0
    Comment actions Permalink
  • Awesome to hear! If you run into any trouble in the future with it, feel free to reach out to support@splashthat.com and we'd be happy to help :)

    0
    Comment actions Permalink

Please sign in to leave a comment.