Streaming live at 10am (PST)

Help creating a home page with a skewed div effect


#1

Not too sure whether this goes into design help or code help, but here goes.
I’m following a design I created which involves a skewed div (or a webkit split, but I’ve seen webflow users use the transform tool over using own code) and I have an unordered list of items which is my homepage navigation, that has its own background images.

How can I go about creating this, in the best way possible? The page that I have created here has a lot of absolute and relative positioning which is triggering me greatly.

https://preview.webflow.com/preview/nicole-ramsays-fantastic-project?preview=b7657faa74cad6d7531f4ad26e211b34

I also have the issue where, because of the skewed div being positioned my next section is underneath all of this mess.

I am also wondering if there is a container fluid option just so I can add the title on the bottom right into a column so that I don’t have to reposition it for mobile as much.

I know it’s a bit of a mess, any help is appreciated.


Here is my site Read-Only: LINK
(how to share your site Read-Only link)


#2

Are you wanting this to be a landing page with 100vh and doesn’t scroll?


#3

I deally I would want it to scroll, yeah. If that’s too difficult to manage, what are you thinking in terms of making it a landing page?


#4

Yeah… hmm… I’m sitting here thinking about a user perspective. Looking at it from a navigation angle, when users get a ‘tiled link’ setup, the thought is:

They expect to leave that page towards their needs to get info regarding a relationship with you and your company. Honestly I would remove the page peel! I’m confident your bounce rate will be fairly high. Clients will not take you seriously.

However, I do like the “Tiled Menu” setup as a landing page, but I would use interactions to show lead-in information. Then give them a link to commit and go to sub-pages, add a breadcrumb to return to tiles. It would be a nice minimal structure (vh height). Users will appreciate the concise screen viewport layout combined with easy breadcrumb back links. (Very effective for responsiveness on other devices too!)

Here are some super cool examples of this type of design. These tiled examples can show how wonderful and dynamic a landing page can be:


https://www.bukwild.com/

  1. Then you can add smooth hover effects for each section. When hover over, that section can enlarge and slide over all others. This will show a title, smalll description, maybe bullet points, a small testimonial to relate to that demographic.

  2. Then offer a button or “Read More/View Case Study/Use For Your Project”. This would open to a separate page with your total sales content. And of course, add breadcrumb on these pages back to tiled landing.

Hope this helps ya in the design process, just offering suggestions. If you need help, I’ll be glad to assist in layout navigation. And no I’m not offering to get paid, I work pro-bono. Ha, just like helping people.


#5

Funnily enough, I ditched this style right after my previous reply and was looking at this exact same thing! You’ve definitely given me some good pointers here and I was inspired by the webflow sites that incorporate the horizontal tile menu. Thank you for this and I’ll keep you posted if I get anywhere further with this. :slight_smile:


#6

Oh oh good… because after I pressed reply… I thought uh oh I probably crossed the line with too much info… glad I could be of help… if you need anything I’m always available to share!

Have a great week!


#7

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