CMS Development

alivia
Colaborador(a)

I would like to add spacing between blocks in an email

resolver

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 Avaliação positiva
1 Solução aceita
Kevin-C
Solução
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

I would like to add spacing between blocks in an email

resolver

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

Exibir solução no post original

2 Respostas 2
alivia
Colaborador(a)

I would like to add spacing between blocks in an email

resolver

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 Avaliação positiva
Kevin-C
Solução
Especialista reconhecido(a) | Parceiro
Especialista reconhecido(a) | Parceiro

I would like to add spacing between blocks in an email

resolver

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