CMS Development

suniltodkar
Participant

How to create row with background image containing two columns with container

SOLVE

Anyone can give me way to create custom module with one row with background image and in that row conatin one container with 2 columns. How it is achived in Hubspot?

0 Upvotes
1 Accepted solution
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to create row with background image containing two columns with container

SOLVE

Hi @suniltodkar,

sorry for the delayed response.

Here's a "quick" image tutorial for you.


1. add an image widget to the module1. add an image widget to the module2. copy the snippet2. copy the snippet3. add the snippet somewhere in the module and copy the img src code. delete the rest3. add the snippet somewhere in the module and copy the img src code. delete the rest4. insert the copied code into the url brackets4. insert the copied code into the url brackets

you can add 

min-height:500px; /* insert your desired height here */

after

background-position:center center;

also you can give the whole thing a css class and style it better in css.

To do it with classes, change the first row

<div class="row" style="background-image:url({{ module.image_field.src }});background-size:cover;background-position:center center;">

to

<div class="row background-image-container">

(you can choose the name by your self)

 

after you've done this

add

<style>
.background-image-container{
background-image:url({{ module.image_field.src }});
background-size:cover;
background-position:center center;
}
</style>

above or below the html part. Add your desired CSS style to it. 

e.g.

If you want to insert H1(Headlines) inside the container and wnt to give them a custom styling you insert

.background-image-container h1{
Your H1 styling goes here
}

inside

<style>
...
</style>

there are litteraly no boundaries for this.


Because of the "support" - Unfortunatelly I don't have Skype

Anton Bujanowski Signature

View solution in original post

6 Replies 6
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to create row with background image containing two columns with container

SOLVE

Hi @suniltodkar

it's very easy. Just add an image widget to your module and copy the "code" from the 

<img src="">

part and insert it as the background-image url

<div class="row" style="background-image:url({{ module.image_field.src }});background-size:cover;background-position:center center">
  <div class="container">
    <div class="span6">LEFT COLUMN</div>
    <div class="span6">RIGHT COLUMN</div>
  </div>
</div>

regards,

Anton

Anton Bujanowski Signature
suniltodkar
Participant

How to create row with background image containing two columns with container

SOLVE

I have tried your solution but its not showing background image.

0 Upvotes
Anton
Solution
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to create row with background image containing two columns with container

SOLVE

Hi @suniltodkar,

sorry for the delayed response.

Here's a "quick" image tutorial for you.


1. add an image widget to the module1. add an image widget to the module2. copy the snippet2. copy the snippet3. add the snippet somewhere in the module and copy the img src code. delete the rest3. add the snippet somewhere in the module and copy the img src code. delete the rest4. insert the copied code into the url brackets4. insert the copied code into the url brackets

you can add 

min-height:500px; /* insert your desired height here */

after

background-position:center center;

also you can give the whole thing a css class and style it better in css.

To do it with classes, change the first row

<div class="row" style="background-image:url({{ module.image_field.src }});background-size:cover;background-position:center center;">

to

<div class="row background-image-container">

(you can choose the name by your self)

 

after you've done this

add

<style>
.background-image-container{
background-image:url({{ module.image_field.src }});
background-size:cover;
background-position:center center;
}
</style>

above or below the html part. Add your desired CSS style to it. 

e.g.

If you want to insert H1(Headlines) inside the container and wnt to give them a custom styling you insert

.background-image-container h1{
Your H1 styling goes here
}

inside

<style>
...
</style>

there are litteraly no boundaries for this.


Because of the "support" - Unfortunatelly I don't have Skype

Anton Bujanowski Signature
suniltodkar
Participant

How to create row with background image containing two columns with container

SOLVE

Hi @Anton,

Thank you for your helping.

 

0 Upvotes
suniltodkar
Participant

How to create row with background image containing two columns with container

SOLVE

Hi @Anton,

Thank you so much.

Can you give me your skype id So i can contact with you. Actually i have many doubts about hubspot design. Can you help me?

 

0 Upvotes
Anton
Recognized Expert | Diamond Partner
Recognized Expert | Diamond Partner

How to create row with background image containing two columns with container

SOLVE

Hi @suniltodkar,

it's very simple.

1. add an image widget/function to the module

2. copy the "snippet"

3. insert it somewhere in the "HTML" section

4. copy only the "code" which is inside the <img src="">-tag and delete the whole other part( you won't need the alt tag and sizes because it's gonna be fullsize and a background-image)

5. write the following code(it's a simple HubSpot based layout)

<div class="row" style="background-image:url();background-size:cover;background-position:center center">
  <div class="container">
    <div class="span6">LEFT COLUMN</div>
    <div class="span6">RIGHT COLUMN</div>
  </div>
</div>

6. insert the copied code(from <img src="">) into the brackets at background-image:url(INSERT CODE HERE)

7. write your column layout inside the "container" div

 

You can edit the number after "span". Note: Both must be a total of 12. 

You have following options:

1-11,2-10,3-9,4-8,5-7,6-6,7-5,8-4,9-3,10-2,11-1

 

 

regards,

Anton

Anton Bujanowski Signature
0 Upvotes