Embedding and Centering Images on a Pickaxe Studio Page (Easy method):
Here are 2 easy methods that work for most use cases
1) Google Photos:
Go to Google Photos and find the photo/image you want to embed >>> click Share on the top right >> and copy the share link
then go to:
and fill in the details (pretty straightforward) >> copy the HTML embed code >> go to your studio and paste in the code into the Rich Text (HTML) section.
2) Canva:
Click on ‘Share’ on the top right corner >> ‘Embed’ >> Copy the HTML >> Paste it into the Rich Text (HTML) section in your studio (you can do this for video designs too).
With the Canva route, the only potential downside, depending on your use case, is that the player components appear. But maybe if you play around with the HTML code, you can change that.
Important note
Studio page Rich Text (HTML) sections use a flex layout. Standard embed snippets often hug the left. Use this template to center.
Center a single image (non-clickable)
<div style="width:100%; display:flex; justify-content:center;">
<img src="REPLACE_WITH_IMAGE_URL"
alt="Image"
style="display:block; max-width:100%; height:auto;">
</div>
Center a single image (click opens large version in a new tab)
<div style="width:100%; display:flex; justify-content:center;">
<a href="REPLACE_WITH_LARGE_IMAGE_URL" target="_blank" rel="noopener">
<img src="REPLACE_WITH_IMAGE_URL"
alt="Image"
style="display:block; max-width:100%; height:auto;">
</a>
</div>
If you don’t want it to open on click, use the first snippet (no <a> tag).
Optional polish (use what you need)
Rounded corners + soft shadow
<img src="REPLACE_WITH_IMAGE_URL"
alt="Image"
style="display:block; max-width:100%; height:auto; border-radius:12px; box-shadow:0 2px 12px rgba(0,0,0,.12);">
Two images side-by-side, centered
<div style="display:flex; justify-content:center; gap:16px; flex-wrap:wrap;">
<img src="URL_1" alt="Image 1" style="max-width:100%; height:auto; border-radius:12px;">
<img src="URL_2" alt="Image 2" style="max-width:100%; height:auto; border-radius:12px;">
</div>
Optional caption
<p style="text-align:center; font-size:14px; margin-top:8px;">
Short caption here
</p>
Quick troubleshooting
- Still not centered? Keep the outer wrapper as
width:100%; display:flex; justify-content:center;and the image asdisplay:block; max-width:100%. - Click opens a new tab and you don’t want that? Remove the
<a>wrapper and use the non-clickable snippet.
Results should look something like this:
For more advanced tips and tricks, apply to join Pickaxe Prospectors Academy (launching September 22nd)! - Now Open for Early Access!
If you want more copy-paste Studio recipes, Make.com flows, and real examples that ship fast, join Pickaxe Prospectors Academy.
Join here: