---
schema_version: "1"
id: 776f6b181d5da475c40f9ed0abf0d79e8ed9ea30934fb6925f41077ac86d3963
title: Design Your Widget
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/mktg/264-0-0/dato_visualize_widgets_design.md
canonical_url: https://help.salesforce.com/s/articleView?id=mktg.dato_visualize_widgets_design.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 291c1e8519c4f7812ff93fba1abe4e7fd9a8d7ebdb00e498ab5dfc3ff4cc5af6
description: The Design tab provides capabilities to further tailor the appearance of specific widgets on your page. You can make the widget stand out more by modifying the background and changing fonts. Widget design is based on your pre-determined page theme, so your page’s design is always cohesive and put together.
products:
  - Marketing
  - Marketing Cloud Intelligence
release: "264"
---
# Design Your Widget

The Design tab provides capabilities to further tailor the appearance of specific widgets on your page. You can make the widget stand out more by modifying the background and changing fonts. Widget design is based on your pre-determined page theme, so your page’s design is always cohesive and put together.

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
        <colgroup>
          <col style="width:50%">
          <col style="width:50%">
        </colgroup>
        <thead class="slds-text-title_caps ">
          <tr class="">
            <th scope="colgroup" class="slds-cell-wrap" colspan="2" style="vertical-align:top;" id="d59931e38">REQUIRED USER ROLE</th>
          </tr>
        </thead>
        <tbody>
          <tr class="">
            <td data-label="REQUIRED USER ROLE" class="slds-cell-wrap" style="vertical-align:top;" headers="d59931e38 ">To design your widget </td>

            <td class="slds-cell-wrap" style="vertical-align:top;" headers="d59931e38 ">Admin and Power User</td>

          </tr>
        </tbody>
      </table>

1. Go to the widget you’re designing. Make sure you’re in edit mode.
2. Select the **Design** tab. You can use these widget design options:
    
    <table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
            <colgroup>
              <col style="width:37.453183520599254%">
              <col style="width:62.546816479400746%">
            </colgroup>
            <tbody>
              <tr class="">
                <td class="slds-cell-wrap" style="vertical-align:top;">
                  <strong class="uicontrol">Display</strong>
                </td>

                <td class="slds-cell-wrap" style="vertical-align:top;">
                  <p>Define how widgets are displayed on the page. </p>
                  <ul>
                    <li><strong class="uicontrol">Hide in view mode</strong> — Toggle on to hide the widget when viewing
                      the page in view mode. Hidden widgets remain in the same place on the page but aren't
                      visible when in view mode. It’s recommended to place hidden widgets at the end of the
                      page to avoid empty space. </li>
                    <li><strong class="uicontrol">Position</strong> — Set the style of the widget’s layout. You can
                      choose from three types of styles: <ul>
                        <li><strong class="uicontrol">Fixed</strong> — Keeps the widget in the same place on the page. </li>
                        <li><strong class="uicontrol">Sticky</strong> — Fixes the widget to the top of the page, where it
                          remains when users scroll. </li>
                        <li><strong class="uicontrol">Float</strong> — Floats the widget on top of your existing widgets on
                          the page, where it remains when users scroll. </li>
                        <li><strong class="uicontrol">Size</strong> — Adjust the size of a widget by clicking and dragging
                          its edge. </li>
                      </ul>
                    </li>
                  </ul>
                </td>

              </tr>
              <tr class="">
                <td class="slds-cell-wrap" style="vertical-align:top;">
                  <strong class="uicontrol">Background</strong>
                </td>

                <td class="slds-cell-wrap" style="vertical-align:top;">Adjust the widget’s background display, such as the color, opacity, brightness, and
                  shape of the corners.</td>

              </tr>
              <tr class="">
                <td class="slds-cell-wrap" style="vertical-align:top;">
                  <strong class="uicontrol">Fonts</strong>
                </td>

                <td class="slds-cell-wrap" style="vertical-align:top;">Adjust the fonts featured in your widget, including for the headings and axis.
                </td>

              </tr>
              <tr class="">
                <td class="slds-cell-wrap" style="vertical-align:top;">
                  <strong class="uicontrol">Interactions</strong>
                </td>

                <td class="slds-cell-wrap" style="vertical-align:top;">
                  <p>Add extra configurations to the widget. The three options are: </p>
                  <ul>
                    <li><strong class="uicontrol">Drill Down</strong> — Allows your data to be viewed at a lower
                      granularity. </li>
                    <li><strong class="uicontrol">Highlighting Rules</strong> — Allows you to highlight values within
                      your widget. </li>
                    <li><strong class="uicontrol">Calendar Events Tags</strong> — Allows you to add an event label to
                      your widget to emphasize surges or drops in the data. For example, you can tag a huge
                      surge in sales during Black Friday as “Black Friday” on your graph. </li>
                  </ul>
                </td>

              </tr>
              <tr class="">
                <td class="slds-cell-wrap" style="vertical-align:top;">
                  <strong class="uicontrol">Advanced</strong>
                </td>

                <td class="slds-cell-wrap" style="vertical-align:top;">Add Custom Cascading Style Sheets (CSS) to your widget. </td>

              </tr>
            </tbody>
          </table>
3. Save your changes.