Display / Formatting Help For A Custom Text Block Design

[Aidan_Sakarya]

Hi all -

New user here trying to get a better general grasp on Webflow’s display settings and formatting by rebuilding my design portfolio (originally designed in Adobe Illustrator, pics of that below.)

One of the design elements I’m having the most difficulty with are the little gold “tags” I use frequently throughout my portfolio as a sub-header (see “ECHO PARK, CA” and “PROJECT OUTLINE”). Having a version that scales horizontally to encompass a Text Block (or similar editable title) would be really helpful, but between that and getting said Text Block to center vertically along the top of a Div Block with a 1 px border containing the page content, I haven’t had a ton of luck.

Any advice on which Display settings / general features would be best suited to recreate this design detail in the smartest way? Thanks in advance!

Read-Only Link (has both my original layout updated as .jpgs and my Webflow re-build trying to mimic it):

https://preview.webflow.com/preview/aidans-amazing-site-807a99?utm_medium=preview_link&utm_source=designer&utm_content=aidans-amazing-site-807a99&preview=71d95c6a8b4e511077ed8f85829db88d&workflow=preview

[joejola (Joseph Amato)]

Hey Aidan, welcome to the forums. You’re on the right track with this. Here’s how I would set it up:

1. Move the tag inside the portfolio div and set the div to relative positioning
   
2. Then set the tag to absolute position with these settings
   

To make the shape, you will likely need to use Clip Path. There’s a Webflow app you can use for that.

To match your illustrator designs, you will need to be creative and sometimes just use svgs and pngs. I don’t recommend jpg.

[Aidan_Sakarya]

Amazing, those settings work perfectly! Thanks for that thorough walkthrough with screenshots, and the app rec for Clip Path. I’ll dig into that next -

Thanks again Joseph