Multiply Links On top of a image

Design help General
#1

Hey Guys,
I am currently designing a simple home page, I’m very new to WebFlow, I want to make clickable links on top of the banner where it says “User Manual” or “Play Demo Video”, I tired using link blocks but when I view the website the alignment is messed up, whats the best way to do this?

Thanks
Joe

https://preview.webflow.com/preview/esm-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=esm-landing-page&preview=a989b47d2725ec78677600bc5eca460f&mode=preview

#2

Hi,

Welcome to Webflow! I checked out your site, and I can see what you’re trying to achieve. At the moment the text is in the image, which is not ideal. It would be better if you could have the image as the background and then the text on top of the image in Webflow. However, you could do the following:

  1. Set the <section> element that contains the image to position:relative.
  2. Drag a new <div> into the aforementioned <section> element.
  3. Add the following attributes to the DIV:
    54
    Screenshot 2019-07-30 at 10.05.54.png472×714 26.8 KB
  4. Then add in the link block elements in that div.

That worked when I tried it, but isn’t ideal. I would recommend having the background image and then the text as actual text (this will also help with SEO).

#3

Hey JSW

Thanks for having a look at it, I will go with your recommendation, so I place the text blocks on top of the banner image, whats the best to do this, as when I try myself and then view the page the text block becomes unaligned

Thanks
Joe

#4

Hi,

The way I would do it is:

  1. Remove the image block.
  2. Go to the section block and set the min-height to 300.
  3. Set the background image of the section element to this (obviously you’ll have to use a different image that does not have text):
    26
    Screenshot 2019-07-30 at 10.14.26.png466×780 32.6 KB
  4. Add a div into the section
  5. Then change all of the padding of the section element to 20px.
  6. Add text and image blocks into the div.
#5

Hey JSW

I followed what you said but the banner is looking wrong, I might not have done it correctly, would you mind having a look?

Thanks#

edit: I got the banner working, stupid mistake didnt change to %, so do I just use padding in the div element to align with the icons?

1 Like
#6

Yes you could use padding to do that, that’s probably the best way to do it.

#7

Hey

I’m changing the padding on the div element and it looks fine in the editor

1
1.PNG1450×301 286 KB

But wen you view the web page the alignment is off.

2
2.PNG1555×286 262 KB

any ideas how I could tackle this?

Thanks

#8

Ideally, you would have no text on the background image. But you could fix this by using a % padding rather than a px?

#9

Hey JSW
I am still having the same alignment issue when I view the live website, it looks fine in the editor.
https://esm-landing-page.webflow.io/

#10

I think you might have to look at removing the text from the background image, because the image will scale differently than the text unfortunately.

#11

Im still having the issue, anyone with any ideas of what I can do?
https://preview.webflow.com/preview/esm-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=esm-landing-page&preview=971501cecc66a6c79c495208f2ff433e&mode=preview