Solved

Text over Image in Section in New Template Editor

  • 18 February 2022
  • 5 replies
  • 6382 views
F
Rank
Badge +4

Hello!

 

I’m working to make myself familiar with the New Template Editor so that I can rebuild and redesign our campaigns and flows. I am really excited that Klaviyo’s editor now has the capability to overlay text and buttons on images with HTML. But I’m having a bit of a hard time trying to figure out how to use Sections. I’ve read the Help Center’s articles and Community posts about this similar issue, but I cannot for the life for me understand how to do so.

Here are a few issues I’m stuck on:

  1. When I set an image to the background of the section, it doesn’t show the full image. 
  2. I can only add one block within the section. This would be okay if I was just overlaying text, but I cannot find a way to have more blocks exist in the section (ie, button)

Can anyone please explain it to me a bit further or upload an example video of how to do it?  

icon

Best answer by David To 22 February 2022, 21:13

View original

5 replies

David To
Rank
Userlevel 7
Badge +60

Hello @flannelizetheworld,

Loving the username!

I noticed from your screenshot that your image is fairly large, instead of using the Fill format for your image, have you tried using the Original Size option? Using the Fill option may cause some of the image to be cropped due to how large your image is. Here’s an explanation of all the various format options from the How to Set a Background Image for a Call to Action (new editor) Help Center article that may help:

 

In the Format section, choose between the following options: 

  • Original size
    Your image will be displayed at its original size, and will not be constrained in any way
  • Fit
    Your image will fit entirely within the section area, and may expose the background color underneath if it isn’t the exact size of the section area 
  • Fill
    Your image will fill the section area completely, and part of the image may be cropped 
  • Tile
    The image will repeat to fill the entire section area, and you can toggle the Tile size to choose the scale

 

As for your second point, that is an odd behavior! Similar to the old editor, I would just ensure you are dragging the desired block into the email Section rather than an area outside of it. But in testing, I had no issues adding a variety of elements to a section including text and button blocks. 

David

F
Rank
Badge +1

Hi @flannelizetheworld and @David To, 

I also have not been able to add more than one block onto a section! The only way it’s worked is if I leave the section from the original New Editor Template. 

I’ve also read those article and they don’t seem to have anything addressing this. 

For expanding your image, I have played around with the padding on the top/bottom of the text box or button in the section and it’ll expand to show your whole image. However, it forces the text box/button to be in the dead center of your section and doesn’t look good. I’d love to be able to move it freely or at least adjust the alignment to top, bottom, left, right. 

Fel

T
Rank
Badge +2

Hi @David To 

 

I'm having the same issue. When I add a new section it only adds at the very top, above the header or below the footer and the image doesn't fill the section when I choose the fill or original size option from the format box.

 

Thom

David To
Rank
Userlevel 7
Badge +60

Hey @Thomaz Zanetic,

Are you sure the content between your header and footer aren’t already wrapped in a section? Because sections are designated groupings of content, if you already have a part of your email wrapped in a section, you wouldn’t be able to nest another section within it. 

If you haven’t already, I think taking a look at our Template Specialist, @Anna McCarthy’s recent tutorial posts on this subject to be really helpful - which I’ve included below:

Ultimately, it’s going to depend on how you manipulate the section and content within those sections to achieve the layout you want. You can always feel free to reach out to some of our helpful Klaviyo Partners who specialize in email designers for hands on assistance as well!

David

T
Rank
Badge +2

Hi @David To and @Anna McCarthy 

 

Thanks for sending that through. I played around a bit and in my opinion the whole new background image thing is very clunky, hopefully in the future the Klaviyo team will make it more intuitive, until them it's a hard pass to me :(

 

Cheers 

Reply


Most helpful members this week

Terms & ConditionsCookie settings

Links & Resources

Platforms

Partners

Useful Things

About

  • Terms and Privacy
    © 2024 Klaviyo All rights reserved. Klaviyo and the Klaviyo logo are trademarks or registered trademarks of Klaviyo, Inc. or its affiliates.