Getting H2 text in "text & image" widget

Wimads
Wimads Member Posts: 9
edited December 2022 in Ask a Question

Hi all,

I am working on what seemed to be a pretty basic page which has some text and one image. But I am running into an issue with aligning the text and image.

Basically it is a piece of paragraph text, with a H2 header in there. The image should be on the top right, and the text should wrap around it.

Getting my image and text to align nicely has been a struggle. The text & image widget seems ideal, but as far as I can see, it is not possible to add H2 text in there, and it seems I also cannot access the relevant HTML to manually add that.

Solving it with separate text boxes, and a column for the image, is also not ideal, because that way I cannot make the text wrap nicely for different screen widths...

Is there any other way I can solve this?

Maybe it can be done using an HTML widget? I'm rather rusty in my HTML though, so if there's someone who could help me on my way with that that would also be great!

Answers

  • Bruce_McCaughan
    Bruce_McCaughan Member Posts: 77

    IMHO having text wrap around images is a bit old skool for me. That was a useful tactic before responsive/mobile websites.

    What I do now is, rather than having the text continue and wrap naturally, I tend to have the image fit with its adjacent paragraph, in a 2-column row. Then start a new row below with the next paragraph. In your case, depending on whether the H2 and the text align well with the image, the HS can either share the column with the paragraph, OR have the H2 on its own row, above the image and its text.

    Then, it is easy to arrange things for the mobile view.

    I do acknowledge that what I describe (breaking things up into up to 3 rows) is cumbersome and time consuming vs what your expected experience is (with wrapping text). But that is how I handle what you are wanting to do.

    Of course, as you mention, you could do what you want with an HTML widget.

  • Wimads
    Wimads Member Posts: 9

    Yeah, that is the approach I used before, but the problem is that the height of the text next to the picture varies depending on screen width. Which results in either a lot of white space between the two parts of text (wide screens), or a lot of space between the picture and the text below (narrower screens).

    I guess I'll just have to rethink the layout for that page to work around this issue...

  • Aj_Cre8
    Aj_Cre8 Member Posts: 391 MVP

    We created a custom widget for this. For spamming reasons, I can't post the link, but shoot me a message if you want to chat. Also, @Shane_Hodge and his team can build a widget, @Elizabeth_Fedak can build them, and @nat_rosasco. They are all AWESOME Duda developers.

  • nat_rosasco
    nat_rosasco Member Posts: 4 MVP

    Thanks AJ!

  • Wimads
    Wimads Member Posts: 9

    Thanks for the offer. I have however found a way to accomplish what I want using flex sections. Using the advanced grid box, I can express the size of an object in percentage of column/row widht/height, rather than in pixels, which is very useful for varying screen widths! So now my image gets cropped depending on the text height in the same row, which works pretty well.

    Though the flex sections, and specifically the advanced grid box is a bit tricky to work with, I guess its not fully streamlined yet since it's still in beta.