CMS Development

marquizzo
投稿者

How do I customize a section background color along with background image?

解決

 

 

I'm in the page editor, and am finding it very difficult to add a `background-image` at the same time as a `background-color` to my current section. My desired CSS output would look something like this:

 

background-image: url("path-to-image.svg");
background-color: #ff9900;

but the page editor only lets me choose either a color or an image, but not both.

bg-color-image.jpg

How can I declare both color and image in the same section so it can be used with transparency?

 

I was looking at making my own custom section template, but when looking at the documentation, I see that it says:

 

Please note: you can only use one background parameter per dnd_section tag.

 

So how can I let my users customize `background-color` and `background-image` simultaneously? Surely it can't be too hard, it's practically trivial to do this via CSS. I must just not be finding it.

0 いいね!
2件の承認済みベストアンサー
Anton
解決策
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

How do I customize a section background color along with background image?

解決

Hi @marquizzo,

in my opinion you got several ways you can go:

  1. Create your whole section/row as a custom module since this will give you better control over the settings. You'll lose the drag&drop functionality but you could create it very specific, what would make the life of your content creators easier since you can predefine everything in the module and they have to put the content into it. 
  2. create a "configuration" module. By doing this you'll keep all the drag&drop functionality

 

Here some examples 

 

section module:

- add all of your wanted functions like rich-text, images ... as functions

- for the background add an image function in the top part or an background image in the style-tab in the right sidebar

 

Your HTML+Hubl section should look like this

 

{# start styling #}
{% require_head %} {# adding this to your module will push everything between into the head-tag #}
<style>
section.customSection.{{ name }}{
background: url('module.style.background_image.src'), rgba({{ module.style.background_color.color|convert_rgb }},{{ module.style.background_color.opacity/100 }} );
}
</style>
{% end_require_head %}
{# end styling #}

{# start module #}
<section class="customSection {{ name }}"> {# adding {{ name }} will add the modules name as class which will give you individual style settings per module if you're placing it several times on a single page #}
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
{{ module.rich_text }}
</div>
<div class="col-12 col-md-6">
<img src="{{ module.image.src }}" alt="{{ module.image.alt}}" class="customSectionImage">
</div>
</div>
</div>
</section>
{# end module #}

 

 

 

configuration module

basically the same as above with a small difference: If you want to have a bit more flexibility and use this module for several sections - you need only a simple text(not rich-text) for your given class

 

{# start styling #}
{% require_head %} {# adding this to your module will push everything between into the head-tag #}
<style>
.{{ module.css_class }}{
background: url('module.style.background_image.src'), rgba({{ module.style.background_color.color|convert_rgb }},{{ module.style.background_color.opacity/100 }} );
}
</style>
{% end_require_head %}
{# end styling #}

 

 

How to work with the configuration module?

When you set a class somewhere, you'll write it in the text element of the configuration module and it will apply the styling to this class

 

 

 

hope this helps

 

best, 

Anton

Anton Bujanowski Signature

元の投稿で解決策を見る

LMeert
解決策
ガイド役 | Platinum Partner
ガイド役 | Platinum Partner

How do I customize a section background color along with background image?

解決

Hi @marquizzo,

 

What @Anton suggested sure works, but I also wanted to point out another way of doing this that we are currently using  for our own website : using theme sections. 

LMeert_0-1664531471139.png

 

You can use hubl to create dnd sections and add a custom class to each of them.

Then simply create a css file and style your sections using regular CSS.

 

On the screenshot above, you can see a quite lengthy list of sections that we have predefined so our users can vary the flow of the pages.

 

Here's how adding a theme section to a page looks like :

LMeert_1-1664531727022.png

 

One other cool thing you can do with this method is automatically style the content of your modules based on the background color by preceding all your relevant css selectors with the section custom classes you create.

You can find here a video showcasing moving modules around having the text color adjust to the section background color.

 

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

 

Best,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

元の投稿で解決策を見る

4件の返信
LMeert
解決策
ガイド役 | Platinum Partner
ガイド役 | Platinum Partner

How do I customize a section background color along with background image?

解決

Hi @marquizzo,

 

What @Anton suggested sure works, but I also wanted to point out another way of doing this that we are currently using  for our own website : using theme sections. 

LMeert_0-1664531471139.png

 

You can use hubl to create dnd sections and add a custom class to each of them.

Then simply create a css file and style your sections using regular CSS.

 

On the screenshot above, you can see a quite lengthy list of sections that we have predefined so our users can vary the flow of the pages.

 

Here's how adding a theme section to a page looks like :

LMeert_1-1664531727022.png

 

One other cool thing you can do with this method is automatically style the content of your modules based on the background color by preceding all your relevant css selectors with the section custom classes you create.

You can find here a video showcasing moving modules around having the text color adjust to the section background color.

 

Hope this helps !
If it does, please consider marking this answer as a solution 🙂

 

Best,

Ludwig

Agence Mi4 - Data DrivenCTO @ Mi4
Hubspot Platinum Partner and Integration Expert

Passionate human, very curious about everything data and automation.

Any problem with Hubspot you need help solving ?

Let me know !

Anton
解決策
名誉エキスパート | Diamond Partner
名誉エキスパート | Diamond Partner

How do I customize a section background color along with background image?

解決

Hi @marquizzo,

in my opinion you got several ways you can go:

  1. Create your whole section/row as a custom module since this will give you better control over the settings. You'll lose the drag&drop functionality but you could create it very specific, what would make the life of your content creators easier since you can predefine everything in the module and they have to put the content into it. 
  2. create a "configuration" module. By doing this you'll keep all the drag&drop functionality

 

Here some examples 

 

section module:

- add all of your wanted functions like rich-text, images ... as functions

- for the background add an image function in the top part or an background image in the style-tab in the right sidebar

 

Your HTML+Hubl section should look like this

 

{# start styling #}
{% require_head %} {# adding this to your module will push everything between into the head-tag #}
<style>
section.customSection.{{ name }}{
background: url('module.style.background_image.src'), rgba({{ module.style.background_color.color|convert_rgb }},{{ module.style.background_color.opacity/100 }} );
}
</style>
{% end_require_head %}
{# end styling #}

{# start module #}
<section class="customSection {{ name }}"> {# adding {{ name }} will add the modules name as class which will give you individual style settings per module if you're placing it several times on a single page #}
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
{{ module.rich_text }}
</div>
<div class="col-12 col-md-6">
<img src="{{ module.image.src }}" alt="{{ module.image.alt}}" class="customSectionImage">
</div>
</div>
</div>
</section>
{# end module #}

 

 

 

configuration module

basically the same as above with a small difference: If you want to have a bit more flexibility and use this module for several sections - you need only a simple text(not rich-text) for your given class

 

{# start styling #}
{% require_head %} {# adding this to your module will push everything between into the head-tag #}
<style>
.{{ module.css_class }}{
background: url('module.style.background_image.src'), rgba({{ module.style.background_color.color|convert_rgb }},{{ module.style.background_color.opacity/100 }} );
}
</style>
{% end_require_head %}
{# end styling #}

 

 

How to work with the configuration module?

When you set a class somewhere, you'll write it in the text element of the configuration module and it will apply the styling to this class

 

 

 

hope this helps

 

best, 

Anton

Anton Bujanowski Signature
marquizzo
投稿者

How do I customize a section background color along with background image?

解決

 

Thank you for the thorough answer! I cannot believe that such a simple CSS rule needs such a complicated workaround in Hubspot.

squatchcreative
投稿者

How do I customize a section background color along with background image?

解決

welcome to Hubspot! 🤣

0 いいね!