Modify the date, time, and venue elements

1. Go to Design > Website, from the Dock. 
2. Click 'Edit Website' to open the Website Builder.
3. Hover over the date, time, and venue elements in the Hero section.
   
4. Click the Settings icon []. The Date, time, and venue panel will be displayed.
   
5. Use the respective toggles for the elements to show or hide them in the Hero section.
   
6. Modify the size of all the elements in the Widget size field.
   
7. Change the format for the date and time in the Format field.
   
8. Manage the icons by enabling, disabling, or modifying their design.
   
1. Optional: Pick icons from the default Icon Library or upload one from your local system.
   
9. Select a color option for the text of the date, time, and venue elements.
   

Add an event countdown timer

1. Go to Design > Website, from the Dock. 
2. Click 'Edit Website' to open the Website Builder.
3. Enable the countdown element in the Hero section on the website.
   
1. Click the Settings icon [] in the Hero section. The Hero section settings panel will appear.
   
2. Enable the Event countdown toggle. The countdown element will appear in the Hero section.
   
4. Modify the layout and other aspects of the event countdown element.
   
1. Click the Settings icon [] for the countdown element in the Hero section. The Countdown settings panel will appear.
   
2. You can enable the Countdown title toggle to include text at the top of the countdown element.
   
3. Modify layout, text color, text size, and more to change the way the countdown is displayed.
   
4. Select an option in the Timer display preference dropdown to choose how the display should look like when the countdown is over or after the event has ended.
   
5. Pick an option from the Count down to section to indicate what the timer should count down to. You can choose to count down to one of the following options: event start date, a custom date, or the start or end date for ticket sales for a particular ticket category.
   

1. Click the Slider settings icon []. The Slider settings panel will appear.
   
2. Click the Slides tab.
   
1. Click the Add Slide button. New slides will be added to the top section and will be listed in the Slides tab.
3. Click the Customize tab.
   
1. Enable the Arrows toggle. Expand this option to set design and color settings for arrows.
   
2. Enable the Slide navigator toggle. Expand this option to design, alignment, and color settings for the slide navigator.
   
3. Enable the Auto slide toggle. Expand this option to set a delay time for slides and also set if slides should be paused when hovered upon.
   
4. Select an option in the Transition dropdown to choose what animation should appear between each slide.
   
5. Enable the Equal height for all slides toggle. All slide will be resized to the height of the largest slide based on the size or number of elements each slide has.
   
6. Enable the Fit slider to screen toggle to ensure that only the Slider in the Hero section fits the entire screen.
   

Edit a slide

1. Click the Edit icon [] for a slide in the Slides tab.
   
2. Click the Customize tab.
   
1. Use the arrangement, size, and alignment options in the Section layout area for the elements in the section.
   
2. Turn on the toggle button in the Elements section to select the elements you want to add.
   
3. Click the Manage items tab.
1. Click and drag the elements to rearrange them.

Hide a slide

1. Click the Hide icon [] associated with a slide in the Slides tab. The slide will be hidden.
   
2. Click the icon again to unhide the slide.
   

Note: You can't hide a slide if you only have one slide in the section.

Add a background for a slide

For the website

1. Click the  icon for a slide in the Slides tab.
   
2. Click the Background option.
   
3. Select the Website tab.
1. Select the Color tab and pick a color and set the opacity.
   
2. Or, select the Image tab and upload an image. Edit the image by modifying elements like opacity or overlay. Modify the fit and position as needed.
   
3. Or, select the Video tab and enter the video's URL. Use options that are displayed in this tab to choose how the video should be displayed.
   Note: You can paste a YouTube video URL or a public Zoho Docs video URL.
4. Click Close when done.
   

Note: The alternate image option when adding a video as a background serves as a fallback image which will be shown if the video does not load on mobile interfaces.

For the mobile

1. Click the  icon for a slide in the Slides tab.
   
2. Click the Background option. By default the section background settings applied in the website will be use for mobile interfaces as well.
3. Deselect the Use website background for the mobile interfaces checkbox if you want to have a different background for your mobile browser.
1. Select the Color tab and pick a color and set the opacity.
   
2. Or, select the Image tab and upload an image. Edit the image by modifying elements like opacity or overlay. Modify the fit and position as needed.
   
3. Or, select the Video tab and enter the video's URL. Use options that are displayed in this tab to choose how the video should be displayed.
   Note: You can paste a YouTube video URL or a public Zoho Docs video URL.

Note: The alternate image option when adding a video as a background serves as a fallback image which will be shown if the video does not load on mobile interfaces.

Supported image formats

JPG           JPEG            PNG

GIF           WEBP

 

Image size limit

Less than 5MB

 

Image dimensions

1440x760 pixels at 72dpi

 

Supported video formats

YouTube           

Delete a slide

1. Click the  icon for a slide in the Slides tab.
   
2. Click the Delete option. The slide will be deleted.
   

Note: You can't delete a slide if you only have one slide in the section.

1. Go to Design > Website, from the Dock. 
2. Click 'Edit Website' to open the Website Builder.
3. Click the Settings icon []. The Hero section settings panel will appear.
4. Enable the Primary media or the Secondary media toggle. A place holder for media will appear in the Hero section.
   
5. Click the Add media link in the placeholder. The Add media panel will appear.
1. Add image: Click the Image tab and upload an image. You can hyperlink the image to any of the following: another page on the website, external URL, a speaker's profile, information on a sponsor, details for a session, event listing page of your portal, or the registration form with a ticket class automatically selected along with an applied promotional code, if any.
2. Add video: Select the Video tab and enter a video URL. This video must be a public YouTube or Vimeo link and will load with the audio when played.
   
3. Embed code: Select the Embed tab and paste your iframe code.
   
6. Select an option from the Media size dropdown in the Hero section settings panel.
7. Click Close.
   

Note:

1. The Primary media toggle enables you to add media that can be made the focal point in the Hero section. Modifying the order of elements on the Hero section does not affect the primary media.
   
2. The Secondary media toggle allows you to add smaller media. This media will be group together with other elements in the Hero section and can be moved when reordering elements in the Hero section.

Supported media formats