Inset box with multiple elements
-
So I’m converting a book I wrote into a website. It’s a middle-school English textbook. I use frequent inset boxes for definitions and clarifications. Within these inboxes I want to include several elements, including text, images, and graphics. The media and text block was recommended, but the tutorial page isn’t specific enough. I need the block to:
- Have the ability to scale the box so it doesn’t take up the entire width of the page,
- have text wrap around the box,
- be able to divide the box into several different rows and columns,
- resize each element freely.
see the picture so you can see how it looks in the book:
The blog I need help with is: (visible only to logged in users)
-
Hi @yelobike,
Thank you for sharing the screenshot—it really helps to understand what you’re trying to achieve on your site. The layout you’re aiming for, which combines a graphic, text, and image in a single box, isn’t possible using the Media & Text block alone. You would need to design that entire layout as one image before uploading it into the block.
That said, you can adjust the proportions of the Media & Text block so that the image area appears smaller than the text area. To replicate the layout shown in your screenshot, you could structure it like this:
- Use a Paragraph block for the first paragraph,
- Follow it with a Media & Text block for the main image and text section,
- Then use another Paragraph block for the final section of text.
You might also want to try using the Columns block, which gives you more flexibility in arranging different types of content side-by-side. Here’s a helpful guide:
Using the Columns BlockI hope that helps! Let me know if you have any further questions.
-
thanks for the help! I think playing around with the columns block could be the answer, I’ll let you know how it works out.
-
Hi @yelobike,
Awesome! Another option would be to use custom CSS or install a plugin to achieve the layout you’re aiming for. However, please note that this would require upgrading to one of our higher-tier plans. You can find more details here: WordPress.com Pricing.Additionally, all of our paid plans include a free custom domain for the first year, which you can set as your site’s primary address. A custom domain makes your site look more professional, builds trust, enhances branding, and can improve search engine visibility.
Let me know if you have any questions about the available plans!
-
just curious, is there a vertical version of columns? There should be some sort of grid I could make, is there?
-
Hi @yelobike
By default, the Columns block creates horizontal columns side by side. To simulate a vertical stack (i.e., one block on top of another within a column), you can insert multiple blocks inside a single column, and they will naturally stack vertically.Here’s how to do it:
- Add a Columns block (choose your preferred column layout).
- Click inside one of the columns.
- Inside that column, add multiple blocks (like Paragraph, Image, Buttons, etc.).
- These blocks will automatically arrange vertically within that column.
I hope this helps!
-
so whether I use the media and text block or columns, there’s always a space, either vertically or horizontally – there’s never true text wrapping that’s uninterrupted. How do I make it look smooth? Is there a plug in that’ll do a better job of making it look smooth and uninterrupted without a space?
-
on other platforms, text wrap around an image simply works when you align the image left or right. Why doesn’t that work within Jetpack on the iPad?
-
Hi @yelobike,
Instead of using the Media & Text block, try inserting an Image block and then typing your text on the line directly below the image. This approach often produces a smoother layout and is closer to the result you’re trying to achieve. You can follow the step-by-step guide here: Wrap Images and Text
Additionally, while we don’t typically recommend third-party plugins—since we may not be familiar with all of them—I did a quick search and found a few that might help with text wrapping:
- Advanced Editor Tools (formerly TinyMCE Advanced)
- Kadence Blocks
- GenerateBlocks
Please note that these plugins haven’t been tested on our end, so I recommend reaching out to their respective developers for more detailed support or compatibility questions.
I hope this helps! Let me know if you have any other questions.
-
I’ve since discovered that the text wrapping technique doesn’t work within Jetpack on the iPad – I have to create the site within a browser. It works fine within WordPress.com in Safari, though there are a few quirks there, but overall everything works better in the browser. Thanks!
-
Hi @yelobike,
You’re right: the Jetpack app on iPad currently doesn’t fully support in‑block text wrapping, which is why you’re seeing those gaps.
For the smoothest experience, I’d recommend continuing your layout work in a desktop browser or Safari on your device (as you’ve already done). That way, you’ll get the full range of alignment and wrapping options.
Let us know how it goes, and feel free to reach out with any other questions!
-
fyi: I figured it out. What you need to do is make a columns block and then a group block inside one of the columns. Then you can arrange all of the elements within the group. In this case, what I did was I used the light bulb graphic as an image, aligned it to the left, then added a paragraph block, and then the picture of Thor under there. Works fine.
-
Hi @yelobike,
That’s fantastic — thank you for sharing the solution you discovered! Using a Group block inside a Columns block is a great way to gain more control over the arrangement of different elements.
Here’s a tip: if you plan to reuse this design in other areas of your site, you can create a pattern so you don’t have to build it from scratch each time:
Create a patternYou might also find these guides helpful as you continue experimenting:
If you need further help, feel free to contact us back.
- The topic ‘Inset box with multiple elements’ is closed to new replies.
WordPress.com Forums 