Dawn Theme - Custom Liquid in Image Banner

[Goddess3]

Hey everyone 🙂

I want to use SVG code via Custom Liquid, inside my Image banner so it will look like this in the end:

BEFORE:

AFTER:

This is the SVG code I put in the Custom Liquid element:

<div style = "margin-bottom: -10px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 60 1440 175">
<rect width="1920" height="1080" fill="#F3F3F3"/>
<path fill="#242833" fill-opacity="1" d="M0,64L48,80C96,96,192,128,288,160C384,192,480,224,576,208C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
</div>

The text itself("Feeling disconnected...") is a Rich Text element place under the Image Banner with the gold text.  So I want the gray background of the Rich Text will be over the bottom of the Image Banner with svg wage tag please

How can I make it look like the illustration in the "After" screenshot?
Thanks in advance guys!

[Huptech-Web]

Hello @Goddess3 

Could you kindly share the URL for the store, please?

[Goddess3]

https://goddessfeminine.com/

[AnneLuo]

Hi, @Goddess3 

You should add these codes to the custom liquid, and put it below the Image Banner.

<div style = "margin-bottom: -10px">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 60 1440 175">
<rect width="1920" height="1080" fill="#F3F3F3" class="svg-rect"/>
<path fill="#242833" fill-opacity="1" d="M0,64L48,80C96,96,192,128,288,160C384,192,480,224,576,208C672,192,768,128,864,128C960,128,1056,192,1152,197.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z">
</path>
</svg>
</div>
<div class="text">
Feeling disconnected from your partner?Struggling with self-doubt and lack ofconfidence? Are you finding it challenging
to express your needs and desiresor perhaps ignored warning signs in relationships?
</div>
<style>
.text{
color:#fff;
padding: 60px;
text-align: center;
background-color: #242833;
}
.svg-rect {
fill:rgba(255,255,255,0)
}
.svg-container{
positon: absolute;
top: 200px
}
</style>

After modification, it will be displayed as follows

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[Goddess3]

Not working don't know why, this is how it looks on my page:

I want the wave take over the bottom of the Image Banner:

Also, I must say, that the text itself("Feeling disconnected...") is a Rich Text element place under the Image Banner with the gold text.

So I want the gray background of the Rich Text will be over the bottom of the Image Banner with svg wage tag please

[Goddess3]

Up, please check out my reply and let me know what you think

[AnneLuo]

Can you share your store url? I understand the location issue now. Is there another point that you don't want the text content to be placed in the custom liquid?

[Goddess3]

https://goddessfeminine.com/

---

@AnneLuo wrote:

Can you share your store url? I understand the location issue now. Is there another point that you don't want the text content to be placed in the custom liquid?

Actually the only reason that I want the text content to be in Rich Text and not in Custom Liquid is for the sense of order and organization. If you can make my wish come true via Custom Liquid then so be it! 😄

[Goddess3]

UP, guys please help me out 😞