I want to customize Image With Text section on Dawn. HELP!

Store Design
1

Hello,

I’m trying to format text on my homepage image with text section. I want to format the text but not on the rest of the site.

Site: www.reporting.io

what i want it to look like:

Landing page options (3).png
Landing page options (3).png1280×800 126 KB

2

Hi,

Your url not working, also in dawn theme we have already image with text section,bu t if you want exact same as above image then we need custom code to make it like this,

add section and send me link will check solution as possible

Best regard

3

sorry there was a typo

I have added the section i want to use, and an image below with what i want it to look like. hopefully that helps. Thanks

4

Hi

I did tried to write code for you as possible from inspect,

Follow this

  1. Go to Online Store->Theme->Edit code
  2. Asset->base.css-> paste bellow code in bottom of file
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__heading{font-size: 35px; font-weight: bold;}
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__text p{    margin: 0;line-height: 1.5;}
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .image-with-text__text p:before { content: "\2714\0020"; color: #fd05c8; font-size: 18px; }
#ImageWithText--template--15930392838365__1654184156c0fcfe33 .button {    min-width: 230px;}

Best regard

5

Thats amazing thanks, Its still a little off. can the text be made centered to the image height.

Also, on the heading, can the text be like the image with different font size on first and second line?

Thanks!

6

For center to image add this code

.image-with-text .image-with-text__text-item.grid__item{display: flex; margin: auto;}

For 2 line text need to change code we cant do by css code

Best regard

7

Hey,

Alas! I would like to replace the image section with text on my homepage. I think the default ratio is 50/50, but I would like to have an expert opinion from seniors.

Thanks

8

Thanks again, that worked great for the text to centre.

Is it possible to allow the section to add a second heading block? to then be able to format separately? i did something similar to allow html block in the footer. But i don’t know how to implement?

Thanks again

9

We cant do this as for that need to change in html code for image with text section.

so you need to hire developer or Pm me for that or wait if any one help you in deep,

Best regard

10

So I managed to find it in the image-with-text.liquid and increasing the heading limit to “2”

Could you help me format it now? Or point me in the right direction? cheers!

Capture.JPG
Capture.JPG1676×803 123 KB

11

I dont think it will work like this?

12

It did work to add more heading blocks, however I couldn’t figure out how to format the two headings different. In the end i used the caption block and formatted that instead following your .template method.

13

how do I apply the same pink to the ticks on mobile? thanks