UI Marker

UI Marker

UI Marker

  1. Select image: Select an image from your media library. This is the image of the item
  2. Marker items: click on "Add Item" to add a new marker item
    Click on the item to configure relevant options
    - Left / Top: Move the circle point to adjust the marker position to the left, right, top or bottom
    - Use animation: enable to apply an animation 
    - Marker type: there are  types of marker types (image or point). Set the desired type from the drop-down list. 
    - Title: Enter a title for the marker
    - Content: Write the content that briefly describes the marker item
    - Select image: select an image from your media library to display in the popover.
    - Image size: Select an image size from the given list.
    - Position: Select a position for this item (Top, right, bottom, left)
    - Link: Insert an absolute URL that the button will be linked
    - Button title: If you want to create a button, just enter a button title
  3. Mode: Display the popover on click or hover.
  4. Position: Set the alignment of the popover to its marker. If the popover doesn't fit its container, it will flip automatically.
  5. Width: set the width of the popover.
  6. Animation: Select an animation effect that will be applied on click/hover.
  7. Style: Choose a style for the marker card
  8. Padding: Set the padding between the card and its content.
Title Settings

Title Settings

  1. Title font: Click the edit button to adjust the typography of the title font.
  2. Style: Select a style for the title.
  3. Link title: If yes, the title will be redirected to the link added. 
  4. Decoration: Decorate the title with a divider, bullet, or line that is vertically centered to the heading.
  5. Predefined color: choose a predefined color for the title.
  6. Transform: use this option to make the text appear in all-uppercase or all-lowercase, or with each word capitalized.
  7. HTML element: Choose one of six heading elements to fit your semantic structure.
  8. Title margin: Set the vertical margin of the title
Meta Settings

Meta settings

  1. Image appear: This field will allow you to adjust the desired position of the image. (Top, Inside, or bottom).
  2. Media margin: Set the vertical margin for the image. You can select one of the available options.
Content settings
Content settings
  1. Content font: Click the edit button to adjust the typography of the content font.
  2. Style: Select a predefined text style, including color, size, font family. 
  3. Custom color: Choose a custom color for the content text.
  4. Transform: use this option to make the text appear in all-uppercase or all-lowercase, or with each word capitalized.
  5. Margin top: Set the vertical margin of the content section.
Button settings

Button Settings

  1. Text: Enter the button text.
  2. Link new tab: Set the new tab redirection of the link.
  3. Style: There are different types of button styles available. Set the button style from the drop-down list.
  4. Button size: Choose the size of your button from the drop-down list of sizes.
  5. Margin top: Set the top margin of the button.