> ## Documentation Index > Fetch the complete documentation index at: https://developers.hubspot.es/docs/llms.txt > Use this file to discover all available pages before exploring further. # Configurar un módulo > Más información sobre cómo configurar un módulo personalizado.
Al crear un módulo, hay una serie de opciones disponibles que influyen en el lugar en el que el módulo es visible, en cómo se identifica y en cómo se edita. Cuando se [desarrollan localmente](/developer-tooling/local-development/hubspot-cli/install-the-cli), los módulos se almacenan como carpetas con un sufijo `.module`. Estas carpetas contienen los archivos que componen la configuración del módulo, y el código utilizado para renderizarlo. La configuración de un módulo se mantiene en el archivo [meta.json](#meta-json), mientras que los campos se configuran por separado en un archivo [fields.json](https://developers.hubspot.es/docs/cms/start-building/building-blocks/modules/overview#fields-json). La mayor parte de la configuración también puede modificarse mediante el editor de módulos del [Administrador de diseño](/cms/start-building/introduction/developer-environment/design-manager).
Estructura de las carpetas de los módulos mostrada localmente En un nivel alto, configuras las opciones del módulo localmente dentro del archivo `meta.json`, que puede incluir las siguientes propiedades: | Parameter | Type | Description | Default | | ------------------------------ | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------- | | `icon` | String | URL de una imagen para usar como icono de un módulo. | | | `label` | String | Etiqueta utilizada cuando los módulos se muestran en los editores de contenido | | | `module_id` | Number | Id único para el módulo que es independiente de la ruta. | | | `is_available_for_new_content` | Boolean | El valor del interruptor en la esquina superior derecha del editor de módulos en HubSpot. Determina si el módulo puede ser utilizado en el contenido. | `true` | | `global` | Boolean | Indica si el módulo es global o no | `false` | | `host_template_types` | Matriz | Un `array` de [tipos de contenido](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview) en los que se puede utilizar el módulo. Uno o más de `[ "PAGE", "BLOG_POST", "BLOG_LISTING", "EMAIL" ]`. | | | `css_assets` | Matriz | Un `array` de archivos CSS de los que depende el módulo. Admite rutas relativas.por ejemplo, `"css_assets": [{"path": "../path/to/file.css" }]` | `[]` | | `css_render_options` | Objetos | Establece si el módulo CSS se renderiza de forma asíncrona con `async`: `true`, `false` | `{"async": false}` | | `js_assets` | Matriz | Un `array` de archivos JavaScript de los que depende el módulo. Admite rutas relativas.por ejemplo, `"js_assets": [{ "path": "../path/to/file.js" }]` | `[]` | | `js_render_options` | Objetos | Modifica la etiqueta JavaScript del módulo agregado a la página renderizada. Las opciones incluyen: | `{"position":"footer"}` | | `inline_help_text` | String | Texto de ayuda que se mostrará en la parte superior del módulo en un cuadro de información azul (límite de 300 caracteres).Proporciona la información necesaria para utilizar el módulo. Si tienes información de texto de ayuda específica del campo para transmitir, consulta la [documentación del campo de texto de ayuda](/cms/reference/fields/module-theme-fields#properties-used-by-all-fields). | `null` | | `master_language` | String | Con [traducciones activadas](https://knowledge.hubspot.com/design-manager/create-translations-of-your-modules#:~:text=To%20create%20translations%20of%20a,the%20right%2C%20click%20Add%20translations.), el código del idioma en el que se escribieron originalmente los campos del módulo.por ejemplo, `en` | | | `placeholder` | Objetos | Establece el [contenido del marcador de posición](/cms/reference/hubl/tags/standard-tags#editor-placeholders) para el módulo. Incluye las siguientes propiedades: | | | `categories` | Matriz | Una matriz que contiene hasta tres [categorías de módulos](#add-categories).Por ejemplo: `"categories":["FORMS_AND_BUTTONS"]` | | | `content_tags` | Matriz | Una matriz de [objetos de etiqueta de módulo](#adding-categories-and-tags) que contiene el nombre de la etiqueta y la `fuente` de `"USUARIO"`.Por ejemplo: `"content_tags": [{` `"name": "BOTONES",` `"source" : "USER"``}]` | | A continuación, obtén más información sobre las opciones de configuración de módulos individuales. ## Adición de un icono Los módulos pueden incluir un icono que aparece en el [Administrador de diseño](/cms/start-building/introduction/developer-environment/design-manager) y en los editores de páginas y correos electrónicos para proporcionar un contexto visual a los creadores de contenido. Se recomienda tener diferentes iconos para los diferentes tipos de módulos en tu tema. Los iconos son [necesarios para los proveedores del mercado](/cms/marketplace/template-guidelines). Hay dos maneras de agregar un icono, a través del [administrador de diseño](#add-an-icon-using-the-design-manager) o de la [CLI del CMS](#add-an-icon-using-the-cli). Los iconos de los módulos deben ser un archivo `.svg` y tener un tamaño no superior a 10kb. Para obtener los mejores resultados, tu icono debe ser sencillo y utilizar un solo color. Los iconos que usen más de un color se convertirán automáticamente para ti. El icono del módulo predeterminado que se muestra es el de una llave inglesa y un pincel. Para agregar un icono mediante el administrador de diseño:
1. In your HubSpot account, navigate to **Marketing** > **Files and Templates** > **Design Tools**. 2. Use the left sidebar to locate the **module** you want to edit, then click the **module name**. 3. In the right sidebar of the module editor, click the **icon** next to the module title. 4. Upload/select your icon. After publishing your changes, the icon will appear within the page editors and design manager.
edit-module-icon-crop Para agregar un icono al desarrollar localmente, abre el archivo `meta.json` del módulo y agrega o edita el valor del parámetro `icon` para que sea un SVG desde el administrador de archivos. ```json theme={null} // meta.json { "global": false, "host_template_types": ["PAGE"], "icon": "http://example.com/hubfs/code.svg", "label": "Code block", "smart_type": "NOT_SMART", "is_available_for_new_content": true, "inline_help_text": "This module is for code snippets." } ``` ## Cambio de la etiqueta
La etiqueta que se utiliza cuando se muestran los módulos en el editor puede ajustarse por separado del nombre del módulo. Esto es útil cuando se desarrolla localmente, ya que puedes tener un nombre que tenga sentido para ti y a la vez tener uno diferente que vean los creadores de contenido. Localmente, cambia el parámetro `label` para establecer la etiqueta. En el administrador de diseño hay un campo en el editor de módulos debajo del nombre del módulo.
edit-module-label ## Hacer global un módulo Para los módulos normales, el contenido de cada instancia de un módulo en una página, correo electrónico o plantilla es independiente. Para algunos casos de uso, es útil poder hacer que todas las instancias de un módulo compartan el mismo contenido. Cuando se desarrolla localmente, se puede hacer que un módulo sea global estableciendo `global` como `true`. También puedes [convertir módulos en una plantilla de arrastrar y soltar a global](https://knowledge.hubspot.com/design-manager/use-global-content-across-multiple-templates#create-new-global-content-in-the-design-manager:~:text=To%20convert%20an%20existing%20local%20module%20or%20group) utilizando el administrador de diseño. ## Controlar dónde se puede utilizar un módulo Cuando se desarrolla localmente, se puede controlar en qué tipos de contenido se puede utilizar un módulo a través de la propiedad `hostTemplateTypes`. Más información sobre los [tipos de plantillas disponibles](https://developers.hubspot.es/docs/cms/start-building/building-blocks/templates/overview#template-types). Los módulos también se pueden ocultar para que no se puedan agregar directamente a las páginas mediante la configuración de `is_available_for_new_content` a `false`. Por ejemplo, esto puede ser útil para los módulos creados para los menús de navegación y la búsqueda. Puedes actualizar esto en el administrador de diseño haciendo clic en la opción **Tipo de plantilla** en la barra lateral derecha. edit-module-template-type ## Adición de dependencias de CSS y JavaScript Además de utilizar `module.css` y `module.js` para agregar CSS y JavaScript que se agregarán a todas las páginas que incluyan una instancia de módulo, las dependencias que se comparten entre módulos pueden adjuntarse utilizando `css_assets` y `js_assets`. Las rutas pueden ser absolutas o relativas al archivo `meta.json`. ```json theme={null} // meta.json { "css_assets": [{ "path": "../path/to/file.css" }], "js_assets": [{ "path": "../path/to/file.js" }] } ``` **Advertencia:** cuando se utilizan rutas relativas para referenciar dependencias, al ejecutar `hs fetch --overwrite` para actualizar el módulo para el desarrollo local se sobrescribirán las rutas relativas con rutas absolutas. Con el administrador de diseño, puedes vincular archivos CSS y JavaScript a un módulo utilizando la sección *Archivos vinculados* en la barra lateral derecha del editor de módulos. edit-module-linked-files ## Agregar categorías y etiquetas Puedes asignar categorías y etiquetas a los módulos para organizarlos dentro de las herramientas de HubSpot: * [Categorías](#categories): asigna categorías a módulos para organizarlos en grupos dentro de la interfaz de usuario del editor de contenido. Esto les permite a los creadores de contenido encontrar módulos más fácilmente mientras crean contenido en HubSpot. Ten en cuenta lo siguiente sobre las categorías: * Un módulo puede tener hasta tres categorías, que están predefinidas y no se pueden personalizar. * Actualmente, las categorías no aparecen en la interfaz de usuario del editor de contenido. Sin embargo, puedes asignar categorías para cuando la categorización esté disponible en los editores. * Los módulos sin categorizar estarán disponibles en una categoría *Todos*. * [Etiquetas](#tags): asigna etiquetas para organizar módulos dentro del administrador de diseño. Esto te permite encontrar módulos más fácilmente mientras creas plantillas. En el administrador de diseño, puedes asignar categorías y etiquetas utilizando la sección *Filtrar etiquetas* de la barra lateral derecha en el editor de módulos. Obtén más información sobre las categorías y etiquetas disponibles a continuación. edit-module-filter-tags A nivel local, puedes agregar categorías y etiquetas al archivo `meta.json` de un módulo de la siguiente manera: ```json theme={null} // meta.json { "label": "Custom module", "categories": ["image_and_video", "commerce"], "content_tags": [ { "name": "BUTTONS", "source": "USER" }, { "name": "CTA", "source": "USER" } ], "is_available_for_new_content": true } ``` ### Categorías La matriz de `categorías` de un módulo puede contener hasta tres de las siguientes categorías (no distingue entre mayúsculas y minúsculas): | Categoría | Descripción | | ------------------- | --------------------------------------------------------------------------------------------------- | | `blog` | Módulos específicos del blog, como una publicación reciente. | | `body_content` | Módulos que están formateados para mostrar gráficamente el contenido, como una galería de imágenes. | | `commerce` | Módulos específicos de comercio, como tarjetas de precios. | | `design` | Módulos que afectan la estructura y el diseño del contenido, como los acordeones. | | `functionality` | Módulos que incluyen respuestas dinámicas o comportamiento en la página, como menús. | | `forms_and_buttons` | Módulos que les permiten a los visitantes del sitio introducir y enviar datos. | | `media` | Módulos que contienen elementos como imágenes, iconos, video y banners. | | `social` | Módulos específicos para redes sociales, como compartir en redes sociales. | | `text` | Módulos que contienen solo texto. | ### Etiquetas La matriz `content_tags` de un módulo puede contener cualquiera de los siguientes objetos de etiqueta de módulo (distingue entre mayúsculas y minúsculas): **Tipos de contenido:** * `ACCORDION` * `ANIMATION` * `BLOG_POST` * `BUTTONS` * `CODE` * `CTA` * `FEED` * `FORM` * `ICON` * `IMAGE` * `LISTS` * `LOGO` * `MENU` * `RICH_TEXT` * `SLIDER` * `TEXT` * `VIDEO` **Funciones:** * `BANNER` * `BLOG` * `BRANDING` * `CALCULATOR` * `CONVERSION` * `EMAIL` * `GALLERY` * `HEADERS` * `INTERACTION` * `LAYOUT` * `MAP` * `MULTIMEDIA` * `NAVIGATION` * `PROGRESS_BAR` * `SEARCH` * `SETTINGS` * `SOCIAL` * `TRANSLATION`