Streaming live at 10am (PST)

Replicate a very smart element from another website


#1

Hi all - under the hero section ofthis website http://www.fordbrook.com/ is a very smart box which links to their case-studies of the site. I am struggling to replicate this design in Webflow, can anyone help?

Thank you


Here is my public share link: LINK
(how to access public share link)


#2

Hi @Roxzfr, your public link doesn't seem to be working.

What part are you struggling with? Is it the rollover interaction or the actual layout. Are you trying to get one column over two columns?

Jeff


#3

https://preview.webflow.com/preview/creative-d8cfff?preview=ad88e49aa06e64889308c61dbe2e53c2

Hi Jeff,

The layout more than anything. I've added the link to the site I am designing above (the images etc are all place holders to give me something to work with. This is the first time I have needed to produce something like this in Webflow so I would appreciate any help. Yes I used two rows one on top of the other as I intend to have text on the right. Do you think there is a more elegant solution?


#4

Hi @JFly - I forgot to tag you in my reply.


#5

Hi @Roxzfr

I see what you are doing here. You have an image inside a div, but you want to actually make the image the background of a div and then overlay a color tinted "link block" (div) over that with the text inside that Wedding Div.

I'm not explaining it very well... I can post more detailed instructions with images later today when I have more time after work.

JFly


#6

Hi @Roxzfr,

Here is video, how I would re-create this type of design:

Regards,
Anna


#7

Thanks @jeff - now you have said it all of a sudden it is completely obvious! trust me to over-complicate it. Thank you so much @sabanna for the video - very helpful. :smile:


#8

@sabanna beat me to it! Thanks Anna!

@Roxzfr Let us know if you need any more help.

JFly


#9

Good morning @sabanna I really thought I had followed the steps to the letter; however, my image doesn't fill the row and Webflow tells me I can't copy the link block to the row underneath wedding. I am so sorry tio be a pain, but could you take a look and let me know what I have done wrong please? https://preview.webflow.com/preview/creative-d8cfff?preview=ad88e49aa06e64889308c61dbe2e53c2

Thank you so much


#10

Good Morning @Roxzfr

It seems that you need to explicitly set the padding on the column div to "0" on the left and right. Even though it looks like it is already set to 0, click on each left and right padding value for Showcase Row 1 and make it 0. (See padding Image)

As for the second part of that, I was able to copy the and paste the "Swowcase Wed Link" and paste it below the other. Just be sure that you have the ourter div "Showcase Row 1" selected when you do. You could also just create another row div and give it two colums, then add your link blocks to each.

Hope that helps you. Keep us posted!

JFly


#11

Thanks @JFly, All sorted :smile: have a great weekend.


#12

Glad to see you figured it out, guys :slightly_smiling:


#13

Hey @Roxzfr

FYI - I just noticed that your background images are repeating within the div at smaller tablet and mobile sizes. Unless this is intended be sure to check your background image settings and . See image


#14

Thanks @JFly. It isn't intend so hank you for the heads up. I try to get the desk-top right before I worry about anything else! :smile:


#15

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.