Skip to main content

Configure rows and columns in HTML templates

Zuora

Configure rows and columns in HTML templates

The HTML Templates feature is generally available for invoices as of Zuora Release 2022.02.R2, and for credit and debit memos as of Zuora Release 2022.05.R1.

After an HTML template is created, you can configure rows and columns in the template to organize the content.

To configure rows and columns in an HTML template through the Zuora UI, perform the following steps:

  1. Click your username at the top right and navigate to Billing > Manage Billing Document Configuration.

  2. On the Manage Invoice, Credit/Debit Memo Templates tab, click the HTML template that you want to add rows and columns.
    The selected template is displayed in the online HTML template editor.

  3. In the Content tab of the HTML template editor, drag the Columns component into the HTML template.
    A Column block is displayed in the HTML template.

  4. Click the Column block in the HTML template.
    The Row panel is displayed on the right of the template editor. 

  5. In the Row panel, configure the following information to customize the general layout and style of the selected row and its columns:

    1. Click Delete and Duplicate to manage the number of rows included in the template.

    2. In the Columns section, select a column layout from the listed default layout examples.

    3. In the Column Properties section, click Add Column and Remove Column to manage the number of columns in the current row, and configure the background color, padding, and border for each column.
      If you configure both the row settings and column settings, the column settings override the corresponding row settings.

    4. In the Row Properties section, configure the row background color, content background color, content alignment, background image, and padding for the entire row.
      If a row contains multiple columns, all columns use the row configuration.

You can also use the Blocks tab to add rows to an HTML template.

  1. In the Blocks tab, click Blank > All to view all default blank rows.

  2. Drag a default row component into the HTML template.
    A Row block is displayed in the HTML template.

  3. Click the Row block in the HTML template.
    The Row panel is displayed on the right of the template editor. 

  4. In the Row panel, configure the general layout and style of the selected row and its columns.

The existing default rows support four columns at most.