Which languages should I learn so I can master HUBL? Is it Python? Or Javascript?
I'm trying to create custom modules and although I understand Adding the fields and copying the snippets I'm struggling to make the pages work. I'm new to this and although I've got a great HTML and CSS understanding I'm a bit lost when it comes to the coding side. Thanks!
I've struggled the same way as you a few month ago. Personally I don't think that you'll need something like Python. If you can learn some basic Javascript/jQuery it should be "enough".
Beside that you should(if you haven't already) do the HubSpot Design Certification which you can find in the learning center of your/every portal. If you know HTML and CSS you'll pass it with ease. 😉 It's really helpful to understand the way like HubSpot design manager works and "how to use what".
I've "learned" the "custom module coding" by the hard way after I did the certification(try&error, looking up everything in the docs and combining them).
With the new design manager it's much easier to write greate modules.
The |pprint filter is your best friend when it comes to seeing how dicts are structured... sometimes a value can sit at module.body.value and other times it's image.src. use the pprint filter to see the nested dicts.
I've struggled the same way as you a few month ago. Personally I don't think that you'll need something like Python. If you can learn some basic Javascript/jQuery it should be "enough".
Beside that you should(if you haven't already) do the HubSpot Design Certification which you can find in the learning center of your/every portal. If you know HTML and CSS you'll pass it with ease. 😉 It's really helpful to understand the way like HubSpot design manager works and "how to use what".
I've "learned" the "custom module coding" by the hard way after I did the certification(try&error, looking up everything in the docs and combining them).
With the new design manager it's much easier to write greate modules.
Thanks! That's really useful (and reassuring!) as I'm struggling with it at the moment. I've done the HubSpot Design Certification but it's not really helping me with creating custom modules.
In Design Manager I can create the various fields and copy the snippets, but I still can't work out which bits of the snippets should be used in the HTML+HUBL window. For example - {% inline_text field="text.header" value="{{ module.text.header }}" %}, I'm guessing I just need the module.text.header bit? I'm very confused
you're doing right by creating a "field" in the right sidebar and copy-pasting it into the HTML+Hubl section.
It depents when you're using what. In the most cases it will be enough to just use the
{{module.text.header}}
part. But you need some kind of "skeletal structure". As HubSpot is based on Bootstrap2(you can add other frameworks), you can build your structure by using Bootstrap2 css commands and pasting the "field"-snippet(they're calling widgets or modules) into the structure.
the code for a basic equal two column structure would be
<div class="row">
<div class="container">
<div class="span6">YOUR CODE/SNIPPETS FOR THE LEFT COLUMN GOES HERE</div> <div class="span6">YOUR CODE/SNIPPETS FOR THE RIGHT COLUMN GOES HERE</div>
</div>
</div>
You can add your own CSS classes everywhere you want.
The "only" thing that is important:
if you want to change some CSS inputs via the module, you have to add the CSS part to the HTML+Hubl Section
Expample:
<style>
.your-awesome-class{
background:rgba({{PASTED COLOR SNIPPET}});
}
</style>
When you want to add some choice fields to the CSS you can do it, too.
with this you can use the "choice field" option inside the module(while using the page builder) to use the same module on a single page without needing many different module clones
Can you clarify what you meant in the previous post about having the CSS within the HTML+HUBL window, rather than in the CSS window? The modules I'm working on have the majority of the styling in the CSS window.
Thanks! Yes that makes sense. I totally understand the Bootstrap2 css commands and it should be really easy. I think I'm just getting confused by some of the snippets that are being produced, where some have some extra code, i.e:
If you copy the snippet, you get a code like the first one, if only the snippet then you get something like the second code.
I can't say where the "|convert_rgb" comes from. Usually you have to add it manually. Maybe HubSpot changed something in the last days/weeks(which would be great, if |convert_rgb would be always there).