EcoWeb -Website design Services

‪+91 82877 41620‬

All About Hubspot Macros

Hubspot Macros Basically are reusable code chunks which you can reuse again again if you have similar html structure in your various html module

As a developer you have ever comes in a situation  when you have to make change in your html code according to client requirement think about this situation with macros or without ,without macro you have to make changes in every custom modules where you using html code but in case of macro just update your html structure at one place and it is done

What is Hubspot Macros?

Hubspot Macros basically hubl and html combination you can say it is a function written in Hubl where you can add values as parameter.

Macro Syntax

Copy Code 


{# create macro #}
{% macro macro _name(title, subtitle) %}
   <h1>{{title}}</h1>
   <p>{{subtitle}}</p>
{% endmacro %}

{# use your  macro #}
{{macro _name('Sample Title', 'Sample  Subtitle' )}}

The end result will look like this

Copy Code 


<h1>Sample Title</h1>
<p>Sample Subtitle</p>

Use Cases

You can use Hubspot macros where hubl is supported

  • In module.html
  • in Css files excluding module.css because hubl is not supported there.

 

Inside CSS File

Copy Code 


{% macro color(value) %}

  {% set colorhex = value.color|convert_rgb %}
  {% if value.opacity != null %}
    {% set coloropacity = value.opacity / 100 %}
  {% else %}
    {% set coloropacity = '1' %}
  {% endif %}


  rgba({{ colorhex }}, {{ coloropacity }})

{% endmacro %}

.my-selector {
  color: {{ color('theme.color_field_name') }}
}