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.
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.
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.
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).
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
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.
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
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.
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.
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 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.
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.
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.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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).
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.
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!
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.
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!
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.
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.
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? 😉
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.
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 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.
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.
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.
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.
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.
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.
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.
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!