Hubspot Design Tools Email Template Modules Media Size Css

In the design manager tool, you can create custom coded modules to add advanced features to your blog, pages, or emails . Custom modules offer a wide range of functionalities so that content can be fully customized within the page, email, or blog editor . You can build custom modules from scratch or add pre-built modules from the HubSpot Marketplace.

Please note: creating modules requires knowledge of HTML, CSS, HubL, and the HubSpot design manager. HubSpot recommends working with a designer to create coded modules.

Create a new module

• In your HubSpot account, navigate to Marketing > Files and Templates > Design Tools.
• At the top of the finder, click theFile  dropdown menu and select New file .

• In the dialog box, click the What would you like to build today? dropdown menu and select Module .

• ClickNext.
• Select whether this module will be used in page templates, blog templates, and/oremail templates. Modules used in email templates cannot include CSS or JavaScript.

• Select whether this module will be a local moduleorglobal module. If you create aglobal module, editing this module's content will update every location where the module is used.
• Enter a file name for your module, then clickCreate.

Label your module

By default, the content editor will reference a module using the name it was given in the design manager. If you want your module to use a different name in the content editor, you can do so by entering a label.

Add fields to your module

Add fields to the module to set the module's content or styling and make it editable in the content editor. Learn more about available field types in our developer documentation.

• In the module inspector on the right, click theAdd fielddropdown menu in theFieldssection, then select afield to add to your module.

• Edit the name of your field by clicking the pencil icon  edit next to the field name. To edit the HubL variable name, make your changes in the HubL variable nametext field.

Add field default content

In theContent Optionssection, you can add default content that appears when the module is used in templates and content editors. The options for default content will differ depending on the field type.

In the example below, the field type is an image field, so the options for default content are selecting a default image and hiding size controls.

Set field editor options

In theEditor Optionssection, you can enable the following options for how users can edit the module in the content editor:

• Make this field required: the user will not be able to leave this field blank within the content editor.
• Prevent editing in content editors: the field content cannot be edited within the content editor; it is still editable at the template level. This option is not available forglobal modules, which cannot be edited on the page level.

• Tooltip help text: add help text to the field to give users context or instructions. This help text will appear in a tooltip when a user hovers over the field while editing.

  

• Inline help text: add help text to the field to give users context or instructions. This help text will appear below the field when a user is editing the module.

Set field display conditions

You can use field display conditions to set a module field to only appear if another field meets certain criteria.

• In the Display Conditions section, click theHubL variable dropdown menu to select a module field, then click theis not emptydropdown to choose the condition for that field.
• If you select the conditionis equal to, enter avalue or regex.

In the example below, display conditions are being set for an image field. The condition is that the value in a text field named image_title must be equal to Headshot in order for the image field to appear in the module.

The display conditions will be automatically enabled once you've set a condition. To disable the display conditions, click the toggle switchon the right ofDisplay Conditions.

Set field repeater options

You can set repeater options for your field in the Repeater Options section. Repeaters are fields and groups that can create multiple objects and display them using a for loop.

• In the Repeater options section, select aminimumand/or maximum  number of required instances of this field.
• You can also choose to set adefault object count, which will be the number of instances of the field that will appear by default in the module.
  

In the example below, the image field is being set up as an image slider. The object count limits are set so a minimum of3image fields will appear in the module, up to a maximum of5 image fields. A user will see4image fields appear in the module by default, and can choose to add one more image field or remove one existing image field.

The repeater options will be automatically enabled once you've modified one of the options. To disable the repeater options, click the toggle switchon the right ofRepeater Options.

Group module fields

After creating fields, you can group up to 4 of them together to keep your fields organized by relevance. Field groups can be used to build out custom field logic. Learn more about module field groups.

To group module fields together:

• Click Group in the right sidebar of the module editor.
• Select the fields that you want to group together.
• ClickCreate group.

Copy and paste your field snippets

• When you're ready to incorporate one of your custom fields into your module, copy and paste the field snippet into the module'sHTML + HubLeditor.
  • If you're in the field inspector, click C opy snippeton the right of the field'sHubL variable name.
  • If you're in the module inspector, hover over the field and click theActions dropdown, then selectCopy snippet.
• Click into the location you'd like to add the field in theHTML + HubL editor, then paste the snippet by pressingCtrl+VorCmd+V.

Write your module syntax

As you edit your module, you can write additional module syntax in theHTML + HubL,CSS, andJSeditor panes. Learn more about themodule code editorandmodule syntax referencein HubSpot's designer documentation.

Add help text to your module

In the Editor options section, add help text to give users context when editing the module. Help text can be no longer than 300 characters.

When a user edits the module in a content editor, the help text will appear above the module fields.

Preview your module

You can preview how your module will appear and function in the content editor by clicking the Previewbutton at the upper right of the module editor. The preview of your module will open in a new tab. This preview syncs with the editor and will automatically refresh as you work.

Publish your module

Once you're done adding fields and writing your module syntax, you can proceed to publish your module. In the upper right, click Publish changes .

Make your module available for templates

• Switch theMake available for templatestoggle on at the top right of the editor to make this module available to add to your templates.

• Switch this toggle offto make changes or test the module's functionality. If this toggle is disabled, your team will see an alert that this module is not available for templates.

Add your module to a template

• In the template layout editor, click theAddtab at top of the layout inspector, then search for your module. Custom modules that you've created can be identified by the custom module icon customModules .
• Drag and drop the module into your template.

Add or purchase a module from the Marketplace

In addition to creating your own modules, you can add or purchase custom modules that other users or providers have created in the HubSpot Marketplace.

• In your HubSpot account, click the Marketplace icon marketplace in the main navigation bar.
• In theFilter productssection on the left, click theAll productsdropdown underCategory and selectModules. You can filter the available modules according to:
  • Price:whether the module is free or paid
  • Function : the type of function(s) the module includes (e.g. calculator, gallery, map)
  • Works with: the template type(s) the module can be used in
  • Provider: the provider(s) the module is offered by
• Hover over your chosen module and click View details.
• ClickGet module for freeorBuy module for $ at the upper right.
  • If the module is free, it will automatically be added to your design manager.
  • If the module is paid, proceed to enter your payment details. Once payment has been processed, the module will be added to your design manager.

Design Manager

Hubspot Design Tools Email Template Modules Media Size Css

Source: https://knowledge.hubspot.com/design-manager/create-and-edit-modules

Posted by: pearsonprooroo.blogspot.com

Share this post