Slideshow and Countdown Timer Elements

Slideshow Element

Drag the slide show element to a block to insert the element with three sample slides. Click on the slide element to display the Settings. You can click the "+ Add" button to add additional slides.

Click on one of the slides in the list to show the Settings for that slide. Use the Background drop down to select a transparent, colored, image or video for the background of the slide. The settings for transparent and colored backgrounds are easy to understand.

Image Backgrounds

You can upload a new image or select one from the image manager by clicking the Change Image icon. The Solid or gradient background? selections will apply a color or a gradient color to the spaces your image does not cover, or in areas where the image is transparent. If you select "Solid" and then "Transparent" for  the slide background the block or column background will show through.

Sizing - choices are "100% width", "100% height", "Contain" and "Cover". Because ONTRApages are responsive and can be resized by the person viewing the page, the image is scaled as the resizing is happening.

"100% width" scales the image so the width is maintained and you can see the full width of the resized image even if the top and bottom are cut off or filled with the background color that you set above. Choosing "100% height is similar, but maintains the image height to be seen even if the width is cropped or filled with the background color. With both of these settings the image aspect ratio is maintained and the image doesn't look deformed.

"Contain" resizes the image to make sure the entire image can be seen in the slide, and can crop one side of the image to make the best fit. "Cover" will stretch or shrink the image to fit the resized page and can change the aspect ratio, deforming the image. The deformation is minimized when you have the image starting out large in desktop mode, rather than stretching a smaller image.

This video shows how the image looks nearly identical in each slide when the ONTRAPORT Page is displayed full size, and how the four treatments look when it is resized for a tablet. "Cover" and "Contain" are often the best choices, but "100% Height" looks good with this image in both modes.

The Style tab in the Slide element editor allows you to control the following aspects:

• Height - how tall the slides appear
• Slide indicators and indicator colors - the dots at the bottom of the slide showing you the position in the series
• Slide arrows and slide arrow colors - the arrows that appear on the sides of the image
• Animation speed - how fast the transition from slide to slide is
• Time between slides - how long the slide stays on screen before transitioning to the next slide). To turn off the automatic transition to another slide, select "Off" in the Time between slides (Seconds) drop down. The viewer will need to manually cycle through the slides using the slide indicators or slide arrows.

The Position tab in the Slide element allows you to adjust the padding, margin, alignment and sizing of the element width.

Countdown Timer Element

Set the countdown date and the countdown time. The countdown timer continuously updates until that date and time arrive. Then, when the date and time entered expires, the page redirects to the URL entered in the "After expiration, redirect visitor to" field. You can select an ONTRAPORT landing page, Tracked Link or download an ONTRAPORT hosted file.

The Style tab enables you to change the color and font style of the countdown timer numbers and words as well as the background color.

The Position tab allows you to adjust the spacing around and inside the element, alignment and width.