Creating custom layouts to improve agent workflow

<body>
<p id="docs-hc-snippet" style="display: none;">Ticket layouts control the look and feel of the ticket interface. Zendesk comes with a default ticket layout that you can use immediately out-of-the-box. You can also use layout builder to create your own custom layouts to use with tickets. With custom layouts, you can optimize the ticket interface to maximize your agents’ efficiency. For more information, seeAbout custom layouts.</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_pee">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_pe">
<table>
<tbody>
<tr>
<td>
<strong>Support</strong>
</td>
<td>Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>

<div class="body">

<div class="note fastpath">
<span class="fastpathtitle">Location: </span> <span class="ph">Admin Center &gt; Workspaces &gt; Agent tools &gt; Layouts</span>
</div>
<div class="note attention">
<span class="attentiontitle"></span> Enterprise plans can have multiple layouts active at the same time for
different types of tickets. Professional plans can have only one active layout. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447690090138#topic_bt5_nq1_4bc" target="_blank">Plan requirements for custom layouts</a>.</div>
<p class="p" dir="ltr">Ticket layouts control the look and feel of the ticket interface. Zendesk comes
with a default ticket layout that you can use immediately out-of-the-box. You can also use
layout builder to create your own custom layouts to use with tickets. With custom layouts, you
can optimize the ticket interface to maximize your agents’ efficiency. For more information,
see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447690090138" target="_blank">About custom layouts</a>.</p>
<p class="p" dir="ltr">This article describes how to create custom layouts for your tickets. Topics
include: </p>
<ul class="ul" id="topic-1__ul_mct_b21_bhb">
<li class="li"><a class="xref" href="#topic_eyp_5rl_znb">Creating a new layout</a></li>
<li class="li"><a class="xref" href="#topic_tb4_tcv_qwb">Adding and removing components in a layout</a></li>
<li class="li"><a class="xref" href="#topic_nrx_tcv_qwb">Resizing and moving components in a layout</a></li>
<li class="li"><a class="xref" href="#topic_y3x_vcv_qwb">Stacking components in a layout</a></li>
<li class="li"><a class="xref" href="#topic_cck_xsh_xwb">Undoing and redoing layout changes</a></li>
<li class="li"><a class="xref" href="#topic_zyc_xcv_qwb">Managing components in the context panel</a></li>
</ul>
<p class="p"><strong class="ph b">Related articles</strong></p>
<ul class="ul" id="topic-1__ul_n4m_z4n_qwb">
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447690090138" target="_blank">About custom layouts with layout builder</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447837810714" target="_blank">Viewing and managing custom layouts</a></li>
<li class="li"><a class="xref" href="https://support.zendesk.com/hc/en-us/articles/6070249202202" target="_blank">Configuring the conversation flow and composer location in
tickets</a></li>
</ul>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_eyp_5rl_znb">
<h2 class="title topictitle2" id="ariaid-title2">Creating a new layout</h2>
<div class="body">
<p class="p">You can create a new layout by using a layout template or editing an existing layout.
You must be an admin to create custom layouts.</p>
<p class="p"><strong class="ph b">To create a new layout</strong></p>
<ol class="ol" id="topic_eyp_5rl_znb__ol_dfg_vkp_qwb">
<li class="li">
<span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4581766374554#topic_hfg_dyz_1hb" target="_blank">Admin Center</a>, click <img class="image" id="topic_eyp_5rl_znb__d8e1165" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ac_workspaces_icon.png">
<strong class="ph b">Workspaces</strong> in the sidebar, then select <strong class="ph b">Agent tools &gt; Layouts</strong>.</span><p class="p">A list of layouts appears.</p>
<p class="p"><img class="image img-screenshot" id="topic_eyp_5rl_znb__image_psr_4lp_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/custom_layouts_list2.png" width="600"></p>
</li>
<li class="li">Click <strong class="ph b">Create layout</strong>.<p class="p">A new layout appears in layout builder with a default set
of components.</p>
</li>
<li class="li">Enter a <strong class="ph b">Name</strong> and <strong class="ph b">Description</strong> for your layout.</li>
<li class="li">If you want to make this new layout the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447837810714#topic_dl4_nmp_qwb" target="_blank">default layout</a>, click <strong class="ph b">Set as default
layout</strong>.<p class="p">This will apply the custom layout for all your agents. Otherwise, leave it
unchecked. </p>
<p class="p"><img class="image img-screenshot" id="topic_eyp_5rl_znb__image_amf_jcv_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/custom_layout_set_default.png" width="450"></p>
</li>
<li class="li">Click <strong class="ph b">Customize layout</strong>.<p class="p">To customize your layout, you can:</p>
<ul class="ul" id="topic_eyp_5rl_znb__ul_srj_knd_rwb">
<li class="li">Add or remove components. See <a class="xref" href="#topic_tb4_tcv_qwb">Adding and removing components in a layout</a>.</li>
<li class="li">Resize and move components. See <a class="xref" href="#topic_nrx_tcv_qwb">Resizing and moving components in a layout</a>.</li>
<li class="li">Stack components. See <a class="xref" href="#topic_y3x_vcv_qwb">Stacking components in a layout</a>.</li>
<li class="li">Move components to the context panel. See <a class="xref" href="#topic_zyc_xcv_qwb">Managing components in the context panel</a>.</li>
</ul>
</li>
<li class="li">When you're finished, click <strong class="ph b">Preview</strong> to see how your layout looks with real ticket
data.</li>
<li class="li">When you're done creating your layout, <strong class="ph b">Save</strong> your changes.<p class="p">If you want to set a
custom layout for a specific brand, group of agents, set of ticket forms, and so
on, you can assign it to a <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408833498906-" target="_blank">contextual workspace</a>.</p>
</li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_tb4_tcv_qwb">
<h2 class="title topictitle2" id="ariaid-title3">Adding and removing components in a layout</h2>
<div class="body">
<p class="p" dir="ltr">As you create your new layout, you can choose which components to include.
Components can include <em class="ph i">system</em> components and <em class="ph i">optional</em> components. </p>
<ul class="ul" id="topic_tb4_tcv_qwb__ul_ozd_c2v_qwb">
<li class="li" dir="ltr">
<strong class="ph b">System components</strong>: Components that are integral to the ticket layout
and cannot be removed, but they can be moved to the context panel. This includes the
conversation thread, customer context, and ticket fields. </li>
<li class="li" dir="ltr">
<strong class="ph b">Optional components</strong>: Components you can include in a layout, but are
not required. This includes Zendesk apps, such as Knowledge and side conversations, or
third-party applications. You can include these optional components anywhere in the
layout, inside or outside of the context panel.<p class="p">You can use layout builder to remove third-party apps. To remove Zendesk apps, you need to turn them off using <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408828503450" target="_blank">context panel configuration settings</a> in Admin Center, which
will remove them from all layouts in your account.</p>
</li>
</ul>
<p class="p" dir="ltr">When you open the layout builder, the Components area on the right side of your
screen represents all the components available for you to create custom layouts .</p>
<p class="p"><img class="image img-screenshot" id="topic_tb4_tcv_qwb__image_ncy_l2v_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/layout_builder_component_area.png" width="600"></p>
<p class="p"><strong class="ph b">To add components to a layout</strong></p>
<ol class="ol" id="topic_tb4_tcv_qwb__ol_vsb_s2v_qwb">
<li class="li" dir="ltr">Open a layout for <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447837810714#topic_rsb_zlp_qwb" target="_blank">editing</a>.</li>
<li class="li">Refer to the <strong class="ph b">Components</strong> area of layout builder.<p class="p">This area shows components you
can add to the layout.</p>
<p class="p"><img class="image img-screenshot" id="topic_tb4_tcv_qwb__image_gn5_bb1_jzb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/custom_layout_add_components2.png" width="250"></p>
</li>
<li class="li">Select the component you want to add, then drag and drop it into the layout. <p class="p" dir="ltr">You can drag the component into an empty section of the layout to add it, or
you can drag it over an existing component to replace it.</p>
<p class="p" dir="ltr">You can also
click the Add icon (+) next to the component to add it. </p>
</li>
<li class="li">After you add the component, you can make changes to the component by rearranging it
within the layout, resizing it, or making other updates. <p class="p" dir="ltr">See <a class="xref" href="#topic_nrx_tcv_qwb">Resizing and moving components in a layout</a>.</p>
</li>
<li class="li">When you’re finished, <strong class="ph b">Preview</strong> the layout and <strong class="ph b">Save</strong> your changes. </li>
</ol>
<p class="p"><strong class="ph b">To remove a component</strong></p>
<p class="p" dir="ltr">To free up room in your layout, you can resize or remove components. You cannot
remove system components from a ticket layout, but you can move them into the context panel. </p>
<ol class="ol" id="topic_tb4_tcv_qwb__ol_gwm_qgv_qwb">
<li class="li" dir="ltr">Open a layout for <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447837810714#topic_rsb_zlp_qwb" target="_blank">editing</a>.</li>
<li class="li">In the layout canvas, select the component you want to remove, then click the remove
component icon (<img class="image" id="topic_tb4_tcv_qwb__image_pw3_ygv_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_remove_component.png">). <p class="p"><img class="image img-screenshot" id="topic_tb4_tcv_qwb__image_gdg_ghv_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/layout_remove_component.png" width="300"></p>
<p class="p">You can also
select the component, then drag to the bottom of the layout to remove it. </p>
<p class="p"><img class="image img-screenshot" id="topic_tb4_tcv_qwb__image_e5x_j1w_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/layout_remove_component.gif" width="500"></p>
</li>
<li class="li">Confirm the deletion, then <strong class="ph b">Save</strong> your changes. </li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title4" class="topic nested1" id="topic_nrx_tcv_qwb">
<h2 class="title topictitle2" id="ariaid-title4">Resizing and moving components in a layout</h2>
<div class="body">
<p class="p">After you’ve added components to your layout, you can fine-tune the layout by making
adjustments. </p>
<p class="p"><strong class="ph b">To adjust components in a layout</strong></p>
<ol class="ol" id="topic_nrx_tcv_qwb__ol_rlk_2bw_qwb">
<li class="li" dir="ltr">Open a layout for <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447837810714#topic_rsb_zlp_qwb" target="_blank">editing</a>.</li>
<li class="li">Select a component in the canvas area of the layout. <p class="p">A list of actions you can take
on the component appears on the right side of the layout builder. See <a class="xref" href="#topic_fm4_5bw_qwb">Component actions</a>. </p>
<p class="p"><img class="image img-screenshot" id="topic_nrx_tcv_qwb__image_kmx_ccw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_component_actions.png" width="550"></p>
</li>
<li class="li">Click an action to change your component, including moving it, resizing it, or replacing
it. <p class="p">You can also hover your mouse pointer over a component, then drag a resize handle
(<img class="image" id="topic_nrx_tcv_qwb__image_ngs_rsk_rwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/layout_resize_handle.png">) to resize it.</p>
</li>
<li class="li">When you’ve finished editing components, <strong class="ph b">Save</strong> your changes. </li>
</ol>
</div>
<div aria-labelledby="ariaid-title5" class="topic nested2" id="topic_fm4_5bw_qwb">
<h3 class="title topictitle3" id="ariaid-title5">Component actions</h3>
<div class="body">
<p class="p" dir="ltr">When you select a component, these are the actions you can take:</p>
<div class="tablenoborder">
<table border="1" cellpadding="4" cellspacing="0" class="table" frame="border" id="topic_fm4_5bw_qwb__table_f2r_ncw_qwb" rules="all" summary="">
<colgroup>
<col style="width:14.285714285714285%">
<col style="width:26%">
<col style="width:59.71428571428571%">
</colgroup>
<tbody class="tbody">
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><strong class="ph b">Icon </strong></td>
<td class="entry nocellnorowborder" dir="ltr"><strong class="ph b">Description</strong></td>
<td class="entry cell-norowborder" dir="ltr"><strong class="ph b">Actions</strong></td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_u52_ycw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_move_left.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Move left</td>
<td class="entry cell-norowborder" dir="ltr">Move the component to the left.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_r2m_jdw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_move_right.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Move right</td>
<td class="entry cell-norowborder" dir="ltr">Move the component to the right.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_wxc_ldw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_move_down.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Move down</td>
<td class="entry cell-norowborder" dir="ltr">Move the component down. Available for <a class="xref" href="#topic_y3x_vcv_qwb">stacked</a> components.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_jgr_mdw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_move_up.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Move up</td>
<td class="entry cell-norowborder" dir="ltr">Move the component up. Available for <a class="xref" href="#topic_y3x_vcv_qwb">stacked</a> components.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_nsw_rdw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_increase_width.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Increase width</td>
<td class="entry cell-norowborder" dir="ltr">Increase the component width.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_fff_sdw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_decrease_width.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Decrease width</td>
<td class="entry cell-norowborder" dir="ltr">Decrease the component width. </td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_nmh_5dw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_increase_height.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Increase height</td>
<td class="entry cell-norowborder" dir="ltr">Increase the component height.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_u4z_vdw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_decrease_height.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Decrease height</td>
<td class="entry cell-norowborder" dir="ltr">Decrease the component height.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_ytx_xdw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_replace_component.png"></td>
<td class="entry nocellnorowborder" dir="ltr">Replace component</td>
<td class="entry cell-norowborder" dir="ltr">Select the component you want to replace, then select a new
component from the Replace component drop-down.</td>
</tr>
<tr class="row">
<td class="entry nocellnorowborder"><img class="image" id="topic_fm4_5bw_qwb__image_wfn_rb1_jzb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_move_to_context_panel.png" width="18"></td>
<td class="entry nocellnorowborder">Move to context panel</td>
<td class="entry cell-norowborder">You cannot remove system components but you can move them to the context
panel.</td>
</tr>
<tr class="row">
<td class="entry row-nocellborder" dir="ltr"><img class="image" id="topic_fm4_5bw_qwb__image_hdp_zdw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_remove_component.png"></td>
<td class="entry row-nocellborder" dir="ltr">Remove component</td>
<td class="entry cellrowborder">
<p class="p">Remove the component. </p>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title6" class="topic nested1" id="topic_y3x_vcv_qwb">
<h2 class="title topictitle2" id="ariaid-title6">Stacking components in a layout</h2>
<div class="body">
<p class="p">You can save layout space by stacking one component under another. You can have two
components in a stack. </p>
<p class="p"><img class="image img-screenshot" id="topic_y3x_vcv_qwb__image_bpm_j2w_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/stacking_components.gif" width="600"></p>
<p class="p"><strong class="ph b">To stack a component</strong></p>
<ol class="ol" id="topic_y3x_vcv_qwb__ol_mzy_1fw_qwb">
<li class="li" dir="ltr">Open a layout for <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447837810714#topic_rsb_zlp_qwb" target="_blank">editing</a>.</li>
<li class="li" dir="ltr">Select the component you want to stack. </li>
<li class="li" dir="ltr">Drag the component below or above another component in the layout until a blue
target icon (<img class="image" id="topic_y3x_vcv_qwb__image_t15_v5k_rwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_blue_target.png"> ) appears. </li>
<li class="li" dir="ltr">Release the component. <p class="p">The components are stacked one under the
other</p>
<p class="p"><img class="image img-screenshot" id="topic_y3x_vcv_qwb__image_tvv_ffw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/stacked_components2.png" width="600"></p>
<p class="p" dir="ltr">When
a component is stacked, you can select the component and use the up or down arrows to
increase or decrease the component height. You can also use the double up or down arrows
to reorder components in the stack.</p>
<p class="p"><img class="image img-screenshot" id="topic_y3x_vcv_qwb__image_anw_zfw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/stacking_actions2.png" width="300"></p>
</li>
<li class="li">
<strong class="ph b">Save</strong> your changes.</li>
</ol>
<p class="p"><strong class="ph b">To unstack a component</strong></p>
<ol class="ol" id="topic_y3x_vcv_qwb__ol_vfp_2gw_qwb">
<li class="li" dir="ltr">Open a layout for <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/5447837810714#topic_rsb_zlp_qwb" target="_blank">editing</a>.</li>
<li class="li">Select a component in a stack. </li>
<li class="li">Drag the component to the left or right of the stack until a blue target icon (<img class="image" id="topic_y3x_vcv_qwb__image_pkd_z5k_rwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_blue_target.png">) appears. </li>
<li class="li">Release the component. </li>
<li class="li">
<strong class="ph b">Save</strong> your changes.</li>
</ol>
</div>
</div>
<div aria-labelledby="ariaid-title7" class="topic nested1" id="topic_cck_xsh_xwb">
<h2 class="title topictitle2" id="ariaid-title7">Undoing and redoing layout changes</h2>
<div class="body">
<p class="p" dir="ltr">As you are creating your layout, you can undo a change you made. For example, if
you removed or swapped a component by mistake. You can undo and redo multiple changes, up
until the point where you first started editing the layout. After you save the layout, the
undo and redo stack is cleared until you make another change. </p>
<p class="p"><strong class="ph b">To undo a change</strong></p>
<ul class="ul" id="topic_cck_xsh_xwb__ul_wbd_cth_xwb">
<li class="li">Click the undo icon at the top of the layout.<p class="p"><img class="image img-screenshot" id="topic_cck_xsh_xwb__image_amm_2th_xwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/layout_builder_undo.png" width="300"></p>
</li>
</ul>
<p class="p"><strong class="ph b">To redo a change</strong></p>
<ul class="ul" id="topic_cck_xsh_xwb__ul_jkz_4th_xwb">
<li class="li">Click the redo icon at the top of the layout.<p class="p"><img class="image img-screenshot" id="topic_cck_xsh_xwb__image_kkz_4th_xwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/layout_builder_redo.png" width="300"></p>
</li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title8" class="topic nested1" id="topic_zyc_xcv_qwb">
<h2 class="title topictitle2" id="ariaid-title8">Managing components in the context panel</h2>
<div class="body">
<p class="p">When you create a layout, in addition to managing components in the main ticket workspace,
you can also use layout builder to manage components in the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408836526362" target="_blank">context panel</a>. For example, you can move an application out of the
context panel and into the main ticket workspace to make it easier for agents to access.
Alternatively, you can move components into the context panel or remove them completely.</p>
<div class="note note">
<span class="notetitle">Note:</span> To completely remove standard Zendesk components (Knowledge, Side conversations, and All
Apps), you must configure context panel settings in Admin Center. See <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408828503450" target="_blank">Configuring the context panel</a>. </div>
<p class="p"><strong class="ph b">To manage components in the context panel</strong></p>
<ol class="ol" id="topic_zyc_xcv_qwb__ol_ysf_ygw_qwb">
<li class="li">
<span class="ph">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4581766374554#topic_hfg_dyz_1hb" target="_blank">Admin Center</a>, click <img class="image" id="topic_zyc_xcv_qwb__d8e1165" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/ac_workspaces_icon.png">
<strong class="ph b">Workspaces</strong> in the sidebar, then select <strong class="ph b">Agent tools &gt; Layouts</strong>.</span><p class="p">A list of layouts appears.</p>
</li>
<li class="li">Click the options menu icon (<img class="image" id="topic_zyc_xcv_qwb__image_sjl_dnp_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/uc_options_icon.png">) next to the layout you want to edit, then select <strong class="ph b">Edit</strong>
from the options menu.<p class="p">The layout opens in layout builder.</p>
<img class="image img-screenshot" id="topic_zyc_xcv_qwb__image_lml_zhw_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/layout_builder_edit_context_panel2.png" width="700">
</li>
<li class="li">Click <strong class="ph b">Customize layout</strong>.</li>
<li class="li">In the <strong class="ph b">Components</strong> area of the layout builder, click <strong class="ph b">Manage context panel.
</strong><p class="p" dir="ltr">Layout details for the context panel appear. </p>
<img class="image img-screenshot" id="topic_zyc_xcv_qwb__image_fkl_33w_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/layout_context_panel_edit2.png" width="250">
</li>
<li class="li">Make any of the following layout changes:<ul class="ul" id="topic_zyc_xcv_qwb__ul_h2v_q3w_qwb">
<li class="li" dir="ltr">To add a component to the context panel, click + <strong class="ph b">Add component</strong>,
then select a component from the drop-down menu. </li>
<li class="li">To move a component out of the context panel and into the main layout, click the
<strong class="ph b">Move to layout</strong> icon (<img class="image" id="topic_zyc_xcv_qwb__image_pvf_wc1_jzb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_move_to_layout.png" width="18">)</li>
<li class="li">To move a component out of the main layout and into the context panel, select the
component in the main layout, then click the <strong class="ph b">Move to context panel</strong>icon (<img class="image" id="topic_zyc_xcv_qwb__image_s1z_hd1_jzb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_move_to_context_panel.png" width="18">). </li>
<li class="li" dir="ltr">To select which component appears when you first open the context panel,
select a component from the <strong class="ph b">Default selection</strong> menu. </li>
<li class="li" dir="ltr">The <strong class="ph b">All components</strong> list determines the order components appear in
the context panel sidebar. To reorder the components, position your cursor over the
grabber at the end of the component you want to reorder, then drag the component to
another position within the component list.</li>
<li class="li" dir="ltr">To completely remove a component, select the component and click the
remove icon (<img class="image" id="topic_zyc_xcv_qwb__image_fmg_53w_qwb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/builder_icon_remove_component.png">). </li>
</ul>
</li>
<li class="li">
<strong class="ph b">Save</strong> your changes. </li>
</ol>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/5447837546138",
"url": "https://support.zendesk.com/hc/en-us/articles/5447837546138",
"headline": "Creating custom layouts to improve agent workflow",
"description": "You can create and customize ticket layouts by adding, removing, resizing, moving, and stacking components to optimize the ticket interface for agents, including managing components in the context panel.",
"articleSection": "Ticket customization",
"datePublished": "2023-02-27T18:57:24+00:00",
"dateModified": "2026-04-30T21:51:48.037373+00:00",
"inLanguage": "en-US",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/5447837546138"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
}
}</script><script id="fast-path-script">
//<![CDATA[
const fast_path_style = document.createElement('style');
fast_path_style.innerHTML = `#article-body .fastpath{font-size:.9em;background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 8px;margin-bottom:16px}#article-body .fastpath::before{content:none!important}`;
document.head.appendChild(fast_path_style);
//]]>
</script>
</body>