Streaming live at 10am (PST)

Inserting Image into Text Block and Floating Right


#1

Hello,

I’m new to webflow and trying to insert an image into a paragraph of text and then float it right.
I have watched the float and clear video. I am still unsure the proper way to insert the image directly into my text block.

My concern is that I have not prepared the boxes, div elements correctly. I am still not fully understanding when to use those and in which order. I want to ensure that what I do will still be responsive in the different screen sizes/layouts.

Can someone check out my link and give me instructions on how to insert image and then float right?

The section is on the home page when you scroll down to MEET THE OWNERS. It’s the paragraph about them and the picture of them below that I want to combine.

https://preview.webflow.com/preview/buona-gente-restaurant?utm_source=buona-gente-restaurant&preview=5aa1d4c1e7135f48ee3529558605e8a0

Thank you so much for your help.

Sincerely,
northmoniker


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

woaow this site put an instant smile on my face :smiley: Italyyyy, foood…; good job!

Ok, there are advanced CSS method to actually insert an image into a pargraph element, but we’re going to ignore them here because they’re not convenient and have downsides. For the moment let’s say that you can’t insert other elements inside of a Paragraph element.

You can have:

    1. a paragraph, then an image, then a paragraph
    1. an image inside of a Rich Text element (probably the easiest and fastest
    1. a structure around a paragraph and an image that makes the paragraph sits on the left and image on the right (Flexbox element, column element…)

Let’s see 2.

Use a Rich Tes element instead of a Paragraph. After the text, create a new line, click on the + icon, add an image (re upload it) and set the image to sit on the right or left with the options that pop up when you select it.