{% if image %}
{% endif %}
{% endmacro %}
{{ render_card("Título del artículo", "Descripción breve", "/blog/articulo", "/img/cover.jpg") }}
```
---
## Creación de módulos personalizados
### Anatomía de un módulo
Un módulo de HubSpot CMS está compuesto por cuatro archivos que deben residir en una carpeta con el nombre del módulo dentro del directorio `modules/` del theme:
**meta.json:** Define los campos editables del módulo (los que aparecen en el panel lateral del editor de HubSpot cuando el editor selecciona el módulo).
```json
{
"label": "Hero Section",
"css_assets": [],
"external_js": [],
"global": false,
"help_text": "Sección hero con título, subtítulo, CTA y imagen de fondo",
"host_template_types": ["PAGE", "BLOG_POST", "LANDING_PAGE"],
"js_assets": [],
"other_assets": [],
"smart_type": "NOT_SMART",
"tags": ["hero", "banner"],
"is_available_for_new_content": true
}
```
**fields.json:** Define los campos del módulo que los editores pueden modificar:
```json
[
{
"id": "headline",
"name": "headline",
"label": "Titular",
"required": true,
"type": "text",
"default": "Tu titular principal aquí"
},
{
"id": "subheadline",
"name": "subheadline",
"label": "Subtítulo",
"type": "text",
"default": "Descripción breve de tu propuesta de valor"
},
{
"id": "cta_text",
"name": "cta_text",
"label": "Texto del CTA",
"type": "text",
"default": "Contacta con nosotros"
},
{
"id": "cta_link",
"name": "cta_link",
"label": "Enlace del CTA",
"type": "link",
"default": {
"url": { "type": "EXTERNAL", "href": "/contacto" },
"open_in_new_tab": false
}
},
{
"id": "background_image",
"name": "background_image",
"label": "Imagen de fondo",
"type": "image",
"default": {
"src": "",
"alt": "Hero background"
}
},
{
"id": "overlay_opacity",
"name": "overlay_opacity",
"label": "Opacidad del overlay",
"type": "number",
"min": 0,
"max": 100,
"default": 60
}
]
```
**module.html:** La plantilla HTML del módulo, que referencia los campos definidos en `fields.json`:
```html
{{ module.headline }}
{% if module.subheadline %}{{ module.subheadline }}
{% endif %} {% if module.cta_text %} {{ module.cta_text }} {% endif %}