Count down

After inserting a block in Live Preview, you can configure the settings

Content

Count down

  • Countdown Type

    • Static: Counts down to a specific date and time

    • Dynamic: Instead of selecting an end date, you’ll choose the length of time the timer shows by number of days, hours, minutes, and seconds

  • Countdown Style: Including grouping and separate

  • Layout: Including horizontal and vertical

  • Separator: Including colon, hyphen, slash or none

  • Unit Display Settings: You can change the Unit Display Type, Unit Display Position, Display Days, Display Hours, Display Minutes or Display Seconds

  • Countdown End Action: There are four action options:

    • No action: if the countdown reaches 0 while a visitor is viewing it, nothing will happen, and the timer remains viewable

    • Restart the countdown: this action will restart the timer (only available for Dynamic countdown timers)

    • Go to a view: allows you to choose a view, like the Success View, to show instead of the finished countdown

    • Close the campaign: this action closes the campaign, so the countdown is no longer viewable

Success Scripts

It allows you to enter the scripts, the scripts that will load after the button has been clicked

Advanced

Countdown Styling

Align

It allows you to change the alignment of the button (left, center, right)

Minimum Width

It allows you to change the width of the elements in PX

Style (Background color)

  1. Solid: Applies a single color uniformly within the whole of an object by selecting the Background color

  2. Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:

    • Linear: Change the angle of the gradient

    • Radial: Change the positioning (right center, left top, left center, etc)

    • First color & first color location

    • Second color & second color location

Background image

  • Browse Image: Image Selection

  • Image URL: A web address that specifies the location of an image

  • Image Position: This setting allows you to position your image within the frame of your screen such as left top, left center, right top, right center, etc.

  • Image Repeat: Sets how background images are repeated (Repeat, Repeat horizontal, repeat vertical, etc.)

  • Image Size: How an image should be resized to fit its container

    • Contain: The image keeps its aspect ratio but is resized to fit within the given dimension

    • Cover: The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit

    • Auto: The image keeps its aspect ratio and fills the given dimension automatically

Box Shadow

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

Border

It allows you to specify the style, width, and color of an element's border

Rounded Corners

It allows you to define the radius of an element's corners

Spacing

  • Inner Spacing (Padding): Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box

  • Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

Z-Index

  • The z-index property specifies the stack order of an element

  • An element with greater stack order is always in front of an element with a lower stack order

Number Styling

You can change the Font Family, Font color, Font size, Font Weight, Line Height, or Leter spacing

Unit Styling

You can change the Font Family, Font color, Font size, Font Weight, Line Height, or Leter spacing

Separator Styling

You can change the Font Family, Font color, Font size, Font Weight, Line Height, or Leter spacing

Container Styling

Style

  1. Solid: Applies a single color uniformly within the whole of an object by selecting the Background color

  2. Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:

    • Linear: Change the angle of the gradient

    • Radial: Change the positioning (right center, left top, left center, etc)

    • First color & first color location

    • Second color & second color location

Box Shadow

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

Border

It allows you to specify the style, width, and color of an element's border

Rounded Corners

It allows you to define the radius of an element's corners

Spacing

  • Inner Spacing (Padding): Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box

  • Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

Position

It allows you to adjust the position of elements in the block

Z-Index

  • The z-index property specifies the stack order of an element

  • An element with greater stack order is always in front of an element with a lower stack order

Custom ID attribute

The ID of a block, which is used in Custom CSS, Custom Javascript

Custom Class attribute

The class of a block, which is used in Custom CSS, Custom Javascript

Hover Style

You can configure the Hover Styles by turning off the status of Default Hover Styles

a. Background

  1. Solid: Applies a single color uniformly within the whole of an object by selecting the Background color

  2. Gradient: It applies a continuous blend of two or more colors, where one color gradually fades and changes into another. You can choose the Gradient Style:

    • Linear: Change the angle of the gradient

    • Radial: Change the positioning (right center, left top, left center, etc)

    • First color & first color location

    • Second color & second color location

b. Box Shadow

It allows you to add shadow effects around an element's frame by selecting a shadow style (None, Light, Custom)

c. Border

It allows you to specify the style, width, and color of an element's border

d. Rounded Corners

It allows you to define the radius of an element's corners

e. Spacing

  • Inner Spacing (Padding): Padding is inside the border (or edge) of your element. Increasing the padding will “push” your content into the middle of your box, away from your borders. If you remove the padding, your content will take up the entire box

  • Outer Spacing (Margin): Margin is on the outside of the border of your element. If you increase the margin, it will increase the space between this element and the ones next to it. If you remove your margin, there will be no extra space between your elements

f. Position

It allows you to adjust the position of elements in block

g. Z-Index

  • The z-index property specifies the stack order of an element

  • An element with greater stack order is always in front of an element with a lower stack order

Display condition

You can set the condition to display the button

  • Condition: It includes None, Show when, Hidden when

  • Field: It contains Business Object attributes

  • Index: The number of the row in the Business Objects Data table

  • Operator: It includes contains, does not contain, starts with, doesn't start with, ends with, doesn't end with, etc.

  • Value: you can input the value or select an attribute from Business Object or Event

  • The Business Object attributes in Field are selected Business Object in Template Setting

  • If Business Object in Template Setting does not be selected, a popup of Select Source will appear

Last updated