CMS Development

alivia
Mitwirkender/Mitwirkende

I would like to add spacing between blocks in an email

lösung

Hello,

 

I would like to build a template with independant blocks for each piece of content, where my background image shows up between the blocks, like the email below. (live version here: http://get.invisionapp.com/matchmaker-matchmaker-make-me-an-app?ecid=ACsprvvKhbkhqQOWz4gY6rVwZHvnuE4... - can't seem to find a way of doing this!

Screenshot 2018-10-25 at 10.31.31.png

 

Thanks!

0 Upvotes
1 Akzeptierte Lösung
Kevin-C
Lösung
Trendsetter/-in | Partner
Trendsetter/-in | Partner

I would like to add spacing between blocks in an email

lösung

This is a tough one to answer without your code, but this maybe easily solved.

 

Screen Shot 2018-10-25 at 8.51.00 AM.png

The image above shows a simple html structure with 1 css hint (padding). Basically if you remove padding from your content block you then can create another block level element for the 'background-image'. And then another with padding for the text block. Something along these lines could solve for your usecase.

 

Heres a little psuedo to hopefully get my idea across.

<body>

  <content-block style="width: 600px;">

    <img-block style="display: block; height: 200px;">
    </img-block>

    <text-block style="padding: 30px;">

      <h1>Content Title</h1>
      <p>More about the content and such</p>
      <etc…>

    </text-block>

  </content-block>

</body>

 

 

Let me know if this helps or just makes things worse!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev

Lösung in ursprünglichem Beitrag anzeigen

2 Antworten
alivia
Mitwirkender/Mitwirkende

I would like to add spacing between blocks in an email

lösung

Le me clirify the issue I have to obtain this, I can get a block that's the same color as my background in my email pretty easily, but I think the global padding that I have on my emails always ads a white padding around it 

 

Screenshot 2018-10-25 at 10.40.07.png

0 Upvotes
Kevin-C
Lösung
Trendsetter/-in | Partner
Trendsetter/-in | Partner

I would like to add spacing between blocks in an email

lösung

This is a tough one to answer without your code, but this maybe easily solved.

 

Screen Shot 2018-10-25 at 8.51.00 AM.png

The image above shows a simple html structure with 1 css hint (padding). Basically if you remove padding from your content block you then can create another block level element for the 'background-image'. And then another with padding for the text block. Something along these lines could solve for your usecase.

 

Heres a little psuedo to hopefully get my idea across.

<body>

  <content-block style="width: 600px;">

    <img-block style="display: block; height: 200px;">
    </img-block>

    <text-block style="padding: 30px;">

      <h1>Content Title</h1>
      <p>More about the content and such</p>
      <etc…>

    </text-block>

  </content-block>

</body>

 

 

Let me know if this helps or just makes things worse!

Kevin Cornett - Sr. Solutions Architect @ BridgeRev