Using the SendGrid Design Library
  • 17 Oct 2023
  • 2 Minutes to read
  • Dark
    Light
  • PDF

Using the SendGrid Design Library

  • Dark
    Light
  • PDF

Article summary

IMPORTANT NOTE: These action items are done in the SendGrid interface. Use the credentials used to activate the integration to access SendGrid at app.sendgrid.com

To create a new design, you can either build one from a blank template or duplicate an existing template.

Building from a blank template

  1. Navigate to the Design Library in the SendGrid App.
  2. When the Design Library loads, you will be taken to the Your Email Designs tab.
  3. You will see a large Create Email Design button on the page. Click this button.
  4. After clicking Create Email Design, a new window will open where you can select which editor you wish to use—the Design Editor or the Code Editor.

A window with two large boxes displaying your choice of editor, the Design Editor or Code Editor

The Design Editor allows building and editing an email template with drag-and-drop modules that require no coding. The Code Editor is appropriate for customers who wish to build and edit templates by manipulating the HTML code directly. Once a design is created, changing the editor used for that design is impossible. However, if you choose the design editor, you'll still have HTML editing options, and with the code editor, you'll enjoy convenient visual tools like side-by-side code and preview panes.

Once you have selected an editor, the template will load in that editor, and you can begin working with your template.

IMPORTANT NOTE: Developers can programmatically upload a design using the POST /designs API endpoint.

Duplicating an existing design

You can create a new template by duplicating one of your existing templates or duplicating one of the Twilio SendGrid pre-built designs.

  1. Select the Your Email Designs tab from the Design Library to duplicate one of your existing designs. Select SendGrid Email Designs to duplicate a Twilio SendGrid pre-built design.The Design Library tabs to select between your designs and the pre-built designs
  2. Click the action menu at the bottom of the design you want to copy and select Duplicate.The design duplication menus highlighted in the Design Library
  3. After clicking Duplicate, a new window will open where you can select which editor you wish to use—the Design Editor or the Code Editor.
  4. Once you have selected an editor, the template will load in that editor, and you can begin working with your copy of the template.

Duplicated designs will have "Duplicate:" prepended to the Email Design Name by default. This text will help you differentiate a duplicate from the original design until you change your name.

Developers can use the POST /designs/{id} API endpoint to programmatically duplicate one of their designs and the POST /designs/pre-builts/{id} API endpoint to duplicate one of the Twilio SendGrid designs.

Editing a design

You can edit any of the designs in the Your Email Designs tab. You cannot edit one of the pre-built designs directly; you must duplicate the template first and change your copy.

  1. Navigate to the design you want to edit.
  2. Click the action menu at the bottom of the design you want to modify and select Edit.The Edit menu item button below a design
  3. The template will open in the editor originally used to create the campaign—the Design Editor or the Code Editor.

After creating a design, you cannot switch between the design and code editor to modify that template. If you wish to switch editors, you can duplicate the design and select the alternate editor during duplication.


Was this article helpful?