color

---

The color property displays a color picker in the Page Builder UI and allows the user to select a color as a hex string (e.g., #ff0000). It maps directly to an HTML <input type="color"> field and is useful for theme control, styling, or branding customization.

color Definition

{
  "code": "heading_color",
  "prompt": "Heading Color",
  "type": "color",
  "required": true
}

Supported Fields

Field	Type	Required	Description
code	string	Yes	Unique key used in l.settings:instance.
prompt	string	Yes	Label shown in the admin interface.
type	string	Yes	Must be "color".
required	boolean	Yes	If true, the user must select a color before saving.
preview_property_selector	string	Yes	Target element for PageBuilder Inspector.
visibility_conditions	object	Yes	Shows/hides field based on logic.

l.settings:instance Structure

:heading_color:value=#ff0000

The value is a hex code string.

Template Usage

<h1 style="color: &mvte:instance:heading_color:value;">Heading</h1>

Use the value directly as a CSS color property in inline styles or class-based rendering.

<mvt:if expr="l.settings:instance:heading_color:value EQ '#000000'">
  <p>Black is selected</p>
</mvt:if>

JavaScript Access

<script>
  var instance = <mvt:eval expr="miva_json_encode( l.settings:instance, '' )" />;
  var color = instance.heading_color.value;
</script>

defaults Definition

To define a default selected color, use the defaults block:

"defaults": {
  "heading_color": {
    "value": "#ff0000"
  }
}

Best Practices

• Always treat the color value as a lowercase hex string (e.g., #ffffff).
• Use with textsettings to style font colors, backgrounds, or borders.
• Use a default value to ensure consistent styling even if the admin doesn’t configure the field.
• Don’t use for gradients or complex CSS values — this only supports single hex colors.

Complete Example

{
  "code": "background_color",
  "prompt": "Background Color",
  "type": "color",
  "required": true
}

Output

:background_color:value=#ffffff

Template

<div style="background-color: &mvte:instance:background_color:value;">
  Section Content
</div>