How can I add a label to a link or block in Webflow? Is it possible to place a text block or heading in front of an image inside a block?
TL;DR
- Wrap the link or block in a div, add a Text Block or Heading inside, and style it as a label.
- To overlay text on an image, set a Div Block to relative, place the Image and Text Block inside, then set the Text Block to absolute and adjust positioning.
You can add a label to a link or block in Webflow by placing a Text Block or Heading inside the same parent container. If you're trying to position text over an image inside a block, you need to use absolute positioning.
1. Add a Label to a Link or Block
- Wrap the link or block inside a div for better control.
- Add a Text Block or Heading inside the div.
- Style the text to visually act as a label (e.g., adjust margin or padding for positioning).
2. Place Text Over an Image in a Block
- Add a Div Block and set its
positionto relative. - Place both the Image and Text Block inside the Div (image first, then label).
- Set the Text Block’s position to absolute so it overlays the image.
- Adjust positioning (e.g.,
top: 50%,left: 50%, andtransform: translate(-50%, -50%)to center).
Summary
To add a label, simply place a Text Block inside the Link Block or Div Block. For text over an image, use absolute positioning within a relative parent container.