I've been trying to change the background colours / images on the page level but to no avail. So far, I've been doing this on the template level but it starts getting messy in our template folder.
If you use an image module it is the same concept but you have to export it to the template and use a data token for the src, you can not do inline.
For background colors it is also the same concept aswell. You would use a text widget:
{% text "simple_text_field" label="Enter text here", value="This is the default value for this text field" %}
if you use no_wrapper=True you can place the widget inline, or you can export to the template and use a data token:
<div style="background: #{% text "bg_color" label="BG Color", value="000", no_wrapper=True %}">
</div>
I placed the "#" outside of the module since it should always be their. The default value is "000" which is short code for "000000" which is the color black. on the page editor you will have an editable feild labeled "BG Color" with a preset value of "000". changing this value to another hex color will change the background color. This set up will appy if you are using rgb, rgba, or other with minor alterations.
Bare in mind that this is considered custom coding and is not a function of the drag and drop builder. If you are going to do this you should either do this on a coded page, or set up modules requiring this type of functionality in a drag and drop template inside of a Hubl module.
You can mimic hubspots structure styles (span1-12, rows, containers, etc) if you know where to find example code, but if you do not use hubspots structuring classes you will be left to structure any custom coded modules yourself. Some people prefer this but it's a bit high level if you are new to web development.
We are looking to do something similar, but using the drag and drop template creator so all members of the team will be able to update the page.
How should we create the custom module so they will be able to set the background image? We've tried a few ways mentioned in the community forum including: Export to Template, the main HubL documentation, and a few other threads on the forum.
The module is built as described under Export to Template, but the functionality doesn't work under the page editor - no option to select/edit the image and the original image does not render. Link is correct - we can use inline code for the background image, but then we would need to create multiple templates for the various backgrounds.
@LCSKMiller, can you post your code here? if it isn't working I have to assume it is a syntax error on your part, I can take a look if you share it.
as for your need for multiple members of your team to update page background images, will they need to update the template, or just the pages themselves. In my experience, once the templates are created they are generally not messed with by the general user. You should be able to build your banner like I described in the template, and it not be any more or less of an issue for your editors at the page level.