LogoLogo
  • Release Notes
    • 2024
      • July 2024
      • June 2024
      • May 2024
      • April 2024
      • March 2024
      • February 2024
      • January 2024
    • 2023
      • December 2023
      • November 2023
      • October 2023
      • September 2023
      • August 2023
      • July 2023
      • June 2023
      • May 2023
      • April 2023
      • March 2023
      • February 2023
      • January 2023
    • 2022
      • December 2022
      • November 2022
      • October 2022
      • September 2022
      • August 2022
      • July 2022
      • June 2022
      • May 2022
      • April 2022
      • March 2022
      • February 2022
      • January 2022
  • CDP 365 INTRODUCTION
    • Overview of CDP 365
    • Feature Structure
    • CDP 365's Interface
    • Help feature
  • PERSONAS
    • Visitors & Customers
      • Data table
      • Explore data
      • Upload data
      • Apply data view
      • View profile
    • Segments
    • Plannings
    • Predictive Models
      • RFM Model
      • Lifecycle Stages
  • DATA HUB
    • Event Sources
      • Source
        • Website
        • System delivery
      • Conversion Event
    • Business Objects
      • Data Objects
        • Data table
        • Attributes
          • Custom Attribute
          • Computed Attribute
            • Event Counter
            • Aggregation
            • Most Frequent
            • First
            • Last
            • Unique List
            • Unique Count
            • Conversion Attribution
            • Virtual Custom Function
            • Schedule Custom Function
        • Collections
        • Groups
        • Setting
      • Data Views
      • Import Histories
      • Export Histories
    • Analytic Models
    • Data Schema
  • Marketing Hub
    • Customer Journeys
      • Work with Journey
        • Destination nodes
          • Web Embedded
            • Design from JSON
              • Control Toolbar
              • Setting
                • Template Setting
                • Blocks & Settings
                  • Countdown
                  • Dynamic Content
                  • Image
                  • Video
                  • Boolean
                  • Number
                  • Text
                  • Array
                  • Object
          • Line App
          • Zalo
      • Blast Campaign
      • Third-party campaigns
      • Metrics
      • Label
      • Custom Function
      • Status of Journey
    • Channel Integration - Destinations
      • All Destinations
        • Email
        • Web Personalization
        • Web Push-Notification
        • App Push Notification
        • Smart Inbox
        • Conversation
        • Webhook
        • SMS
        • Viber
        • Whatsapp
        • Line
        • Zalo
        • File Transfer
    • Promotion Center
    • Media Template
      • Control Toolbar
      • Settings
        • Template Settings
          • Basic
          • Advanced
        • Blocks & Settings
          • Columns
          • Text
          • Image
          • Button
          • Optin Fields
            • Email
            • Phone
            • Dropdown select
            • Datetime
            • Radio button/ Checkbox
            • Privacy Notice
          • Yes/No
          • Count down
          • Video
          • Coupon Wheel
          • Spacer
          • Divider
          • Icon
          • HTML
          • Slide show
          • Group
          • Rating
          • Table
          • Shake and Win
          • Lucky gift box
          • OTP Verification
      • Layers
      • Live Preview
    • Email Template
      • Control Toolbar
      • Settings
        • Email Template Settings
          • Basic
          • Advanced
        • Blocks & Settings
          • Columns
          • Text
          • Image
          • Button
          • Count down
          • Spacer
          • Divider
          • Icon
          • HTML
          • Menu
          • Table
          • Unsubscribe
          • Group
      • Layers
      • Live Preview
    • Link Management
  • Insights
    • Quick start guide
    • Data Source
      • Create a data source
    • Reports
      • Create reports
        • About reports
        • Build, stylize, and add data to reports
          • Set report date ranges
          • Add and configure components
          • Chart references
            • Area chart reference
            • Bar chart reference
            • Bullet chart reference
            • Geo chart reference
            • Line chart reference
            • Pie chart reference
            • Pivot table reference
            • Scatter and bubble chart reference
            • Scorecard reference
            • Table reference
            • Time series reference
            • Tree map reference
          • Add reference lines to charts
          • Add and edit data
          • Add pages and report navigation
          • Report layout options
          • Work with color
          • Add text, images, lines, and shapes
          • Arrange and distribute components
          • Use the Insights Report Editor
        • Copy a report
        • Delete a report
        • Tutorial: Create a new report
      • Filter your data
        • About filters
        • Create, edit, and manage filters
        • Configure filter conditions
        • Filter examples
      • Make reports interactive
        • Let your viewers control the date range
        • About controls
        • Use controls across data sources
        • Add chart interaction filters
        • Let viewers drill down into your data
        • Link to a page
        • Export data from a chart
        • Embed external content in reports
        • Let viewers select the fields in charts
      • Blend multiple data sources in a chart
        • About data blending
        • Blend data in charts
        • Filter blended data
        • Change the date range for blended data
        • Use blending to reaggregate data
      • Glossary
        • Aggregation
        • Blended data
        • Chart
        • Component
        • Component, report-level
        • Connector
        • Data set
        • Data source
        • Dimension
        • Edit mode
        • Field
        • Join key
        • Metric
        • Owner
        • Page
        • Properties panel
        • Report
        • View mode
        • Viewer (user type)
  • DATAFLOWS
    • Dataflows
      • Creating a Dataflows
        • Action node
          • Add data
          • Delay
          • Filter
          • Script
          • SQL
          • Branch
          • Add column
          • Aggregate
          • Select column
          • Join
          • Bin
          • Merge Columns
          • Split Columns
          • Group
          • Union Rows
          • Save data
        • Destination channel
          • Send mail
          • Export to Google Sheet
          • Google Audience
          • Facebook Audience
          • Big Query
          • Postgre
          • Export to CDP 356 Events
          • Export to CDP 365 Business Object
          • Export to CDP 365 Segment
      • Work with Dataflow
      • Status of Dataflow
    • Data Destinations
      • Create a Data Destination
      • View/Edit a Data Destination
      • Data Destinations Connectors
        • Amazon S3
        • CDP Coupon
        • Google Audiences
        • CDP Business Object
        • CDP Segment
        • CDP Event
        • Audience SaleForce Maketing Cloud
        • Google BigQuery
        • Facebook Audiences
        • Google Ads Audiences
        • Postgres
        • Send Mail
        • Google Sheet
    • Data Source
      • Create a Data Source
      • View/Edit a Data Source
      • Data Source Connectors
        • Google Sheets
        • Oracle
        • KiotViet
        • Elastic Search
        • Haravan
        • Tiki
        • Sapo
        • Lazada
        • Shopee
        • Fanpage Messages
        • Google Analytics
        • CDP ANTSOMI
        • Trello
        • Google Ads
        • Facebook Ads
        • Youtube
        • PostgreSQL
        • MySQL
        • File Upload (Big Table)
        • Business Object
        • JSON API
        • SQL Workspace
        • CDP 365 Segment's Members
        • Analytic Model Antsomi
        • SQL Server
  • PORTAL SETTINGS
    • Overview
    • Data Protect
    • General Setting
      • Roles
    • Accounts
    • IP Restriction
    • Menus
    • Account Sharing
  • Annotation
    • Conditions
    • Time range
    • Data Format
    • Function List
  • TICKET MANAGEMENT
    • Tickets
  • Use cases
    • Personas
      • Visitors/Customers
        • How to add new and update Customers to CDP
        • How to create a Customer Custom Attribute
        • How to create a Customer Computed-Last Attribute
      • Segments
        • How to export .xml file?
        • How to create a Dynamic Segment
        • How to create a Static Segment (Matching file)
        • How to create a new segment?
        • Create a segment for Cart Abandonment
        • Set up a "Segment" containing emails to be excluded before sending mail
      • How to create "Attribute" for "Customer"/"Visitors"?
    • Data Hub
      • Event Sources
        • Set up Event Tracking code to track events into CDP
        • Set up Event Tracking code to track events into CDP
        • How to check data after you track an event on the website and app?
      • Business Objects
        • How to create "Data Source" connected with the "Data Object" of CDP 365
        • How to create a Collection
        • How to create "Custom Attributes" with Input via UI feature
    • Marketing Hub
      • How do I set up an advertising SMS campaign using the SMS FPT destination?
      • Strengthening User Identity Verification with OTP Authentication
      • How to use Line Message Templates?
      • How to set up a Webhook Journey
      • How to set up a campaign using SMS channel
      • How to setup a campaign using App Notification channel?
      • How to configure a smart inbox campaign? (In Progress...)
      • How to calculate conversion goals for a journey?
      • How to recommend products using the Parent-Child Algorithm
      • How to create Branded domain in Link Management?
      • How to send messages using OneWay SMS destination?
      • How to explore Journeys?
      • How to test a Journey using Email channel?
      • How to send marketing email using Mailgun Destination?
      • How to send marketing SMS using One Way SMS Destination?
      • How to create Web Personalization using Media JSON in CDP 365?
      • How to create an Email Customer Journey?
      • How to create a Web personalization journey?
      • How to create a "Trello Card" using CDP 365
      • How to display template on website using CDP 365
      • Initialize customer after submitting form
      • How to create Customer Journey?
      • How to set up some Inline templates
      • How to monitor campaign performance?
      • How to create "Promotion"/"Coupon" by uploading files?
      • How to create Coupon from Magento or ERP system to CDP 365?
      • How to send "SMS Yondu" using CDP 365
      • How to send mail from email upload?
      • How to send "Zalo Notification Service" using CDP 365
      • How to send message using "FB Messenger" in CDP
      • How to Send SMS using "Klasik SMS" in CDP 365
      • How to push notification "Firebase Cloud Messaging" using CDP 365
      • How to Send email using "Amazon SES" in CDP 365
      • How to define zone in website for improve web personalize performance
      • How to Send "Viber Yondu" using CDP 365
      • How to send "Infobip Viber" using CDP 365
      • How to send "eSMS Viber" using CDP 365
      • How to create a new "Display Zone"
      • How to Send SMS using "Telerivet SMS" in CDP 365
      • How to push notification using "Onesignal (App Push)" in CDP 365
      • How to push notification using Antsomi Web Push in CDP 365?
      • How to Send email using "SendGrid" in CDP 365
      • How to send email using "Mailjet" in CDP 365?
      • How to send WhatsApp message in CDP 365?
      • How to send Telegram message in CDP 365?
      • How to track click metric of OneSignal App Push
      • How to send Ticket from CDP 365 to Antbuddy?
    • Insights
      • How to create "Report" with “Journey performance” data source?
      • How to create a new "Data sources"?
    • Dataflows
      • How can I export data from CDP 365 to Google Sheets?
      • Collect data from TikTok Form to CDP 365
      • How to create a Segment Data Source
      • How to create a report from multiple data sources?
      • How to send messages using "Facebook Messenger" in CDP 365
      • How to create a new Google Analytics data source?
      • How to create Facebook Ads data source?
      • How to create Google Ads data source?
      • How to create a "Destination Channel" in "Dataflows"?
      • Set up Dataflows to push data to a Business Object in CDP 365
      • Set up Dataflows to push data to Google and Facebook Audiences
      • How to upload segment data into Google Ad Manager (GAM) 360 using Dataflow?
    • Portal Settings
      • How to set up two-step authentication?
Powered by GitBook
On this page
  • Content
  • Icons
  • Advanced
  • Icon Styling
  • Container Styling
  • Display Condition

Was this helpful?

  1. Marketing Hub
  2. Media Template
  3. Settings
  4. Blocks & Settings

Icon

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

PreviousDividerNextHTML

Last updated 7 months ago

Was this helpful?

Content

Icons

Icon Selection

You can search and select the icon

Align

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

Size

It allows you to change the size of the icon in PX

Icon Color

It allows you to change the color of the icon

Background color

It allows you to change the background color of the icon

Link

You can enter the URL, select Open In New Window or Add "No Follow"

Advanced

Icon Styling

Background Spacing

You can change the background of the icon

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

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 Styles

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 ịn 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 icon

  • 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